デザインの4原則とレイアウト：近接・整列・反復・コントラスト｜デザイン・クリエイティブの基本 第2回

KOUZAデザイン・クリエイティブの基本

第2回／全8回

講師：田中 磨生（株式会社Abin 代表取締役）

この講座の目次を見る

1. 第1回マーケティングにおけるデザインの役割：「伝わる・選ばれる・使える」の3つの仕事
2. 第2回デザインの4原則とレイアウト：近接・整列・反復・コントラスト
3. 第3回色の基本：配色・コントラスト・ブランドカラーとアクセシビリティ会員
4. 第4回文字とタイポグラフィ：書体・サイズ・行間で「読まれる文字」にする会員
5. 第5回バナー・広告クリエイティブの作り方：訴求軸・構成・媒体ごとの規定会員
6. 第6回Web・LPのデザイン：情報設計・視線の流れ・CTA・スマホ対応会員
7. 第7回生成AIとデザインツールの使い分け：Canva・Figma・Adobe Firefly会員
8. 第8回デザインの発注とディレクション：ブリーフ・フィードバック・改善サイクル（総まとめ）会員

この回で分かること：①資料やバナーが「なんとなく素人っぽく」見える原因を説明する、近接・整列・反復・コントラストの4原則、②それぞれの原則を、名刺・告知・営業資料・事例紹介にどう当てはめるか、③余白とグリッド（升目）を使って、レイアウトを安定させる方法。前回は、デザインを「伝わる・選ばれる・使える」の3つの仕事で見る物差しを学びました。今回はその「伝わる」を支える、最も基本の技術です。

「素人っぽさ」の正体は、4つの原則で説明できる

デザインを学んだことのない人が作った資料やチラシを見て、「どこが悪いとは言えないけれど、なんとなく素人っぽい」と感じたことはないでしょうか。逆に、プロが作ったものは、特別な装飾がなくても整って見えます。この差は、センスや才能だけで生まれているわけではありません。

アメリカのデザイナー、ロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』は、デザインを学んでいない人に向けて、レイアウトの基本を4つの原則にまとめました。それが図1の 近接・整列・反復・コントラスト です。日本語版の版元であるマイナビ出版は、この4つをデザインの基本原則として最初に示したのがこの本だと紹介しています。

4原則の良いところは、どれも「やるか、やらないか」を自分で確かめられることです。「おしゃれにしよう」という目標は人によって答えが違いますが、「関係のある情報は近くにあるか」「要素の端はそろっているか」は、誰が見ても判定できます。この回では、4つの原則を一つずつ、Before／Afterの図で確かめていきます。

原則1　近接：関係のあるものを近づける

近接 は、関係のある情報どうしを近くに置いて一つのまとまりにし、関係のない情報とは距離をとる原則です。人は、近くにあるものを一つのグループとして見る傾向があります（心理学では「近接の要因」と呼ばれます）。この性質を使うと、見る人は文章を読む前に、まとまりの数と区切りを一瞬でつかめます。

図2の左の名刺は、会社名・部署・氏名・電話・メール・住所・URLの7つの情報が、すべて同じ間隔で並んでいます。一つひとつは読めますが、全体としては「7つのばらばらな行」にしか見えません。右の名刺は、同じ情報を「人（氏名と部署）」「会社（会社名と住所）」「連絡先（電話・メール・URL）」の3つのまとまりに分け、まとまりの中は詰め、まとまりの間は大きく空けています。それだけで、見る人は「3つの塊がある」と瞬時に理解できます。

近接を使うときのコツは、次の3つです。

• まとまりの中の間隔 ＜ まとまりどうしの間隔 にする。この差がはっきりしているほど、区切りが伝わります。
• 1つのまとまりには1つの意味 を持たせる。料金と導入事例が同じ塊に入っていると、見る人は混乱します。
• 見出しは、下の本文に近づける。見出しと本文の間が、上の段落との間と同じくらい空いていると、見出しがどちらの段落のものか分からなくなります。

最後の点は、資料やWebページで非常によく起きる失敗です。見出しの上の余白を、見出しの下の余白より大きくとるだけで、見出しが「下の段落の名前」であることがはっきりします。

原則2　整列：見えない線にそろえる

