デザインの4原則とは?近接・整列・反復・対比を見本で初心者向けに解説

デザインの4原則の基本

まずは、デザインの4原則がどんなもので、どこから広まったのか、全体像を押さえましょう。

デザインの4原則とは

デザインの4原則とは、「近接」「整列」「反復」「対比」という、見やすく伝わりやすいデザインを作るための4つの基本的な考え方のことです。

Webサイトやバナーだけでなく、チラシ、名刺、プレゼン資料など、文字や画像を並べるものなら何にでも使えます(文字や画像の配置を考える基本はWebレイアウトとは?で解説しています)。

4つの原則は、それぞれ次のような考え方です。

原則	ひとことで言うと	得られる効果
近接(Proximity)	関係のある要素は近づけ、関係のない要素は離す	情報のまとまりが伝わる
整列(Alignment)	要素の端や中心をそろえて、見えない線でつなぐ	整った印象になり、要素同士のつながりが伝わる
反復(Repetition)	同じ役割の要素には、同じ見た目をくり返し使う	統一感が出て、見る人が迷わなくなる
対比(Contrast)	違うものは、はっきり違うように見せる	大事な情報が目立ち、強弱がつく

4原則は「守らないといけない法律」ではなく、デザインを見直すときの「チェックの観点」だと考えると使いやすくなります。

4原則の出典は『ノンデザイナーズ・デザインブック』

デザインの4原則は、ロビン・ウィリアムズ(Robin Williams)の著書『The Non-Designer’s Design Book』で紹介され、広く知られるようになった考え方です。

ロビン・ウィリアムズは、デザインやパソコンの入門書を多く書いている著者で、同名の俳優とは別人です。

この本の初版は1994年にアメリカのPeachpit Pressから出版され、版を重ねて現在は第4版が出ています(Peachpit「The Non-Designer’s Design Book, 4th Edition」・英語)。

日本語版は『ノンデザイナーズ・デザインブック』という書名で、2016年9月にマイナビ出版から第4版が発行されています(この記事の最後に、書籍のカードを載せています)。

書名の「ノンデザイナー」とは、デザインを専門に学んだことはないけれど、仕事や勉強でチラシや資料を作る必要がある人のことです。

つまり4原則は、もともとデザインの経験がない人でも、すぐに実践できるように整理された考え方なので、初心者が最初に学ぶのにぴったりです。

なお、日本語版の本では4つめの原則を「コントラスト」と訳しており、「対比」と呼ぶ解説も多く見られますが、どちらも同じ「Contrast」を指しています。

4原則が役に立つ理由

4原則を知っておくと、「なんとなく見づらい」という感覚を、直すべき具体的な問題として言葉にできるようになります。

「素人っぽい」と感じるデザインの多くは、関係のない要素がくっついている、端がそろっていない、見た目がページの中でばらばら、強弱がない、といった、4原則のどれかが守られていない状態だからです。

たとえば「見づらい」を「近接ができていないから、情報のまとまりが分からない」と言い換えられれば、何をどう直せばよいかがはっきりします。

4原則は、センスに頼らずにデザインを良くするための、手がかりの言葉だといえます。

デザインの4原則の使い方

ここからは、4つの原則を1つずつ、見本と一緒に確認していきます。

最後に、4つを組み合わせたときの変化も見てみましょう。

近接:関係のある要素を近づける

近接とは、関係のある要素同士を近くに置いて1つのまとまりにし、関係のない要素とは距離を離すという原則です。

人は、近くにあるもの同士を「ひとまとまり」として見る傾向があるため、距離を変えるだけで、どれとどれがセットなのかを伝えられます。

名刺のような小さなデザインで比べてみましょう。

NGの見本は、5行が同じ間隔で並んでいるため、どこまでが「誰か」の情報で、どこからが「連絡先」なのかを読み取る必要があります。

OKの見本は、間隔を変えただけで、「名前と肩書き」と「連絡先」の2つのまとまりがひと目で分かります。

この「近くにあるものはまとまって見える」という性質は、ゲシュタルト心理学(人がものを部分の寄せ集めではなく「まとまり」として見る仕組みを研究した心理学)の「近接の法則」とも重なります(ゲシュタルトの法則の記事で解説しています)。

かんたんに言うと、人の目には「近くにあるもの同士を、ひとまとまりに見てしまう」くせがあります。

