初心者向け講座早見表
前回のWeb系コラムでは、「メインカラー」が来訪者の第一印象を決定し、次のステップであるコンテンツ閲覧にスムーズに導くための大切な要素の一つであるというお話をしました。今回はメインカラーを決めた後、どのように「見やすい」デザインを作るかというお話を、「コントラスト」という視点に注目して説明したいと思います。
まずは「コントラスト」の意味を確認しましょう。
コントラストとは「色の明るさの差」を意味します。赤色、緑色など色の違いは関係ありません。色の明るさの差が大きいことを「コントラストが高い」、反対に色の明るさの差が小さいことを「コントラストが低い」と呼びます。
コントラスト＝「色の明るさの差」です。
見やすいWebページやバナー画像などを作る際には、コントラストの高低を活用することが重要なポイントとなります。
コントラストを活用してデザインを考えるべき理由は大きく分けて3つあります。
1点目の理由は、コントラストの活用により、文字の可読性を上げることが可能だからです。
コントラストを高くすることで、文字の読みやすさが格段に改善されます。例えば、白背景に黒い文字は最もコントラストの高い色設定の一例ですが、画面上でも紙においても、白背景に黒い文字は読みやすいというイメージを思い浮かべていただけるのではないかと思います。掲載する情報量の多いニュース系のWebサイトなどでは、多くの文字を読みやすくするために、背景の色は白に近い色、そして文字の色を黒に近い色を選択することが多いです。
2点目の理由は、重要な箇所の強調が可能だからです。
Webページ全体を俯瞰する場合、視線が最初に向かうのはコントラストの高い箇所です。この点を利用しますと、あるバナーを強調したい場合はバナーと「Webページ全体」のコントラストを高くすることによりユーザーの視線誘導が可能となります。
3点目の理由は、Webページ全体の統一感を実現することが可能だからです。
Webページにおける来訪者の視線を集める最も簡単な方法としては、バナーに赤や黄色などの強い色を使うことがあります。一方でこの方法はWebページ全体の統一感を損なう可能性があるという点も同時に意識する必要があります。強い色を使用せずに来訪者の視線を集めるためには、同色からコントラストの高低の変化をつけることが一つの解決方法になります。前回のWeb系コラムで説明した「メインカラー」が存在する場合は、メインカラーを元にしてコントラストの高低をつけることにより、メインカラーによる印象を強めると同時に、重要な箇所を強調することが可能になります。
今回はコントラストの高低を活用することで、Webページやバナーの可読性の向上、また来訪ユーザーの視線誘導が可能であるというお話をしました。バナー画像制作やWebページリニューアルのヒントとして、参考としていただければ幸いです。
（担当：斉藤 万幾子）
