デザイン

デザイン4つの基本原則はデザイナーではない人も知っておきたいこと

プロのデザイナーでなくても、パンフレットやチラシ、ニュースレター、レポートなどを作る機会があるかもしれません。

そういうときに実際デザインしてみると、案外難しいものです。

なんか違うというのは非デザイナーでもパッと見た感じでなんとなくわかるんですけど、どこを直せば良いデザインになるのかわからない人がほとんどです。

普段何気なく見ているチラシやポスターなどの印刷物、Webサイトやアプリのデザインって、きれいなデザインのものが多いですよね。

もちろんなかには微妙なデザインだなと思うものもありますが、良いデザインには全て共通している原則があります。

それが以下の4つの原則。

  1. 近接
  2. 整列
  3. 反復
  4. コントラスト

これらの原則を知ることで、今よりも良いデザインのものが作れるはずです。

近接 Proximity

一つ目の基本原則は近接。

関連のある項目は近づけてグループ化しましょう。

文字を羅列しただけのメニューと近接を利用したメニュー
上の画像は、飲食店にありそうなドリンクメニューを例にしてみました。

こんなにひどいメニューはさすがにないと思いますが、左がただ文字を羅列しただけのメニュー。いくらなんでも見づらいですよね。

右は近接を用いて、関連のあるものは近づけ、関連のないものは間隔を離したメニューです。

パッと見て、4つのグループに分かれているのがわかりますよね。

近接の一番の目的は情報の組織化。近接していることで、バラバラの要素が1つのグループになり、情報が組織化されていれば、読んでもらう可能性、覚えてもらう可能性が高くなります。

近接のポイントとしては、要素を作りすぎず、要素どうしの間には均等な空白を作らないことです。

空白が均等だと読む人は迷ってしまいます。

また、性質が違う要素の間は関連をつくらないように、離して配置することが大切です。

読んでみて視線が何回も止まるようだと、バラバラの要素が多すぎる可能性があるので、近接でグループ化できないか考えてみてください。

整列 Alignment

次に整列です。言葉のままですが、要素は整列するように配置した方がきれいです。

整列を利用していないメニューと利用しているメニュー
先ほどと同じドリンクメニューです。左が近接を用いてグループ化したドリンクメニュー。右が整列の基本原則を用いて要素を配置したドリンクメニューです。

左のメニューでは、ドリンクメニューという文字が中央にありますが、その他の要素は左揃えになっています。

右のメニューでは、ドリンクメニューの文字も左揃えで合わせ、値段は右に揃えてみました。

ページ上のすべての要素は意識的にどこに配置するかを決めてください。

整列を用いることで、それぞれの要素が離れていても、見えない線で結びつけることができ、視覚的にも一体化・組織化されます。

反復 Repetition

デザインに統一感を出すためには反復を用いることも大事です。

反復を利用していないメニューと利用しているメニュー
左は近接と整列を用いたドリンクメニュー。右はそれに加えて反復の原則を用いています。

反復とはデザインにおいて何かしら特徴(視覚的要素)があるものを、何度も繰り返すことです。

例えば、反復させる要素には、太文字や、太い線、約物(記号)、色などがあります。

右のドリンクメニューでは、ビール・焼酎・カクテル・ソフトドリンクに下線を引き、それぞれの項目には「・」の記号を反復して使っています。

また、値段は全て赤色にすることで、より情報がわかりやすくなりました。

下線を値段のところまで引いているのは、整列の原則も意識しているからです。

反復は近接と同じように孤立していた要素が結びつけられるとともに、全体を通して繰り返すことでページ全体が一体化されます。

さらに視覚的なおもしろさも出てきますよね。

反復はとても大事ですが、反復させすぎるとよくないので、少し気をつけてください。

コントラスト Contrast

最後にコントラストについてです。

コントラストを利用していないメニューと利用しているメニュー
これまでと同様、2つのドリンクメニューがあります。

左は近接・整列・反復を用いたもので、右はコントラストも意識しています。

異なる要素が配置されているときは、それぞれが違う要素であるということを表現するため、コントラストを強くします。

コントラストをつけるのは例えば、線や文字の太さ、色、形、大きさなどです。

右のメニューにおいては、ドリンクメニューの文字の大きさ・色・フォントの種類を変えました。

さらに、ビール・焼酎・カクテル・ソフトドリンクはお酒の種類を表す見出しのような役割があるので、背景に色をつけて白抜きの文字にしています。

そしてそれぞれのドリンクや値段の文字の大きさを小さくしています。

こうやってコントラストを使って違いを出すことで、情報が組織化されるのももちろんありますが、見る人の目を引き付ける効果もあります。

コントラストをつける場合は、思い切って違いを出すことを意識してください。そうすればより面白みが出ると思います。

デザイン4つの基本原則は全て意識すること

デザインの4つの基本原則を利用していないメニューと利用しているメニュー
左がデザイン4つの基本原則を使っていない最初の状態のもので、右がデザイン4つの基本原則(近接・整列・反復・コントラスト)を用いたものです。

デザインとしては見た目にまだまだ面白みは欠けていますが、最初のメニューと比較すると、伝えたい情報がずいぶん整理されました。

ドリンクメニューにはビール・焼酎・カクテル・ソフトドリンクの4種類があるというのが一目でわかり、それぞれのドリンクや値段も見る人が迷うことがなくなったと思います。

大事なのは、近接・整列・反復・コントラストという4つの基本原則のどれかが欠けていてもダメだということ。

全て意識する必要があり、それぞれの原則にもとづいてデザインされていることで、作品として一体感が出るんです。

なぜこういうデザインにする必要があるのか?色・形・配置・大きさなど、それぞれに意味があるというのが重要です。

ときには原則を破り、個性的なデザインにすることもあるかもしれません。でもそれはそういうデザインにする必要があるからこそ、プロのデザイナーはそういうデザインにしているんです。

デザイナーではない人も、これら4つの基本原則を知っていることで、あらゆる場面で役立つと思います。

参考書籍

2 Comments

『デザインの教室』手を動かして学べるデザイントレーニング本 | KUBOGEN へ返信する X