Save 37% off PRO during our Black Friday Sale! »

エンジニア的アプリデザイン思考法

 エンジニア的アプリデザイン思考法

2018/4/20
Kyoto.LT 第20回 「エンジニアによるデザイン」

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

April 20, 2018
Tweet

Transcript

  1. エンジニア的 アプリデザイン 思考法 Kyoto.LT 第20回 株式会社ノハナ 瀬戸優之 @seto_hi

  2. 自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア & アプリデザイン

    • 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける ◦ 絶賛採用中(東京勤務) • Material Design大好き • 好きなAPIはCanvas#saveとViewGroup#layout
  3. エンジニア的 アプリデザイン 思考法

  4. 最低限の、 外れでない アプリデザインの 思考法

  5. 前準備 アプリの構成を考える

  6. アプリの構成 • (ここはあまりエンジニア的でない) • アプリでやりたいことを書き出す • やりたいこと毎に画面を作る ◦ 各画面でやりたいことは1つだけ ◦

    次以降のステップでそれを実現する画面を作る • 破綻するようなら使いやすい方に振っていく
  7. レベル 1 パターンマッチング

  8. パターンマッチング • 初手 • 初心者もやりやすい • 「やりたいこと」が近いデザインを参考にする • 間違っていることもあるが、初手としては十分 ◦

    後で変えていけばいい
  9. 参考データ • 素のAndroidの設定画面 ◦ 新しいOSが正 • Googleのアプリ ◦ たまに奇抜 •

    Material Designのガイドライン ◦ シンプルなので色づけしやすい • 各社のアプリはほどほどに ◦ 各社なりの思考や事情があるため
  10. レベル 2 ガイドラインから コンポーネントを持ってくる

  11. ガイドライン • 「やりたいこと」に合いそうな Viewコンポーネントを探す ◦ ガイドライン総当たり探索 • ガイドラインの説明を読み、 本当に合っているを確認する

  12. レベル 2.5 自分でコンポーネントを作る

  13. レベル 3 ルール化

  14. ルール化 • ガイドラインの情報整理ができている段階 • 自分なりのルールを作る ◦ ex: 一番重要なものはFAB ◦ ex:

    メニューがN個以上なら隠す • ルールに従ってUIを作っていく
  15. レベル 4 フローチャート化

  16. フローチャート化 • ルールを発展させ、フローチャートを作る ◦ 秘伝のタレ • 超高速にUIが作れるようになる • 同じ操作感の画面が増えるとユーザー負荷も減る

  17. もう一歩 使いやすくする

  18. 1. 要素を絞る

  19. 要素を絞る • やりたいことを詰め込むと機能が増えがち • 要素が多いとユーザーが迷子になる • 必要なものだけ表示する • そこまで必要でないものの扱い ◦

    デフォルトを変えることで不要になる? ◦ 隠す ▪ ActionMenu, BottomSheet ▪ ×操作手順が増える ◦ 要素を消す際はデータを見て慎重に!
  20. 2. 強弱をつける

  21. 強弱をつける • 色 • 重要なものはAccentColorにする ◦ Primary : Base :

    Accent = 2 : 7 : 1 ◦ AccentColorは各画面で1つくらいで十分 • コントラストをしっかりと取る ◦ ガイドラインに従う
  22. 強弱をつける • 大きさ • 重要なものは大きく 重要でないものは小さく ◦ ジャンプ率を意識 • ガイドラインに従う

  23. 「重要なこと」

  24. 重要なこと •  開発側が重要だと思うこと •  ユーザーがやりたいこと • ユーザーの行動はねじ曲げられない ◦ 不評を買うだけ ◦

    ユーザーの思考までねじ曲げてはいけない • ユーザーのやりたいことで メインの動線を作る
  25. やらない方がいいこと

  26. やらない方がいいこと • 説明やチュートリアルを大量につける ◦ 要素が多すぎて逆にユーザーが迷子になる ◦ すべてに説明がアプリは僅か ◦ 画面の流れや構成が間違っている? •

    過度な自動化 ◦ 自己帰属感がない自動化はしない ◦ 勝手に進むと理解ができない ▪ 「何もしてないのにバグる」 ◦ ユーザーが何も学べない
  27. 更によくするために

  28. 更によくするために • 良いUIに触れる ◦ 何が良いUIかを知る ◦ 知らない知識は出てこない • エモいUIを目指す ◦

    芸術方面に手を出してみる ◦ 気持ちの動かし方を知る ▪ GooglePlay→多彩な色でわくわく感 ▪ Gmail→シンプルな色でタスクに集中
  29. 更によくするために • アプリ全体を俯瞰してバランス調節 ◦ 色合い、UI、アニメーション ◦ 1画面で最適化しないほうがよいこともある • 触る、触る、触る、触る、触る、触る、触る、触る... ◦

    開発者が気になるところはユーザーも気になる ◦ 微調整してすぐ試せるのはエンジニアの特権 ◦ 理論よりも使い勝手 ▪ 使い勝手の裏にある理論を学ぶ
  30. 以上