前回に引き続いて、「アプリ UI デザイン」とGoogle検索して出てきた「１．デザイン上の心構え」についてまとめてみたいと思います。
「UIデザインの学習開始」で「シンプル」「近接」「整列」「コントラスト」「反復」「タイポグラフィ」「グラデーション」「アフォーダンス」「メタファー」を挙げましたが、重なる部分も多く出てきました。
ざっくりとですが、下記のように共通要素を括り出して、Google検索で出てきた内容を構造化してみました。
１．シンプル（＝情報は出来る限り少なく）
１－１．よく使う操作には直ぐにたどり着けるようにする
１－２．一定以上の長さにならない限り、ページを分割しない
１－３．何を示しているか分からないアイコンは使わない
１－４．複雑な操作方法を一気に説明しない
１－５．操作方法を覚えて貰おうとしない
１－６．素早く目的の情報にたどり着けるようにする
１－７．不要なものを出来る限り排除
１－８．メニュー項目の数は少なくする
１－９．多数の色は使わない
１－１０．使用するフォント数を少なくする
１－１１．線を使わずに空白を使って要素を分ける
２．近接
２－１．関連性の高い要素は近づける
２－２．関連性の低い要素は話す
２－３．タップにより要素を表示する場合は近くに表示する
３．余白
３－１．ボタンの周りには十分なスペースを空ける
３－２．十分に余白を取る
３－３．行を詰め過ぎない
４．整列
４－１．要素の端を揃えて並べる
４－２．画像の縦横比を崩さない
５．反復
５－１．同じ形のレイアウトを繰り返す
５－２．サイト内へのリンクを広告バナーのようなデザインにしない
５－３．色を同じパターンで使う
６．配置
６－１．視線の流れ（導線）を考慮する
６－２．「戻る」ボタンは左上に配置する
６－３．よく使うボタンは押しやすい位置に置く（アプリは右下）
６－４．追尾コンテンツは目立たないようにする
７．軽く
７－１．いきなり動画を再生しない
７－２．長々と派手なアニメーションを使わない
７－３．画像は出来る限り軽くする
７－４．画像を圧縮する
８．状態表示
８－１．スクロールできることを明確に示す
８－２．操作後は元の状態に戻せるようにする
８－３．時間がかかる操作がある場合は進行状況を%で表現する
８－４．文字制限がある時にはリアルタイムで現在の文字数を表示
８－５．アイコンを線と塗りで状態変化を表現する
９．テキスト（記号）
９－１．結論を初めに書く
９－２．グローバルに使われるUIの場合、アイコンや視覚的な表現を多用する
９－３．画像＞箇条書き＞文章
９－４．重要な情報を強調する（大きく／太く）
９－５．フォントはなるべく大きくする（アプリで特に）
９－６．見出しを活用する
９－７．半透明の黒を有効に活用する
９－８．多くの人に馴染みのあるフォントを使う
９－９．明朝体とゴシック体を一緒に使わない
９－１０．集中して読んでもらいたいテキストに派手な背景色を大きく使わない
１０．濃淡（コントラスト）
１０－１．押すことができる部分のデザインははっきりと区別する
１０－２．背景色とのコントラストをしっかりとつける
１０－３．集中して読んでもらいたいコンテンツの背景色は白にする
１０－４．強調するポイントは周りとはっきり差をつける
これで、ざっくりとテキストベースには理解が出来ましたので、次に「２．イケてる（流行りの）実例まとめ」を調べて、イケてるアプリUIデザインを具体的にベンチマークしていこうと思います。
