デザインの4原則を深掘りする

デザインの4原則を深掘りする — 実例で理解する PARC

「デザインセンスがない」と感じている人の多くは、実はセンスの問題ではなく、判断基準を持っていないだけです。デザインの4原則（PARC）を習得すれば、デザインの良し悪しを論理的に判断し、意図的に改善できるようになります。

PARCとは以下の4原則の頭文字です:

• ◆Proximity（近接）
• ◆Alignment（整列）
• ◆Repetition（反復）
• ◆Contrast（コントラスト）

このレッスンでは各原則の理論だけでなく、実際のデザイン事例を使って「なぜこの配置が正解なのか」を解説します。また、4原則を組み合わせたBefore/After分析と、よくある違反パターンの修正方法も紹介します。

---

1. 近接の原則（Proximity）

理論: 関連するものは近くに置く

人間の脳は、近くにある要素を「グループ」として認識します。これをゲシュタルト心理学の「近接の法則」と呼びます。デザインでは、この心理を意図的に活用することで、情報の関係性を視覚的に伝えることができます。

原則のポイント:

• ◆関連する情報は近くに配置し、グループを作る
• ◆関係のない情報の間には十分な余白（ホワイトスペース）を設ける
• ◆グループ間の距離 > グループ内の距離、という関係を保つ

実例1: 名刺デザイン

名刺に「名前・役職・会社名・電話番号・メールアドレス・住所」という6つの情報があるとします。

❌ 悪い例: 6つの情報をすべて同じ間隔で並べると、何がどのグループかが分からなくなります。

✅ 良い例: 「名前+役職」「会社名」「連絡先（電話+メール+住所）」の3グループに分け、グループ内は密に、グループ間には余白を設けます。

実例2: Webページのカード設計

ECサイトの商品カードを考えてみましょう。商品画像・商品名・価格・レビュー星・カートボタンを1枚のカードに収める場合、近接の原則がなければ要素がバラバラに見えます。

プロのカード設計のルール:

1. ◆画像は上部全体を占める（商品を視覚的に伝える）
2. ◆商品名・価格・レビューは画像の直下にまとめる（商品情報グループ）
3. ◆カートボタンはカードの最下部に単独で配置する（アクショングループ）
4. ◆カード外のコンテンツとの間に十分な余白を確保する

実例3: フォームデザイン

入力フォームでラベルとインプットフィールドの距離が適切でないと、どのラベルがどのフィールドに対応するのか分からなくなります。

フォームの近接ルール:

• ◆ラベルとフィールドの間: 4〜8px
• ◆フィールドグループ（例: 姓+名）の間: 8〜16px
• ◆フォームセクション（個人情報/配送先など）の間: 32〜48px

近接の原則 Before/After

---

2. 整列の原則（Alignment）

理論: すべての要素を目に見えない線に揃える

整列とは、ページ上のすべての要素が何らかの「目に見えない線」に揃っていることです。完璧に整列されたデザインは「すっきりしている」「プロっぽい」と感じさせます。逆に整列が乱れたデザインは「雑然としている」という印象を与えます。

グリッドシステムの活用

現代のWebデザインでは、12カラムグリッドが標準的に使われています。

Figmaでは「Layout Grid」機能を使って12カラムグリッドを設定できます。「Shift + G」でグリッドを表示/非表示できます。

左揃え vs 中央揃え — 使い分けの判断基準

左揃えを使う場面:

• ◆本文テキスト全般（読みやすさ最優先）
• ◆リスト
• ◆フォームラベル
• ◆長い見出し

中央揃えを使う場面:

• ◆ヒーローセクションの短いキャッチコピー（最大2行まで）
• ◆カードのタイトル
• ◆モーダルダイアログのボタン
• ◆小さなコンポーネントの内部要素

右揃えを使う場面:

• ◆数値・金額（数字は右揃えが読みやすい）
• ◆テーブルの数値列
• ◆日付・時刻の表示

⚠️ 中央揃えのテキストは短い文章では効果的ですが、3行以上になると読みにくくなります。長い本文は必ず左揃えにしてください。

整列の実例: ランディングページのヒーローセクション

❌ よくある失敗: キャッチコピーが中央揃え、説明文も中央揃え、ボタンが左寄り、というバラバラな整列。

✅ プロの設計: ヒーロー全体は中央揃え統一 OR 左揃え統一。混在させない。ボタンはテキストに揃える。

