Webデザインを見やすくしたいなら必須!! 基本は「明るさのコントロール」

ネットは日々使いやすくなり、今ではプログラムが出来ない人でもブログやSNSで自分のWebサイトを簡単に作れるようになりました。
しかしWebサイトのデザインを出来る限り自分らしくと思ってはみても、これがなかなか難しい。四苦八苦するもやっぱり見にくいしカッコが悪いのです。
やはりプロのデザイナーとは何かが違うようです。

今回はWebデザインの基本中の基本「見やすさ」についてのトピックです。
実はここには初心者が陥りやすい罠があるのです。

視認性は明度の差が重要。
見難いかなと感じたら
グレースケールにして確認しよう。

視認性とは何でしょうか。
「見たときの認識のしやすさ」のことです。よく見ないと何が書いてあるかわからないデザインは「視認性が悪い」、一瞬で何が書いてあるかを理解できるデザインは「視認性が良い」ということです。
もう少し簡単にいうと「見やすい」という表現でもいいでしょう。

では明度とは?
明るさ暗さを表す尺度です。「明度を上げる」とは明るくすることで、「明度を下げる」とは暗くすることです。
赤であれば明るい赤と暗い赤という変化になります。

さて、デザインや色彩を学んでいない人がWebデザインをすると色を使いすぎる傾向があります。たくさんの色を使って華やかにすることがデザインと考えている人が多いのです。実はこれは間違い。

実際にサンプルを見てみましょう。

r00007_02

上は出来るだけ派手な色を使い初心者が頑張って作ったデザインです。
下は色を使わずに仕上げた地味なデザイン。

どちらが良いデザインでしょうか?
下はあまりにも地味ですので上と答える人も多いのではないでしょうか?
でもそれは本当?

もう少し「良いデザイン」を細かく分けて考えてみましょう。

ではどちらが見やすいでしょうか?
目立つから上でしょうか?それとも下?

そんな見やすさを知りたいときは画像を白黒(グレースケール)に変換してみましょう。

r00007_03

こうなりました。
これであれば下のほうが見やすいですよね。

なぜ白黒にしたのでしょうか?
実は人がものを見てそれが何かを判別するときは、まず一番先に明るさと暗さである「明度」を感じ取ります。つまり白黒画像で文字や絵の形を認識しているのです。
そのあとで色を認識するため、同じ明度で色(色相)だけで区別をしていると認識がワンテンポ遅れてしまうのです。すなわちそんなWebサイトは「見にくい」のです。

見やすいWebデザインにしたいのであれば、明るさの差「明度」に注意してデザインする必要があるのです。

見やすさを表す「視認性」が理解しやすいようにGIFアニメにしました。

r00007_05

下は4文字をすんなり読み取ることができるはずです。
上は文字により読み取り易さが異なり4文字を一瞬で読み取ることが出来ません。
「見やすい」「視認性がよい」ということは人が認識できるまでの時間が短いということだったのです。

この考えはWebデザインだけにとどまらず、ポスターやプレゼンのスライド・標識など全てのデザインの基本です。
是非覚えて見やすいデザインを心がけてください。

ということで、

視認性は明度の差が重要。
見難いかなと感じたら
グレースケールにして確認しよう。

これは覚えておきましょう。

ひと昔前、まだWebサイトがホームページと呼ばれていた頃は出来る限り派手な色を使いチカチカ点滅するデザインが主流でした。未だその頃のWebサイトが生き残っていることもあり、たまに見かけると懐かしさすら覚えてしまいます。ホームページはプリントした写真のようにセピア色に色褪せずに相変わらず派手で鮮やかですが、それでもノスタルジックを感じるのですね。面白いものです。

あれ?もしかしたら今の若い人たちはセピア色の画像をノスタルジックに感じないのかな。

スポンサーリンク
sangyo_336_280
sangyo_336_280
  • このエントリーをはてなブックマークに追加