たとえば「●●　　●●」のように並んでいると、4つの点ではなく、2つのグループに見えるはずです。

近接は、この目のくせを利用して、情報のまとまりを伝える原則だと考えると分かりやすくなります。

距離の決め方や、写真と説明文・入力フォームでの使い方は近接の原則とは?で詳しく解説しています。

整列:端や中心をそろえる

整列とは、要素を適当な位置に置かず、ほかの要素の端や中心にそろえて配置するという原則です。

端がそろうと、要素同士の間に目には見えない線が生まれ、離れた要素同士でも「つながっている」と感じられるようになるからです。

NGの見本は、見出しは中央、本文は少し字下げ、画像とボタンは右寄せと、それぞれが別の位置を基準にしているため、全体がまとまりなく見えます。

OKの見本は、見出し・本文・画像・ボタンのすべての始まりを、青い点線で示した1本の基準線にそろえたことで、すっきりと整って見えます。

実際のデザインには点線は描きませんが、そろっている要素を見ると、人は見えない線を感じ取ります。

文章の行の左揃え・中央揃え・右揃えの使い分けは、文字の揃え方とは?で解説しています。

基準線の作り方や、ずれたときの直し方は整列の原則とは?で詳しく解説しています。

反復:同じ役割には同じ見た目をくり返す

反復とは、見出し・ボタン・カードなど、同じ役割を持つ要素には、同じ色・形・大きさ・配置をくり返し使うという原則です。

同じ見た目がくり返されると、見る人は「この形はボタン」「この色は見出し」と一度覚えたルールで、次に出てきた要素の役割もすぐに分かるようになります。

ページごとにボタンの色や形が変わると、そのたびに「これは押せるのかな」と考えさせてしまうため、反復は見る人に余計な手間をかけさせないための工夫でもあります。

同じ見た目がくり返されると、見る人は「この形のものは見出しだ」「この色はボタンだ」とすぐに覚えられ、ページの中で迷わなくなるからです。

NGの見本は、2件めだけ見出しの色や下線が違い、3件めは日付が見出しの後ろにあるため、「2件めだけ特別なお知らせなのかな」と余計な意味を読み取らせてしまいます。

OKの見本は、日付の書き方・位置と見出しの装飾を3件ともそろえたことで、同じ種類の情報が並んでいると分かり、内容だけに集中して読めます。

反復は1ページの中だけでなく、サイト全体の複数のページや、シリーズのバナーなどでも使える考え方です(複数の制作物で雰囲気(トーン)と表現のルール(マナー)をそろえる考え方はトーン&マナーとは?、余白の値をそろえる方法は余白の間隔のルールとは?で解説しています)。

ページの中やページをまたいで、レイアウトに反復を使う方法はレイアウトの一貫性とは?で詳しく解説しています。

対比:違うものははっきり違えて見せる

対比とは、役割や重要度が違う要素同士に、大きさ・太さ・色などではっきりした差をつけるという原則です。

差がはっきりしていると、見る人は一番大事な情報を真っ先に見つけられ、情報の強弱も自然に伝わるからです。

ポイントは「少しだけ違う」ではなく、「はっきり違う」と分かる差をつけることです。

たとえば本文が16pxのときに見出しを18pxにする程度では、見る人には「わざと大きくした」のか「たまたま少しずれた」のか分かりません。

見出しを本文の2倍の32pxほどにするなど、ひと目で「意図して差をつけている」と伝わるくらい思い切るのがコツです。

NGの見本は、見出しが本文よりわずかに大きいだけなので、一瞬「どちらが見出し?」と迷い、差をつけたつもりが中途半端な印象になっています。

OKの見本は、見出しを大きく太くし、本文の色を少し落ち着かせたことで、何の講座なのかが真っ先に目に入ります。

文字の大きさの差のつけ方はジャンプ率の記事、色の差で目立たせる方法は情報の優先順位と色とは?で解説しています。

大きさ・太さ・色・形・余白など、差をつけられる要素とその使い方はコントラストとは?で詳しく解説しています。

4つの原則を組み合わせる

4つの原則は、1つずつ使うよりも、組み合わせて使うことで効果を発揮します。

実際のデザインでは、まとまり(近接)・そろえ方(整列)・くり返し(反復)・強弱(対比)が同時に関わっているためです。

