デザインの4原則とは？近接・整列・反復・対比を図解とミニ実践で覚える

「センスがないから、デザインは無理かも…」って思っていませんか？

実は、見やすいデザインにはルールがあります。センスの問題じゃないんです。
その中でいちばん最初に覚えたいのが「デザインの4原則」。近接・整列・反復・対比の4つです。
この4つを知るだけで、バナーも資料も名刺も見違えますよ。Before/Afterの図を見ながら、手を動かして覚えていきましょう。

デザインの4原則とは

デザインの4原則は『ノンデザイナーズ・デザインブック』という本で有名になったルールです。近接（グループにする）・整列（揃える）・反復（繰り返す）・対比（差をつける）の4つ。

4つとも「センス」ではなく「手順」です。近づける、揃える、繰り返す、差をつける。どれも今日からできますよ◎ 1つずつ見ていきましょう。

原則1：近接（関係のある情報を近づける）

近接は、関係のある情報どうしを近づけて、関係のないものとは離すルールです。
人は近くにあるものを「仲間だ」と勝手に判断します。距離がそのまま意味になるんですね💡

Beforeは名前も肩書きも連絡先もバラバラ。どれが仲間なのか、読む人が探すことになります。
Afterは「名前のまとまり」と「連絡先のまとまり」の2つに分けただけ。それだけで迷わなくなりますよね。
やることは、意味ごとにグループを作る → グループの中は詰める → グループどうしは離す。これだけです。

間隔の目安は2倍です。グループの中の行間が8pxなら、グループとグループの間は16px以上あける。この差がないと、分けたつもりが読む人には伝わりません。

原則2：整列（見えない線に揃える）

整列は、すべての要素を「見えない線」に揃えるルールです。左端でも右端でも中央でも、どこか1本の線に合わせると一気にまとまります。

Beforeは左寄せ・中央・右寄せが混ざっていて、目線があちこちに飛びます。
Afterは全部を左の1本に揃えただけ。線は描いていないのに、揃っているのが伝わりますよね。
迷ったら左揃えでOK。いちばん失敗しません◎

中央揃えは、要素が2〜3個の小さなものだけにしておくのが安全です。行数が増えるほど左右の端がガタガタになって、揃えたはずなのに散らかって見えます。

ミニ実践①（2分・道具なし）
お気に入りのWebサイトを1つ開いて、「要素が揃っている見えない線」を3本探してみてください。ロゴ・見出し・本文の左端がどの線に乗っているか見るだけで、整列を見る目が育ちます。

原則3：反復（同じルールを繰り返す）

反復は、色や形、書式のルールをデザイン全体で繰り返すことです。
同じ役割のものが同じ見た目だと、「これは同じ種類の情報だな」と一瞬で分かります。

Beforeは行ごとにアイコンの形も色も文字も違って、3行しかないのにゴチャついて見えます。
Afterはアイコンを同じ形・同じ色に、文字も同じ書式に揃えました。
使うルールの種類を減らして、決めたら最後まで通す。それだけで整って見えます。

作りはじめに決めておくのは3つだけで足ります。文字サイズ3種類・色3色・余白の単位1つ。この3つを決めて、あとは同じものを使い回します。途中で「ここだけ4色目」をやると、そこが目立って読む人の目が止まります。

原則4：対比（差をはっきりつける）

対比は、大事なものとそうでないものの差をはっきりつけるルールです。
大きさや太さの差が中途半端だと、どこから読めばいいか伝わりません。つけるなら思い切って。

Beforeは全部同じ大きさで、主役がいません。
Afterは名前を大きく、補足を小さく。「この名刺の主役は名前」だと一目で伝わります。
対比の第一歩は「この作品の主役はどれか」を1つ決めることです。

大きさの差は1.5倍以上を目安にしてください。1.2倍だと、差をつけたのか揃え損ねたのか分かりません。中途半端がいちばん事故に見えます。

ミニ実践②（2分・道具なし）
このページを上にスクロールして、対比が使われている場所を3つ探してみてください。見出しと本文の大きさの差、色の差、太さの差。どこで差をつけているか分かると、自分の作品でも使えるようになります。

4原則を使う順番

4つは並列ではありません。近接 → 整列 → 反復 → 対比の順に使うと、手戻りが出ません。

1. 近接で、バラバラの要素をグループにまとめる。ここで動かす対象の数が減る
2. 整列で、まとまったグループを1本の線に乗せる。数が減ったあとなら一瞬で終わる
3. 反復で、同じ役割のグループに同じ書式を配る
4. 対比で、最後に主役を1つ決めて差をつける

