サイトに使う色について考えてみました
- デザイン
デザイナーズコラム第八弾
WEBSASを支えるデザイン担当者がお届けする連載コラム。 第八弾は、「サイトに使う色について考えてみました」。
WEBSAS デザイナー
赤いボタンはなぜクリックされるのか
赤い部屋と青い部屋
色は、見ている人にさまざまな「イメージ」を抱かせます。
しかし、色は「イメージ」という漠然としたもの以外にも、具体的に身体に影響を与えることが実験によってわかっています。
実験
壁や家具等の「配色を統一した部屋」で、一定時間過ごす
結果
- 赤に統一した部屋では、血圧:上昇 心拍数:増加 --- 興奮状態
- 青に統一した部屋では、血圧:下降 心拍数:減少 --- 穏やかな状態
サイト上にボタンをレイアウトした際に、赤いボタンのほうがよくクリックされるといわれています。赤い部屋で実証されたような「血圧の上昇・心拍数の増加=興奮した状態」が、クリックするというアクティブな動作を後押しするのかもしれませんね。
進出色と後退色
信号機の三色
通常は、信号が三色同時に点灯しているということはありませんが、並べてみると赤い色が一番進出しているように見えます。青は後退しているように見えますね。 これを「進出色」と「後退色」といいます。
進出色 --- 暖色系、高明度、高彩度の色
後退色 --- 寒色系、低明度、低彩度の色
サイト上でもこれを利用して、目立たせたいものとそうでないものを色分けし、情報のプライオリティーを感じさせることができます。
ちなみに本サイトでも、現在赤い色を見出しに使って目立たせ、その部分だけ拾いやすくなっていて、読むと何が書かれているのか概要をつかむことができます。赤いボタンも同様で、ほかの部分よりも進出しているように感じさせることができます。もちろん、効果は色だけではなく、「大きさ」や「形」「位置」などによります。クリックしてほしいから赤いボタンをたくさん配置すると効果が上がるということではありません。
ほかの部分とのバランスが大事ではありますが、選択に迷うときには「赤」ですね。
申込みボタンの例
色がもたらす効果
配色によって生み出されるサイトイメージ
サイトでは、背景色やメインカラー、アクセントカラーと複数の色を組み合わせて使います。
デザイナーは、使う面積のバランスを考えながら、色の様々なイメージをアピールします。
「強い色」は少ない面積でも強くアピールできるのですが、色数、面積ともにたくさん使いすぎてしまい、うるさく感じられるといった場合もあります。
| 赤 | 明るい、エネルギー、派手、情熱 |
|---|---|
| 青 | 空、海、鎮静、知的、誠実、信頼 |
| 黄 | 楽天的、希望、光、知性、注意喚起 |
| 緑 | 自然、理性的、安全、健康、平和 |
| 橙 | 元気、喜び、ポジティブ、躍動 |
ロゴの配色が生み出す企業イメージ
企業のロゴは、サイトの中では小さい面積ですが、全体の色調を左右するものです。色のイメージと企業のイメージを考えてみましょう。
ロゴの色やサイトカラーの選択は、もちろんイメージだけではありません。コーポレートサイトであれば、業界や競合サイトなどさまざまな色の選択要件があります。
たとえば、競合するサイトと混同させないために反対色を使うという選択があります。逆に、アピールしたいイメージが同様で、同じ色をぜひ使いたいという場合、同系色をキーカラーとして使い、アクセントカラーで際立たせたり、使う色の面積を調整することで独自性を表現します。
| 赤 | NTTドコモ、トヨタ自動車、東芝、ユニクロ、日本コカ・コーラ、キヤノン |
|---|---|
| 青 | ローソン、パナソニック、日本電気、東京地下鉄、TOTO |
| 黄 | ヤマト運輸、マツモトキヨシ、セブン&アイ・ホールディングス(nanaco)、エクスペディア |
| 緑 | 東日本旅客鉄道(JR東日本)、スターバックスコーヒージャパン、日本財団、ラコステ |
| 橙 | KDDI(au)、サンマルクホールディングス(サンマルクカフェ)、キッコーマン、吉野家 |
Webデザイナーが抱く「色」への思い
サイトのデザインは、ユーザーの環境や新しい技術によって日々変化していきます。
そのなかで、サイトで使う色の役割も考えながら、サイトの目的が達成できるよう、色を効果的に使っていきたいと考えます!