Slide 1
Slide 1 text
エンジニア的
アプリデザイン
思考法
Kyoto.LT 第20回
株式会社ノハナ 瀬戸優之
@seto_hi
Slide 2
Slide 2 text
自己紹介
● 瀬戸優之 Seto HiroYUKI @seto_hi
● Androidエンジニア & アプリデザイン
● 株式会社ノハナ
○ 一組でも多くの家族に笑顔を届ける
○ 絶賛採用中(東京勤務)
● Material Design大好き
● 好きなAPIはCanvas#saveとViewGroup#layout
Slide 3
Slide 3 text
エンジニア的
アプリデザイン
思考法
Slide 4
Slide 4 text
最低限の、
外れでない
アプリデザインの
思考法
Slide 5
Slide 5 text
前準備
アプリの構成を考える
Slide 6
Slide 6 text
アプリの構成
● (ここはあまりエンジニア的でない)
● アプリでやりたいことを書き出す
● やりたいこと毎に画面を作る
○ 各画面でやりたいことは1つだけ
○ 次以降のステップでそれを実現する画面を作る
● 破綻するようなら使いやすい方に振っていく
Slide 7
Slide 7 text
レベル 1
パターンマッチング
Slide 8
Slide 8 text
パターンマッチング
● 初手
● 初心者もやりやすい
● 「やりたいこと」が近いデザインを参考にする
● 間違っていることもあるが、初手としては十分
○ 後で変えていけばいい
Slide 9
Slide 9 text
参考データ
● 素のAndroidの設定画面
○ 新しいOSが正
● Googleのアプリ
○ たまに奇抜
● Material Designのガイドライン
○ シンプルなので色づけしやすい
● 各社のアプリはほどほどに
○ 各社なりの思考や事情があるため
Slide 10
Slide 10 text
レベル 2
ガイドラインから
コンポーネントを持ってくる
Slide 11
Slide 11 text
ガイドライン
● 「やりたいこと」に合いそうな
Viewコンポーネントを探す
○ ガイドライン総当たり探索
● ガイドラインの説明を読み、
本当に合っているを確認する
Slide 12
Slide 12 text
レベル 2.5
自分でコンポーネントを作る
Slide 13
Slide 13 text
レベル 3
ルール化
Slide 14
Slide 14 text
ルール化
● ガイドラインの情報整理ができている段階
● 自分なりのルールを作る
○ ex: 一番重要なものはFAB
○ ex: メニューがN個以上なら隠す
● ルールに従ってUIを作っていく
Slide 15
Slide 15 text
レベル 4
フローチャート化
Slide 16
Slide 16 text
フローチャート化
● ルールを発展させ、フローチャートを作る
○ 秘伝のタレ
● 超高速にUIが作れるようになる
● 同じ操作感の画面が増えるとユーザー負荷も減る
Slide 17
Slide 17 text
もう一歩
使いやすくする
Slide 18
Slide 18 text
1. 要素を絞る
Slide 19
Slide 19 text
要素を絞る
● やりたいことを詰め込むと機能が増えがち
● 要素が多いとユーザーが迷子になる
● 必要なものだけ表示する
● そこまで必要でないものの扱い
○ デフォルトを変えることで不要になる？
○ 隠す
■ ActionMenu, BottomSheet
■ ×操作手順が増える
○ 要素を消す際はデータを見て慎重に！
Slide 20
Slide 20 text
2. 強弱をつける
Slide 21
Slide 21 text
強弱をつける
● 色
● 重要なものはAccentColorにする
○ Primary : Base : Accent = 2 : 7 : 1
○ AccentColorは各画面で1つくらいで十分
● コントラストをしっかりと取る
○ ガイドラインに従う
Slide 22
Slide 22 text
強弱をつける
● 大きさ
● 重要なものは大きく
重要でないものは小さく
○ ジャンプ率を意識
● ガイドラインに従う
Slide 23
Slide 23 text
「重要なこと」
Slide 24
Slide 24 text
重要なこと
● 開発側が重要だと思うこと
● ユーザーがやりたいこと
● ユーザーの行動はねじ曲げられない
○ 不評を買うだけ
○ ユーザーの思考までねじ曲げてはいけない
● ユーザーのやりたいことで
メインの動線を作る
Slide 25
Slide 25 text
やらない方がいいこと
Slide 26
Slide 26 text
やらない方がいいこと
● 説明やチュートリアルを大量につける
○ 要素が多すぎて逆にユーザーが迷子になる
○ すべてに説明がアプリは僅か
○ 画面の流れや構成が間違っている？
● 過度な自動化
○ 自己帰属感がない自動化はしない
○ 勝手に進むと理解ができない
■ 「何もしてないのにバグる」
○ ユーザーが何も学べない
Slide 27
Slide 27 text
更によくするために
Slide 28
Slide 28 text
更によくするために
● 良いUIに触れる
○ 何が良いUIかを知る
○ 知らない知識は出てこない
● エモいUIを目指す
○ 芸術方面に手を出してみる
○ 気持ちの動かし方を知る
■ GooglePlay→多彩な色でわくわく感
■ Gmail→シンプルな色でタスクに集中
Slide 29
Slide 29 text
更によくするために
● アプリ全体を俯瞰してバランス調節
○ 色合い、UI、アニメーション
○ 1画面で最適化しないほうがよいこともある
● 触る、触る、触る、触る、触る、触る、触る、触る...
○ 開発者が気になるところはユーザーも気になる
○ 微調整してすぐ試せるのはエンジニアの特権
○ 理論よりも使い勝手
■ 使い勝手の裏にある理論を学ぶ
Slide 30
Slide 30 text
以上