デザインの4原則 03 支える基礎(余白・文字・配色・視線)
更新日:
4原則を実際に効かせるための基礎知識。
余白(ホワイトスペース)
- 余白は「空いている場所」ではなく情報を整理する道具(近接の主役)
- 役割: 要素の整理、視線の動線づくり、特定要素の印象付け(周りを空けるほど目立つ)
- 詰め込みたくなったら、情報を減らすか、ページを分ける
タイポグラフィ(文字)
| 項目 | 目安 |
|---|---|
| 書体 | 本文はゴシック体(Noto Sans JP、システムフォント)。明朝体は雰囲気重視の見出しに |
| 本文サイズ | 16px 以上(スマホ) |
| 行間 | 日本語は 1.6〜1.8(leading-relaxed) |
| 1行の長さ | 35〜40文字程度(max-w-prose など) |
| 見出しの段階 | 3〜4段階で十分(多いと対比がぼやける) |
| 太さ | 400(本文)/ 600〜700(見出し・強調) |
- カーニング: 文字間の調整。見出しなど大きい文字で効く(
tracking-tight) - フォントと書体: 書体=明朝・ゴシックなどの分類、フォント=具体的な文字データ一式
- フォント数は2種類まで(ブランド用+本文用)
配色
- 色は感情に影響する(青=信頼、赤=緊急・注意、緑=成功・安心)
- 基本の比率 70:25:5(ベース:メイン:アクセント)。アクセント(主要ボタン)は少ないほど効く
- 状態色は意味を固定(赤=エラー)し、色だけに頼らない
- コントラスト比: 本文 4.5:1 以上(WCAG AA)
- 検証テクニック: 画面をグレースケールにして読めるか確認(UXデザイン_03_わかりやすさと新鮮さ(Splatoonの事例))、目を細めて見て「一番目立つもの」が意図通りか確認
- 色は トークン で管理
視覚的階層と視線
- 人は重要そうなもの(大きい・太い・色が強い・周りが空いている)から見る
- 視線のパターン: 文字中心のページは F型(左上→右→下へ)、ビジュアル中心は Z型
- 一番伝えたいものを左上〜上部中央、または視線の終点(主要ボタン)に
- 「3秒で何のページか分かるか」を確認
ゲシュタルトの法則(4原則の背景にある心理)
| 法則 | 意味 | 対応する原則 |
|---|---|---|
| 近接 | 近いものは同じグループに見える | 近接 |
| 類同 | 似た見た目のものは同じ種類に見える | 反復 |
| 連続 | 線上に並んだものは繋がって見える | 整列 |
| 閉合 | 囲まれたものはまとまって見える | カード・枠 |
| 図と地 | 目立つもの(図)と背景(地)を区別する | 対比 |
アクセシビリティ(4原則と両立させる)
- 色だけで情報を伝えない、コントラスト比を守る
- フォーカスが見える(キーボード操作)
- 文字サイズを拡大しても崩れない
- 画像に alt