整列 は、ページ上のすべての要素を、何かの線にそろえて置く原則です。どの要素も「なんとなくこのあたり」に置くのではなく、ほかの要素の端や中心と同じ線の上に置きます。そろえる線は実際には描かれていませんが、見る人の目には「見えない線」として感じられ、それが「きちんとしている」という印象を生みます。

図3の左の告知では、タイトルは中央、日時は少し左、説明文は右、ボタンはどこにもそろっていない位置にあります。一つひとつは間違っていなくても、全体として落ち着かず、雑な印象を与えます。右は、すべての要素の左端を1本の線（点線）にそろえただけです。情報も大きさも同じなのに、ずっと整って見えるはずです。

整列で迷ったら、次のように考えます。

• 基本は左揃え。日本語の横書きは左から読むので、行の始まりがそろっている左揃えが最も読みやすく、失敗しにくい揃え方です。
• 中央揃えは、短い要素に限って使う。招待状や表紙のタイトルなど、数行の短い文には中央揃えが合います。長い本文を中央揃えにすると、行の始まりが毎行変わるため読みにくくなります。
• 1つのデザインの中で揃え方を混ぜない。左揃えと中央揃えが混ざると、それだけで整列が崩れて見えます。混ぜるなら、ブロック単位で意図的に分けます。

PowerPointやCanvaには、選んだ要素の端をそろえる「整列」の機能があります。目で見て合わせるのではなく、機能を使ってぴったりそろえる習慣をつけるだけで、仕上がりは大きく変わります。

原則3　反復：ルールを繰り返す

反復 は、色・書体・見出しの形・配置などのデザインのルールを、ページ全体、あるいは複数のページにわたって繰り返す原則です。繰り返されるルールは、見る人にとって「この資料の読み方」になります。2ページ目で見出しの位置と色を覚えた人は、3ページ目以降は迷わず見出しを見つけられます。

図4の左の営業資料は、ページごとに上の帯の色、見出しの書体、見出しの揃え方が変わっています。別々の人が作ったページを寄せ集めたように見え、内容の違いより見た目の違いに目が向いてしまいます。右は、帯の色・見出しの位置・書体をすべてのページで同じにしています。見た目のルールが一定なので、見る人はページごとの内容の違いだけに集中できます。

反復は、1枚のデザインの中でも働きます。たとえば、3つの機能を紹介するなら、3つとも「アイコン→機能名→説明」の同じ順番・同じ大きさで並べます。1つだけ形式が違うと、見る人は「これは特別なのか」と余計なことを考えてしまいます。

さらに、反復は会社やブランドの単位でも重要です。広告・資料・Webサイトで同じ色・同じ書体・同じ写真のトーンを繰り返すことで、「この雰囲気はあの会社だ」という印象が積み上がっていきます（第1回の「選ばれる」の仕事です）。こうしたルールを文書にまとめたものを、デザインガイドラインやスタイルガイドと呼びます。

原則4　コントラスト：違うものは、はっきり違って見せる

コントラスト は、違う役割の要素は、はっきりと違って見せる原則です。大きさ・太さ・色・形・余白などで差をつけることで、見る人は「どれが一番大事か」「どれが見出しでどれが本文か」を瞬時に判断できます。

図5の左は、「導入企業の声」という見出しも本文も会社名も、ほとんど同じ大きさです。すべてが同じ重さなので、見る人は最初から最後まで読まないと要点にたどり着けません。右は、一番伝えたい成果（月次決算が3日早くなった）を大きく太くし、見出しは小さく色で区別し、会社名はさらに小さくしています。目に入る順番が、伝えたい順番と一致しています。

コントラストで大切なのは、差をつけるなら、はっきりつける ことです。ウィリアムズも、2つの要素がまったく同じでないなら、はっきり違うものにするよう勧め、少しだけ違う状態はコントラストではなく「衝突」になると説明しています。見出しが本文より少しだけ大きい、少しだけ色が違う、という中途半端な差は、意図した違いではなく「ずれ」や「間違い」に見えてしまいます。

よくある誤解：「全部目立たせれば、全部伝わる」

コントラストを意識し始めると、大事な情報を次々と太字や赤字にしたくなります。しかし、強調はほかの部分との差で生まれるものです。ページの半分が赤い太字なら、赤い太字は何も強調していません。第1回の「全部載せ」のバナーと同じで、強調は1か所、多くても2か所 に絞るのが原則です。

