デザインの基本レイアウトは「近接・整列・反復・対比」の4原則で構成され、この4つを守るだけで完成度が明確に変わります。本記事では4原則の意味から媒体別の実務手順、クライアント説明まで一貫して解説します。
▶ 3日で初案件PR
この記事でわかること
近接・整列・反復・対比の4原則を正しく理解できます。情報整理から余白設計までの4ステップで制作の手戻りを削減できます。クライアントの抽象的な修正指示を4原則で即座に言語化して返答できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
デザインの基本レイアウトで押さえるべきは、近接・整列・反復・対比の4原則です。この4原則は「なんとなく並べる」状態から「意図を持って配置する」状態への転換点であり、フリーランスがクライアントワークで品質を担保する最短の基準になります。4原則を理解したうえで、情報整理・優先順位付け・配置・余白調整の4ステップで制作を進めると、修正回数が減り、納期短縮にも直結します。
今日やるべき1つ
手元にある制作物（または過去の成果物）を開き、「近接・整列・反復・対比のどれが崩れているか」を1原則ずつ確認してください（所要時間10分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 4原則の意味を理解したい | デザイン基本レイアウトは4原則で整理 | 5分 |
| 制作手順を確認したい | デザインレイアウトは4ステップで設計 | 5分 |
| 自分の弱点を診断したい | デザインレイアウトの崩れを3分で診断 | 3分 |
| 媒体別の型を知りたい | デザインレイアウトは媒体別に2パターン | 5分 |
| 実務ハックを使いたい | デザインレイアウトは5つの仕組みで管理 | 7分 |
| クライアント説明に困っている | デザインレイアウトの説明は4原則で完結 | 4分 |
デザイン基本レイアウトは4原則で整理
近接は情報のグループを明確にする原則
関連性の高い情報を近くに配置し、関連性の低い情報を離すことで、読者は意識せずにグループを認識できます。たとえば商品名・価格・購入ボタンが画面上でバラバラに配置されていると、読者は「どれがどれに対応するのか」を読み解くために余分な認知コストをかけます。近接が崩れている状態はデザインの見た目ではなく読者の理解速度に直接影響するため、整理の第一歩として近接を意識してください。近接を整えるだけで、情報の読み取りやすさが体感できるレベルで変わります（デザインレイアウトの考え方|goworkship）。
整列は全体の秩序と信頼感をつくる
要素の端や中心を一定の基準線に沿わせることで、ページ全体に秩序が生まれます。整列が崩れた状態は「雑然としている」「素人感がある」という印象につながります。読者が各要素の位置を無意識に比較するため、わずかなズレでも目立つ場所では信頼感に影響します。整列はグリッドや基準線を事前に設定することで機械的に担保できるため、感覚に頼らず設定を先に行う習慣を持ってください。Webデザイン配色は3色70-25-5%で決まるの記事でも解説しているように、視覚的な秩序はデザイン全体の質に直結します。
反復は統一感と読みやすさを生む
色・書体・余白・線などのルールを繰り返し使うことで、デザイン全体に統一感が生まれます。反復が崩れると「1つひとつの要素は悪くないのに、全体がバラバラに見える」という状態になります。これはフリーランスが修正を繰り返すうちに発生しやすい問題で、修正のたびに新しいルールを持ち込むことが原因です。反復のルールはデザイン開始前にスタイルガイドとして明文化しておくと、複数ページにわたる案件でも崩れにくくなります。
対比は情報の優先順位を視覚で示す
大きさ・色・太さ・余白などの差を意図的につけることで、読者の視線を「見てほしい情報」に誘導できます。対比が弱いデザインではすべての要素が同じ重要度に見えるため、読者はどこから読めばよいかを判断できません。「何を一番目立たせるか」を最初に決め、その要素に対してほかの要素との差を明確につけることが対比の基本です。強調色を2色以上使うと対比の効果が分散するため、強調色は原則1色に絞ってください。見やすい配色は3色・比率70:25:5で決まるの考え方と合わせて実践すると、対比の設計がより明確になります。
CHECK
▶ 今すぐやること: 手元の制作物を開き、4原則のどれが崩れているかを原則ごとに1分で確認してください（所要時間4分）
Q: 4原則はどの順番で意識すればいいですか？
A： まず近接でグループを整理し、次に整列で基準線に揃え、反復でルールを統一し、最後に対比で優先順位をつける順番が実務では進めやすいです。
Q： 4原則は紙媒体だけに適用される考え方ですか？
A： Web・バナー・動画サムネイル・プレゼン資料など、視覚的に情報を伝えるすべての媒体に適用できます。媒体が変わっても原則の考え方は同じです。
デザインレイアウトは4ステップで設計
ステップ1は情報整理と不要要素の削除
クライアントから受け取った素材・テキスト・画像を「必須」「補足」「削除候補」の3分類に振り分けます。削除候補に分類した要素は、レイアウトに入れなくて構いません。情報を詰め込むほどデザインは崩れやすくなるため、「入れないことを決める」工程が制作品質を左右します。この段階で削除の根拠を記録しておくと、クライアントへの説明に使えます。
ステップ2は優先順位付けと主役決定
整理した情報を「主役・脇役・補助情報」の3段階に分けます。主役は1つに絞るのが原則です。複数の要素を同じ強度で目立たせようとすると対比が弱まり、結果的にどれも目立たない状態になります。主役が決まったら、残りの要素はすべて主役を引き立てる役割として配置を考えます。迷ったときは「このデザインで読者に最初に伝えることは何か」を1文で答えられるか確認してください。
ステップ3はグリッド設置と要素の配置
グリッドや基準線を先に設定してから要素を配置します。グリッドなしで感覚的に配置すると、後から整列の崩れを修正する工程が発生し、制作時間が増えます。一般的なレイアウトでは、ページ幅を12等分や6等分のグリッドに分割する方法が使いやすく、要素の左端・右端・中央を基準線に合わせることで整列を機械的に担保できます。カラーパレットおしゃれ配色の記事で触れているように、構造的な設計はビジュアルの完成度を大きく左右します。
ステップ4は余白の設計と視線の確認
余白は最後に埋めるスペースではなく、最初から設計する要素です。余白を後から調整しようとすると、要素の配置を動かす必要が生じ、ステップ3の整列が崩れます。余白の設計では、要素間の距離とページ外周のマージンを先に決めてください。設計が終わったら、縮小表示とスマートフォン表示の2パターンで第一印象を確認し、主役が最初に目に入るかを検証してください。
CHECK
▶ 今すぐやること: 次の制作物の開始時に、情報整理・優先順位付け・配置・余白調整の4ステップをメモに書き出してから着手してください（所要時間5分）
Q: グリッドは必ずソフトの機能を使う必要がありますか？
A： IllustratorやFigmaのガイド機能が使いやすいですが、手書きの設計メモでもグリッドの考え方は適用できます。ソフト機能を使うと修正時の再現性が高まります。
Q： 情報整理のステップはクライアントと一緒にやるべきですか？
A： 制作開始前のヒアリングでクライアントに「最も伝えたいこと1つ」を確認しておくと、ステップ1・2の判断が速くなります。ヒアリングなしで進めると修正が増えやすいです。
デザインレイアウトの崩れを3分で診断
Q1: 制作物を縮小表示したとき、最初に目に入る要素は「最も伝えたい情報」ですか？
Yesの場合、Q2へ進んでください。Noの場合、対比が崩れています。主役要素の大きさ・色・余白を増やし、ほかの要素を控えめにしてください（Result A）。
Q2: ページ内の文字や画像の端を定規で測ったとき、基準線がそろっていますか？
Yesの場合、Q3へ進んでください。Noの場合、整列が崩れています。グリッドを設定し、すべての要素の端を基準線に合わせてください（Result B）。
Q3: 同じ役割の要素（見出し同士、本文同士など）は、フォント・色・サイズが一致していますか？
Yesの場合、Q4へ進んでください。Noの場合、反復が崩れています。役割ごとにスタイルを統一し、修正のたびに新しいルールを追加しないようにしてください（Result C）。
Q4: 関連する情報（商品名と価格、見出しと本文など）は近くにまとまっていますか？
Yesの場合、4原則はおおむね整っています。次は視線の始点から終点への流れを確認してください（Result D）。Noの場合、近接が崩れています。関連要素を近づけ、無関係な要素は距離を取ってください（Result E）。
Result A: 対比強化が優先課題。 主役要素に対してほかの要素を意図的に小さく・薄くする方向で調整してください。強調色は1色に絞ることが有効です（所要時間15分）。
Result B: 整列修正が優先課題。 既存の要素を残したままグリッドを後から設定し、端を揃えてください。左揃えが最も調整しやすいです（所要時間20分）。
Result C: 反復ルールの明文化が優先課題。 ファイル内に「スタイルガイド」として色・フォント・余白のルールを書き出し、以降の修正はそのルールに従ってください（所要時間15分）。
Result D: 視線誘導の確認が次のステップ。 Z型（横読み主体）またはF型（縦スキャン主体）を媒体に合わせて選び、主役が視線の始点に来ているか確認してください（所要時間10分）。
Result E: 近接の整理が優先課題。 関連する情報をグループとして近づけ、グループ間には意図的に距離を取ってください。余白を「グループの境界線」として使う意識が効果的です（所要時間15分）。
CHECK
▶ 今すぐやること: 手元の制作物でQ1から順番に確認し、最初にNoになった質問の結果（Result A〜E）を今週の修正テーマにしてください（所要時間3分）
Q: 4つすべての質問がYesでも、デザインがまとまらない場合はありますか？
A： あります。4原則が整っていても、情報量が多すぎる・主役が複数存在するケースでは全体がまとまりにくいです。情報の削除と主役の一本化を優先してください。
Q： 診断は制作中にやるべきですか？制作後にやるべきですか？
A： 両方のタイミングで有効です。制作中は「どの原則で迷っているか」を特定する目的で、制作後は提出前の最終確認として使ってください。
デザインの仕事で単価を上げたい方へ
Webデザインの学び方をLINEで受け取る
LINEで無料で届くもの
- 20本Webデザインの無料レッスン
- 全工程Photoshopの解説動画
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
デザインレイアウトは媒体別に2パターン
横型媒体はZ型視線とグリッド分割で設計
A4チラシ・バナー・プレゼン資料など、横方向に情報が広がる媒体では、読者の視線はZ型（左上→右上→左下→右下）に動く傾向があります。主役は左上に配置し、最終行動（購入・問い合わせ・申し込みなど）は右下に誘導する設計が基本です。グリッドは2カラム・3カラムの分割が実務で使いやすく、カラム間の余白を統一することで整列を担保できます。バナーでは特に、縮小表示されたときに主役の文字が読めるかを確認してください。バナー配色は3色ルールで解決で解説している配色原則と合わせると、横型媒体の完成度がさらに高まります。
縦型媒体はF型視線とセクション分割で設計
WebページやLPなど、縦スクロールが主体の媒体では、読者の視線はF型（上端を横に流してから左端を縦にスキャン）に動く傾向があります。左端と上部に重要な情報を配置することが有効です。LPでは「ファーストビュー→問題提起→解決策→証拠→行動喚起」のセクション順が定番の構造です。各セクションの余白を統一し、反復のルールを適用することで、長い縦スクロールでも統一感が保てます。
営業資料とポートフォリオは情報密度で設計を変える
営業資料は「読まれる資料」ではなく「説明しながら見せる資料」として設計します。1スライドに伝える情報は1つに絞り、文字量を極力削って視覚要素で補足する構成が有効です。フリーランスのポートフォリオでは、作品の品質だけでなく「なぜそのレイアウトにしたか」の意図が伝わる構成にすると、クライアントへの説明力を示せます。作品ページは「課題→提案→結果」の3構成が情報の流れとして分かりやすいです。プレゼン資料フォントおすすめ7選のような細部の設計も合わせて整えると、資料の完成度がさらに向上します。
CHECK
▶ 今すぐやること: 次に受ける案件の媒体（横型か縦型か）を確認し、視線誘導の型（Z型かF型か）をあらかじめ決めてから制作を始めてください（所要時間2分）
Q: 視線誘導の型は絶対に守る必要がありますか？
A： 絶対的なルールではありません。媒体・情報量・読者の閲覧習慣によって視線の動きは変わります。Z型やF型は「読者が自然に視線を動かす傾向」として参考にし、実際の制作物で縮小確認や第三者確認を組み合わせてください。
Q： スマートフォン表示とPC表示で視線誘導は変わりますか？
A： 変わります。スマートフォンは縦型の単一カラム表示が主体のため、Z型よりF型の視線に近くなります。PC向けに設計したレイアウトはスマートフォン表示で必ず確認してください。
デザインレイアウトは5つの仕組みで管理
【対象】: クライアントからの修正指示が多く、制作の方向性に毎回迷うフリーランス
【手順】: 制作開始前に「目的・ターゲット・媒体・最終行動・避けたい表現」の5項目を1枚のシートに記入します（所要時間10分）。次にクライアントと共有し、認識のズレを制作前に解消します（所要時間15分）。このシートをレイアウト設計の判断基準として制作中に参照し続けます（制作全体を通じて使用）。
【コツと理由】: 制作前ブリーフシートで方向を固めると、修正回数を減らせます。制作後の修正は単なる手直しではなく、レイアウトの根拠が変わることを意味するため、修正のたびに整合性の確認が必要になります。制作前に目的と最終行動を確定しておくと、デザイン上の判断を「ブリーフシートに合っているか」という基準で即断できるようになります。
【注意点】: ブリーフシートは5項目の回答が1行ずつあれば十分です。詳細なブリーフ書類を作ると確認コストが増え、制作の開始が遅くなります。
ハック2: 余白を先に設計して整列崩れをゼロにする
【対象】: 余白の取り方が分からず、要素を配置するたびに全体が崩れるフリーランス
【手順】: ファイルを開いたら、最初にページ外周のマージン（上下左右の余白）とカラム間の余白を数値で設定します（所要時間3分）。次にグリッドや基準線を設置し、要素を配置する前に「余白の枠」を確定します（所要時間5分）。その後、設定した余白の内側にのみ要素を配置し、後から余白を調整しません（制作全体を通じて維持）。
【コツと理由】: 余白を先に固定すると、要素の配置位置が自動的に制約され、整列が崩れにくくなります。余白は「スペースの残り」ではなく「情報を区切る設計要素」として機能するため、最初に確定することが品質担保の前提です。
【注意点】: 余白の数値に絶対的な正解はありません。媒体・情報量・フォントサイズによって適切な余白は変わります。目安として、ページ外周のマージンは本文文字サイズの3〜5倍が実務で扱いやすい範囲です。
ハック3: フォント2種類ルールで文字組みを最速化
【対象】: フォント選びに時間をかけすぎて制作が止まるフリーランス
【手順】: 案件ごとに「見出し用フォント1種類」と「本文用フォント1種類」だけを選びます（所要時間5分）。見出しと本文のウェイト（太さ）差をつけ、対比を意図的に作ります（所要時間2分）。文字サイズは「見出し：本文＝2〜3倍」を目安に設定し、注釈は本文の0.7〜0.8倍に収めます（所要時間2分）。
【コツと理由】: フォントは2種類に絞ることで完成度が安定します。フォントの種類が増えると反復のルールが崩れ、統一感が失われます。フォント2種類・ウェイト2段階・サイズ3段階（見出し・本文・注釈）の組み合わせで情報の階層を表現できるため、フォント選びよりも「大きさと太さの差」を設計することが優先事項です（ひと目でわかるデザインの基本|mojiru.com）。日本語フォントおすすめ15選も参考にすると、フォント選定の判断がスムーズになります。
【注意点】: 見出しと本文を同じウェイトにしないようにしてください。ウェイト差がないと対比が弱まり、全体がのっぺりした印象になります。欧文フォントを1種類加える場合は例外として3種類になりますが、日本語フォントは2種類に収めてください。
ハック4: 縮小確認で初稿提出前の品質を3分で検証
【対象】: 提出前に「これで大丈夫か」の確認方法が分からず、修正が後から続くフリーランス
【手順】: 初稿が完成したら、デザインを50%以下に縮小表示します（所要時間30秒）。縮小表示で「最初に目に入った要素」が主役かどうかを確認します（所要時間1分）。次にモノクロ表示に切り替え、色情報がない状態でも情報の優先順位が伝わるかを確認します（所要時間1分）。スマートフォン表示（またはスマートフォンで写真撮影）で最終確認します（所要時間1分）。
【コツと理由】: 縮小表示は視覚情報を単純化し、対比の強さを客観的に評価する最も手軽な方法です。制作中は画面に近づきすぎているため、通常サイズでの見直しだけでは全体のバランスを正確に評価できません。モノクロ確認は色に頼った対比の弱点を発見するために有効で、色なしでも情報の優先順位が読み取れるレイアウトは色付きでも強度が高いです。
【注意点】: 縮小確認を色の最終確認に使わないようにしてください。縮小確認の目的は「第一印象と情報の優先順位の検証」であり、色の精度確認は実際の出力サイズ・実際の画面で行ってください。
ハック5: テンプレート化で頻出案件の制作時間を短縮
【対象】: 毎回同じ種類の案件（バナー・チラシ・営業資料など）を新規から始めているフリーランス
【手順】: 過去に完成した案件から「品質が高く、修正が少なかった制作物」を1件選びます（所要時間5分）。その制作物のグリッド・マージン・フォント・カラーをスタイルガイドとして別ファイルにまとめます（所要時間20分）。次の同種案件ではこのテンプレートを複製して開始し、テキストと画像だけを差し替えます（所要時間5分で開始可能）。
【コツと理由】: テンプレートを基にして調整する方が品質が安定します。グリッドとスタイルが固定されることで、整列・反復の原則が自動的に維持されるからです。制作時間の短縮だけでなく、「なぜこのグリッドか」という根拠が明確なテンプレートは、クライアントへの説明資料としても機能します。作業効率上げる方法の記事で解説しているテンプレート化の考え方も、合わせて参考にしてください。
【注意点】: テンプレートを流用しすぎて、クライアントの媒体・目的・ターゲットに合わない設計を押しつけないようにしてください。テンプレートはあくまで「グリッドとスタイルの基盤」であり、情報整理と優先順位付けのステップは毎回必ず行ってください。
CHECK
▶ 今すぐやること: 過去の案件から「品質が高かった制作物」を1件開き、グリッドとフォント設定をメモとして保存してください（所要時間10分）
Q: テンプレートを複数用意する場合、何種類が管理しやすいですか？
A： 媒体別（バナー・A4チラシ・プレゼン・Webバナー）で4〜6種類が実務で管理しやすい範囲です。種類を増やしすぎると更新の手間が増えるため、受注頻度の高い媒体から順番に整備してください。
デザインレイアウトの説明は4原則で完結
4原則を使ったクライアント説明の実例
クライアントへの説明は「原則名＋その目的＋なぜそう配置したか」の3要素で構成すると、根拠のある印象を与えられます。たとえば「商品名と価格が近いのは、関連情報をまとめる近接の原則によるもので、読者が情報を探す手間を省く設計です」という説明は、デザインの意図を端的に伝えられます。フリーランスとしてクライアントから信頼を得るには、「感覚でなく根拠に基づいて設計している」ことを示すことが有効です（現役グラフィックデザイナーによるレイアウト解説|lululog.com）。
レイアウトの基本を学んで以来、修正指示が来たときにどの原則が崩れているかを自分でも判断できるようになり、説明が楽になったというデザイナーからの報告があります（現役グラフィックデザイナーによるレイアウト解説|lululog.com）。
修正指示別の対応フレーズ
「なんか違う」という指示は、どの原則が崩れているかをクライアントが言語化できていない状態です。この場合、「現在のデザインでは〇〇の原則を優先していますが、△△の原則を強調する方向にしましょうか？」と選択肢を提示すると、クライアントが言語化しやすくなります。「もっと派手に」という指示は対比の強化、「スッキリさせて」という指示は情報削除と余白の拡大で対応できます。これらを4原則の言葉で返すと、「デザイナーと話している」という信頼感につながります。
デザインの理由を説明できるようになったら、クライアントとの打ち合わせが格段にスムーズになったという声もあります（レイアウトの基本を学べるおすすめ本|mrzw-design.com）。クライアントへの提案書や修正対応で詰まったときは、提案書の書き方と構成は7項目で完成の記事も合わせて参照してください。
CHECK
▶ 今すぐやること: 最後に受けた修正指示を1件思い出し、「どの4原則に対応する修正だったか」を当てはめて確認してください（所要時間5分）
Q: クライアントが4原則を知らない場合、専門用語を使っても伝わりますか？
A： 専門用語そのものを使わず、「関連する情報を近くにまとめています」「要素の端を揃えることで整理された印象を作っています」のように原則の効果を日本語で説明する方が伝わりやすいです。
Q： 修正指示に納得できない場合はどうすればいいですか？
A： 修正案を実施する前に「この修正により〇〇の効果が変わりますが、目的の△△は引き続き達成できますか？」と確認してください。根拠を示したうえでクライアントに判断を委ねる形が、関係を損なわずに意見を伝えやすいです。
デザイン基本レイアウトを実践する：4原則で品質を安定させる
4原則は難しい技術ではなく、「どの情報をどう見せるか」を決める判断基準です。この基準を制作の入口に持ってくることで、感覚頼りの制作から抜け出し、根拠のあるデザインワークが実現します。次の案件から、まず制作前ブリーフシートで目的と主役を決めることを1つ試してください。
| 状況 | 次の一歩 | 所要時間 |
| 4原則を初めて学んだ | 手元の制作物で4原則の崩れを1つ特定する | 10分 |
| 修正が多い案件を抱えている | ブリーフシートを作りクライアントと共有する | 25分 |
| 制作時間を短縮したい | 過去の優良案件からテンプレートを1件作成する | 30分 |
| クライアント説明に困っている | 修正指示を4原則に当てはめる練習を1件やる | 5分 |
デザイン基本レイアウトに関するよくある質問
Q: 4原則はどの媒体でも同じように使えますか？
A： 4原則の考え方はすべての媒体に共通して使えます。ただし配置の優先度や余白のとり方は媒体によって変わるため、Web・紙・バナーそれぞれで適用の仕方を調整してください。
Q： デザインが「素人っぽく見える」原因は何ですか？
A： 最も多い原因は整列の崩れと対比の弱さです。要素の端が揃っていない、または主役と脇役の差が小さいと「なんとなく見づらい」印象になります。整列を確認してグリッドを設定し、主役要素の大きさ・色・余白を他より明確に差をつけることで改善できます。
Q： 参考デザインを見つけても制作に応用できない場合は何が原因ですか？
A： 参考デザインを「全体のイメージ」で見ているためです。参考デザインを分析するときは「色・余白・文字組み・構図」の4要素に分解し、それぞれが4原則のどれを実現しているかを確認してください。分解すると応用できる部分が具体的に見えてきます。
【出典・参照元】
レイアウトデザインのコツ大全|japan-design.jp