みなさんこんにちは!atorieデザイナーのせらです!
資料作成やレポート作成、はたまたインスタグラムに投稿する写真一つにしても、
なるべく見栄えのいいものにしようと試行錯誤…
「何かかっこよくない…」
「あの人みたいに可愛くできない…」
「全体的に見にくいしダサい…」
時間をかけてつくっても上手くできない
「どうしたら良くなるかわからないし、デザインってセンスでしょ?」
こんな声も多く聞きます。
確かにデザインには、センスも大事ですが、
センスで片付ける前にデザインの原則をご存知でしょうか?
今回は、知っている+活用することで劇的にデザイン力が向上する
【デザインの4つの基本原則】について紹介していきたいと思います!
目次
デザインには4つの基本原則と呼ばれる、良いデザインには必ずと言っていいほどの基本原則があります。それぞれの原則を意識してデザインをすることで、あなたのデザインをより良いものに近づけることができます。
そんなデザインの4つの基本原則はこちら!
・近接(Proximity)
・反復(Repetition)
・整列(Alignment)
・コントラスト(Contrast)
これだけでは、何のことかまだわかりづらいですよね。
一つずつ解説していきます!
近接とは、人は位置的に近いもの同士を見た時に「関係があるもの」と認識する習性があります。
関係性の高いもの同士を近づけるように位置を整理するだけで、視覚的に理解のしやすいレイアウトを作ることができます。
では、ここで近接の例をご紹介します。
こちらは珍しい果物の画像と説明が書かれたものです。
![](http://dezarapo.com/wp-content/uploads/2022/01/スライド1-1024x576.png)
あなたは、それぞれの画像がどの果物のことを指しているのかすぐに判断できますか?
多くの方が迷うことになると思います。
この“迷う”ということになった時点でこのデザインは、改善の余地があるということです。
では、こちらを近接を意識してリデザインすると…
![](http://dezarapo.com/wp-content/uploads/2022/01/スライド2-1024x576.png)
どうでしょうか?先程よりも分かりやすくなったかと思います。
これは、説明文と画像を近くに置いた(近接)ことが理由です。
近接を意識することで、情報の組織化に役立ち、混乱を減らし、伝えたいことが明確になります
反復とは、色や線、モチーフ、レイアウトなど同じデザインの中で同じ要素を繰り返し使うことで、一貫性のあるデザインにする効果があります。一貫性のあるデザインは、見る人にストレス無く内容に目を向けさせる効果があります。
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.10.04-1024x574.png)
このままでは、写真の大きさや文字の位置などに一貫性がなく、とても見にくい状態です。
こちらを反復を意識してリデザインすると…
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.10.14-1024x574.png)
写真・名前・説明の順番を固定して、反復して並べることで、動物図鑑のように見やすくなりました。
多くの要素を一覧で並べたい時には、同じような構造を並べることで整理された情報を相手に伝えることができます。
整列とは、人は規則正しく並べられているものを見ると「美しい」「きれいだな」と感じます。
位置を揃えることでデザインに安心感やまとまりが生まれます。
整列では、名刺の例をご紹介します。
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.17.33-1024x574.png)
文字の位置が揃っていないので、まとまりのない名刺です。
では、こちらを整列を意識したデザインにすると…
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.17.43-1024x574.png)
職業と名前を左揃え、その他の情報は右揃えにすることでまとまり感のある名刺となりました。
ここで勘の良い人はもう一つあることに気づいたのではないでしょうか?
こちらは、整列だけでなく同時に近接も意識したデザインとなっています。
「そんなに多くのことを一度にできないよ…」
そんな声が聞こえてきそうですが、慣れると無意識のうちに出来るようになります。
コントラストとは、ある要素と別の要素を「対比」させることで、強調したい内容を際立たせることができます。メリハリをつけることで、情報を正しく伝えることができ、見栄えも格段に良くなります。
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.25.37-1024x577.png)
このままでは、文字の羅列で読むのが億劫になりますね。
コントラストを意識して読んでもらえるようなデザインにすると…
![](http://dezarapo.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-27-12.25.45-1024x577.png)
タイトルや小見出しのサイズや色に変化を持たせることで見やすく、内容が分かり役なりました。
コントラストを意識することで、情報にメリハリを出すことができます。
4つの基本原則は、もう覚えましたか?
・近接(Proximity)
・反復(Repetition)
・整列(Alignment)
・コントラスト(Contrast)
覚えていない人は、今覚えましょう!
近接、反復、整列、コントラスト、近接、はんぷ…
しかし、覚えるだけでなく使えるようになるまでがゴールです。
作りながら意識することは、最初は難しいかもしれないので一度作り終えてから見直す癖をつけてみましょう。
私も作っている時は、気付けなくて後から見返した時によくデザインを変更することがあります。
今回は、デザインの基本中の基本「4つの基本原則」についてご紹介しました。
この原則を覚えておくことで、デザインを劇的に上げることができます。
まずは、原則に沿ってデザインをすることを心がけましょう!