デザインの4原則：近接・整列・反復・対比 ― ノンデザイナーこそ知るべき鉄板ルール

「なんかダサい」の正体は、4つのルール違反だった

資料を作ったら「なんか見づらいね」と言われた。バナーを並べたら「ごちゃごちゃしてる」と感じた。SNSの投稿画像がなぜか素人っぽい――。デザインを学んだことがない人なら、誰しも一度はぶつかる壁です。

「センスがないから仕方ない」と諦める人も多いですが、じつはデザインの大部分はセンスではなくルールでできています。そのもっとも基本的なルールが、ロビン・ウィリアムズの名著『ノンデザイナーズ・デザインブック』で提唱されたデザインの4原則、近接（Proximity）・整列（Alignment）・反復（Repetition）・対比（Contrast）です。

この4つは、プロのデザイナーが無意識にやっていることを言語化した「鉄板ルール」。才能やセンスではなく、知識として覚えれば誰でも実践できるものです。AIでイラストやレイアウトを作る人にとっても、出力の良し悪しを見極める「目」を養ってくれる知識です。

第1原則「近接」― 仲間は近くに、他人は遠くに

近接（Proximity）は、4原則の中でもっとも直感的でありながら、もっとも見落とされがちな原則です。やることは至ってシンプル。「関連する情報同士を物理的に近づけ、関連しない情報とは距離を取る」。これだけです。

人間の脳には「近くにあるもの＝関連している」「離れているもの＝別のグループ」と無意識に判断する性質があります（ゲシュタルト心理学の「近接の法則」）。この性質を利用して、情報のまとまりを視覚的に作るのが近接の役割です。

具体例: 名刺で理解する近接

名刺には「名前」「肩書き」「会社名」「メールアドレス」「電話番号」「住所」「Webサイト」など多くの情報が載っています。これらが均等な間隔で上から下に並んでいたらどうでしょうか？

全部同じ間隔だと、「名前と肩書きはセットなのか」「電話番号とメールはセットなのか」が視覚的に分かりません。情報は7つあるのに、構造がゼロ。読み手は1行ずつ順番に読むしかなくなります。

ここに近接を効かせると：

• グループA（アイデンティティ）: 名前 + 肩書き → 間隔を詰めて1かたまり
• グループB（所属）: 会社名 → 独立ブロック
• グループC（連絡先）: 電話番号 + メール + Web → 間隔を詰めて1かたまり
• グループD（住所）: 住所 → 独立ブロック

4つのグループ間にはしっかり余白を取ります。すると、7つの情報が「4つのかたまり」に整理され、一目で構造が把握できるようになります。情報量は同じなのに、「見た目の重さ」が激減するのです。

日常にあふれる近接の例

近接は身の回りのあらゆるデザインに使われています。

• スマホの設定画面 ― 「通知」「サウンド」で1グループ、「プライバシー」「セキュリティ」で1グループ。セクション間の余白が区切り線の役割
• スーパーの棚 ― 「調味料」「缶詰」「レトルト」がエリアごとにまとまっている。もし全カテゴリが混在していたら買い物は地獄
• 電車の路線図 ― 乗り換え駅の路線名が駅名の近くにまとめて表示されている。離れた場所に書かれていたら使い物にならない
• Webサイトのフッター ― 「会社情報」「サービス」「サポート」がグループごとにまとまっている

近接の3つのコツ

• グループ内は狭く、グループ間は広く ― この差が明確であるほど、グループ分けが伝わる。中途半端な距離が一番まずい
• 要素が5つ以上あるときは必ずグループ化 ― 5つ以上の要素がフラットに並ぶと、人間の短期記憶の限界を超える。3グループ以下に分けるだけで、認知負荷が大幅に下がる
• 余白は「何もない空間」ではない ― 余白は「ここが区切りです」というサイン。線や枠で区切るよりも、十分な余白のほうがエレガントに区切れることが多い

第2原則「整列」― 見えない線で秩序を作る

