webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。

近接 - PROXIMITY

関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。
その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。

「近接」を意識していない例のイメージ

上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。

「近接」を意識していない例を拡大したイメージ

また、近接が考慮されていないデザインをこのように一部を切り取った状態で見たとき、「Football」や「Tennis」の文字は上下どちらに関するテキストなのかがパッと見で判断できません。

これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技なのかが把握しやすくなります。
また、上手く活用したいときのポイントとしてあげた関係する要素の余白とそうでない要素の余白とで違いをつけており、これであれば先ほど例にあげたように一部を切り取った状態で見たときも、ボールのすぐ下にテキストがあるのに加えて下のボールとの距離があることから、テキストが上下どちらを指しているかもパッと見でも判断が容易になります。

「近接」を意識した例のイメージ

整列 - ALIGNMENT

要素を闇雲に配置するのではなく、左揃えまたは右揃えのように要素を意識的に配置することによって情報が整理され、全体的にスッキリとまとまった印象を与えることができます。
また、近接と組み合わせることで各要素の繋がりや統一感をより見せることも可能です。

「整列」を意識していない配置例と意識した配置例のイメージ

整列が上手く活用できているポイントとしてよく耳にするのは、見えないラインやグリッドを作り(想像し)、そこに合わせて要素が配置されているのかを意識することです。
上のイメージにある水色の点線のように、実際にはなくてもデザインを見直した際にそれらが自然とあるように見えれば上手く活用できており、逆にこれらが見えてこない場合は例外もあるものの多くの場合で上手く整列を活用できないことになってきます。

近年だとサイトのレイアウトも様々で、パッと見では整列なんて考えてなさそうなぐらい要素が自由に配置してあったり少し位置をずらしてあるようなサイトも見かけることが多いです。
ですが、そういった場合もなぜか綺麗に整って見える印象があるサイトは、実はデザイン全体で見ると近接や整列が非常に上手く活用されているということがほとんどです。

反復 - REPETITION

「反復」を活用しているデザイン例のイメージ

上から MOREWORKSQontoPanasonicBEAMS

上のイメージにあるサービス・特徴の紹介コンテンツやニュースのリスト表示など、要素を一定のルールで繰り返すことで一貫性・統一性を持たせることができます。
また、このように特定の範囲内(ページ内)のみに限らず、例えばサイト全体でヘッダーやフッターを統一させたり見出しや装飾を繰り返して使用することが多いですが、これらも反復のルールに則ったもので、これによってどのページに行っても同じサイト内にいるということをユーザーに認識させ且つサイト全体の統一性にも繋がります。

ただし、場合によっては使いすぎることで逆に面白みが欠けたりくどくなりすぎることもあるので、とにかく繰り返せばいいということではなく全体のバランスは考えるべきです。

対比 - CONTRAST

文字ならカラー・サイズ・ウェイトを変える、装飾なら背景色や罫線をつけるといったように、各要素の違いをハッキリさせることでデザイン全体にメリハリを付け、上手く活用すれば内容的には同じでも単純にデザインされたものよりも人を惹きつけるデザインにすることができます。
また、その際は多少の違いを付けるのではなく大胆に違いを付けることが好ましく、それによって情報の優先度の明確化にも繋がります。

「対比」を意識していない例と意識した例のイメージ

上のイメージ左は近接や整列のルールには則ってはいますが、全体的にコントラストが弱いために少し読み難い印象を受けます。
ページタイトルは太字でサイズも少し大きいのでまだわかりやすいものの、見出しについてはパッと見で目に入ってこないという人もいそうです。

これをイメージ右のように「ページタイトル」「見出し」「テキスト」という各レベルをはっきりと区分し、それぞれ違いをつけていくことでイメージ左のものよりも見やすくすることができます。
具体的にはページタイトルはより強く見せるために背景色を加えて文字カラーも変更し、見出しについても下にあるテキストとの違いをよりつけるためにサイズとウェイトを変更しています。
また、今回のサンプルはモノクロですが、ページタイトルの背景色や見出しにそれぞれカラーを加えるなどすることでより対比効果をつけることができます。

すべての原則を意識する

「近接」「整列」「反復」「対比」というデザインにおける4つの基本原則を紹介してきましたが、多くの場合はこれらを単独では使用しません。
実際にこのエントリーでサンプルとしてあげたものも「整列」について紹介している部分では「近接」を、最後に紹介した「対比」についてはすべての原則を組み合わせています。
このように単独で使うよりも複数組み合わせて使うことが多く、さらに言えばデザイン時にはこれら4原則すべてを意識することが素敵なデザインを作り上げることに繋がります。


特にこれからデザイナーを目指そうとしている人やデザイナーなりたてという人は、ここで紹介してきた4つの原則を覚えておくことで今後様々な場面で役立ってくると思います。
見やすくて内容が伝わりやすいデザインだけでなく、特殊なデザインをするときにはあえてこれらの原則に則っていない形にすることもありますが、それもこういった基本を理解しているのとしていないのとでは出来栄えは違ってきます。
また、自分がデザインしているときに限らず、ギャラリーなどで他の人のデザインを参考にする際にもただ眺めるのではなく「これはどの原則を利用してるのかな?」とか「ここは反復と対比を組み合わせてるのか」といったように、これらの原則を意識して見ていくことでこれまでとは違った見え方や新しい発見があるかもしれません。

各種デザインツールを使いこなせるようにすることも大事ですが、こういった基本的な知識についても覚えておきましょう。