デザインには4つの基本原則があります。今回はデザイナー以外の方や初心者デザイナーに向け、okなデザインとbadなデザインを極端に比較しながら4原則をざっくりご紹介していきます。

4原則とは

そもそも4原則ってなに？って話ですが、
・整列
・近接
・反復
・コントラスト
があります。これらの原則に沿ってデザインすることで分かりやすい、見やすい、まとまった、きれいというようなデザインができます。また、訓練すれば誰でも身につく知識なのでデザイナー以外の方でも4原則をある程度、身につけるだけで、見やすい資料、お店のポップ、チラシ作り等ができるようになります。

では、1つずつ原則を紹介していきます。

整列

整列の原則とは、意図的に何らかの規則性を持って要素を並べることをいいます。

あいうえおと書かれている文字を例に比較してみましょう。
まずはbadなデザインからです。

❌badなデザイン

規則性なしで配置されています。これは並べられているともいえませんね。笑
あと、当たり前に「あいうえお」と読めません。

⭕okなデザイン

読みやすいように、余白（字間）や横並びという規則性を持って意図的に並べられています。

では、UIではどういうケースのときに整列が使われているのか比較してみましょう。下記は日記アプリの一覧ページのUIとします。構成は見出しと本文となります。

❌badなデザイン

なにかを基準にして揃っていないため、配置に規則性がなく、視線を大きく動かして目を凝らしていかないと情報が掴みづらいですね。。見た目もガタガタして雑な感じがしてしまいます。

⭕okなデザイン

左に揃えることで規則性が生まれ、視線移動が少なく情報をキャッチアップしていけます。

このように意図があり規則性を持って揃えることを整列といいます。

近接

近接の原則は、要素を近くに配置することでグルーピング、関連性を持たせることをいいます。

ではでは、「メニューは豊富&見た目は一緒なラーメン屋さん」のメニュー表を使い、まずはbadなデザインから違いを比較してみましょう。

❌badなデザイン

一応、メニューAとBと書かれているので、2つのメニューがあるというのはなんとなく分かりますが、各ラーメンとも近くに配置されているため、どこまでがAのメニューでどこからがBのメニューかが分かりづらいものになってしまっています。

⭕okなデザイン

メニューAのラーメン同士が近くに配置され、少し離れたところにメニューBのラーメン同士を近くに配置しています。このように配置することで、メニューAとBが異なるグループということが明確化します。また、AとBの間に余白も生まれ、グルーピング化がより助長されてます。

それでは、UIで比較していきます。
見出し、本文、アクションさせたいボタン群という構成のポップアップがあります。

❌badなデザイン

まあ、、見れば操作できないわけではないですが違和感がありますね。。違和感の原因は「OKボタン」と「キャンセルボタン」同士が離れているからです。「OKボタン」はポジティブアクション、「キャンセルボタン」はネガティブアクションとなり、アクションさせるという意味で関連性のあるボタンのため近くに配置しないと、分かりづらいため視線移動が増えてしまいます。

⭕okなデザイン

一方、「OKボタン」と「キャンセルボタン」を近くに配置することで関連性があったり、瞬時に2つの内1つ選択するのだということをユーザーは理解することができます。

このように、関連する要素同士を近くに配置しグルーピングすることを近接といいます。

反復

反復の原則とは、同じ要素やスタイリング等を使いまわし、関連性や一貫性を出す原則になります。
あいうえお表の一部を例に比較していきます。

❌badなデザイン

目を凝らせば読めますが、読みづらいのはもちろん違和感&見た目もBadですね。フォントサイズが大小バラバラ、色も黒や緑が使われている、文字同士の余白もバラバラのため、読みづらくなり一貫性もありません。

⭕okなデザイン

一方で、こちらは読めますし整って見えます。なぜ整って見えるかというと、ここではどの文字にもフォントサイズ、余白（字間）、色といった同じスタイリングが繰り返し使われているからです。
これらの規則が一定に使われているため、一貫性もでています。

次は、カード型のUIで見てみましょう。

❌badなデザイン

背景色、カードの高さ、サムネイルのサイズや形がカードごとに異なっているデザインが並べられています。これは整って見えず、関連性も見えません。

⭕okなデザイン

badデザインと比べてサイズ、余白、背景色等が同じデザインのカードが使われていることで一貫性があり見やすくなっています。

このように、1つのデザインやスタイリングを使いまわしたりすることで一貫性を出すことを反復といいます。

コントラスト

コントラストの原則は、異なる要素を強調するための手法です。

また「メニューは豊富&見た目は一緒なラーメン屋さん」のメニュー表で比較してみましょう。前提として左から1番目のラーメンを店主がおすすめしたいラーメンとします。

❌badなデザイン

整列、近接が効いているため見た目上は何も問題ありません。しかし、左から1つ目のラーメンをおすすめとしたいので、これでは伝わりませんね。なのでbadです。

⭕okなデザイン

おすすめのラーメンを他より大きく配置してみました。これで何がおすすめか伝わりますね。右から4つまでのラーメンはサイズや余白が規則的に配置されていますが、おすすめしたい左から1つ目のラーメンはあえてサイズを上げ、余白も少しとってます。そうすることで、他のラーメンとの差別化ができ、視線も強調している方に向きやすくなります。

さて、お気づきの方もいるかもですが、コントラストは前述した整列、近接、反復の逆説的にも捉えられますが、整列、近接、反復がある上で無秩序感をだすことで対比が生まれやすくなります。

では、次はヘッダーで見てみましょう。前提として、お問い合わせ数を獲得したいホームページのヘッダーとします。

❌badなデザイン

お問い合わせをしてもらいたいということを考えると、これでは「お問い合わせ」が目立っていないので一目で判別ができません。

⭕okなデザイン

他のメニューはテキストリンクに対して、お問い合わせに背景色や形でボタン感を出すことでコントラストが生まれます。

コントラストは伝えたいこと、重要な情報や要素を対象につけていきます。重要でない要素に付けてしまうと、重要度が低い情報を目立たせることになってしまうので、目的をもって付けることがポイントになります。また、どれも重要だからといってコントラストを付けると差別化できず、ごちゃごちゃしてしまい伝わりづらいデザインになってしまうのです。

4原則のおもしろさ

4原則の紹介をしましたが、目的によっては必ずしも沿う必要はありません。例えば、前述しましたが、今一度、下図のラーメンのメニュー表を見てみます。整列の観点からはクリアになってます。ですが、コントラストの観点（ある要素を目立たせたいという何らかの意図がある場合）クリアになっていません。

このようなケースの際、特に初心者デザイナーはどちらの原則を優先的に使えば良いか迷いがちですが、なんのためにデザインをするのかに戻り、ユーザーに何を伝えたいか、どんな情報が重要かを定めればどちらの原則を使った方が最適かが見えてきます。

このように4原則は闇雲に使うものではなく、1つ1つ意図を以って使うものであると私は考えています。そして、それを考えるデザイナーからするとあーでもないこーでもないという試行錯誤しながらデザインすることが1つのデザインのおもしろさでもあると思います。

終わりに

デザイナー以外の方でも資料、お店のポップ、チラシの作成をする方であればこの4原則をものにすれば、伝えたい相手により伝わるデザインに、そして見た目もいい感じのデザインになっていくのでノンデザイナーズデザインブックといった書籍を始め、4原則のことを取り扱っているネット記事等を見てみてください。

prophetではWebデザイン、UIデザインのお仕事を募集中です。詳細は下記よりお問い合せください。
お問い合わせはこちら！