初心者向け講座早見表
前回のWeb系ブログコラムでは赤色の持つ効果についてお話ししました。今回は「既存サイトに新規バナーを追加する」という状況において、具体的に検討すべき要素について説明したいと思います。
既存のWebページに新たなコンテンツを追加する際、「バナー」を配置することは来訪者を誘導する方法として大変有効です。既存のグローバルナビゲーションボタン（グローバルナビゲーションとは、各Webページに共通して表示されるボタンのことを言います）を改変して新規コンテンツを追加することは、特別な理由が無い限り、あまり実施されません。そこで、レイアウト上のソースコードの追加を少なく抑えるという観点から、新たなコンテンツを既存コンテンツへ追加する場合はバナーの作成を検討することが一般的です。
新規コンテンツをアピールするには、簡単に言うとバナー自体を目立たせる必要があります。人の目を惹き付けるバナーを構成する基本的な要素は以下の5つとなります。
・色の視認性
・色の誘目性
・色の識別性
・文字の可読性
・面積
上記の各要素を検討することは、バナーへ人の目を惹き付けるだけでなく、その後のクリック率を高めるためにも大変有効です。また、上記の要素を自社サイトに当てはめて最適な色を決定することで既存バナーの効果を改善することが可能です。ですので、今回のコラムからしばらく、「既存サイトに新規バナーを追加する」際に考慮すべき5つの要因をシリーズで説明していきたいと思います。
今回は「色の視認性」についてのお話です。
色の視認性とは、簡単に言えば、字やモノの認識しやすさの度合いです。例えば道路にある標識は、周りに木や家があっても情報伝達を実現するために視認性の高い色が使用されています。バナーにも同じことが当てはまります。バナーとは、クリックした先の情報をわかりやすくコンパクトにまとめた標識のようなものですから、バナーの周りにコンテンツがある状態を前提とした色の選択が大切です。
森の中で周りと同系色の木が目立ちにくいことは明らかです。目立つ色（視認性の高い色）とは、背景の色や周りのコンテンツの色から相対的に決定されます。視認性の高い色の相対的な決定の方法は、以下のルールに従っています。
・視認性が高い色は背景色や周りの色との「明度差」が大きい
明度とは、色の明るさの度合いのことです。従って明度差が大きい色として、極端な例として、白背景に黒色の文字のような組み合わせが挙げられます。
既存サイトの多くは背景色が白であることが多いですが、背景色が白の場合はバナーの色が薄目の色では視認性が低い、すなわち目立ちにくいということになります。逆に濃い目の色は明度差の大きさの観点から適した色ということができます。ただし、濃い色ならば全て良いというわけではありません。既存のWebサイトに使用されているテーマカラーの効果を活かす範囲で明度差の大きい色を検討することが大切です。
具体的にはテーマカラーの色の明度を少しずつ落とした色をいくつか作成し、それらの候補から最適な色を選択する方法があります。最初から極端に明度を落とした色を作ることは、テーマカラーの効果を活かしづらくなる可能性が高いためおすすめしません。
今回は背景色や周りの色との明度差を確保することが、目立つバナーを制作する上で検討すべきポイントの一つであるというお話しをしました。今後にお役立ていただけましたら幸いです。
（担当：斉藤 万幾子）
