Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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/

Kenya
ゆるく書いてます。 論理よりも感情に従ってプログラムを書くアレです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした