デザインの4原則とは？近接・整列・反復・対比をWebの例で解説

バナーを作ってみたけれど、なんとなく素人っぽい…
どこを直せばいいのか、自分では言葉にできない…
やっぱり私にはセンスがないのかな…

見本と自分の作品を並べると、違うことは分かる。でも、どこが違うのかは説明できない。これが続くと、作るたびに自信がなくなっていきますよね。

「なんとなく変」の理由を言えないのは、センスが足りないせいではありません。良し悪しを判断する基準を、まだ持っていないだけです。

その基準の代表が、デザインの4原則です。4原則は近接・整列・反復・対比の4つ。名前を覚えて終わりにせず、自分のデザインを点検する手順として使えるように、制作例はすべてWebデザイン（バナー・LP・Webサイト）で説明します。

この記事で分かることは、次の3つです。

• デザインの4原則それぞれの意味
• バナーやWebサイトでの使い方と、よくある崩れ方
• 自分のデザインを直す順番と、セルフチェックの質問

デザインの4原則とは？近接・整列・反復・対比の4つ

デザインの4原則とは
情報を見やすく、伝わりやすく並べるための4つの基本ルールです。「近接」「整列」「反復」「対比」の4つを指します。

4原則は、ロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』（マイナビ出版）で紹介されている、デザインの4つの基本原則です。書籍では4つ目を「コントラスト」と表記しています。この記事で使う「対比」と同じものです。

「デザイン4原則」「デザインの基本4原則」「4大原則」「デザインの四原則」など、呼び方はいくつかあります。指しているのは、どれも同じ4つ。まずは全体を表で見てください。

原則	ひとことで言うと	Webでの例	崩れているとどうなるか
近接	関係のあるものを近づける	商品カードの画像・商品名・価格をひとまとまりにする	どれとどれがセットなのか分からない
整列	見えない線にそろえる	バナーの文字の左端を1本の線にそろえる	散らかって見え、読む順番に迷う
反復	同じルールを繰り返す	ボタンの色と形をサイト全体でそろえる	ページごとに見た目がバラバラになる
対比（コントラスト）	差をつけて目立たせる	申し込みボタンだけ色を変える	どこが大事なのか分からない

デザインの目的は、きれいに飾ることにはありません。伝えたいことを、相手に伝わる順番で届けること。4原則は、そのための判断基準です。

4原則は、デザインの良し悪しを言葉で判断するための物差しだと考えてください。「なんとなく変」を「整列がそろっていない」と言い換えられれば、直す場所が決まります。センスがあるかどうかで悩む前に、まずは基準に当ててみてください。

4原則を1つずつ解説｜Webデザインでの使い方とよくある崩れ

ここで挙げる崩れ方は、どれも初心者の作るバナーやWebサイトでよく見かけるものです。

近接｜関係のある情報は近くに、関係のない情報は離す

近接は、関係の強い要素どうしを近づけて、ひとつのグループとして見せる原則です。反対に、関係の薄いグループどうしは離します。距離の近さで「どれとどれが仲間なのか」を伝えるわけです。

初心者のデザインでよくある崩れは、次のようなものです。

• 見出し・本文・ボタンどうしの余白が取れていない
• LPのセクションで、見出しが上の段落と下の段落のどちらに属するのか分からない
• 商品の価格が、隣のカードの画像に近い位置にある

どれも、要素どうしの距離に差がないことが原因です。

直し方はシンプルで、同じグループの中の間隔より、グループどうしの間隔を広くとります。見出しと本文の間より、見出しと上のセクションの間を広くする、という具合です。

整列｜見えない線に要素をそろえる

整列は、要素を見えない基準線にそろえて置く原則です。基準線は、左端・中央・右端のどれかに引きます。線そのものは見えなくても、そろっているだけで画面が整って見えます。

よくあるのが、1枚のバナーの中に基準線が何本もある状態です。キャッチコピーは中央揃え、説明文は左揃え、ボタンは右寄せ。なんとなく置いた要素が少しずつずれていると、全体が散らかって見えます。

直すときは、まず基準線を1〜2本に絞りましょう。迷ったら左揃えにそろえてみてください。何行も続く文章を中央揃えにすると、行の書き出し位置が毎回変わるので読みにくくなります。

Webサイトなら、コンテンツの幅（左右の端）がそのまま基準線になります。カードを横に並べるときは、上端と左右の端がそろっているかを見ておきましょう。

反復｜同じルールを繰り返して統一感を出す

