デザイン4原則（近接・整列・反復・対比）を適用すると、修正回数を削減できます。この記事では各原則の意味から実務フロー、納品前チェックリストまで解説します。
▶ 3日で初案件PR
この記事でわかること
デザイン4原則（近接・整列・反復・対比）の意味を理解し、修正依頼の原因を3分で特定できます。制作前の情報設計から納品前の7項目チェックまで、フリーランスの実務フローに組み込む手順を身につけられます。「なんとなく違う」という修正依頼を減らす5つのハックも習得できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
デザイン4原則とは、近接・整列・反復・対比の4つのレイアウト指針であり、センスに頼らず論理的に「見やすいデザイン」を再現するためのルールです。フリーランスが実務でこの4原則を使いこなすには、原則を個別に覚えるだけでなく、制作前の情報整理から納品前チェックまで一連のフローに組み込む必要があります。順番に適用するだけで、クライアントから「なんとなく違う」と言われる修正依頼を大幅に減らせます。
今日やるべき1つ
手元にある提案資料またはバナーを開き、「見出しと本文の間隔」と「補足情報との間隔」を比較してください。両者の余白が同じであれば、近接の原則が機能していません。見出しと本文を近づけ、補足との間に1.5倍以上の余白を設けるだけで、情報のグループ化が伝わります（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 4原則の意味から理解したい | デザイン4原則は近接・整列・反復・対比の4要素 | 5分 |
| 原則をどの順で使うか知りたい | デザイン4原則は制作前の設計から始まる | 5分 |
| 今すぐ品質チェックしたい | デザイン4原則は7項目で品質確認 | 3分 |
| 修正依頼の原因を特定したい | デザイン4原則の修正依頼を3分で診断 | 3分 |
| 実務ハックを知りたい | デザイン4原則は5つの仕組みで定着 | 8分 |
デザイン4原則は近接・整列・反復・対比の4要素
近接は情報のグループ化で読み順を作る
近接（Proximity）とは、関係性の高い情報を近づけ、関係性の低い情報との距離を離す原則です。人間の視覚は、近くにある要素を「同じグループ」として自動的に認識します。この認知の仕組みを利用すると、余白だけで情報の構造を伝えられます。
説明文を追加しなくても「この見出しはこの本文に対応する」という関係を、距離だけで読者に伝えられます。すべての要素の間隔が均等だとグループの境界が消え、読者は最初から読み直す必要が生じます。フリーランスの提案資料で「情報量は多いのに伝わらない」と感じるケースの多くは、近接の欠如が原因です。
実務では、見出しと直下の本文の間隔を狭く設定し、前の段落との間隔を1.5倍以上に広げるだけでグループが視覚的に分離します。余白を「空き」ではなく「グループの区切り線」として設計する発想に切り替えると、レイアウトの判断速度が上がります。Webデザインの配色を学ぶ際にも同じグループ化の考え方が応用できます。
整列は基準線を決めることで秩序を作る
整列（Alignment）とは、文字や画像などの要素を、見えない基準線に沿って揃える原則です。基準線は「左端」「中央」「右端」などの仮想ラインであり、それに沿って要素を配置することで画面全体に一体感が生まれます。
整列が機能していないデザインでは、要素ごとに開始位置がわずかにずれており、画面全体が落ち着きのない印象になります。この「わずかなずれ」は、クライアントが言語化できなくても視覚的には認識されており、「なんとなく違う」という修正依頼の主要な原因の1つです。基準線を1本決めてすべての要素を揃えるだけで、デザインの完成度が上がります。
整列は「左揃えが正解」ではありません。重要なのは揃え方を一貫させることです。中央揃えを選んだなら、その画面内のすべての要素を中央に揃え、左端がバラバラにならないようにします。整列のルールを1種類に統一するほど、視覚的な秩序が強くなります。
反復は視覚ルールの再利用で統一感を作る
反復（Repetition）とは、色・フォント・線・形・余白などの視覚要素を繰り返し使い、デザインに一貫性を持たせる原則です。同じ役割の要素が同じ見た目で繰り返されると、読者は「このデザインにはルールがある」と無意識に判断し、安心して情報を読み進められます。
反復を意識せずに制作すると、ページごと・スライドごとに見出しの色やフォントが変わり、「バラバラに見える」資料が生まれます。これはセンスの問題ではなく、ルールの不在です。見出しは必ず〇〇px・〇〇色、ボタンは必ず同じ形と色、という「再利用できるルール」を最初に設定すれば、後続のページは機械的に当てはめるだけで統一感が出ます。
実務では、制作開始時に見出し・本文・ボタン・余白のルールを「スタイルメモ」として1枚にまとめておくと、修正時にルールを確認しながら作業でき、バラつきを防げます。プレゼン資料フォントの選び方でも、反復の考え方がそのまま応用できます。
対比は情報の優先順位を視覚で伝える
対比（Contrast）とは、大きさ・色・太さ・形などに明確な差をつけ、情報の優先順位や重要箇所を伝える原則です。解説媒体によって「強弱」「コントラスト」とも表現されますが、意味は同じです。重要情報と補足情報が同じ視覚的ウェイトで並んでいると、読者はどちらを先に読めばよいか判断できません。
対比が機能すると、読者の視線は自動的に重要情報から始まり、補足へと流れます。この視線誘導は意図的に設計できます。文字サイズで3段階（見出し・本文・キャプション）を設定し、重要な単語に太字または差し色を使うだけで、情報の優先順位が視覚的に伝わります。
対比は「差」が小さすぎると機能しません。見出しを本文より2〜3px大きくしただけでは「なんとなく大きい」程度で、視線誘導は起きません。見出しは本文の1.5倍以上のサイズにする、重要な数値には本文と異なる色を使うなど、差を明確につけることが対比の本質です。見やすい配色の基本を理解すると、対比の設計がさらに精度を増します。
CHECK
▶ 今すぐやること：手元のデザインで「見出し」「本文」「補足」の文字サイズ差を確認し、見出しが本文の1.5倍未満であれば拡大する（5分）
Q：4原則はどの順番で意識すればよいですか？
A：近接（グループ化）→整列（基準線設定）→反復（ルール統一）→対比（優先順位付け）の順が実務に合っています。情報を分類してから整え、統一し、最後に重要度を強調する流れです。
Q：「CRAP」とは何ですか？
A：4原則の英語表記であるContrast（対比）・Repetition（反復）・Alignment（整列）・Proximity（近接）の頭文字を組み合わせた呼称です（e-Words：デザインの4原則）。英語圏のデザイン解説でよく使われる略語で、日本語の解説でも頻繁に引用されます。
デザイン4原則は制作前の設計から始まる
制作前に目的と最重要メッセージを1文で決める
「誰に、何を、どの順番で伝えるか」を制作前に1文でまとめると、4原則の適用判断が格段に速くなります。この1文がなければ、何を対比で強調すべきか、どの情報を近接でグループ化すべきか、判断の根拠がなくなります。
たとえば「フリーランスのAさん（30代・Web制作）に、月5件の案件受注ができるポートフォリオを提案する」という1文があれば、最重要メッセージは「受注実績と制作クオリティ」と決まります。対比で最初に目に入る要素を制作実績の数字にし、近接でスキルと実績を同じブロックにまとめる、という判断が迷わずできます。企画書の書き方で紹介される「目的・背景・内容」の構成と同様に、デザインも目的から逆算して設計します。
この事前整理を省略すると装飾から手をつけてしまい、後半に「結局何を伝えたいのかわからない」デザインになります。制作前の5分が、修正回数を減らす最も費用対効果の高い時間投資です。
情報を役割別に分類してから配置する
デザイン4原則を適用する前に、扱う情報を「見出し」「本文」「補足」「CTA（行動促進）」の役割別に分類します。この分類が終わっていないと、近接でグループ化する単位が決まらず、対比で強調すべき情報も定まりません。
分類の基準はシンプルです。読者に最初に伝えたい内容が「見出し」、根拠や詳細が「本文」、参考情報や注記が「補足」、次に取ってほしい行動が「CTA」です。この4分類に当てはまらない情報は、そもそも掲載する必要があるか再検討します。情報量が多いほど、分類の精度がデザインの見やすさを決めます。
同じ情報でも「このデザインの中での役割」によって分類が変わります。制作実績の件数は、ポートフォリオでは見出しレベルですが、サービス紹介ページでは補足になる場合があります。目的と最重要メッセージを先に決めることで、役割の分類が正確になります。
ワイヤーフレームで情報構造を装飾なしで確認する
配色やフォントを決める前に、ワイヤーフレーム（装飾を取り除いた骨格図）を作ると、4原則の適用が確認しやすくなります。ワイヤーフレームは白黒の四角と直線だけで構成し、余白・グループ・基準線・情報の重要度をレイアウトだけで表現します。
ワイヤーフレームの段階で「見出しと本文が分離して見えるか」「基準線が1本に統一されているか」「重要情報が視覚的に大きく見えるか」を確認します。装飾を加えた後で確認すると、配色の印象に引きずられて構造の問題を見落とします。ワイヤーフレームで4原則が機能していれば、装飾を加えても崩れません。
所要時間は簡易版で10〜15分です。Figma・PowerPoint・紙への手書きで作成できます。専用ツールは必要なく、四角と余白で情報の優先順位が表現できていれば十分です。
CHECK
▶ 今すぐやること：次の制作案件で、デザインを始める前に「誰に・何を・どの順番で伝えるか」を1文でメモに書き、情報を4分類してからツールを開く（5分）
Q：ワイヤーフレームを作る時間がない案件ではどうすればよいですか？
A：紙またはメモアプリに、情報の配置を大まかな四角で書くだけで十分です。完成度より「グループの境界」と「最重要情報の位置」を確認することが目的なので、2〜3分で作れる簡易版で問題ありません。
Q：分類できない情報は削除すべきですか？
A：削除の前に、その情報が「目的」と「最重要メッセージ」に貢献しているか確認してください。貢献していなければ削除か補足欄への移動が適切です。クライアントの要望で必須の情報であれば「補足」として小さく配置します。
デザイン4原則は7項目で品質確認
チェック1は「関連する情報は近くにまとまっているか」です。見出しと直下の本文の間隔が、前の段落との間隔より狭くなっているかを確認します。チェック2は「要素の端が1本の基準線に揃っているか」です。左端または右端を基準に、すべての要素が揃っているかを確認します。意図的な例外以外は基準線から外れないようにします。
チェック3は「同じ役割の要素は同じ見た目か」です。見出しが複数あるなら、すべて同じフォント・サイズ・色になっているかを確認します。チェック4は「最重要情報は視覚的に最も目立っているか」です。文字サイズ・太さ・色のいずれかで、他の要素と明確な差がついているかを確認します。
チェック5は「白黒表示にしても情報の優先順位が伝わるか」です。グレースケール表示に切り替えて、重要情報が大きく・太く見えているかを確認します。色だけに頼った対比はモノクロ印刷やアクセシビリティで機能しないため、サイズや太さでも差をつけます。チェック6は「スマートフォン幅に縮小したとき、最初に目に入る情報は意図通りか」です。最重要情報がファーストビューに収まっているかを確認します。チェック7は「フォントの種類は2種類以内か」です。見出し用と本文用の2種類を基本とし、それ以上はデザインの統一感が崩れます。無料フォントの選び方を参考にしながら、フォントの種類を絞り込むと整理しやすくなります。
この7項目をすべて通過したデザインは、4原則が機能している状態です。
CHECK
▶ 今すぐやること：直近の納品済みデザインをこの7項目でチェックし、失敗項目を記録する。次の制作時に最初に確認する項目として優先度を設定する（10分）
Q：7項目すべてを毎回確認する必要がありますか？
A：制作物の種類によって省略できる項目はあります。SNS投稿画像では「スマートフォン幅での確認」が最重要で、印刷物では「白黒表示での確認」が必須です。ただし、チェック1〜4の近接・整列・反復・対比の基本4項目は、すべての制作物で確認してください。
Q：フォントを3種類使いたい場合はどうすればよいですか？
A：3種類使う場合は、用途を明確に決めてください。たとえば「見出し用」「本文用」「強調ワード用」の3役割です。役割を決めずに感覚で追加すると反復が崩れます。一般的には2種類以内の方が統一感を保ちやすく、3種類以上は上級者向けの設計です。
デザインの仕事で単価を上げたい方へ
Webデザインの学び方をLINEで受け取る
LINEで無料で届くもの
- 20本Webデザインの無料レッスン
- 全工程Photoshopの解説動画
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
デザイン4原則の修正依頼を3分で診断
Q1：情報のまとまりが伝わらない、または読む順番がわからないと言われていますか？
Yesの場合はQ2へ進み、Noの場合はQ3へ進みます。
Q2：見出しと本文の間隔と、段落間の間隔は異なりますか？
Yesの場合は近接が機能しているのでQ3へ進みます。Noの場合はResult A：近接の欠如です。見出しと本文を近づけ、段落間の余白を1.5倍以上に広げてください。
Q3：バラバラに見える、落ち着きがないと言われていますか？
Yesの場合はQ4へ進み、Noの場合はQ5へ進みます。
Q4：すべての要素が1本の基準線に揃っていますか？
Yesの場合は整列が機能しているのでQ5へ進みます。Noの場合はResult B：整列の欠如です。左端または中央に基準線を1本設定し、すべての要素を揃えてください。
Q5：ページごと・スライドごとに見出しやボタンの見た目が変わっていますか？
Yesの場合はResult C：反復の欠如です。見出し・本文・ボタンの見た目ルールを1セット決め、全ページに統一適用してください。Noの場合はQ6へ進みます。
Q6：重要な情報と補足情報が同じ大きさ・色・太さで並んでいますか？
Yesの場合はResult D：対比の欠如です。最重要情報の文字サイズを本文の1.5倍以上にするか、差し色を加えてください。Noの場合、4原則は機能しています。修正依頼の原因はコンテンツの内容か、ターゲット設定の認識ズレの可能性があります。
CHECK
▶ 今すぐやること：直近の修正依頼を1件選び、この診断フローに当てはめて原因となる原則を特定する（3分）
Q：複数のResultに該当する場合はどの順で修正すべきですか？
A：近接（A）→整列（B）→反復（C）→対比（D）の順で修正してください。情報のグループ化が先に機能していないと、基準線を引いても効果が薄れるためです。
Q：診断フローでどのResultにも該当しなかった場合は何が原因ですか？
A：4原則が機能しているにもかかわらず「なんとなく違う」と言われる場合、コンテンツの内容（情報量・文章の質）またはターゲット認識のズレが原因のことが多いです。4原則はレイアウトの問題を解決しますが、情報の質そのものは解決しません。クライアントと「誰に・何を伝えるか」を再確認してください。
デザイン4原則は5つの仕組みで定着
ハック1：近接チェックで余白の役割が3分で明確になる
【対象】：レイアウトのたびに余白の取り方で迷うフリーランス
【手順】：制作中のデザインをグレースケール表示にします（30秒）。次に見出しと直下の本文の間隔、および前段落との間隔を定規または数値で計測します（1分）。前段落との間隔が「見出し-本文間隔の1.5倍以上」になっているかを確認し、なっていなければ前段落との余白を拡大して保存します（1分30秒）。
【コツと理由】：実務では「余白の比率を決める」ことで判断が速くなります。見出し-本文間を8px、段落間を16px以上に固定すれば、毎回迷わずグループ化が機能します。近接の原則は「差の存在」ではなく「差の明確さ」で機能するため、比率を決めることで感覚に頼らない判断が可能になります。
【注意点】：余白をひたすら増やす必要はありません。段落間の余白が大きすぎると、今度はグループ同士がバラバラに見えます。見出し-本文間の2倍以上を超えたら、余白ではなく区切り線（ボーダー）での分離を検討してください。
ハック2：整列の基準線を1本に絞り修正時間を短縮する
【対象】：修正するたびに要素の位置がずれて調整に時間がかかるフリーランス
【手順】：制作開始時にデザインツールでガイドライン（基準線）を左端に1本引きます（1分）。見出し・本文・画像・ボタンのすべての左端をそのガイドラインに揃えます（3〜5分）。意図的に中央揃えにする要素（例：メインビジュアルの見出しのみ）を除き、基準線からの例外がないか確認して保存します（2分）。
【コツと理由】：「ガイドラインを先に引き、例外を意図的に決める」方が修正回数を減らせます。基準線なしに揃えると、修正のたびに目視で調整する必要が生じ、0.5〜2pxのずれが積み重なります。ガイドラインがあれば要素をスナップさせるだけで揃うため、修正時間の削減が見込めます。Figmaのレイアウトグリッド機能を活用すれば、この作業をさらに効率化できます。
【注意点】：基準線を増やしすぎることは避けてください。2本以上の基準線を使う場合、どちらに揃えるかで毎回判断が必要になり、整列の自動化が崩れます。基本は1本、複雑な2カラムレイアウトでも左右それぞれ1本ずつの計2本が上限です。
ハック3：反復ルールを1枚のスタイルメモで一貫性を確保する
【対象】：複数ページの資料やサイトで、後半になるほど見出しやボタンの見た目がばらつくフリーランス
【手順】：制作開始前に「スタイルメモ」を1枚作成し、見出しH1（サイズ・色・太さ）、本文（サイズ・行間・色）、ボタン（サイズ・角丸・色）、余白（標準・大・小の3段階）を書き込みます（5分）。2ページ目以降の制作時に、スタイルメモを横に開いて照合しながら作業します（毎ページ1分の確認）。納品前チェックで「スタイルメモと異なる要素がないか」を走査し、差異を修正して保存します（5分）。
【コツと理由】：短納期案件では1枚の手書きメモで十分です。Figmaのコンポーネント機能やPowerPointのスライドマスターを使えばさらに効率化できますが、まずスタイルメモを持つことで、ページ数が増えても見た目の一貫性を維持しやすくなります。反復の原則は「ルールの存在」が前提であり、ルールがなければどれだけ意識しても統一は偶然に頼ることになります。
【注意点】：スタイルメモを作ったあとに追加要素が必要になっても、既存のルールを崩さないようにしてください。新しいボタンの色が必要なら、既存のアクセントカラーを使い回す方向で検討します。ルールを追加するたびに例外が増え、反復が崩れます。
ハック4：白黒確認で対比の強度を判定する
【対象】：重要情報を強調したつもりが、クライアントに「目立っていない」と言われるフリーランス
【手順】：デザインをグレースケールまたはモノクロ表示に切り替えます（15秒）。最重要情報が「最も暗い（または最も大きい）要素」として視認できるかを確認します（30秒）。視認できない場合は、最重要情報の文字サイズを本文比1.5倍以上に変更するか、黒に近い濃色を加え、再度グレースケールで確認して保存します（3分）。
【コツと理由】：「色で目立たせる」より「サイズと太さで差をつける」方が、色覚特性を持つ読者やモノクロ印刷でも機能します。Web Content Accessibility Guidelines（WCAG）では通常テキストのコントラスト比を4.5:1以上と定めており、色だけに頼った強調はこの基準を下回るリスクがあります（WebAIM：コントラストチェッカー）。グレースケール確認は、色なしでも対比が機能しているかを即座に検証する最も手軽な手法です。
【注意点】：対比をつけすぎると、今度はすべてが主張する状態になります。最重要情報は1画面あたり1〜2箇所に限定し、それ以外は本文レベルに統一してください。「すべてを目立たせる」は「何も目立たない」と同義です。
ハック5：クライアント説明に4原則の用語を使い修正回数を減らす
【対象】：修正意図を感覚で説明してしまい、クライアントとのやりとりが長引くフリーランス
【手順】：修正提案時に「近接」「整列」「反復」「対比」のどの原則に基づく変更かを1行で記載します（1分）。変更前・変更後のスクリーンショットを並べ、「この間隔を広げたのは近接の原則で、グループを分離するためです」と書き添えます（2分）。クライアントが同意または修正コメントを返したら、その内容を次回の「スタイルメモ」に追記し、同じ議論を繰り返さないようにします（1分）。
【コツと理由】：「この変更は4原則のXX原則に基づいており、Yという効果があります」という説明に切り替えることで、クライアントの修正判断が「好みの問題」から「目的との整合性の問題」に変わります。原則名を使った説明に切り替えることで、クライアントも「なんとなく違う」の原因が特定され、承認判断が速くなる傾向があります。提案書の書き方で学んだ「課題→解決策→期待効果」の構成を、デザイン説明にも応用できます。
【注意点】：専門用語を使いすぎると、クライアントが萎縮する場合があります。「近接の原則」と伝えたあとに「つまり、関連する情報を近くまとめることで読みやすくなります」と一言補足する習慣をつけてください。専門語は根拠として使い、説明は平易な言葉で補います。
CHECK
▶ 今すぐやること：次の修正提案メールに「この変更は○○の原則に基づいており、○○という効果があります」を1行追記して送信する（3分）
Q：5つのハックをすべて同時に始める必要がありますか？
A：ハック2（整列の基準線）とハック3（スタイルメモ）を先に導入してください。この2つは制作の最初に設定するため、後から導入するよりはるかに効果が出やすいです。ハック1（近接チェック）とハック4（白黒確認）は納品前の習慣として追加し、ハック5（クライアント説明）は慣れてきたら取り入れる順序が実務に合っています。
Q：デザインツールを持っていなくてもハックは使えますか？
A：すべて使えます。PowerPointやKeynoteでもガイドラインは設定できます。スタイルメモは紙またはメモアプリで十分です。白黒確認はスクリーンショットをグレースケール変換するだけで実行できます。
デザイン4原則を実務に組み込む：センスからルールへの移行
| 状況 | 次の一歩 | 所要時間 |
| 4原則の意味を忘れた | 「この記事の結論」セクションを再読する | 2分 |
| 制作中に迷いが出た | 7項目チェックリストを実行する | 3分 |
| 修正依頼の原因がわからない | 診断フローに当てはめる | 3分 |
| 次の案件から習慣化したい | ハック2（基準線）とハック3（スタイルメモ）を設定する | 10分 |
デザイン4原則に関するよくある質問
Q：デザイン4原則はWebデザイン以外でも使えますか？
A：使えます。提案資料（PowerPoint・Keynote）・チラシ・バナー・SNS投稿画像・ポートフォリオなど、視覚情報を整理するすべての制作物に適用できます（非デザイナーも必見！4大原則を知るだけで見違えるデザインに）。ツールや媒体を問わず機能する点が4原則の強みです。
Q：4原則のどれか1つだけ使っても効果がありますか？
A：1つだけでも改善効果はありますが、複数を組み合わせるとより高い効果が得られます。近接だけ適用してもグループ化は機能しますが、整列が崩れていると全体に落ち着きがなく見えます。近接と整列のセットから始めてください。
Q：デザインの4原則はどの書籍で学べますか？
A：『ノンデザイナーズ・デザインブック』（Robin Williams著）が代表的な参考書として紹介されています（skillhub：4原則と書籍の関連解説）。4原則の考え方が体系的にまとまっており、初心者から中級者まで実務の参考として使いやすい構成です。
【出典・参照元】
e-Words：デザインの4原則 – 4原則の定義・CRAPの英語表記説明
非デザイナーも必見！4大原則を知るだけで見違えるデザインに – 非デザイナー向け応用解説
WebAIM：コントラストチェッカー – WCAGコントラスト比の確認ツール
skillhub：4原則と書籍の関連解説 – ノンデザイナーズ・デザインブックとの関連説明