整列（Alignment）は、ページ上のすべての要素を「見えない線（ガイドライン）」で揃えるという原則です。この原則を守るだけで、デザインに「きちんと感」が生まれ、プロっぽさが格段に上がります。

整列の核心は「ページ上のどの要素も、他の何かと視覚的なつながりを持つべきだ」ということ。何にも揃っていない要素は「置き忘れ」に見え、デザイン全体の品質を下げます。

整列が壊れると何が起こるか

想像してみてください。プレゼンスライドで、見出しが左揃え、箇条書きがやや右にズレ、画像は中央寄り、ページ番号は微妙に右寄り――。どの要素も「だいたいこの辺」に配置されていて、ピタッと揃っているものがひとつもない。

こうしたスライドは、内容に関係なく「雑」「信頼性が低い」という印象を与えます。なぜなら、人間の目は無意識に「揃い」を探すからです。揃いが見つからないと脳がストレスを感じ、「なんか落ち着かない」という感覚につながります。

整列の基本: 左揃え・中央揃え・右揃え

揃え方には3つの基本パターンがあります。どれが正解というわけではありませんが、1つのレイアウト内で揃え方を統一することが最重要です。

• 左揃え（もっとも安全） ― 人間の目は左上から読み始めるため（横書き言語の場合）、左に揃えた「見えない線」は最も強力な視覚ガイドになります。文章が長いとき、要素が多いときは左揃え一択。迷ったら左揃え
• 中央揃え（注意が必要） ― フォーマルさ・対称性を演出できます。結婚式の招待状、ポスターのタイトル、1行だけのキャッチコピーなど、短いテキストが少数あるデザインに向いています。しかし要素が増えると左端がガタガタになり、散漫な印象に
• 右揃え（特殊用途） ― 日付、ページ番号、価格表示など、補助的な情報の配置に使われることが多い。メインのコンテンツには不向き

「なんとなく中央」が初心者最大の罠

デザイン初心者がもっともやりがちなのが、すべてを中央揃えにしてしまうことです。「真ん中に置けば無難でしょ？」という気持ちは分かりますが、これが実は逆効果。

中央揃えの問題点を具体的に見てみましょう。テキストが複数行あるとき、中央揃えでは各行の開始位置が毎行変わります。すると読み手の目は「次の行はどこから始まるか」を毎回探さなければならず、読むテンポが落ちます。左揃えなら開始位置が常に同じなので、目が迷わず、読みやすさが段違いです。

中央揃えが許されるのは：

• タイトルや見出し（1〜2行の短いテキスト）
• 招待状やメニューなどフォーマルなデザイン
• ヒーローセクション（Webサイトの最上部バナー）

本文、リスト、複数の情報が含まれるレイアウトでは、左揃えを基本にしましょう。

揃え方を混在させないルール

「見出しは中央揃え、本文は左揃え」のように1ページ内で複数の揃え方を混ぜると、視線の流れが不安定になります。どうしても混在させる場合は、「見出しエリアは中央揃え、本文エリアは左揃え」のようにエリアごとに明確に分けること。そして、各エリア内では必ず揃え方を統一します。

第3原則「反復」― 同じルールを繰り返して「統一感」を生む

反復（Repetition）は、デザイン上のルール（色、フォント、サイズ、形、スタイル等）を一貫して繰り返し使うという原則です。反復があるとデザインに統一感が生まれ、「ひとつのまとまり」として認識されます。

反復は4原則の中でもっとも「当たり前」に聞こえるかもしれません。しかし実際には、意識していないとすぐに崩れてしまうのがこの原則です。

反復がないとどう見えるか ― 「つぎはぎ」の正体

こんなWebサイトを想像してみてください。トップページの見出しは丸ゴシック体で青色。次のページの見出しは明朝体で赤色。ボタンはあるページでは角丸、別のページでは四角。アイコンはあるセクションでは線画スタイル、別のセクションではカラフルな塗りスタイル。

個々のパーツはそれぞれキレイでも、全体で見ると「バラバラ」「つぎはぎ」「信頼感が低い」という印象になります。これは反復の欠如が原因です。ルールが一貫していないと、読み手は「これは同じサイト/資料なのか？」という無意識の疑問を抱えたまま読むことになり、集中力が削がれます。

