Webデザインの4原則（近接・整列・反復・対比）をわかりやすく解説【初心者向け】

この記事でわかること

結論を先に書きます

Webデザインの4原則とは、関連を「近接」でまとめ、基準線で「整列」させ、スタイルを「反復」し、強弱で「対比」をつける——情報を整理して正確に伝えるための土台ルールです。

大事なのは、これが装飾テクニックではなく情報設計の道具だという点。色や飾りを増やす話ではなく、ユーザーの視線を制御して「何が重要か」を一目で伝えるための仕組みです。

「センスがない」と感じる見た目の多くは、才能ではなくこの4原則が守られていないだけであることがほとんど。言語化されたルールなので、デザイン経験がなくても再現できます。

Webデザイン4原則とは？情報を整理して伝える基本ルール

Webデザインの4原則とは、デザイナーのロビン・ウィリアムズが著書『ノンデザイナーズ・デザインブック』で示した「近接（Proximity）」「整列（Alignment）」「反復（Repetition）」「対比（Contrast）」の4つです。英語の頭文字から「PARC（パーク）」「CRAP（クラップ）」とも呼ばれます。

媒体を問わず通用する普遍的な原則で、Webサイト・LP・社内資料・スライドのどれにも効きます。まずは「装飾ではなく整理の道具」という位置づけを押さえてください。

なぜWeb制作の現場で4原則が重視されるのか

理由はシンプルで、「センス」という曖昧なものを言語化・再現可能にしてくれるからです。

デザインに自信がない発注者でも、4原則の言葉でフィードバックを返せると修正サイクルが速く回ります。「なんか違う」ではなく「ここは整列が崩れている」と言えるだけで、やり取りの精度が大きく変わります。

4原則は情報設計の道具

4原則は派手さを競うものではなく、伝えたいメッセージの優先順位を視覚化する仕組みです。ユーザーの視線を意図どおりに動かし、迷わせない。これがWebデザインの本質であり、4原則はその出発点になります。

デザインの基礎概念をもう少し広く知りたい方は、デザインとは何かもあわせて読むと理解が深まります。

4原則の全体像（近接・整列・反復・対比）

最初に4つの役割を一気に把握しておきましょう。それぞれが「情報の何を整えるか」を担当しています。

この4つは独立ではなく連動します。たとえば近接でグループを作り、整列で並べ、反復で見た目を揃え、対比で主役を立てる——この流れがそろうと「プロが作った印象」になります。

第1原則：近接 — 関連する情報をまとめる

近接の結論は、関連するものは近づけ、関係ないものは離す。これだけで「どの情報がセットか」が説明なしに伝わります。

要素間の余白を「グループ内＜グループ間」に設計するのがコツ。たとえば商品カード内の要素間は8〜16px、カード同士の間は32〜48pxという具合に、間隔の差でまとまりを表現します。

近接のNG例・OK例

NG例とOK例を並べると、効き方がはっきり分かります。

観点	NG例	OK例
商品情報	写真・価格・説明文が離れて散在	写真・タイトル・価格・ボタンを1セットで近接配置
フォーム	ラベルと入力欄が離れて対応が不明	ラベル＋入力欄＋ヘルプを1つの塊に
メニュー	項目間隔が不均等でグループ不明	関連項目の間隔を詰め、別グループを離す

NG例はどれも「どの情報がどれと関連するか」が読み手に伝わらず、整理する手間をユーザーに負わせています。

近接をWebで実践するコツ

CSS GridやFlexboxのgapプロパティで間隔を統一すると、近接が自然に守られます。Tailwind CSSなどのユーティリティCSSでも、gap-2・gap-8のように一貫したスケールで設計しましょう。

カード型UIは近接を実装しやすい代表例。HTMLの構造から理解したい方はHTMLとはの基礎も参考になります。

第2原則：整列 — 見えない線で要素を揃える