同じ体験教室の告知を、4原則を使う前と使った後で比べてみましょう。

NGの見本は、6つの情報が同じ間隔で並び、行のそろえ方もばらばらで、タイトルもボタンも目立たないため、どこから読めばよいか分かりません。

OKの見本では、4原則を次のように使っています。

• 近接
  「タイトルと補足」「日時・場所・料金」「ボタン」の3つのまとまりに分け、まとまりの間を広く空けました。
• 整列
  すべての要素の始まりを、同じ1本の線にそろえました。
• 反復
  「日時」「場所」「料金」を、同じ「太字の項目名+内容」の形でくり返しました。
• 対比
  タイトルを大きく太くし、ボタンには塗りの色をつけて、ほかの情報との差をはっきりさせました。

載せている情報はNGの見本とまったく同じですが、4原則を使うだけで、読む順番と情報の関係がはっきり伝わるようになります。

どこから手をつけるか迷ったら、まず近接で情報をまとまりに分け、次に整列でそろえ、反復で見た目を統一し、最後に対比で強弱をつける、という順に進めるのが1つの方法です。

実践のポイント

デザインの4原則を使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 対比をつけるつもりで、文字サイズを少しだけ大きくするなど、中途半端な差にしてしまうことがあります。
  差が小さいと「ずれている」「そろっていない」ように見えるので、違いをつけるときは、はっきり分かるくらい大胆につけましょう。
• 反復を意識するあまり、すべての要素を同じ見た目にして、単調でメリハリのないデザインになることがあります。
  くり返すのは「同じ役割の要素」だけにして、役割が違うものには対比で差をつけましょう。
• 整列で、とりあえずすべてを中央揃えにしてしまうことがあります。
  中央揃えは行の始まりの位置が行ごとに変わるため、文章が長いと読みにくくなります。
  横書きの文章を読むとき、目は行の終わりから次の行の頭へ戻るたびに左端を目印にしているので、行の頭が毎行ずれると、そのたびに次の行の始まりを探し直すことになるからです。
  迷ったら、要素の左端をそろえることから試してみましょう。
• 4原則をすべて守れば、それだけで良いデザインになると考えてしまうことがあります。
  4原則は「伝わりやすさ」の土台であり、何を伝えたいか、誰に向けたデザインかという目的があってこそ活きるものです。

よくある質問

• Q. 「対比」と「コントラスト」は同じ意味?
  A. デザインの4原則の話では、同じ「Contrast」を指しています。
  日本語版の『ノンデザイナーズ・デザインブック』では「コントラスト」と訳されています。
  ただし、Webのアクセシビリティ(障害の有無などにかかわらず使いやすくすること)の話で出てくる「コントラスト比」は、文字と背景の明るさの差を数値で表したもので、意味の範囲が違います(コントラスト比とは?で解説しています)。
• Q. ゲシュタルトの法則とは何が違う?
  A. ゲシュタルトの法則は、人がものを「まとまり」として見るときの見え方の性質を、心理学の立場から整理したものです。
  デザインの4原則は、デザインを作る人がすぐ使えるように、作り方の観点として整理したものです。
  近接のように重なる部分もあるので、あわせて知っておくと理解が深まります。
• Q. Webデザイン以外にも使える?
  A. 使えます。
  プレゼン資料、チラシ、名刺、社内の掲示物など、文字や画像を並べるものなら何にでも当てはまります。
  もともとデザインを専門にしない人に向けて紹介された考え方なので、身近な資料づくりから試すのがおすすめです。

まとめ

デザインの4原則とは、ロビン・ウィリアムズの『ノンデザイナーズ・デザインブック』で広く知られるようになった、近接・整列・反復・対比(コントラスト)という4つの基本的な考え方です。

関係のあるものを近づけ、端をそろえ、同じ役割には同じ見た目をくり返し、違うものははっきり違えて見せることで、センスに頼らなくても伝わりやすいデザインになります。

まずは最近作った資料やデザインを1つ開き、「近接」「整列」「反復」「対比」の4つの観点で1つずつ見直して、直せるところを1か所ずつ探してみてください。

あわせて読みたい書籍

デザインの4原則を、たくさんの作例と一緒にじっくり学びたい方は、4原則を広めた本の日本語版もあわせてチェックしてみてください。