何を反復するか ― チェックリスト

反復すべき要素は、意外と多岐にわたります。

• 色 ― メインカラーを2〜3色に決めて、全ページ・全セクションで使い回す。ブランドカラーはこの反復の最たる例
• フォント ― 見出し用と本文用の2種類（最大3種類）に絞り、全体で統一する。ページによってフォントが変わるのはNG
• 余白の幅 ― セクション間の余白、段落間の余白、カード内のパディング。これらの数値を統一するだけで「揃い」の印象が格段に上がる
• 角丸の大きさ ― ボタン、カード、画像の角丸。全体で統一（8pxなら全部8px）。微妙にバラバラだと雑な印象に
• アイコンスタイル ― 線画（アウトライン）なら全部線画、塗り（Filled）なら全部塗り。2種類を混ぜない
• 写真のトーン ― 明るさ、彩度、色温度を揃える。同じサイトに「ビビッドな風景写真」と「セピアの人物写真」が混在すると違和感が出る
• 文章のトーン ― デザインだけでなく、文章の口調やフォーマット（例: リスト項目が体言止めなら全部体言止め）も反復対象

反復は「退屈」ではなく「安心感」

「同じことの繰り返しは退屈になるのでは？」と心配になるかもしれません。しかし反復が生むのは退屈ではなく安心感とリズムです。

音楽で考えてみましょう。サビのメロディが毎回変わったら、リスナーは心地よさを感じるでしょうか？ 同じサビが繰り返されるからこそ「あ、サビだ」と分かり、一緒に口ずさめる。視覚的な反復もまったく同じです。「見出しはこの色でこのサイズ」「吹き出しはこのスタイル」というルールが繰り返されることで、読み手は「このデザインには一貫したルールがある」と感じ、安心してコンテンツに集中できます。

反復の中で変化をつける ― 退屈を避けるコツ

変化をつけたいときは、反復の「外側（フレーム）」ではなく「内側（コンテンツ）」で変化をつけるのがコツです。

• カードのデザインは全部同じ → 中の写真やテキストだけ変わる
• 見出しのスタイルは全部同じ → テキスト内容だけ変わる
• カラーパレットは全部同じ → 各セクションの主役カラーだけローテーション

フレームが同じだからこそ、中身の違いが際立つ。これが「反復の中の変化」です。

第4原則「対比」― 違うものは、はっきり違わせる

対比（Contrast）は、4原則の中でもっとも視覚的なインパクトが大きいルールです。前回の記事「視覚的ヒエラルキーの基本」で解説した内容とも深く関わっています。

対比の意味は明快です。「異なる要素は、明確に違いがわかるようにする」。見出しと本文。主役と背景。ボタンと通常テキスト。これらの差を、一瞬で「あ、違うものだな」と分かるレベルにはっきりさせること。

対比で最もやってはいけないこと ― 「中途半端な差」

対比の最大の敵は「少しだけ違う」状態です。具体的に見てみましょう。

• フォントサイズが16pxと18px → 差はあるが、一瞬では区別できない
• 色がダークグレー（#333）とミディアムグレー（#555） → 微妙に違うが、意図的なのか事故なのか判断できない
• フォントの太さがRegular（400）とMedium（500） → 注意深く見れば分かるが、パッと見は同じ

こうした微妙な差は、「意図的に変えたデザイン」なのか「揃え損なったミス」なのか読み手に判断できません。結果、「なんか雑」という印象だけが残ります。

対比をつけるなら、思い切って大きな差をつけましょう。

• 16pxと18px → 16pxと36pxに（2倍以上の差）
• ダークグレーとミディアムグレー → 黒と白に
• RegularとMedium → LightとBoldに（300と700の差）

「あ、ここは意図的に違うんだな」と一瞬で伝わるレベルの差が必要です。

対比をつけられる6つの軸

対比は「大きさ」だけではありません。以下の6つの軸で差をつけられます。複数の軸を組み合わせると、より強い対比になります。

