ここからは実際にデザインについて詳しく学んでいきます。

まず、デザインをする上で意識しておきたい「デザイン4大原則」について学びましょう。

これさえ抑えておけば、素人レベルのデザインからは間違いなく脱却できます。

デザイン4大原則

近接

最初の原則は「近接」

関連する要素を近づけることで、より情報が整理され、人に伝わりやすいデザインになります。

例として下記のメニュー表を作ってみました。

各テキストが等間隔に並びすぎていて、かなり見づらいです。

これを近接の原則を使ってデザインするとこうなります。

いかがでしょう？

関連する要素（商品と説明文）は近くに、関連しない要素（違う商品）は余白を取っています。

これで位置関係がかなり整理され、ひと目でメニューの詳細が分かるようになりました。

整列

続いては「整列」

その名の通り、一定のルールに従って要素を揃えること。

例えばこの名刺のデザインを見てください。

名前とメールアドレスなどの詳細文の先頭が揃っていないため、不揃いな印象が強いです。

これは「整列」を踏まえリデザインしたもの。

名前と詳細文がしっかり揃っており、より見やすくなったかと思います。

反復

反復というのは、同じ要素のデザインをなるべく統一して繰り返しましょうというもの。

例として以下は反復のデザインではないもの。

見出しや箇条書きのデザインが統一されておらず、全体的にごちゃっとした印象を受けます。

続いて反復の原則を使ったデザイン。

今回はテキスト周りのデザインですが、これは写真やロゴ、配色のトーンなどあらゆる要素でも同じことが言えます。

例えばシリーズ物の漫画だと、メインのイラストこそ違いますが、タイトルロゴや配色でひと目で新刊だなというのが分かるはず。

こうした反復の要素はいわばデザインをする上でのルール作りです。

しっかり抑えることで、統一感のある綺麗なデザインに仕上がります。

対比

最後は対比。

要素に優先度をつけて、強弱をしっかりつけましょうという原則です。

例えば以下のサマーセールのバナー。

海の写真に黄色のテキストで夏っぽくて良いのですが、あまり引きのあるデザインにはなっていません。

続いてこちら。

SUMMER SALEという一番目立たせたい文言を大きく配置し、オンラインストア限定や日付などの情報は優先度をつけて、フォントサイズを小さくして配置。

視覚的にどの情報を一番伝えたいのか、どれが補足情報なのかが分かるかと思います。

先程のバナーより格段に引きのあるデザインとなっており、Web広告や店頭に展開しても間違いなく目に留まるのはこちらのデザインでしょう。

以上がデザイン4大原則。

それぞれどんな原則だったか今一度、人に説明するように声に出してみて下さい。

説明できなかったらまた、戻って読んでみましょう。

いきなり覚えきれなくても大丈夫です。焦らずゆっくりいきましょう。

学んだらすぐにアウトプットしよう

一度学んだことは、数日たてばすっかり忘れてしまいます。

ぜひ、感想や学びをツイートして、アウトプットする癖をつけましょう。