逆からやると崩れます。先に文字を大きくする（対比）と、そのあとグループを組み直したときに大きさのバランスが合わなくなって、もう一度サイズを決め直すことになります。
先にまとめて、最後に飾る。この順番だけ覚えておいてください。

作っている途中で「なんか違う」と感じたら、対比から見直さないでくださいね。たいてい原因はいちばん上の近接にあります。上から順に確認していくと、どこで崩れたか見つかります。

やってしまいがちな失敗

4原則を知ったあとに、私がよく見る失敗を4つ挙げます。どれも直し方まで書いておきますね。

余白がもったいなくて埋めてしまう

空いているところに文字や飾りを足すと、近接が消えます。グループの境目が分からなくなるからです。
直し方は、足すのではなく減らす。要素を1つ削ると、残ったものの関係がはっきりします。余白は「余り」ではなく、グループを分けるための道具です。

とりあえず中央揃えにしてしまう

中央揃えは、揃えたつもりで揃っていません。文字数が違うと左右の端がバラバラになるからです。
直し方は、左揃えに変えて1本の線を作る。それだけで印象が変わります。中央揃えは要素が2〜3個のときだけ使ってください。

色を増やして情報を区別しようとする

項目ごとに色を変えると、反復が壊れます。色数が増えるほど、どれが大事か分からなくなります。
直し方は、色は3色までにして、区別は位置と余白でやる。近接で分ければ、色を変えなくても別グループだと伝わります。

差のつけ方が中途半端

見出しを本文の1.2倍にしても、読む人には差として届きません。「揃え損ねた」ように見えるだけです。
直し方は、1.5倍以上にするか、いっそ同じにする。差をつけないと決めるのも1つの判断です。

練習：名刺を4原則で直してみる

仕上げは、4原則を全部使う課題です。下の名刺は近接・整列・反復・対比が全部崩れています。画像を保存して、4つの原則で直してみてください。

進め方は、さっきの順番のとおりです。

1. 近接：情報を「名前まわり」「連絡先」のグループに分ける
2. 整列：全要素を左の1本の線に揃える
3. 反復：色と書式のルールを2種類以内に統一する
4. 対比：主役（名前）を決めて、大きさの差をはっきりつける

できあがったら、次のチェックリストで自分の作品を確認してみてくださいね。

• 情報のグループが2〜3個にまとまっている（近接）
• 要素の左端が1本の線に揃っている（整列）
• 色・書式のルールが2種類以内に収まっている（反復）
• 3歩離れて見ても、最初に名前が目に入る（対比）

ツールは何でも大丈夫です。Canvaでも、パワーポイントでも、紙とペンでも構いません。原則が身につくかどうかは、ツールとは関係ないので◎

よくある質問

4つ全部を毎回使わないとダメですか？

ほとんどの場合、4つとも使うことになります。ただし意識する順番は決まっていて、まず近接と整列です。この2つができていれば、見づらさの大半は消えます。反復と対比は、そのあとで足していけば間に合います。

4原則を守ったのに、なんだかダサいです

4原則は「見づらさをなくす」ためのルールです。整った状態までは連れて行ってくれますが、その先の印象は配色・フォント・写真で決まります。
まず整える、それから雰囲気を作る。この順番なので、いま整っているなら次のステップに進むだけですよ。

センスは本当に要らないんですか？

要りません。少なくとも最初は。
センスと呼ばれているものの中身は、「たくさん見てきた量」と「知っているルールの数」です。4原則はそのルールの1つ目。あとは自分の作品と人の作品を、原則ごとに見比べる回数を増やすだけです。

どのくらい練習すれば身につきますか？

作る側と見る側の両方をやると早いです。1日1つ何かを作って、あわせて既存のバナーやサイトを1つ、4原則の観点で見る。2週間も続けると、崩れているデザインを見たときに「近接がない」と言葉で言えるようになります。言葉にできるようになったら、直せます。

次に学ぶこと

最後にもう一度だけ整理します。

• 近接：関係のある情報を近づける（間隔の差は2倍）
• 整列：見えない線に揃える（迷ったら左揃え）
• 反復：同じルールを繰り返す（文字3種・色3色・余白1単位）
• 対比：差をはっきりつける（主役を1つ、差は1.5倍以上）

使う順番は、近接 → 整列 → 反復 → 対比。先にまとめて、最後に飾る。ここまでが4原則です。

次のレッスンは「余白の使い方」。今回の近接をもっと細かくした話で、どのくらい空ければいいのかを数字で決められるようになります。4原則の中でいちばん効果が出やすいところなので、続けて読んでみてくださいね。

実際のバナー制作でどう使うかは、バナーデザインの手順とコツで工程つきで解説しています。手を動かす題材がほしい方はバナーデザインお題20選もどうぞ。