整列の実例: ナビゲーションバー

ナビゲーションでよく見られる失敗が「ロゴと高さが揃っていないメニュー項目」です。各要素の**ベースライン（文字の底辺）または中心線（垂直方向の中点）**を揃えることが重要です。

Figmaでの整列操作:

1. ◆揃えたい要素を複数選択
2. ◆上部ツールバーの整列ボタン（Align left/center/right/top/middle/bottom）を使用
3. ◆「Tidy up」ボタンで要素間の間隔を等間隔に自動整理

---

3. 反復の原則（Repetition）

理論: 視覚的要素を繰り返すことで一貫性を生む

反復とは、デザイン内で同じ色・フォント・スタイル・形を繰り返すことです。反復によって「統一感」「ブランドの一貫性」「プロフェッショナルな印象」が生まれます。

💡 反復は「コピー&ペースト」ではなく「デザインの意図的な言語」です。「このプロジェクトでは、ボタンは必ずこの色、この角丸、このフォントサイズで作る」というルールを決め、それを一貫して守ることが反復です。

実例: ブランドガイドラインへの応用

大企業がブランドガイドラインを作るのは、反復の原則を組織全体で守るためです。

ブランドガイドラインで定める反復ルール:

実例: UIパターンライブラリ（コンポーネントライブラリ）

Webアプリケーション開発では、「コンポーネントライブラリ」が反復の原則を実現する中心的な仕組みです。ボタン・カード・モーダル・フォーム・ナビゲーションなどのUIパーツを一度定義し、全画面で再利用します。

コンポーネント化のメリット:

• ◆一箇所修正すると全体に反映される（保守性の向上）
• ◆デザインの一貫性が自動的に保たれる
• ◆新しい画面を作る速度が大幅に向上する

実例: ブログ・メディアサイトのカードデザイン

記事カードを複数並べる際、以下の要素を統一することで反復の原則が適用されます。

• ◆カードの縦横比（アスペクト比）
• ◆画像の高さ
• ◆タグのスタイル（色・フォントサイズ・形）
• ◆タイトルのフォントサイズ・行数制限
• ◆「続きを読む」リンクのスタイル

⚠️ 反復の罠: 反復しすぎると単調になります。単調さを避けるために、反復の中に「意図的な破り（バリエーション）」を加えることが重要です。例えば、特集記事は通常カードより大きく表示する、などです。

---

4. コントラストの原則（Contrast）

理論: 異なるものは明確に異なるように見せる

コントラストとは、2つの要素の「差異」を強調することです。コントラストがなければ、何が重要で何が補足なのかが分からなくなります。コントラストは**視覚的な階層（hierarchy）**を生み出す最も強力なツールです。

コントラストの原則: 弱い vs 強い

タイポグラフィのコントラスト

文字サイズ・太さ・色でコントラストをつけることで、視覚的な階層を作ります。

NGパターン: サイズの差が小さすぎる

この例では見出しと本文の差が4pxしかなく、階層が不明確です。

OKパターン: 明確なサイズ差

色のコントラスト — アクセシビリティ基準

WCAGガイドラインでは、テキストと背景のコントラスト比に最低基準があります。

よくある失敗:

• ◆薄いグレーテキスト（#aaa）on 白背景 → 約2.3:1（基準外）
• ◆黄色ボタン上の白テキスト → 約1.1:1（ほぼ視認不可）

コントラスト確認ツール:

• ◆WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）
• ◆Figmaプラグイン「Color Contrast Checker」
• ◆ブラウザ開発者ツール（Chrome DevToolsのLighthouse）

サイズのコントラスト

要素のサイズ差を意図的につけることで、重要性の違いを視覚的に伝えます。

ヒーローセクションの例:

• ◆メインキャッチコピー: 64px（圧倒的に大きく）
• ◆サブコピー: 20px（メインの1/3以下）
• ◆CTAボタン: 高さ56px（存在感あり）
• ◆注記テキスト: 12px（最小限）

この4段階のサイズ差が、視線の動きを自然に誘導します。

---

4原則を組み合わせたBefore/After事例

事例: SaaSサービスのプライシングページ

Before（4原則違反の状態）:

