design-principles

デザイン原則

視覚認知とコミュニケーションを支配する基本法則です。これらの原則は意見ではなく、人間の視覚と認知の働きに関する観察結果です。

このスキルを使う場面

• ビジュアルデザインの判断を行うとき
• デザインが「機能している」かどうかを評価するとき
• 何かに違和感を覚える理由を説明するとき
• デザインの基礎を教えるとき
• デザインの問題をデバッグするとき

基本原則

1. 視覚的階層

法則：すべての要素が同じ重要度ではありません。デザインは視線を導く必要があります。

階層の確立方法：

ツール	効果	例
サイズ	大きいほど重要	ヒーローの見出しと本文
太さ	太いほど重要	太字の見出しと細字の本文
色	彩度やコントラストが高いほど注目される	プライマリーCTAとセカンダリーCTA
位置	（LTRでは）左上が最初に見られる	ロゴの配置
余白	余白が多いほど重要	CTAの周囲に十分なパディングを設ける
奥行き	影や高さが目立ちやすさを高める	フローティングアクションボタン

階層のテスト： デザインを50％ぼかします。それでも次のものを識別できますか？

• 主な焦点
• 二次的な情報
• 実行すべきアクション

2. ゲシュタルト原則

法則：脳は視覚要素を意味のあるグループとして整理します。

近接

近くにある要素は、関連していると認識されます。

Good:  [Label]          [Label]
       [Input]          [Input]
       (8px gap)        (8px gap)

       (32px gap between groups)

       [Label]          [Label]
       [Input]          [Input]

Bad:   [Label]  [Label]  [Label]  [Label]
       [Input]  [Input]  [Input]  [Input]
       (equal spacing destroys grouping)

Tailwindでの例：

• 関連する項目：space-y-2（8px）
• 関連のないグループ：space-y-8（32px）またはdivide-y

類同

見た目が似ている要素は、グループとして認識されます。

複数の種類のカードがある場合は、カテゴリごとに視覚的な違いを設けます。

• 同じカテゴリ：同じ角丸、シャドウ、パディング
• 異なるカテゴリ：色、アイコンのスタイル、またはレイアウトを変える

連続

視線は滑らかな経路をたどります。

ナビゲーションへの適用：

[Home] → [Products] → [About] → [Contact]
         ↓
    [Category A]
    [Category B]
    [Category C]

線を実際に表示する必要はありません。暗示された線でも機能します。

閉合

心は不完全な形を補完します。

次のような場面で役立ちます：

• ロゴデザイン（WWFのパンダ）
• アイコンデザイン（暗示された形）
• 画面端からはみ出すカード（コンテンツがさらにあることを示す）

図と地

対象と背景を明確に分離します。

代表例：FedExのロゴで、Eとxの間のネガティブスペースにある矢印です。

よくある失敗：

• 情報量の多い画像背景の上にテキストを置く
• レイヤー間のコントラストが低い
• クリックできる要素と静的な要素の区別が不明瞭

3. 三分割法

法則：被写体を三分割の交点に配置すると、自然なバランスが生まれます。

+-------+-------+-------+
|       |       |       |
|   ●   |       |       |  ← Focal point at intersection
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+

Webレイアウトでの適用：

• ヒーローのテキストを左揃えにし、左側の三分割線に合わせる
• 重要なビジュアルを交点に配置する
• 残りの三分割領域をホワイトスペースで埋める

4. 黄金比（1:1.618）

法則：芸術や建築で繰り返し現れる比率です。生得的な好みを示す根拠は弱く、見解も分かれているため、ほかの有用な比率（1.25、1.333、1.5）と並ぶ選択肢の1つとして扱ってください。

適用例：

• コンテンツ幅とサイドバー：1:1.618
• 見出しと本文のサイズ：1.618:1
• 余白の倍率：16px → 26px → 42px

Tailwindでの近似：

Base unit: 16px (text-base)
Medium:    24px (text-2xl ≈ 16 × 1.5)
Large:     36px (text-4xl = 2.25rem ≈ 16 × 2.25)

5. 視覚的バランス

法則：構成は安定して感じられるべきであり、傾いているように感じさせてはいけません。

対称バランス

• 両側の重みが等しい
• フォーマルで安定感があり、伝統的
• 使用例：企業向け、高級感、権威性のあるデザイン

