初心者向け講座早見表
前回のWeb系コラムまで、3回連続で「色の持つ効果」についてのお話をしました。今回は色についてのシリーズの番外編ととらえていただければわかりやすいかもしれません。色の配色によって来訪者の目の動きをコントロールすることができ、それをサイト設計に生かすことの重要性についてお話をしたいと思います。
そもそも「すべての情報をすべて伝えたい」ということは、なかなか難しいです。「伝えたい情報に優先順位をつける」ということをサイト設計の準備の時点で決めておくことが望ましいです。優先順位の高いものや先に読んでもらいたい箇所を目立たせることで、来訪者の目の動きをコントロールすることができます。そのための最も手軽に使える手段の一つとして「色」の活用があります。
基本的な方法としては、大切な部分には強めの目立つ色を使い、その周囲には強めの色を引き立たせる色や余白を確保します。そうすることで「伝えたい情報」と「伝えたい順番」を明確化することが出来ます。この方法を頭に入れながら、いくつかのWebサイトをみることもよい勉強になるかと思います。
もう少し具体的な作業方法についても触れておきましょう。まず、もっとも重要な部分や先に読んでほしい箇所には強い色を使います。その周囲には彩度が低い色を使い、重要な部分がより目立つようにします。余白を多めにとるものよい方法です。
そして、二番目に重要な部分や読んでほしい箇所は、もっとも重要な部分よりも目立たせてはいけません。基本的には同じようにしてデザインを決めますが、注意して色や余白を選んでいくことになります。三番目に重要な部分や読んでほしい箇所も、それと同じように決めていきます。
強く、彩度も高い、目立つ色と聞いて、初めに浮かぶのは「赤」かもしれません。
バーゲンセールの広告などでよく見られますが、赤は視覚的にも心理的にも強い印象を与えることができます。
しかし、すべての重要な個所に赤を使うべきかというと、そうではありません。Webサイトのデザインに合った「目立つ色、視線をつかまえる色」というものがあります。
この色を使うことで、Webサイトの特色を生かしたまま視覚を誘導することができるのです。
たとえば、彩度の高い黄緑色を使って視線のコントロールに成功しているのが、このWebサイトです。
彩度の高い黄緑色が、Webサイトに来てまず最初に視線を集めます。うっすらとみえる葉っぱの画像との相性も良く、若葉を感じさせるようなWebデザインです。
黄緑色の箇所のまわりには、白い余白が適度にとられてあり、それによって視線の誘導がより容易になります。
また、ロゴの色とも合う濃い目の明るい青を使って、視線の誘導に成功しているのがこちらのWebサイトです。
フォーマルな印象を強める濃い青を使い、銀行という業種に合った色で必要な箇所を目立たせています。目立たせる箇所以外は、コンテンツ自体も白か薄い水色にしています。このようにロゴ等の企業カラーを重視した配色にすると、Webサイト自体のまとまりも一層強まる場合があります。
これまで見てきたように、サイト設計における色の決め方としては、まず目立たせたい箇所に使う「強めの色」と、その周辺や背景に使う「背景の色」を決めておくと良いでしょう。
「背景の色」は通常は彩度が低い色を使うことが多いです。これにより、彩度の高い色を「強めの色」として使用することができます。もちろん、彩度の高い色を背景の色に持ってくることもできますが、彩度の高い色を長く見続けていると目が疲れてくることがあります。なので、キャンペーンサイト等インパクトを与えることが狙いのWebサイトを除き、通常は使わないことが多いです。
このように、サイト設計の前に以下の2つを決めていくことで、これから作成するWebサイトにおいて想定される来訪者の目の動きを事前にシミュレーションすることができます。
・どこをまず読んでほしいのか、どこに注目を集めたいのか
・強めの色と背景の色
また、この2点を決めてから取り掛かることで、時間のかかるコンテンツ内容を公開に即した、整理された形で考えることができます。
（担当：斉藤 万幾子）
