デザイン初心者必見! 4つのデザイン基本原則

デザイン初心者必見! 4つのデザイン基本原則

デザイナーは、数多くあるデザインルールやテクニックに則って デザイン をすることで、ユーザーが読みやすいデザインを作ります。

これから紹介するデザインの原則は、意識して使うことでぐっと見やすいデザインが出来るようになると思います。普段デザインを専門としていない方でも、資料作成などでかなり役立つ技術なので是非知っておいてください。

 

4つのデザイン基本原則

  • 近接
  • 整列
  • コントラスト
  • 反復

バナーを実例にして、上記4つの原則を説明していきます。

 

 

1.近接

近接の原則とは、関係する要素と要素は近くに置き、関係しない要素は遠ざけるというものです。
いくつかの要素が互いに近接しているとき、それらはバラバラの要素ではなくまとまったグループになります。キレイなデザインの見た目でなく、視覚的な配置の関係から情報を組織化して考えてくれるんです。

デザイン例_バナー01

上記画像の例を見ると、左のバナーでは各要素の距離感に法則性がなく、余白が均等に近い形になっています。この状態だと情報の関係性が理解しづらくなる上、見た目としても散らかっている印象です。
対して右のバナーは、関係する要素同士で近づけてグループ化しているため、情報が整理されて見やすいデザインになっています。

 

 

2.整列

整列の原則とは、その言葉通り各要素をきれいに配置し、一体感を持たせるというものです。
全ての要素は適当に配置するのではなく、意味をもたせ関連した配置を行うことで、一体感が生まれきれいなデザインになります。基本的には、整列で気にする点は下記2点です。

・要素の端を透明のラインに揃える
・文字揃えを統一

デザイン例_バナー02

左のバナーでは、文字の配置がバラバラで視線の誘導が難しく、見る側にストレスを与えるデザインになってしまっています。
対して右のバナーは、それぞれの要素の端をある透明のラインに揃え、文字揃えを「左揃え」に統一しています。意識的な配置を行うことで、ユーザーが見やすいデザインになっています。
全ての要素を意図的に配置することを意識し、揃えることが出来る要素は出来る限り揃えてみてください。

 

 

 

3.コントラスト

コントラストの原則とは、目立たせたい部分を強調するというものです。
強調の方法としては、線の太さ、形、色、サイズ、装飾、余白など…様々な方法があります。目的は2点あり、1つは強調部分に読み手の視線を誘導すること。そしてもう1つは、抑揚をつけてデザインを視覚的に面白くするということです。

左のバナーでは、各要素に抑揚がなく、つまらないデザインになっています。
対して右のバナーは、各要素に抑揚をつけ、デザインに視覚的な面白みを持たせつつ、目立たせたい部分がハッキリと分かるデザインになっています。
強調したい部分は大きな変化をつけるほど効果を発揮するので、出来るだけハッキリと分かるように変化をつけてみてください。

 

 

 

4.反復

反復の原則とは、デザイン上の特徴を繰り返し使用するというものです。
色、サイズ、装飾、配置など…一度使用した特徴を繰り返すことでデザイン全体に一体感が持たせられます。

左のバナーでは、各要素に統一性がなく、デザイン性がバラけた印象になってしまっています。
対して右のバナーは、各要素の色やフォントを繰り返し利用することで、デザイン全体の統一感を持たせています。
あまりに反復を多用しすぎると「コントラストの原則」が失われてつまらないデザインになってしまうので、注意が必要です。

 

 

まとめ

  • 近接
  • 整列
  • コントラスト
  • 反復

いかがだったでしょうか。これらがデザインレイアウトの、基本的な4つの原則です。
例で使ったバナーでも分かるように、これらの原則は1つだけ使うのではなく、全て利用することでデザインを行うこととなります。これらを意識することで、ユーザーにも優しいデザインが出来るようになると思います。

しかし、あくまでこの原則は基本となるものなので、敢えて基本を崩したデザインもすることもあると思います。
それでも基本を把握した上で崩したデザインと、ただ崩れたデザインでは、やはり質的にも変わってきます。是非基本を覚えた上でデザインの幅を広げていってください!