1. 近接 - PROXIMITY
関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。
その際、近接を上手く活用したいときに気を付けたいポイントが余白で、何となくで余白をつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。
上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。
また、このように一部を切り取った状態で見たとき、近接が考慮されていないデザインだと「Football」や「Tennis」の文字は上下どちらに関するテキストなのかがパッと見で判断できません。
これを下のイメージのように近接を意識して配置し直すと、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技なのかが把握しやすくなります。
また、上手く活用したいときに気を付けたいポイントとして先述したように、関係する要素の余白とそうでない要素の余白とで違いをつけており、これであれば先ほど例にあげたように一部を切り取った状態で見たときも、ボールのすぐ下にテキストがあるのに加えて下のボールとの距離があることから、テキストが上下どちらを指しているかもパッと見でも判断が容易になります。
2. 整列 - ALIGNMENT
要素を闇雲に配置するのではなく、左揃えまたは右揃えのように要素を意識的に配置することによって情報が整理され、全体的にスッキリとまとまった印象を与えることができます。
また、近接と組み合わせることで各要素の繋がりや統一感をより見せることも可能です。
整列が上手く活用できているポイントとしてよく耳にするのは、見えないラインやグリッドを作り（想像し）、そこに合わせて要素が配置されているのかを意識することです。
上のイメージにある水色の点線のように、実際にはなくてもデザインを見直した際にそれらが自然とあるように見えれば上手く活用できており、逆にこれらが見えてこない場合は上手く整列を活用できないことになってきます。（もちろん例外は有り）
近年だとサイトのレイアウトも様々で、パッと見では整列なんて考えてなさそうなぐらい要素が自由に配置してあったり少し位置をずらしてあるようなサイトも見かけることが多いです。
ですが、そういった場合もなぜか綺麗に整って見える印象があるサイトは、実はデザイン全体で見ると近接や整列が非常に上手く活用されているということがほとんどです。
3. 反復 - REPETITION
※上から MOREWORKS、Qonto、Panasonic、BEAMS
上のイメージにあるように、サービスや特徴の紹介コンテンツやニュースのリスト表示など、要素を一定のルールで繰り返すことで一貫性・統一性を持たせることができます。
また、このように特定の範囲内（ページ内）のみに限らず、例えばサイト全体でヘッダーやフッターを統一させたり見出しや装飾を繰り返して使用することが多いですが、これらも反復のルールに則ったもので、これによってどのページに行っても同じサイト内にいるということをユーザーに認識させ且つサイト全体の統一性にも繋がります。
ただし、場合によっては使いすぎることで逆に面白みが欠けたりくどくなりすぎることもあるので、とにかく繰り返せばいいということではなく全体のバランスは考えるべきです。
4. 対比 - CONTRAST
文字ならカラー・サイズ・ウェイトを変える、装飾なら背景色や罫線をつけるといったように、各要素の違いをハッキリさせることでデザイン全体にメリハリを付け、上手く活用すれば内容的には同じでも単純にデザインされたものよりも人を惹きつけるデザインにすることができます。
また、その際は多少の違いを付けるのではなく大胆に違いを付けることが好ましく、それによって情報の優先度の明確化にも繋がります。
上のイメージ左は近接や整列のルールには則ってはいますが、全体的にコントラストが弱いために少し読み難い印象を受けます。
ページタイトルは太字でサイズも少し大きいのでまだわかりやすいものの、見出しについてはパッと見で目に入ってこないという人もいそうです。
これをイメージ右のように「ページタイトル」「見出し」「テキスト」という各レベルをはっきりと区分し、それぞれ違いをつけていくことでイメージ左のものよりも見やすくすることができます。
具体的にはページタイトルはより強く見せるために背景色を加えて文字カラーも変更し、見出しについても下にあるテキストとの違いをよりつけるためにサイズとウェイトを変更しています。
また、今回のサンプルはモノクロですが、ページタイトルの背景色や見出しにそれぞれカラーを加えるなどすることでより対比効果をつけることができます。
すべての原則を意識する
「近接」「整列」「反復」「対比」というデザインにおける4つの基本原則を紹介してきましたが、多くの場合はこれらを単独では使用しません。
実際にこのエントリーでサンプルとしてあげたものも「整列」について紹介している部分では「近接」を、最後に紹介した「対比」についてはすべての原則を組み合わせています。
このように単独で使うよりも複数組み合わせて使うことが多く、さらに言えばデザイン時にはこれら4原則すべてを意識することが素敵なデザインを作り上げることに繋がります。
特にこれからデザイナーを目指そうとしている人やデザイナーなりたてという人は、ここで紹介してきた4つの原則を覚えておくことで今後様々な場面で役立ってくると思います。
見やすくて内容が伝わりやすいデザインだけでなく、特殊なデザインをするときにはあえてこれらの原則に則っていない形にすることもありますが、それもこういった基本を理解しているのとしていないのとでは出来栄えは違ってきます。
また、自分がデザインしているときに限らず、ギャラリーなどで他の人のデザインを参考にする際にもただ眺めるのではなく「これはどの原則を利用してるのかな？」とか「ここは反復と対比を組み合わせてるのか」といったように、これらの原則を意識して見ていくことでこれまでとは違った見え方や新しい発見があるかもしれません。
各種デザインツールを使いこなせるようにすることも大事ですが、こういった基本的な知識についても覚えておきましょう。