初心者向け講座早見表
色の持つ効果についてのシリーズ第八回目のWeb系コラムでは、好みが分かれやすい紫色を使用する際のポイントについて見てきました。今回は複数の色を使用する際のポイントと具体例について説明したいと思います。
複数の色を使用することで、Webサイトの印象が活発で華やかになります。
本コラムにおける複数の色を使用するとは、複数の色相を使用することです。言い換えますと、赤色と薄い赤色とピンク色という似たような色の組み合わせではなく、赤色と緑色と青色という異なる色の組み合わせのことを言います。
ただし漠然と複数の色を取り入れるだけでは、かえって雑多な印象になりかねない点に注意が必要です。色にはそれぞれ異なるイメージがあることを、これまでの色に関するシリーズでお話してきました。扱う色が増えれば増えるほど、配色としてまとめることが難しくなります。
扱う色を増やすポイントは、まずロゴの色などからテーマカラーを決めます。そしてそのテーマカラーを邪魔しない程度に複数の色の面積を選択し、調整は明るさや鮮やかさを揃えることで行います。複数の色が占める面積が多すぎると、配色が雑多なイメージになる一因となりますので、テーマカラーの面積と同じかそれ以下に複数の色の面積を控えることが、うまくまとめる1つのコツになります。Webページ全体を見た時、複数の色を扱う領域と扱わない領域をそれぞれ作ることで配色のメリハリが生まれますので、より整ったイメージを出すために効果的です。
複数の色の使用例を以下から見ていきましょう。
ロゴの二色を中心に、野菜の鮮やかな複数の色が映える配色です。ロゴの色にやや彩度を落とした純日本的なイメージを与える色が使われているため、メイン画像の野菜それぞれの色が強いインパクトとなり、楽しいにぎやかな印象が生まれています。
上部のグローバルナビゲーションや中央下のコース案内部分にあるような高彩度の明るい色を使うことによって、活発で楽しい印象が生まれています。中央下のコース案内部分では複数の色が使用されていますが、同一の場所に配置されているため全体としても配色がすっきりとしている点がポイントです。また、余白を広く取ることで高彩度の色のイメージを各色同士が妨げないような工夫がされています。
Webページを開いた瞬間に目に飛び込んでくる5つの配色は、それぞれが高彩度高明度という非常にインパクトの強い色が使用されています。目立たせたい5つの配色以外は白と灰色の無彩色が基本となっているため、複数の色を扱っている場所と扱っていない場所の区切りが明確です。どこを見るべきかという視線誘導が上手くなされている配色となっています。
（担当：斉藤 万幾子）