• ◆プランカード間の間隔が不規則（近接違反）
• ◆テキストの横位置がカードごとにバラバラ（整列違反）
• ◆各カードのボタンスタイルが異なる（反復違反）
• ◆全プランが同じ見た目で、おすすめプランが目立たない（コントラスト違反）

After（4原則適用後）:

• ◆3つのプランカードを等間隔に配置（近接: グループ化）
• ◆カード内テキストはすべて左揃え統一（整列: 一貫性）
• ◆ボタンデザインを統一、おすすめのみプライマリカラー（反復+コントラスト）
• ◆「人気」「おすすめ」プランは1.1倍サイズ、影を強調（コントラスト: 差別化）

---

よくある4原則違反パターンとその修正方法

パターン1: 何でも中央揃え症候群

症状: ページの全テキストが中央揃えで、まとまりがない。 原因: 中央揃えが「フォーマルで美しい」という誤解。 修正: 2行以上のテキストは左揃えに変更。短いキャッチコピーのみ中央揃えを使用。

パターン2: スペースが均等すぎる問題

症状: すべての要素間の余白が同じで、グループが分からない。 原因: 余白=スペース、という画一的な考え方。 修正: 関連要素は近づけ（4〜8px）、無関係な要素は大きく離す（24〜48px）。

パターン3: フォントサイズが多すぎる問題

症状: ページに8種類以上のフォントサイズが混在している。 原因: 重要なものを強調しようとするたびにサイズを変える。 修正: フォントサイズは最大5段階に限定。Figmaのテキストスタイルで管理する。

パターン4: カラーが多すぎる問題

症状: ページに10色以上の色が使われていて統一感がない。 原因: その場の判断で色を選び、ルールがない。 修正: カラーパレットを「プライマリ1色+セカンダリ1色+ニュートラル3色」に限定する。

---

Figmaで4原則を実践する具体的手順

ステップ1: Auto Layoutで近接と整列を自動化

FigmaのAuto Layout機能を使うと、近接（Gap）と整列（Direction・Align）を設定で管理できます。

1. ◆要素を複数選択 → 「Shift + A」でAuto Layoutを追加
2. ◆方向（Horizontal / Vertical）を選択
3. ◆Gap between items（要素間の間隔）を設定
4. ◆Padding（余白）を設定
5. ◆Alignment（揃え方向）を設定

ステップ2: Stylesで反復を管理

1. ◆「Fill（塗り）」パネルでカラースタイルを作成（Primary, Secondary, Neutralなど）
2. ◆テキストスタイルを作成（H1, H2, H3, Body, Captionなど）
3. ◆以後、すべての要素にはスタイルを適用し、直接カラーコード入力を禁止

ステップ3: Constraintsでレスポンシブ整列

1. ◆コンポーネントのConstraintsを設定（Left, Right, Center等）
2. ◆画面幅が変わっても整列が保たれるよう設定する

💡 「コンポーネントで反復を管理し、スタイルで色とフォントを管理する」この2つのFigma習慣を身につけるだけで、デザインの一貫性は劇的に向上します。

---

🏋️実践ワーク

1. ◆

   4原則診断: 手元にある会社のWebサイトやアプリを開き、4原則それぞれについて「守られているか」「どこが違反しているか」を書き出してください。違反箇所には具体的な修正案も記載しましょう。

2. ◆

   カード再デザイン: 以下の情報を含む商品カードをFigmaで作成してください: 商品画像・商品名・価格・評価（星）・カートボタン。4原則すべてを意識的に適用し、なぜその配置にしたかをコメントで残してください。

3. ◆

   Before/After制作: 友人やクライアントのWebサイトや名刺から、デザインの4原則に違反している例を1つ選んでください。問題点を特定し、4原則を適用したAfterデザインを作成しましょう。

---

📝まとめ

• ◆近接の原則: 関連要素は近くに、無関係な要素との間には大きな余白を取る
• ◆整列の原則: すべての要素を目に見えない「線」に揃える。混在させない
• ◆反復の原則: 色・フォント・スタイルを統一し、コンポーネントとスタイルで管理する
• ◆コントラストの原則: 重要な要素とそうでない要素の差異を明確にする。アクセシビリティ基準（4.5:1）も守る
• ◆4原則は独立ではなく組み合わせて機能する。1原則を改善すると他の原則も影響を受ける
• ◆Figmaでは Auto Layout・Styles・Constraints を使って4原則を自動的に維持できる