実務では、文字の大きさの階層を3段階くらいに決めておくと、コントラストがつけやすくなります。たとえば、大見出し・中見出し・本文の3つです。「その間くらいの大きさ」を作らないことが、すっきり見せるコツです。文字の大きさの決め方は、第4回で詳しく扱います。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

余白とグリッド：見えない升目に沿って置く

4原則と一緒に使いたいのが、余白 と グリッド です。グリッドとは、画面や紙面を同じ幅の列（と行）に分けた、見えない升目のことです。要素の端をこの升目の線にそろえて置くと、整列が自然に守られ、ページ全体に一定のリズムが生まれます。

図6では、画面を6つの列に分けています。見出しと本文は4列分の幅、写真は右の2列分、下の3つの機能紹介はそれぞれ2列分の幅です。こうしておくと、上の段と下の段で要素の端がそろい、写真を差し替えたり機能を4つに増やしたりしても、全体の整いを保ったまま調整できます。

余白についても、3つのコツを覚えておきましょう。

• 外側の余白を先に取る。紙面や画面の端ぎりぎりまで要素を詰めると、窮屈で安っぽい印象になります。まず外周に十分な余白を取り、その内側だけを使います。
• 余白を「もったいない」と思わない。空いている場所は、まとまりを区切り（近接）、大事な要素を引き立てる（コントラスト）働きをしています。高級感のあるブランドほど、余白を広く取る傾向があります。
• 間隔の種類を減らす。要素の間隔がすべて少しずつ違うと、整って見えません。たとえば「小＝8ピクセル、中＝16ピクセル、大＝32ピクセル」のように3種類くらいに決め、それ以外の間隔は使わないようにします。

実務ではこう使う

自分で作った資料やバナーを見直すときは、次の順番でチェックすると、4原則を漏れなく当てはめられます。

1. まとまりに分ける（近接）：載せている情報を、意味のまとまりごとにグループ分けし、まとまりの間を空けます。
2. そろえる線を決める（整列）：左端など、そろえる線を決め、すべての要素をその線にぴったり合わせます。
3. ルールを決めて繰り返す（反復）：見出しの大きさ・色・位置、写真の形などのルールを決め、すべての箇所で同じにします。
4. 一番大事なものを一番強くする（コントラスト）：伝えたい順に大きさ・太さを3段階くらいで差をつけ、強調は1〜2か所に絞ります。
5. 目を細めて見る：最後に、画面から少し離れて目を細め、細部がぼやけた状態で見ます。それでも一番大事な要素が真っ先に目に入り、まとまりの数が分かれば合格です。

この5つは、デザイナーに修正を頼むときの言葉としても使えます。「なんとなく見にくい」ではなく、「連絡先のまとまりと会社情報のまとまりの間をもう少し空けてほしい」「ボタンの左端を本文の左端にそろえてほしい」と伝えれば、修正は一度で済みます。フィードバックの伝え方は第8回で詳しく扱います。

この回のまとめ

• 「なんとなく素人っぽい」原因の多くは、近接・整列・反復・コントラストの4原則で説明できます。
• 近接：関係のある情報は近づけ、関係のない情報とは距離をとります。見出しは下の本文に近づけます。
• 整列：すべての要素を見えない線にそろえます。迷ったら左揃えにし、揃え方を混ぜないようにします。
• 反復：色・書体・見出しの形などのルールを繰り返し、資料全体やブランド全体の統一感をつくります。
• コントラスト：違うものは、はっきり違って見せます。強調は1〜2か所に絞り、中途半端な差を作らないようにします。

確認テスト

次回予告

第3回は「色」です。色の3つの属性（色相・明度・彩度）から、配色の組み立て方、読みやすさを守るためのコントラスト比の基準、色の見え方の多様性への配慮、ブランドカラーの決め方までを学びます。「この色、なんか合わない」を言葉で説明できるようになりましょう。

参考資料

• Robin Williams『ノンデザイナーズ・デザインブック［第4版］』マイナビ出版、2016年（書誌情報：紀伊國屋書店ウェブストア https://www.kinokuniya.co.jp/f/dsg-08-EK-0361588 、2026年11月12日確認）
• Robin Williams「The Non-Designer’s Design Book, Third Edition」Chapter 5. Contrast（O’Reilly掲載の原書、コントラストの原則の記述）：https://www.oreilly.com/library/view/the-non-designers-design/9780321563088/ch05.html （2026年11月12日確認）