デザインの4原則 - 近接・整列・反復・コントラスト

デザイン4原則をFigmaで実践する

「なんとなくデザインがおかしい」「プロっぽく見えない」——そんな感覚の正体の多くは、デザイン4原則のどれかが守られていないことにあります。近接・整列・反復・コントラストという4つの原則は、Robin Williamsが著書「ノンデザイナーズ・デザインブック」で体系化したもので、グラフィックデザインからUI/UXまで普遍的に適用できます。

このレッスンでは、原則の理論を学ぶだけでなく、Figmaで実際に操作しながらBefore/Afterを体感することに重点を置きます。

デザイン4原則 — Figmaでの実践ポイント

---

1. 近接の原則（Proximity）

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

人間の脳は、近くにある要素を「関連している」と自動的に認識します。逆に、関係のない要素が近くにあると混乱します。デザインにおいて、関連する情報はグループ化し、無関係な情報は離して配置することで、情報の構造を視覚的に伝えられます。

💡 近接の原則を守ることで、文章や説明がなくても情報の関連性が直感的に伝わります。ナビゲーションの項目・フォームのラベルとフィールド・カード内の要素配置など、あらゆる場面で意識すべき原則です。

Before/After: 名刺デザイン

Before（近接違反）:

• ◆名前・役職・電話・メール・住所がほぼ等間隔に並んでいる
• ◆どれが「連絡先」でどれが「個人情報」かわからない

After（近接適用）:

• ◆「名前 + 役職」を上部にグループ
• ◆「電話 + メール」を中段にグループ（連絡先セット）
• ◆「住所」を下部にグループ（所在地セット）
• ◆グループ間には広い余白、グループ内は狭い余白

Figmaでの実践方法

Auto Layoutを使った近接の実現:

1. ◆関連要素を選択して Shift+A でAuto Layoutを適用
2. ◆Gapの値を調整（グループ内: 4〜8px、グループ間: 24〜40px）
3. ◆Paddingを設定（コンテナの内側余白）

⚠️ 近接の罠: すべてを均等間隔に並べたくなる本能と戦ってください。均等間隔は「近接の原則の放棄」を意味します。意図的に間隔を変えることが設計です。

---

2. 整列の原則（Alignment）

理論: すべてを見えない線に揃える

整列とは、ページ上のあらゆる要素を「見えない基準線」に沿って配置することです。一つひとつの要素が基準線に揃っているとき、デザイン全体に秩序が生まれ、プロフェッショナルな印象を与えます。

整列を乱す最も一般的な原因:

• ◆マウスの「なんとなく中央」配置
• ◆複数フォントの混在によるベースラインのずれ
• ◆パディングを考慮しない要素配置

揃える方向の使い分け

Figmaでの実践方法

整列ツールの使い方:

1. ◆整列させたい複数の要素を選択（Shift+クリックまたはドラッグ選択）
2. ◆右パネル上部の整列アイコングループを使用
   • ◆左端揃え / 水平中央揃え / 右端揃え
   • ◆上端揃え / 垂直中央揃え / 下端揃え
3. ◆「Tidy up」ボタン（整列アイコン隣）で間隔を等間隔に自動調整

💡 Figmaのスマートセレクト機能: 同じ親フレーム内の要素を複数選択すると、Tidy upで自動的に整列&等間隔配置できます。これを使いこなすだけで、手作業の整列作業が80%削減されます。

---

3. 反復の原則（Repetition）

理論: 一貫性が信頼感を生む

反復とは、デザイン内で同じ視覚要素（色・フォント・スタイル・形）を繰り返し使うことです。反復によってデザインに一貫性が生まれ、ユーザーは「このスタイルはこういう意味だ」と学習できるようになります。

反復が壊れると何が起きるか:

• ◆ボタンの色が画面ごとに違う → どれが押せるボタンか分からない
• ◆フォントサイズがバラバラ → 重要度の階層が読めない
• ◆カードのマージンがページごとに違う → 素人っぽく見える

FigmaのStylesを使った反復の実現

Figmaのスタイル機能は、反復の原則をシステム的に守るための最強ツールです。

Color Stylesの作成:

1. ◆塗りを設定した要素を選択
2. ◆右パネルのFillの横にある4つの点アイコンをクリック
3. ◆「+」で新規スタイルを作成、名前をつける（例: Primary/500）
4. ◆以降、同じ色を使う場所ではスタイルを適用する

Text Stylesの作成:

1. ◆テキストを選択してフォントを設定
2. ◆右パネルのテキストセクションの「4つの点」アイコンから新規作成
3. ◆名前をつける（例: Heading/H1, Body/Regular）

⚠️ スタイルを後から変更すると、そのスタイルを適用しているすべての要素に自動反映されます。スタイルを使わずに個別に色やフォントを設定すると、変更のたびに全要素を手作業で更新する地獄に陥ります。

---

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

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

コントラストとは、2つの要素の「差異」を意図的に強調することです。見出しと本文、ボタンと背景、重要情報と補足情報——これらを明確に区別することで、視覚的な階層（hierarchy）が生まれ、ユーザーの視線を意図通りに誘導できます。

コントラストの種類:

アクセシビリティとしてのコントラスト

WCAGガイドラインでは、テキストと背景の輝度コントラスト比に最低基準を設けています。

Figmaでコントラストを確認する方法:

• ◆プラグイン「A11y - Color Contrast Checker」をインストール
• ◆テキストと背景を選択 → プラグインを実行 → Pass/Failが表示される

---

4原則の統合 — リアルなBefore/After

事例: モバイルアプリのログイン画面

Before（4原則違反）:

• ◆メールと電話番号フィールドが同じ間隔で並んでいる（近接違反）
• ◆「ログイン」ボタンとテキストが左端で揃っていない（整列違反）
• ◆エラーメッセージの色が本文と同じグレー（コントラスト違反）
• ◆画面によってボタンスタイルが違う（反復違反）

After（4原則適用）:

• ◆メール・パスワードを「認証情報」グループ、ソーシャルログインを別グループに（近接）
• ◆すべての要素をフレームの中央または左端に揃え（整列）
• ◆エラーは赤（#ef4444）、成功は緑（#10b981）で明確に区別（コントラスト）
• ◆ボタンスタイルをコンポーネント化して全画面で統一（反復）

---

🏋️実践ワーク

1. ◆新しいフレームを作成し、以下の要素を「近接違反」の状態でバラバラに配置してください。
   • ◆「山田 太郎」（名前テキスト）
   • ◆「フロントエンドエンジニア」（役職）
   • ◆「090-1234-5678」（電話番号）
   • ◆「yamada@example.com」（メール）
2. ◆近接の原則に従い、「名前+役職」と「電話+メール」を視覚的にグループ化してください。
3. ◆整列ツールを使い、すべての要素を左揃えにしてください。
4. ◆名前のフォントサイズを24px Bold、役職を14px Regular、連絡先を12pxに変えてコントラストをつけてください。

📝まとめ

近接・整列・反復・コントラストの4原則は、「なんとなく変」を解決する具体的な処方箋です。Figmaでは整列ツール・Auto Layout・スタイル機能がこれらの原則を実現するための具体的な操作として対応しています。次のレッスンでは配色を体系的に学びます。