【保存版】デザイン4原則完全ガイド｜近接・整列・反復・対比で「素人っぽい」を一撃で直す実践テクニック
「なんとなく作ったら、なんとなくダサい」
資料、バナー、LP、UIでこう感じたことはありませんか？
その原因の多くは、センス不足ではなく設計ルール不足です。
そこで役立つのが、デザインの基本である4原則（近接・整列・反復・対比）。
この記事では、初心者でもすぐ使えるように、4原則を「意味」だけでなく「現場での使い方」まで具体化して解説します。さらに、2026年時点で外せない**アクセシビリティ（WCAG 2.2）**や、Material Design 3の実務ポイントも取り入れ、今の制作現場で通用する形にアップデートしました。
この記事でわかること
- デザイン4原則の本質と、やりがちな失敗
- PowerPoint、Canva、Figma、Web制作での即実践テクニック
- 「見やすい」だけでなく「使いやすい」を満たす設計方法
- 2026年に意識したいコントラストとUIの最新基準
デザイン4原則とは？まずは全体像を30秒で把握
デザイン4原則は、情報をわかりやすく伝えるための土台です。
- 近接（Proximity）: 関連情報を近づけ、無関係なものは離す
- 整列（Alignment）: 要素を基準線に沿って揃え、秩序を作る
- 反復（Repetition）: 色・フォント・余白ルールを繰り返し、統一感を出す
- 対比（Contrast）: 違いを明確にして、重要情報を目立たせる
この4つを同時に使うと、「読みづらい」「何が大事かわからない」という状態が一気に改善します。逆に、1つでも崩れると、どれだけ良い内容でも伝わりにくくなります。
1. 近接（Proximity）｜情報の「かたまり」を作る
近接の基本
人は、距離が近いものを同じグループと認識します。
つまり、関連する情報を近づけるだけで、説明しなくても関係性が伝わります。
よくあるNG
- 見出しと本文の間隔より、本文同士の間隔が広い
- フォームのラベルと入力欄が離れている
- 連絡先情報がページ内に散らばっている
すぐ使える実践テクニック
- ルール1: 同じグループ内の余白は小さく、別グループ間の余白は大きく
- ルール2: 見出しと本文は「セット」で扱う
- ルール3: 余白を詰めるのではなく、意味の単位で空ける
PowerPointでもFigmaでも、まずは「要素を追加する」前に「どこで区切るか」を決めるだけで見やすさが激変します。
活用シーン
- 営業資料: 価格・機能・導入効果をセクションごとに束ねる
- Webフォーム: ラベルと入力欄を近接させて誤入力を減らす
- ブログ記事: 見出し直下に要点を置いて離脱率を下げる
2. 整列（Alignment）｜「なんか雑」を消す最短ルール
整列の基本
整列は、要素を同じ線に揃えること。
人は整列された画面を「整理されている」「信頼できる」と感じます。
よくあるNG
- アイコンごとにタイトル開始位置が微妙にズレる
- ボタンの幅や高さがバラバラ
- 中央揃えと左揃えが混在し、視線が迷子になる
すぐ使える実践テクニック
- ルール1: まず左揃えを基本にする（迷ったら左）
- ルール2: 8pxまたは4pxグリッドで位置決めする
- ルール3: 「なんとなく中央」は禁止。中央にする理由を持つ
NN/gでも繰り返し言及される通り、グリッドと整列は可読性の基礎です。
見た目の美しさだけでなく、スキャンしやすさ（必要情報の探索速度）にも効きます。
活用シーン
- LP: 見出し、本文、CTAの開始位置を揃えて読み進めやすくする
- UI: カードコンポーネントの余白・行間・ボタン位置を統一
- バナー: テキスト起点を合わせ、情報の優先度を明確化
3. 反復（Repetition）｜「統一感」を再現可能にする
反復の基本
反復は、同じ役割の要素に同じ見た目を繰り返し適用することです。
デザインを「センス」から「仕組み」に変える原則とも言えます。
よくあるNG
- 同じ見出しレベルなのにサイズや太さが毎回違う
- ボタンの角丸や色が画面ごとに変わる
- 「強調色」が複数あり、結局どれも強調されない
すぐ使える実践テクニック
- ルール1: 文字サイズは3段階程度に制限（見出し・中見出し・本文）
- ルール2: カラーは役割で管理（主・補助・注意）
- ルール3: コンポーネント単位でスタイルを登録して使い回す
Figmaならコンポーネントとスタイル、Webならデザイントークン（CSS変数）で反復を仕組み化すると、品質が急に安定します。
活用シーン
- オウンドメディア: 記事テンプレートの見出し・引用・表記を統一
- SaaS画面: ボタン、タグ、入力欄の一貫性で学習コストを削減
- SNS投稿: シリーズ投稿でブランド認知を強化
4. 対比（Contrast）｜「重要」を一目で伝える
対比の基本
対比は、違いを明確にして注目点を作る原則です。
サイズ、色、太さ、余白、形の差で「ここが重要」を伝えます。
よくあるNG
- 重要ボタンと通常ボタンの見た目差が弱い
- 見出しと本文のサイズ差が小さく、階層が不明
- すべてを強調し、結果的に何も目立たない
すぐ使える実践テクニック
- ルール1: 強調は「1画面1主役」を意識
- ルール2: 文字サイズ差は最低でも1.2〜1.5倍
- ルール3: 色差だけに頼らず、太さ・サイズ・位置も併用
2026年に必須の対比知識（アクセシビリティ）
視認性は主観ではなく、基準で管理する時代です。
WCAG 2.2では、特に次が重要です。
- 通常テキスト: 4.5:1以上
- 大きい文字: 3:1以上
- UIコンポーネントやアイコンなど非テキスト: 3:1以上
さらに、Material Design 3でも色の組み合わせは役割ベースで定義され、適切なペアリング（例: primary と onPrimary）を守ることで可読性を保つ設計が推奨されています。
「おしゃれだけど読めない」を避けるには、コントラストチェッカーを制作フローに組み込むのが最短です。
4原則を同時に使うときの実践フロー（テンプレ）
「理屈はわかったけど、毎回どう使うの？」という方向けに、実務フローを用意しました。
Step 1: 情報をグループ化する（近接）
まず情報を意味単位で分けます。
例: タイトル、要約、本文、CTA、補足情報。
Step 2: グリッドと基準線を決める（整列）
左端、右端、列幅、余白基準を先に決めます。
配置はその後。ここが先です。
Step 3: スタイルルールを固定する（反復）
見出しサイズ、本文サイズ、色、ボタン仕様を定義します。
「都度判断」を減らすほど品質が上がります。
Step 4: 視線誘導を作る（対比）
最重要要素を1つ決め、それ以外と差をつけます。
最後にコントラスト比をチェックして完成です。
初心者が最短で成果を出すチェックリスト
制作前と制作後に、次だけ確認してください。
- 関連情報は近く、無関係情報は離れているか
- 主要要素は同じ基準線に揃っているか
- 同じ役割の要素は同じ見た目か
- 一番見せたい情報が3秒以内にわかるか
- テキストと背景のコントラストは基準を満たすか
この5項目を通すだけで、資料もUIも「伝わる確率」が大幅に上がります。
よくある質問（FAQ）
Q1. 4原則はWeb以外でも使えますか？
使えます。資料、チラシ、SNS画像、名刺、アプリUIなど、視覚情報を扱うものすべてに有効です。
Q2. どれから優先すべきですか？
最初は近接と整列を優先してください。
この2つだけで「読みづらさ」の多くが解消されます。次に反復、最後に対比の最適化が効果的です。
Q3. センスがなくても上達できますか？
できます。
4原則は感覚ではなく、再現可能なルールです。チェックリスト化して反復すれば、誰でも改善できます。
まとめ｜デザイン4原則は「センス」ではなく「技術」
デザイン4原則（近接・整列・反復・対比）は、見た目を整えるための知識ではありません。
情報を正しく伝えるための設計技術です。
特に今は、きれいさだけでなくアクセシビリティや可読性も含めて評価される時代。
4原則にWCAG 2.2の考え方を掛け合わせることで、初心者でも「伝わる」「使える」デザインに一気に近づけます。
まずは次の制作から、1つだけでいいので実行してください。
おすすめは「近接を見直す」「左揃えを徹底する」の2つです。
それだけで、あなたのデザインは確実に変わります。
参考にした最新情報（2026年確認）
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2
https://www.w3.org/TR/2024/REC-WCAG22-20241212/ - W3C WAI: What’s New in WCAG 2.2
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/ - Nielsen Norman Group: Visual Design / Visual Hierarchy / Principles of Visual Design
https://www.nngroup.com/articles/principles-visual-design
https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
https://www.nngroup.com/articles/good-visual-design/ - Material Design 3: Accessibility and Color Contrast
https://m3.material.io/foundations/designing/color-contrast
https://m3.material.io/styles/color/roles