ウェブデザインで見るデザイン4原則入門

前回、ウェブデザインの始め方について簡単に紹介させてもらったが、本記事では実際にデザイナーが普段意識しているルールを紹介しよう。

デザインには言わずと知れた4つの基本原則というものが存在する。これは、もしこのルールさえ守れば、悪いデザインは作りようがないというくらい重要なものである。今回は、悪いデザイン例を一緒に直していく中で、このルールを説明したいと思う。


さて、下のウェブデザインを見てみて、何か気づくことはあるだろうか。

まず一番始めのルールはAlign(整列)だ。上の画像をみてみると、イメージのサイズが合っていないため、バラバラに見える。バラバラは見栄えが悪いだけでなく、ユーザーの目線の動きを無駄に増やすため、ユーザビリティも下げる。それを直すためにはまずイメージのサイズを全て同じにし、上揃え、左揃えにすることだ。こうすることによって、ユーザーは余計なことを考えずスムースに情報を理解できるようになる。

だいぶ見違えただろう。でも、上の例ではまだ問題がある。何が問題だろうか?
それぞれのフルーツ名のテキストの位置にヒントがある。

ここで出てくる二番目のルールはProximity(近接)だ。 上の例を見ると、Appleというテキストはリンゴよりもキウイに位置が近い。これは近接のルールを破っている。もはやリンゴがAppleというのは当たり前の事実であるが、もしそれを知らない人が見たら、キウイをAppleと呼ぶものだと勘違いしてしまうだろう。関係する情報は近くに置く。これが近接の基本ルールだ。

さて、今度は近接も直した。どのフルーツの画像が、どのフルーツ名と連動しているか見やすくなっただろう。これが近接のパワーだ。

次は、それぞれのフルーツにLikeボタン(ハートマーク)を置いてみよう。

何か気づいただろうか。

ここで問題になっているのは、Repetition(反復)だ。上段を見ると、ハートマークが右に配置してあるが、下段を見ると、ハートマークが左に配置してある。これは反復のルール違反だ。

反復が守られていないと、ユーザーはいちいちハートマークがどこにあるのか探さなくてはいけなくなる。細かいかもしれないが、こういう問題はサービスの使いやすさに地味に影響してくる。

ハートマークの位置を左に揃えてみると見違えただろう。これでかなりユーザーフレンドリーになったはずだ。でも、忘れてはいけないルールがもう1つある。読者の方は、なにが問題だと思うだろうか。

上の例を見ていると、どのフルーツがすでにLikeされているか見辛くないだろうか。ここで出てくるのがContrast(強調)だ。Likeされているフルーツが一目でわかるように強調してみよう。ここでは、ハートマークの色、フルーツ名のテキストフォントの太さ、若干のイメージの透明度の違いで差をつけてみる。

 結果、リンゴがLikeされていることがパッと目に入るようになった。


これがデザインの基本4原則だ。簡単だろう。Align(整列), Proximity(近接), Repetition(反復), Contrast(強調)のたったの4つだけである。今回の例では、多少大げさにルール違反しているが、このルールが守られていないことは実は多い。デザイン初心者は、まずはこの4つのルールを守ってから、自分の趣向にあった飾りを加えていこう。このルールなしで突き進むとデザインはカオスになってしまう。

それぞれのルールのベースにあるのはあくまでユーザー目線だ。ユーザーがストレスなく情報を見れるかどうかというのを意識してデザインしていこう。ちなみに、ここで紹介した4原則はウェブデザイン以外にも使えるものなので、普段の資料作りから意識し始めてみるのもいいかもしれない。