デザインの4原則を知っていますか？
デザイナーってセンスがあればもちろん良いですが、センスがなくても出来ます！
今回紹介する原則に沿ってデザインするだけで、ぐっと良いデザインになります。
デザイナーってセンスがないとなれないんじゃないのかな？
独学で勉強しているけどデザインが上手にできない！何か良い方法があるのかな？
こういった疑問、悩みを持っている人は特にデザインの4原則を知っておきましょう！
グラフィックデザインでもウェブデザインでも共通するレイアウトの法則になっています！
デザインの4原則とは
デザインの4原則とは、
- 近接
- 整列
- 反復
- 強弱（コントラスト）
この4つを指します。
基本的に、レイアウト・デザインをするときこの４原則のどれか一つを用いるのではなく、すべて応用してデザインを作成していきます。初めはどれか一つでもいいのでデザインに取り入れていきましょう！
それでは、一つずつ詳しく紹介します。
デザインの4原則：近接
近接とは、関連する情報を近づける方法です。
私たち人間は、近くに配置してあるものを無意識にグループ（関係のあるもの）とみなします。
例えば、近接がされていない下の図を見てください。
イラストと文字が関係しているはずですが、余白が多く取られて離れた位置にあるため、関係性が分かりづらいです。
そしてラーメンとカレーライスのイラストが近いため、どちらかというとそちらがグループ化して見えてしまいます。
では、先ほどの図を近接に沿ってレイアウトし直すと下記のようになります。
- 上：近接がされていないレイアウト
- 下：近接に沿ったレイアウト
見比べてみると、下図のほうがぐっと情報が分かりやすく、見やすくなったと思います。
近接を使う上で重要なのは、関連する情報を近づけて、そうじゃないものは余白を多くとって離した場所に配置します。
そうすることで、「情報のまとまり」が分かりやすく、見やすいデザインにすることが出来ます。
デザインの4原則：整列
整列は言わずもがなですが、要素を揃えることです。
左揃えや右揃えなどですね。
例えば下の名刺を見比べてください。
- 上：整列がされていないデザイン
- 下：左揃え（と近接が）されたデザイン
上図のデザインを見たとき、視線があちこちに動きませんでしたか？
要素もバラバラで、情報の関係が分かりづらいですよね。
逆に下図のデザインを見たとき、視線が上から下に動いたと思います。
整列するだけで、視線の流れが良くなります。
そして、先ほど紹介した「近接：同じ情報を近づける」だけで、ぐっと分かりやすいデザインになったことが見て取れると思います。
整列は左揃えや右揃えなど、デザイン上では見えない線で、要素が揃えられているのがポイントになります。
デザインの4原則：反復
反復とは、特徴的なものを意図的に繰り返すことです。
例えば、先ほど近接で紹介した図をもう一度見て見ましょう。
- 上：イラストの反復がされたレイアウト
- 下：イラストと写真が混ざったレイアウト
例えば、食べ物を紹介するデザインを作成するとします。
左の図は、食べ物はイラストのみを用いてデザインしています。
こうした一貫性を持たせる（つまり同じ要素を繰り返す反復）ことでデザインの統一感が表現できます。
下図では、食べ物をイラストか写真かどちらかを使用して紹介しています。
そうすると、イラストと写真のテイストが違うため、統一感が出ません。
ウェブサイトでも反復の例を見て見ましょう。↓
参考サイト：ヘンミ胃腸内視鏡・内科クリニック
グローバルメニューとなるテキストは、すべて同じフォント、同じ大きさ、同じカラーに揃えられてデザインされています。
「診療のご案内」を紹介する部分では、イラスト（アイコン）と文字がセットになった形式が繰り返されているのがわかると思います。
同じ形式で繰り返すことで、私たちはそれらを一まとまりと捉えることが出来ます。
反復のもっと細かい話
先ほど「アイコンが繰り返されている」と言いましたが、アイコンにも種類があります。
ベタ塗りベースのアイコンと線で表現されたアイコンです。
同じアイコンだから、と思って取り入れると統一感がなくなる原因になります。
先ほどのヘンミ胃腸内視鏡・内科クリニックさんのウェブサイトでは、線アイコンが使われています。
こういった細かい部分もテイストを揃えるとデザインにより一体感が生まれます。
デザインの4原則：強弱（コントラスト）
強弱（コントラスト）は、情報に優先順位をつけて表現することです。
ちなみにウェブデザインでは、大きい要素と小さい要素の比率を「ジャンプ率」と呼びます。
この大小の差が大きければ、「ジャンプ率が高い」、差が少なければ「ジャンプ率が低い」と言ったりします。
- 左：強弱（コントラスト）がないデザイン
- 右：強弱（コントラスト）があるデザイン
デザインの中に強弱を取り入れると、「何を伝えたいのか」がパッと見て理解しやすくなります。
今回は色はモノトーンのみしか使用していませんが、コントラストを扱うポイントは、色の差や、文字の太さ、要素の大きさの違いなど沢山あります。
どのデザインで、どういったコントラスト表現をするか、これに関しては沢山デザインしていくとコツを掴んでくるので、まずは沢山作品をつくっていきましょう！
おすすめの本
これまで紹介してきた「デザインの4原則」を書籍でも勉強したい！と思った方は『ノンデザイナーズ・デザインブック』がおすすめです。
こちらの本は、非常に有名で、非デザイナーから活躍しているデザイナーまで幅広く読まれています。
筆者はこの書籍を初めて読んだとき、こんなにデザインって面白いものなんだ！と感動しました。ぜひ一度手にとって読んでほしいです。
