デザイン向上委員会

デザイン素人でも劇的に見栄えが良くなる4つの法則とは?

こんにちは、emikiです。

デザインには、見栄えを劇的に良くするための基礎的な4つの法則があります。

  • 接 近(Proximity)
  • コントラスト(Contrast)
  • 反 復(Repetition)
  • 整 列(Alignment)

ある程度デザインに精通している方であれば、ピンとくるかもしれません。
それほど有名な法則です。

「初めて聞いた!」という方や、デザイナーではない方でも、この法則を活かせば劇的に綺麗な仕上がりのデザインを作ることができます。

今回は、その法則についてご紹介します。



スポンサーリンク

デザインの見栄えを劇的に良くする4つの法則

  • 接 近(Proximity)
  • コントラスト(Contrast)
  • 反 復(Repetition)
  • 整 列(Alignment)

それでは早速、それぞれの法則について、見ていきましょう。
画像つきで、解説していきます。

デザインの法則① 「近接」

人間は、位置が近いもの同士は「関係があるもの」と認識する習性があります。
この習性を利用して、関連するもの同士は距離を近づけて配置します。

文章で説明するより、図で解説した方が分かりやすいですね。

以下の画像をご覧ください。

デザインの4原則「近接」アイスクリームのメニュー表です。
一見問題ないように見えるかもしれませんが、アイスクリームそれぞれの隣同士の距離が近く、若干の見辛さを感じてしまうため、デザイン的にはよろしくありません。

デザインの4原則「近接」
見やすいように修正した画像がこちらの上の画像です。
関係性がないもの同士は、物理的に距離を離すと、差別化しやすいです。

簡単にいうと関係性のないもの同士は、「余白」を取ることです。

「近接」のデザインをするには、この「余白」が非常に重要な役割をはたします。

デザインの4原則「近接」
余白をうまく使うことで、近接の効果を活かすことができます。

また、余白の広さの幅は、均等な方が望ましいです。

デザインの4原則「近接」
余白の幅の広さが均一でなければ、デザイン的に美しくはなりません。
きちんと均等に配置するようにしましょう。

 

デザインの法則② 「コントラスト」

「コントラスト」とは、デザインに「強弱」をつけて、情報の優先度を見やすく示す方法です。

オブジェクトに強弱をつけたり、色を変えることで、コントラストのあるデザインができます。

デザインの4原則「コントラスト」こちらの上の画像は、コントラストを意識せずフラットに作ったデザインです。

 

デザインの4原則「コントラスト」こちらの上の画像は、コントラスト意識したデザインです。
目立たせたい文字を大きくし、色も変更しました。

1枚目の画像と2枚目の画像とでは、どちらが見やすいかは一目瞭然だと思います。

 

また、「コントラスト」に関して、デザイン素人の人が良くやってしまいがちなNG例は、
「やりすぎ」
「控えめ」
この2パターンです。

「やりすぎ(できるだけたくさんの情報を目立たせようと思う)」
できるだけたくさんの情報を目立たせようと思い、コントラストをやりすぎてしまう人もいます。
すべての情報を目立たせることは不可能であることを理解しましょう。
あえて目立たせない部分があるからこそ、目立つ部分がより際立つのです。

「控えめ」
逆に控えめの人は、思い切りが大切です。
1番目に目立たせたい箇所、2番目に目立たせたい場所など優先度を決め、思い切ってコントラストをつけてみましょう。

 

デザイン初心者がやりがちな「盛りすぎ」「やりすぎ」デザインについては、こちらの記事で書いているので、ご確認ください。

グラフィックデザイナー初心者のNGデザイン(カラー編)こんにちはemikiです。 つい先日、デザイナーとして片足突っ込んだくらいの時期、10年前に私がデザインしたフライヤーを発見しまし...

 

デザインの法則③ 「反復」

デザイン全体に統一感を出すためには「反復」が不可欠です。

各オブジェクト、線、色、アイコン、レイアウトなど、デザイン中に同じ要素を繰り返して使うことにより、全体に統一感が出ます。

文字で説明するよりも、画像を見た方が分かりやすいと思うので、こちらをご覧ください。

デザインの4原則「反復」スイーツのメニュー表です。(※例で作った画像なので、デザイン中に記載されている文言は適当です。ご了承ください。)

「カップケーキ」「ソフトクリーム」「ケーキ」「ドーナツ」と4つのカテゴリーに分けられています。
「カップケーキ」のブロックをテンプレートと化し、反復して「ソフトクリーム」「ケーキ」「ドーナツ」のブロックを作っているだけ。
決められたデザインの法則から逸脱していません。

「単調でつまらないデザインだ」と一瞬思うかもしれませんが、情報を受け取る側からしたら、全体的に統一感があった方が見やすいです。

デザインはオリジナリティーや個性も大事ですが、第一に情報を受け取る人が「見やすいかどうか」も考える必要もあります。

 

デザインの法則④ 「整列」

最後に「整列」です。

「整列」はデザインの基礎中の基礎。

「整列」を意識すると、完成度の高いデザインにグッと近づけます。
常にオブジェクトのツラを揃える癖をつけることが大事です。

 

デザインの4原則「整列」

上の画像左側は、「左に」情報を揃え、
上の画像右側は、揃えることを特に意識していません。

 

デザインの4原則「整列」
画像を見てもらえばわかると思いますが、情報を「整列」をするだけで、どれだけ見やすいデザインになるか一目瞭然ですよね。

「整列」はデザインの基礎です。

「整列」をするとしないとでは、デザインの見栄えがまったく変わるので、必ず意識して行うようにしましょう。

 

最後に

  • 接 近(Proximity)
  • コントラスト(Contrast)
  • 反 復(Repetition)
  • 整 列(Alignment)

今回は、デザインの見栄えを劇的に良くするための4つの法則を紹介しました。

意識して実践するだけでデザインのクオリティーをワンランクあげることもできるので、デザイン初心者の方は、ぜひ試してみてください。
デザイナー以外の方も、ぜひ挑戦してみてください。

 

「近接」「コントラスト」「反復」「整列」の具体的な実戦方法については、こちらの記事でも詳しく書いています。

脱・初心者デザイン!クオリティー向上のための4つのテクニックこんにちは、emikiです。 「自分のデザインがなんか素人くさいな〜」 「垢抜けないな〜」 デザインの勉強をし始めの頃は、...



スポンサーリンク