非対称バランス

• 視覚的な重みによって、異なる要素のバランスを取る
• ダイナミックで興味を引き、モダン
• 使用例：クリエイティブ、スタートアップ、エディトリアル

視覚的な重さに影響する要素：

要素	重さを加える要因
サイズ	大きいほど重い
色	暗く、彩度が高いほど重い
複雑さ	詳細なほど重い
位置	フレーム内の高い位置ほど重い（Arnheim）
独立性	単独であるほど重い

6. 整列

法則：明示的な線が引かれていなくても、要素同士の視覚的な線を揃える必要があります。

強い整列：

[Logo]
_________________________
[Navigation links          ]
_________________________

[Headline              ]
[Subhead               ]
[CTA Button]

(Everything shares left edge)

弱い整列：

    [Logo]
[Navigation links]
    [Headline]
   [Subhead   ]
    [CTA Button]

(No consistent edge)

7. 反復

法則：一貫したパターンは、統一感と学びやすさを生み出します。

一貫性を保つ要素：

• 角丸（すべてのカードで統一）
• シャドウのレベル（重要度が同じものは同じ深さにする）
• 余白の単位（4px または 8px の倍数）
• 色の適用（プライマリカラーは常にアクションを意味する）
• タイポグラフィの階層（h2 は常に h2 のように見せる）

8. コントラスト

法則：違いが興味を生み、注意を導きます。

コントラストの種類：

• サイズのコントラスト：大きな見出し、小さなキャプション
• 色のコントラスト：明るい背景に暗い色、暖色系のアクセント
• ウェイトのコントラスト：太字の見出し、標準の本文
• スタイルのコントラスト：セリフ体の見出し、サンセリフ体の本文
• 余白のコントラスト：密集したグループ、広い間隔

コントラストの最小要件：

• 本文テキスト：コントラスト比 4.5:1（WCAG AA）
• 大きなテキスト（通常の太さで 24px 以上、または太字で約 18.66px 以上）：コントラスト比 3:1
• UI コンポーネント：コントラスト比 3:1

9. ホワイトスペース（ネガティブスペース）

法則：何も置かない空間も、要素を配置する空間と同じくらい重要です。

ホワイトスペースの役割：

1. ゆとり：認知的な過負荷を防ぎます
2. グルーピング：異なるコンテンツ領域を分けます
3. 強調：独立した要素は注意を引きます
4. 高級感の演出：ゆとりある空間は上質さを感じさせます

よくある失敗：

• 「もっと詰め込む」ために要素を押し込む
• どこも同じ間隔にする（単調になります）
• 空白を恐れる

Tailwind の余白ガイド：

Tight (related):     gap-2 (8px)
Standard (siblings): gap-4 (16px)
Section (groups):    gap-8 (32px) or py-12
Page (major):        gap-16 (64px) or py-24

10. 統一感

法則：すべての要素に一体感があるようにします。

統一感を実現する方法：

• 一貫したカラーパレット
• 統一されたタイポグラフィシステム
• 繰り返し使われるパターンとコンポーネント
• 整列したグリッド
• 調和の取れたプロポーション

統一感のテスト： 任意の要素を別の場所に置いてみてください。そこに自然になじみますか？なじまない場合は、システムに統一感がありません。

クイックリファレンス：原則の適用

問題	原則	解決策
「ごちゃごちゃしている」	ホワイトスペース	パディングやマージンを増やす
「どこを見ればよいかわからない」	階層	明確な焦点を設ける
「まとまりがない」	統一感／反復	一貫したパターンを適用する
「退屈に感じる」	コントラスト	サイズ、色、ウェイトに変化を加える
「配置が不規則に見える」	整列	共通のエッジを作る
「グループ分けがわかりにくい」	近接／類似	関連する要素をまとめる
「バランスが悪く感じる」	バランス	視覚的な重みを再配分する

リソース

上記の概要よりも詳しく検討する必要がある場合は、該当するファイルをお読みください。

• references/gestalt-principles.md：知覚的なグルーピングの詳細
• references/visual-hierarchy.md：階層化の包括的なテクニック
• references/color-theory.md：色の心理と応用
• references/typography-fundamentals.md：デザイン要素としての書体
• references/composition-rules.md：レイアウトと配置
• assets/principles-checklist.md：評価チェックリスト