反復は、色・フォント・形・余白のとり方などのルールを決めて、デザイン全体で繰り返す原則です。同じルールが何度も出てくると、別々のページや画像でも「同じサイトのもの」「同じシリーズのもの」とまとまって見えます。

よくある崩れは、次のようなものです。

• ページやセクションごとに、ボタンの色や角の丸みが違う
• 見出しの飾り方が、セクションごとに変わっている
• SNS投稿画像をシリーズで作っているのに、毎回フォントや配置が違う

Webでは、反復が使いやすさにも関わります。ボタンの見た目がそろっていると、見る人は「この形は押せる」と覚えやすくなります。ページごとにボタンの形が変わると、そのたびにどれが押せるのかを探すことになります。

直し方は、「見出し」「ボタン」「強調したい言葉」など役割ごとにルールを決めて、全体で使い回すこと。一度決めておけば、新しいページを作るときにも迷わずに済みます。

対比（コントラスト / 強弱）｜差をつけて一番大事なものを目立たせる

※対比は「コントラスト」と呼ばれることもあります。この記事で使う「対比」と同じものです。またサイトによっては「強弱」と呼ぶこともありますが、指している内容は同じです。

対比は大きさ・色・太さ・明るさにはっきりした差をつけて、大事な情報を目立たせる原則です。差があるから、見る人はどこから読めばいいのかが分かります。

初心者のバナーでよく見かけるのが、目立たせたいものが多すぎて全部を強調してしまうケースです。全部が赤、全部が太字では、結局どれも目立ちません。差が中途半端で、同じくらいの大きさの文字が並んでいるだけに見えることもあります。

LPやバナーでは、目立たせるものを1つに絞るのが基本です。申し込みボタンや「今だけ◯%OFF」のような一番の訴求を決め、それ以外は控えめにします。差をつけるときは、ひと目で分かるくらいはっきりつけてください。

見出しと本文の文字サイズの差はジャンプ率と呼ばれ、対比をつくる方法のひとつです。

4原則でデザインを直す順番｜よくあるバナーを例に

4原則の意味が分かっても、作りながら4つ全部を意識しようとすると手が止まります。そこでおすすめしたいのが、順番を決めて1つずつ点検するやり方です。

例はこちらのバナー。今までの話からすると何がまずいか、考えてみてください。

まとまり（近接）が決まらないと、何を基準線にそろえるか（整列）も決まりません。色やフォントのルール（反復）がそろってから差をつける（対比）と、その差がはっきり効きます。

対比を最後に回すのは、先に強調を足すと、全部が目立つ状態に戻りやすいからです。

直す順番
目的を決めてから、近接・整列・反復・対比の順に1つずつ見ていきます。4つを同時に考える必要はありません。

実際に1枚作って4原則を試してみたい方は、作る前に決めておくことから制作の手順までを、以下の記事にまとめています。

4原則のセルフチェックとよくある失敗

作ったものを見直すときは、次の質問に1つずつ答えてみてください。つまずいたところが、直す場所です。

4原則で説明できるようになると、仕事でも役に立ちます。クライアントに「なぜこのデザインにしたのか」を、言葉で伝えられるからです。修正の依頼を受けたときも、どの原則の問題かを切り分ければ、どこをどう直すかを整理して返せます。

デザインは自分の好みを形にするものではなく、相手の目的をかなえる手段です。4原則は、その目的を相手に伝わる形にするための基準として使ってください。

4原則を押さえたら、次は配色やフォント、余白といったデザイン基礎のほかの分野に進みましょう。何をどの順番で学べばいいか迷ったら、学ぶ順番を以下の記事にまとめています。

まとめ

デザインの4原則のまとめ
1、デザインの4原則は、近接・整列・反復・対比の4つ。伝えたいことを伝わる順番で届けるための判断基準です。
2、Webでは、スマホ表示で近接が崩れる、ボタンの見た目がそろわない、一番の訴求に対比がつかない、の3つでつまずきやすくなります。

3、直すときは、目的を決めてから近接・整列・反復・対比の順に1つずつ見ます。

「なんとなく変」を「整列がそろっていない」と言えるようになれば、自分のデザインを自分で直せる段階です。まずは最近作ったバナーを1枚、セルフチェックの質問で見直してみてください。

参考にした情報源

• マイナビブックス『ノンデザイナーズ・デザインブック ［第4版］』（ロビン・ウィリアムズ著、吉川典秀訳） https://book.mynavi.jp/ec/products/detail/id=53645（2026年9月11日確認）