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

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

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. 以上