デザインの4原則
デザインの4原則は、Webデザイナーであれば、知っている人も多いのではないかと思います。多くの業界で製品やサービスの機能的な面でのコモディティ化が進んでしまった昨今、美しいと感じさせて差別化することの重要性や、誰もが忙しく複雑化した社会において、情報を効率よく伝えるためデザインの重要度があがっているのは、肌で感じていることではないかと思います。つまりデザインが大事な世の中になったので、デザインに関して一家言もつことは、デザイナー以外の職種の人にも求められているのではないかと感じています。
さて、前置きが長くなりましたが、本題のデザインの4原則は、以下の４つです。
①「近接」
関係する情報同士を近くに配置してまとめる。
②「整列」
要素に規則性を持たせて整列して配置する。
③「対比」
情報に優先度をつけて強弱をつける。
④「反復」
同じパターンで繰り返す。
これら4つ原則の例は、「デザイン 4原則」と検索すれば、親切に分かり易く図説されたイメージがゴロゴロ見つかるので、ここでは割愛しますが、代わりにデザインの4原則についての軽いうんちくと、これらが、なぜ原則なのかをまとめておこうと思います。まずは、軽いうんちくですが、デザインの4原則などと呼ばれるからには、古くからあるデザイン技法における常識的な原則とでも思われそうですが、実はそうではありません。ロビンウイリアムズという著名なアメリカ人女性による1998年の著書「The Non-Designer’s Design Book」のなかで提唱されたものです。個人的には、「デザインの4原則」というネーミングが本のタイトル同様にとても素晴らしく、あっという間に浸透したのではないかと感じています。
さて、続いて「近接」「整列」「対比」「反復」これらは、なぜ原則なのかについてです。
「近接」については、要素が互いに近接して配置されることにより関連性が高い情報がまとまっていることが視覚的に認識されます。これにより、視覚的な混乱が減少し情報をグループ化して理解することが容易になり全体の意味的な構造を理解しやすくなるためです。関係ないものが挟まると途端にユーザを置き去りにされてしまうということがよくありますが、弊社では、これを情報のサンドイッチと呼んでおり、Webデザインに限らず企画書などでも注意していないとやってしまいがちなので、パンはパンで綺麗にまとめるように心がけています。
「整列」については、要素が整列して配置されることによりデザインに秩序や均一性がもたらされ、視覚的に安定した印象を与えます。人間の感覚は鋭く、少し整列が乱れているだけでも意外とすぐに察知されてしまいます。これがグリッドを用いてキレイに揃えることを怠ってはいけない理由です。
「反復」についても、整列と同様にデザインに秩序をもたらし、全体的な統一感をもたらすためです。画像とコピーのレイアウトを色々と工夫して視覚的な美しさを演出しようとしているのだなと感じるサイトをよく見かけますが、よほど注意してやらないと、初めて見るユーザにとっては、往々にして読みにくくなりデザイナーやサイトオーナーの自己満足になってしまうので注意が必要です。
「対比」については、注意を惹くことができるためです。つまりユーザが、それに従属する情報を見るべきか見なくてよいのかを素早く判断させる機能をデザインにもたせたりすることに役立ちます。また、極端な対比はデザインに緊張感を生み出し、そうした緊張感により視覚的な魅力を演出させることができることもあります。
４つの原則の「なぜ」を見てみると、これらの原則は、共通してユーザが考える負荷を軽減するためのものであるとも言えそうです。その結果、美しくも感じるというのが、不思議なところでもあります。
仕事でウェブサイトやITシステムのデザイン確認の際、なんかおかしいと感じた場合はもちろんですが、そう感じていなくても、４原則に則っているかをチェックして原則に反している点が見つかってデザイン上の問題を発見することもよくあり、とても使いやすくまとまっている原則だと思います。また、注意しておきたいポイントとしては、ページ間で差異についてです。テイストも踏襲されているし、ページ単体でみるとパッと見はキレイにまとまっているけど、異なるページ間でフォントのサイズやカラーが少しだけ異なっていたり、パディングやマージンの入れ方が異なっていると違和感が生じさせる原因になるので注意しておくべきポイントかと思います。
以上、ご参考まで。