LoginSignup
15
17

More than 5 years have passed since last update.

僕のためのデザインガイドライン

Last updated at Posted at 2016-03-10

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で割り切れる数字でのグリッドを意識。

まとめ

デザインの知識乏しいし、とりあえずガイドラインに沿って進めるのが無難だという意識低めの精神です。

参考文献

UI設計の基本事項
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html#//apple_ref/doc/uid/TP40006556-CH2-SW1

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/

15
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
17