• サイズ ― 大きい vs 小さい。見出しと本文、メイン画像と補助画像
• 太さ（ウェイト） ― 太い vs 細い。Bold vs Light。強調キーワードと通常テキスト
• 色 ― 暗い vs 明るい、暖色 vs 寒色、有彩色 vs 無彩色。背景色とテキスト色
• 形 ― 角ばった vs 丸い、直線 vs 曲線。幾何学的なレイアウトに有機的なイラストを置くなど
• 密度 ― ぎっしり vs ゆったり。テキストが詰まったエリアの隣に大きな余白を取るなど
• 方向 ― 縦 vs 横、斜め vs 水平。横書きテキストの中に縦書き要素を入れるなど

対比は「引き算」で作る

「全部目立たせたい」は対比の最大の敵です。前回の記事でも触れましたが、すべてを目立たせようとすると、結局何も目立ちません。

対比とは、「目立たせるもの」と「目立たせないもの」を決めること。目立たせないものを思い切って抑える（小さく、細く、地味に）ことで、目立たせたいものの対比が際立つのです。

たとえば、白い背景に赤いボタンが1つだけあれば、目はそこに吸い寄せられます。しかし赤いボタンが5つあったら、どれを押すべきか分からない。「1つだけ赤くする」という引き算が、対比の力を最大化します。

4原則は組み合わせて使う ― 身近な例で見る合わせ技

4原則は個別に使うものではなく、常に4つ同時に働いているものです。優れたデザインを分析すると、必ず4原則すべてが効いています。逆に、1つでも崩れていると「なんか惜しい」という印象になります。

身近な例で4原則がどう組み合わさっているか確認してみましょう。

例1: コンビニのおにぎりパッケージ

身近すぎて気づかないかもしれませんが、おにぎりのパッケージは4原則の教科書です。

• 近接 ― 「商品名」と「具材写真」が近くにまとまっている。「カロリー」「アレルギー表示」は裏面にまとめて分離
• 整列 ― 商品名は中央揃え（短いテキストなので有効）。裏面の成分表は左揃えの表形式
• 反復 ― 同ブランドのおにぎりは全種類パッケージの形式が同じ。色帯の位置、ロゴの位置が統一されている
• 対比 ― 「鮭」の文字は大きく太字で目立つ。「138円」の価格表示は控えめ。具材の写真は鮮やかな色で背景と対比

例2: レシピカード

料理レシピのカードも4原則で分析できます。

• 近接 ― 「材料」は1グループ、「手順」は別グループに。「調理時間」「分量」は上部にまとめて1グループ
• 整列 ― 材料名は左揃え、分量は右揃えで行を揃える。手順は番号+左揃えで統一
• 反復 ― 手順番号のスタイル（丸数字＋太字）を全ステップで統一。フォントと色は全体で同じ
• 対比 ― 料理名は大きく太字、材料リストは小さく通常ウェイト。写真は大きく、テキストは控えめ

例3: この記事そのもの

じつはこの記事自体が4原則の実践例になっています。

• 近接 ― 見出し（h2）と直後の本文はすぐ近く。セクション間には広い余白。対話は対話ブロックとしてまとまっている
• 整列 ― テキストはすべて左揃えで統一。対話の吹き出しも左に寄せた一貫したレイアウト
• 反復 ― 見出しは常に紫色、リアの吹き出しは紫ボーダー、メカの吹き出しはシアンボーダー。メカメモは常に同じ枠線スタイル。このルールは記事を跨いでも同じ
• 対比 ― h2見出しは本文の1.4倍サイズで太字。背景のダーク系に対しテキストは明るい色。メカメモは背景色が変わってボックスとして区別

例4: SNS投稿画像

• 近接 ― キャッチコピーと補足テキストを近づけてグループ化。ロゴやハッシュタグは隅に離して別グループに
• 整列 ― テキスト要素は中央揃え（短いテキストなので有効）。ロゴとハッシュタグは右下に揃え
• 反復 ― ブランドカラーとフォントを投稿ごとに統一。枠線やフィルターの処理も全投稿で共通
• 対比 ― キャッチは極太白文字、背景は暗い写真でコントラスト最大。最も伝えたいメッセージに対比を集中

