こんにちは。WEBサイト制作を担当しています西﨑です。
新元号となり日本の歴史の節目の月となる5月。
大型連休が終わり街にも活気が戻ってきた今日この頃ですが、いかがお過ごしでしょうか。
新緑が青空に映え、風も心地よく過ごしやすい季節が到来しましたね。
色が映える季節にちなみ、今回は「配色で変化するWEBサイトの印象」についてご紹介します。
色による二つの効果
高速回線の普及でインターネット利用がさらに身近になってきた現在は、WEBサイトを所有する個人や企業の数が増加傾向にあります。次々と新たなものが生み出されて、情報や技術などの変化が大きいWEBの世界のなかで、「色・色彩」は普遍的な要素のひとつではないでしょうか。
WEBデザインにおいて、色はサイトを利用するユーザーの注意を引く最も重要な機能を果たしており、サイトの配色は商品や製品のブランディングと常に関連しているといっても過言ではありません。
色彩には大きく分けて「機能的効果」と「情緒的効果」の二つの効果がありますが、その二つの効果のそれぞれの意味を知り活用してサイトや営業活動に反映させ、認知度向上とブランド価値の向上のために取り入れてみてはいかがでしょうか。
色が持つ「機能的効果」
「機能的効果」とは、注目を集めたい箇所に目立つ色を使って他の部分より際立たせたり、同等のコンテンツが数多くあってそれらが複雑に存在する場合に、その色をたどることで迷うことを防いだりする「色の効果」をいい、図形や文字を見やすくしたり注目度を高めたりする、言うなれば「色が持つ働き」のことです。
カテゴリ別に色を分類することで文字情報を追うことなく、一目でどのカテゴリなのかを認識できることも色の機能的効果のひとつで、その他にも可読性を高めたり情報のまとまりを明示的にしたり、印象をコントロールしたりというように、色が持つ機能には様々なものがあります。
機能的効果は、情報の伝達をスムーズしてより効果的にするので、その色が持つ特性や効果をWEBサイトで発揮させるために機能的効果の知識や認識を深めることは、とても重要なことだといえます。
色が持つ「情緒的効果」
色が人の行動や精神に与える影響は絶大であり、周囲を取り巻く色によって我々の思考や行動に変化が現れます。
色は個々に持つイメージが異なり、どの色を用いるかによってWEBサイトを訪れるユーザーに与える影響や抱かれるイメージが違ってきます。
個々人の感覚に多少の違いはありますが、それぞれの色に抱く印象や感情への共通認識が一致しているといわれ、その人の感覚に働きかける色の効果を「情緒的効果」といいます。
「期間限定！」や「激安キャンペーン！」といった広告に赤色がよく使われているのを街中やネットショップなどで見たことがあるかと思いますが、赤色は国や地域、時代に関係なくエネルギーを象徴し注目を集める情緒的効果があり、また「販売色」や「購買色」とも呼ばれることもあるため、その特性を利用して広告や商品パッケージに多用されています。
赤色とは対照的に、青色には興奮を抑え冷静にさせる特性があります。
情熱を意味する赤とは反対の、さわやかさや知性・冷静さを感じさせる情緒的効果があり、その特性を活かして駅や踏切などに青色のライトを取り付け、夜の飛び込み事故の減少を目指した取り組みもなされています。
このような色の特性を活用してユーザーに情緒的効果を与えることは、WEBサイト制作の際の大きなポイントとなるでしょう。
WEBサイトにおける配色について
色が持つ二つの効果をご紹介してきましたが、ここかではWEBサイトにおける配色についてご紹介します。
WEBサイトのデザインで使う色の割合を「ベースカラー（70%）：メインカラー（25%）：アクセントカラー（5%）」の比率で使用することで、バランスの良い配色にすることができます。
あれもこれもと色を多用すると、ごちゃごちゃとした印象になってしまい見づらくなるため、使う色は3色に留めておくとよりまとまったサイトデザインになります。
ベースカラーは、余白部分やページの背景などあたる色で、ベースカラーに何色を使うかでデザインの印象が大きく変わってきます。
背景色として使われる色になるので、一般的には明度の高い白や薄めの色をベースカラーに使用する場合が多いです。
デザインのメインとなるメインカラーには、ブランドイメージとなる色や、またはブランドのアイコンやロゴの色などを用いる場合が多く、ベースカラーと似ている色をメインカラーに選ぶとバランスのいい配色になります。
また、あえて補色を使うことで強いコントラストを生むため、主張の強いデザインに仕上げることもできます。
アクセントカラーとは、デザインにアクセントを加えるための色です。
ベースカラーやメインカラーとは異なる色相を持った色を選ぶことで、アクセントカラーがより目立つようになります。
注意して見てほしい箇所にアクセントカラーを設置したり、購買意欲を掻き立てるためにボタンの色をアクセントカラーにする場合が多いです。何らかのアクションを起こしてほしい部分にアクセントカラーを使うと、訪問したユーザーの注意が向くため情報を伝えやすくなり、コンバージョン率のアップなどに繋がります。
それぞれの色の効果とイメージ
ここではそれぞれの色の印象をご紹介しますので、サイト制作の際の参考にしてください。
赤の効果とイメージ
上述しましたが、赤は国や時代に関係なくエネルギーを象徴します。その他に、興奮や力強さといった印象を与えるため、注目させるのには効果的な色です。
赤は購買意欲を掻き立てる特性があるため「購買色」とも言われており、飲食店のロゴやバーゲンセールの広告、また商品パッケージなどに多く使用されています。
青の効果とイメージ
こちらも上述しましたが、興奮を抑え冷静にさせる特性があるのが青です。知性や爽やかさ、誠実といった印象を与えるため、青はコーポレートカラーとしても多く使われています。
また、青色から受け取られる印象として「涼しさ」があるので、季節感を演出するために使われることも多くあります。
黄の効果とイメージ
黄は好奇心や幸福、希望などを象徴する色です。黄は気分を高揚させる他にも注意を促す特性があり、また色の中でも比較的主張が強い印象があるため、他の色に紛れても認識しやすい色であることから信号機に利用されています。
活発さや軽快さを表現するときには黄は効果的な色だといえますが、多用すると軽視されやすくなるので、黄色を使うときは注意が必要です。
橙の効果とイメージ
橙（オレンジ）は暖かさや自由、親しみや朗らかさの印象を与え、赤と同様に購買色に分類されるので、購入ボタンや登録ボタンなどで使うと効果的です。
また、食欲を高める効果もあるので、飲食系の広告やWEBサイトで用いるのもおすすめします。
緑の効果とイメージ
自然や調和をイメージさせ鎮静効果があるのが緑です。刺激の少ない色なので癒し効果や安らぐといった特性もあるため、ゆったりと落ち着いた演出をする際によく使われている色です。
リラックス効果を目的としたサイトや自然感を演出したい際には、緑を取り入れてみるのもよいでしょう。
紫の効果とイメージ
紫（パープル）は気品や神秘的、また優雅さや高貴といった印象で、エレガントなイメージを与えられるので、落ち着きがあり上品さを演出したい化粧品を扱うサイトや大人の女性向けのサイトに使われることが多い色です。
紫を多く使うと、不安定で不健康なイメージが持たれやすいため、他の色とのバランスに注意して視覚的に印象に残りやすい特性を活かしましょう。
黒の効果とイメージ
高級感や力強さ、重厚な印象を与えるほかに、悪や恐怖といった仄暗い印象を与えるのが黒です。黒は「無彩色・後退色」とも呼ばれ、他の色を目立たせるという特性もあるため、メインカラーを際立たせる時のサブカラーとして使用されることが多い色です。
高級感を出す反面、多用すると恐怖の対象に変わりやすい特性があるため、黒をメインカラーとして使用することはほぼありません。
白の効果とイメージ
ベースカラー（背景色）やメインカラーとしてもっとも多く使われている白は、清潔感や純粋さ、無垢な色という印象を与えます。
白を基調としたWEBサイトでは、ユーザーの視野が広がって細かい部分まで目が行き届くので、広い空間を演出するのに効果的な色です。
清潔なイメージがあるので飲食関係のサイトや医療関係のサイトで使われることも多いですが、他の色の主張を邪魔することなく商品を引き立たせる特性もあるので、多種多様な商品を扱う通販サイトにも適した色だといえるでしょう。
配色の際の留意点
それぞれの色にはポジティブなイメージだけではなく、ネガティブなイメージも内包しているため、色を選定決定する際は考慮が必要です。
また、色には文化的な影響があるので、外国向けのWEBサイトを制作する際は「文化や環境が違うと色から受け取る感情も異なってくる」ことを留意ください。
ユーザーがサイトを利用する目的を考慮した上で配色を行うということが留意点の主たるものですので、それらを踏まえたうえで色の選定を行うことをおすすめします。
まとめ
今回は色が持つ効果や特性、それぞれの色が与える印象をご紹介しましたが、WEBサイト制作時に最も重要なのは「全体のカラーバランス」です。
購買色の赤を使ってもサイト全体とのバランスが悪ければ、ユーザーの購買意欲を掻き立てるとは言い難いため、色の持つ効果や特性について理解をより深めておくことで、目的に合わせた色の選定や配色がしやすくなるかと思います。
感覚的な色のイメージをサイトデザインと合わせることで、サイトを利用するユーザーに一目瞭然かつ直線的なイメージを与えますので、色がもたらす特性や効果をビジネスにうまく取り入れてはいかがでしょうか。
弊社では、WEBデザイン/ホームページ制作を承っております。
レスポンシブ対応やライティングページの新規制作、またWEBサイト制作やリニューアルについてお気軽にご相談ください。