整列の結論は、すべての要素を何らかの基準線に沿わせる。これが崩れると、全体が「なんとなく素人っぽい」印象になります。

人間の目は基準線のズレに敏感で、1〜2pxのズレでも違和感を覚えます。逆に言えば、揃えるだけで落ち着きとプロらしさが出ます。

整列のNG例・OK例

整列も対照で見ると分かりやすいです。

観点	NG例	OK例
揃え方	見出し左・本文中央・画像右でバラバラ	1ページ内は左揃えで統一（基本）
基準線	要素ごとに縦軸が違う	見出し・本文・画像を同じ左端に揃える
ボタン	サイズが要素ごとに違う	大・中・小の3パターンに統一

複数の揃え方を混在させず、まず左揃えに寄せるだけでも整います。

Webでの整列はグリッドで考える

Webでは12カラムグリッドやFlexboxで整列を実現します。Bootstrap・TailwindがGridベースなのは、整列を強制する仕組みとして使いやすいからです。

実案件では「8pxスケール（8の倍数で余白とサイズを設計する）」がよく使われます。整列が自動的に揃いやすくなる、現場の定番手法です。

第3原則：反復 — 統一感でブランドを伝える

反復の結論は、同じスタイルをデザイン全体で繰り返す。色・フォント・余白・装飾を統一することで一貫性が生まれ、ブランドの印象が強くなります。

反復が崩れると、ユーザーは「同じサイト内なのに別物では」と混乱します。これは信頼性の低下に直結します。

反復のNG例・OK例

統一すべき要素を一覧で整理します。

要素	NG例	OK例
見出し	ページごとにフォント・サイズが違う	H1〜H4でサイズ・色・余白を固定
ボタン	箇所ごとに色・形が異なる	メイン・サブ・テキストリンクの3種に統一
カラー	色数が多く印象が散る	ブランド2色＋アクセント1色＋ベース2色に絞る
パーツ	角丸・影・アイコンがバラバラ	全ページで共通化

デザインシステムが反復を支える

中規模以上では「デザインシステム」で反復を担保します。色・フォント・コンポーネントを一元管理し、どのページでも同じスタイルが使われる運用です。

実装面では、CSSのカスタムプロパティ（変数）でカラーや余白を一元管理しておくと、後から変更しても一括で反映できます。--color-primaryや--space-mdのように変数化するのがおすすめ。CSSの基礎はCSSとはでも整理しています。

第4原則：対比 — 強弱で視線を誘導する

対比の結論は、サイズ・色・形に明確な差をつけて強弱を生む。重要な情報を際立たせ、視線をコントロールするための武器です。

「全部目立つ」は「何も目立たない」と同じ。優先順位がない状態は、ユーザーに思考コストを強います。

対比のNG例・OK例

差をつける対象を整理します。

観点	NG例	OK例
文字サイズ	すべて同じサイズ・同じ太さ	見出し・本文でサイズ差をはっきりつける
見出し	本文との差が小さく区別できない	H2とH3で1:1.5以上のサイズ比にする
ボタン	背景になじんで判別できない	CTAだけ補色で強調する

対比のコツは「半端にやらない」こと。18pxと20px、濃いグレーと薄いグレーのような中途半端な差は機能しません。変えるなら大胆に変えるのが原則です。

見出しの階層設計では、たとえばH2が32pxならH3は20pxと、明確な差をつけると一目で階層が伝わります。

4原則を守るとどう変わるか（比較表）

4つの効果をまとめて確認しておきましょう。守ったときと無視したときの差を意識するだけで、デザインの見え方が変わります。

原則	守ると	無視すると	Webでの主な使い所
近接	関連情報がまとまり理解しやすい	情報が散って読み取りに労力	カード型UI・フォーム・商品リスト
整列	統一感と落ち着き、プロらしさ	素人っぽさと違和感	レイアウト全体・テキスト揃え
反復	ブランドの一貫性と信頼感	別サイトのような違和感	カラー・フォント・パーツ
対比	重要情報が際立ち視線を誘導	全部同じで読み流される	見出し階層・CTA・キャッチコピー

