1. 文字
1-1フォントサイズ
最小
欧文: 12px、和文: 13px
本文
14px〜15px
見出しなど
タイトル: 21px
サブタイトル: 17px
キャプション: 13px
ボタン: 15px
13px→15px→17px→21px→24px→34px→45px→56px→112pxの流れ
1-2. 文字色
白背景の場合
基本は #212121
キャプションのみ #757575
黒背景の場合
基本は #ffffff
キャプションのみ #b3b3b3
比率
文字色と背景色の輝度を「4.5:1」以上の比にする
1-3. 行長
欧文
本文: 60字以内
見出し: 40文字以内
和文
本文: 32字以内
見出し: 24文字以内
1-4. 字間
文字が小さいほど字送りは広く、大きいほど狭くさせ、相対的に変化させる。
大きな文字は狭く(-5~-10)、小さい文字は広く(+5~+10)
1-5. 書体
書体の種類、ウエイトはできるだけ少なく。
できれば 1種類 で統一する
2. ボタン
2-1. サイズ
タッチ領域は縦48px×横48px
基準は縦58px×横58px以上
2-2. 形
一般的な形状で、種類は3つ以内にする
フラット(文字のみ)
ライズド(長方形)
フローティングアクション(円形)
2-3. 装飾
最低限の装飾に留める。
立体表現やグラデーションなどの使いすぎには注意。
2-4. マージン
ボタン同士は16px以上の間隔をあける
2-5. ラベル
シンプルな動詞を使う
2-6. 配置
目的を達成するボタン(「確認」や「実行」)を右側
行動を取り消すボタン(「キャンセル」「クリア」など)を左側に置くのが基本
3. 配色
3-1. 原則
色を多用せず、基本色は 2色 以内におさめる。
プライマリカラーとセカンダリカラーの2色を選び、さらにその各色から3色相を選ぶ。
3-2. コントラスト
前景色と背景色の輝度を「4.5:1」以上にする
4. アイコン
4-1. 形
判別のできるシンプルなもの。
4-2. 色
色に意味がある場合を除いて、基本は単色にする。
4-3. サイズ
24 x 24 px~50 x 50 pxの間
5. その他
5-1. イメージ
「画像は飾りではなくツールである」
必然性のある自然で具体的な画像のみ
5-2. レイアウト
左上が起点。グルーピングと階層化を活用。
8で割り切れる数字でのグリッドを意識。
まとめ
デザインの知識乏しいし、とりあえずガイドラインに沿って進めるのが無難だという意識低めの精神です。
参考文献
Google Design
https://design.google.com/
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
http://www.slideshare.net/arasunatomoyuki/applegoogleweb-50201232?ref=http://baigie.me/sogitani/2015/07/apple-google-design-guideline/