AIイラスト・デザイン制作への応用

4原則の知識は、AIで画像やデザインを生成するときに強力な武器になります。「なんとなくいい」「なんとなく微妙」を卒業して、具体的な言葉でAI出力を評価・改善する力がつくからです。

AI出力を「4原則チェック」で評価する

AIが生成した画像やレイアウトを見るとき、以下の4つの質問を投げかけてみてください。

• 近接 ― 関連する要素がまとまっているか？ 主役と小物の距離感は適切か？ バラバラに散らばっていないか？
• 整列 ― 要素の端が揃っているか？ 微妙にズレている箇所がないか？ 全体に「見えない線」の秩序があるか？
• 反復 ― スタイルに統一感があるか？ 途中でテイスト（色調、描き込み密度、ライティング）が変わっていないか？
• 対比 ― 主役が明確に目立っているか？ 全体がのっぺりしていないか？ 見せたいものとそうでないものの差は十分か？

この4つの質問を自分に投げかけるだけで、「なんか微妙」の原因を特定できます。「近接が崩れている（要素がバラバラ）」「対比が弱い（主役が目立っていない）」など、具体的な言葉になれば、次のプロンプトや修正指示も具体的になります。

プロンプトに4原則の意図を込める

AIにレイアウトやポスターを生成させるとき、プロンプトに4原則の意図を反映させることで出力品質が上がります。

• 近接を指示する ― 「title and subtitle grouped together at the top, logo isolated at bottom right」
• 整列を指示する ― 「all text elements left-aligned」「centered composition with symmetrical layout」
• 反復を指示する ― 「consistent color palette throughout」「uniform style across all elements」
• 対比を指示する ― 「strong contrast between text and background」「large bold title with small subtle body text」「dominant subject with minimal background」

イラスト構図にも4原則は効く

テキストレイアウトだけでなく、イラストの構図にも4原則は適用できます。

• 近接 ― キャラクターと持ち物の距離感。関連する小物はキャラの近くに、背景の装飾は離す
• 整列 ― 地平線の位置、建物の垂直ライン、キャラクターの目線の方向。これらが「見えない線」で整っていると安定感が出る
• 反復 ― 色調の統一。暖色系で統一された夕焼けシーン、寒色系で統一された深海シーンなど
• 対比 ― キャラクターの明るい色と暗い背景。描き込みの密度差（主役は精密、背景はぼかし）

まとめ ― 4原則は「デザインの文法」

言葉に文法があるように、デザインにも文法があります。近接・整列・反復・対比はその中でもっとも基本的で、もっとも効果が大きいルールです。

この記事のポイントをおさらいします。

• 近接 ― 関連する要素は近くに、関連しない要素は離す。余白は「区切りのサイン」。判断基準は「読み手が一緒に見たい情報か？」
• 整列 ― 見えない線で要素を揃える。迷ったら左揃え。「なんとなく中央」は初心者最大の罠。行頭が揃うだけで読みやすさが激変する
• 反復 ― 色、フォント、余白、角丸、アイコンスタイルを繰り返して統一感を作る。反復は退屈ではなく安心感とリズム。変化は「フレームの中」でつける
• 対比 ― 違うものは思い切って差をつける。中途半端な差は「ミス」に見える。6つの軸（サイズ・太さ・色・形・密度・方向）で差をつけられる
• 4原則は個別ではなく常に4つ同時に機能している。おにぎりのパッケージからWebサイトまで、あらゆるデザインに存在する
• AI出力の評価にも「4原則チェック」が使える。「なんか微妙」を具体的なデザイン用語に変換する力がつく

一度この4つのルールを知ってしまえば、あなたの「見え方」が変わります。街中の看板、Webサイト、アプリのUI、雑誌の表紙、動画のサムネイル……あらゆるデザインが4原則のレンズで分析できるようになる。そしてその「目」こそが、自分のデザインを改善し、AIの出力を選び抜く最強の武器になるはずです。