ここが分かれ道！素人でもWebの見栄えがよくなるカスタマイズ - 「LiVE For WebLiFE*」で実践するデザインの法則

カラーを工夫する

どの色を選択するかは、Webサイトで訴えたいものによって千差万別。色にルールなどあるのだろうかと思ってしまうが、ナルホドと思う法則もあるもので、ここで紹介してみよう。Webサイトで統一感を出すためには、色使いにもいくつかのポイントがある。カラー・ホイールでいうところの真向かいにあたる補色の関係、カラー・ホイールの中に三角形を作る3色トライアド、近い色を選ぶ類似色など心理分析まで含めると膨大な規則的なものを見聞することができる。

カラーの配置を考える場合、「背景色」と「文字色」が一番わかりやすい。テキストエディタのデフォルト設定である黒と白はコントラストそのもの。文字と文字以外を区別することで文字を見せる。一般にコントラストを強めるとインパクトが強くなり、類似色を使うと統一感が生まれる、写真を配置する場合には、これらに加えてイラストや写真などの「コンテンツ」も加わるので、簡単にはいかない。

濃い目の色を背景にした場合は、ハッキリとはするのだが、本文などの内容には集中できない。長いものであればなおさら、読みにくくなる。視認性が高くなるが可読性は低くなると一般には言われているようだ。

逆に類似色であれば本文の可読性は高まりるが、視認性が下がる。テキストを読ませることに集中するのであれば、可読性を考慮しながら見出しにコントラストを付けるとよい。Webでもよく見られる手法だ。

これを変更し背景画像を薄くしてコントラストを弱めたのが図10。この方が文章自体は読みやすいように思う。

写真を入れた場合には、この調整がとても難しい。文章を読ませるのか写真を目立たせるかという調整が必要になってくるためだ。前回紹介させていただいたWebサイトは、やはりこの調和が優れているのだと改めて思った。写真の中には複数の色が存在するが、注目を促すメニュー部分ではコントラストを高めるように写真の中に配置していたり、読ませる部分にはコントラストを低めるという具合にこの3つのオブジェクトを工夫している。

色の使い過ぎは避けよう！できるだけ少なくして統一感を出す

色をたくさん使用する場合、内容がカラフルになる。ひとつひとつ指定した色が変わるのは楽しいし、ある意味達成感もあるのだが、「色」につられて注意が分散して、統一感が失われるケースも多い。

このような場合は、使用するカラーを絞るとWebサイトに統一感が出てくる。図11では、タイトルや見出しにそれぞれ別の色を割り当て、ページの鮮やかさを演出しようとしてみたが、バラバラなイメージが強くなった。読み手は、色に注目するべきかレイアウト枠に注目すべきか迷うことになってしまう。

このような場合、色の量を減らし同一内容には同一のカラーを使うことによってユーザビリティーをあげられる。図12では、本文の見出しの文字色を統一。メニューはタイトルマークだけアクセントとして着色するのみとしてみた。