Webサイト制作で4原則を実践する手順

ここからは、4原則を実際のサイト制作にどう組み込むかを5ステップで整理します。この順番で進めると、原則が自然に守られます。

Step1：情報を整理する

着手前に、ページに載せる情報を「サービス紹介」「料金」「お客様の声」のようにグループへ分けます。それぞれが何の役割を果たすかを明確にしてから配置に入ると、近接が機能します。

Step2：基準線とグリッドを決める

12カラムグリッドや8pxスケールなど、サイト全体で統一する基準線を決めます。ツール上にグリッドを敷き、すべての要素をその線に沿わせる前提でレイアウトしていきます。

Step3：デザインシステムを構築する

繰り返し使うコンポーネント（カラー・フォント・ボタン・カード）をあらかじめ定義します。中小サイトでも「色5色＋見出し3階層＋ボタン3種」程度を作っておくと、ページが増えても統一感が崩れません。

Step4：強弱を設計する

最も伝えたい情報（CTA・主要メッセージ・見出し）を特定し、それらが他より明確に強調されるよう対比を設計します。Webなら「ファーストビューで何を見せるか」「CTAの位置と色」が腕の見せ所です。

Step5：実装後にレビューして調整する

実装後は4原則それぞれの観点でセルフレビューします。

• グループの間隔は十分か（近接）
• 揃っていない要素はないか（整列）
• 色やフォントは統一されているか（反復）
• 重要情報は際立っているか（対比）

この4点をチェックするだけで、公開前の手戻りが減ります。

4原則を踏まえた応用パターン

実案件で4原則がどう使われるか、代表的な3パターンを紹介します。

コーポレートサイトのファーストビュー

近接でキャッチコピー・サブテキスト・ボタンを1つの塊にし、整列で縦軸を中央に揃える。反復でブランドカラーを統一し、対比でCTAだけ補色にする。これだけで「プロが作った」見え方になります。

LP（ランディングページ）の特典セクション

近接で特典1つを「アイコン＋見出し＋説明」のセットにし、整列で3つ横並び・上端揃え。反復でアイコンと見出しサイズを統一し、対比で推したい特典だけ背景色を変える。LPデザインの作り方で全体構成もあわせて確認できます。

ブログ記事の本文

近接で見出しと直後の本文を密接にし、段落間は広めに。整列は左揃えで統一し、反復でH2・H3や引用・コードブロックのスタイルを共通化。対比で重要キーワードを太字やマーカーで強調すると、読みやすさが大きく変わります。

4原則のあとに学ぶべき次のステップ

4原則を理解したら、次に学ぶと制作スキルが一段伸びる領域を紹介します。

学ぶ領域	内容	4原則との関係
配色・カラー理論	補色・類似色・トライアド配色	対比と反復のレベルが上がる
タイポグラフィ	フォント選び・行間・字間・サイズ	印象とコントラストを決める
UI/UX改善	ユーザビリティ・ヒートマップ・CVR	「見やすさ」を成果につなげる

配色はAdobe ColorやCoolorsなど無料ツールで練習でき、UI/UXはUIデザインとはで体系的に学べます。Webデザイナーの仕事像を知りたい方はWebデザイナーとはもあわせてどうぞ。

よくある質問

4原則について、初心者からよく受ける質問をまとめました。

まとめ：4原則は「見やすい」を再現可能にする道具

最後に要点を整理します。

Webデザインに「センス」は必須ではありません。4原則を意識して制作を続ければ、初心者でも見やすく伝わるデザインを再現できます。今日作るバナーやページで、まずは「近接」と「整列」だけでも意識してみてください。1週間後には自分のデザインの見え方が変わっているはずです。

---

免責事項

---