トップ > スキル : Web > カラーリファレンス

Web

色から受ける印象

Webサイトの印象は色使いで決まるといわれています。例えば、Webサイト全体が黒尽くめで、活字もモノクロが多いようなホームページがパッと画面に表示されると誰でも一瞬「わぁ~何か暗いなぁ~」って印象になります。Webサイトの内容を読むより、最初は全体の色使いでそのWebサイトの印象を与えてしまいます。
例えば、パン屋さんのホームページの全体が青っぽかったりすると焼きたてでないようなパンのイメージが浮かんだり、弁護士さんのホームページがピンク色で飾ってあると信頼できる印象が浮かびません。このように色使いや各パーツの配色はWebサイトの印象に大いに影響を与えます。

まず、Webサイト全体の配色を考える時には、Webサイトのタイトル(テーマなど)からメインカラーを決め、次にそのメインカラーと相性の良い色を決めていき、それぞれの色の組み合わせを考えていきます。

色にはその色から連想・想像されるイメージ(印象)があります。色が持つイメージ力を利用して、Webサイトの印象を伝えるように活用します。
一般的に人間は、それぞれの色に対して次のようなイメージを持っています。

イメージ
純真、潔白、潔癖、冷たい、シンプル、気品、神聖、純粋
重厚、高級、威厳、モダン、フォーマル、喪服、陰鬱、不気味
防火、禁止、危険、停止、興奮、情熱、炎、消防車、血
安全、安心、避難、進行、健康、安らぎ、新鮮、自然、平静
男性的、幸福、高貴、指示、落ち着き、清潔、希望、深遠、空、水
注意、快活、愉快、明朗、集中、子供っぽい、自由、楽天的
マゼンタ 女性的、華麗、色香、温情、愛、幻覚的、陶酔感、誘惑、神秘的
シアン クール、スマート、爽快、進歩的、自制心、精神力、知的

Webサイトのテーマに沿ったメインカラーを決めたら、メインカラーと相性の良いサブカラーを導き出します。Webサイトの目的やターゲットユーザ層に合わせた色の組み合わせを考えることが大事です。

相性の良い色の組み合わせ

Webサイトの第1印象はレイアウトや扱っている内容より、カラーで決まるといっても良いです。色の組み合わせによって「馴染んでいる」、「違和感がない」、「センスが良い」などと感じますが、相性の悪い色使いをしてしまうと「ぼんやりしている」、「軽い」、「馴染めない」、「居心地が悪い」などの印象を閲覧者に与えてしまいます。

相性の良いカラーの組み合わせには一定の法則である3つの方法があります。

  1. 似ているカラーを組み合わせる方法
  2. 反対のカラーを組み合わせる方法
  3. 似たトーン(色調)を組み合わせる方法

似ているカラーとは、色相環で隣り合わせている左右4つ程度のカラーを指します。

色相環

色相とは赤、青、緑のような色味の違いのことで、色相によりイメージの違いを表現することができます。
色相を円上に配置したものを「色相環」と言います。
図の色相環は代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相で表現しています。


反対のカラーとは、向かい合わせになっているカラーのことで、これを「補色」と言います。ただ。反対のカラーは変化に飛んだ色の組み合わせが行え安いですが、カラーの対比が強すぎるために見づらくなることもあります。


似たトーン(色調)とは、明るさを表す明度(Value)と鮮やかさを表す彩度(Chroma)の組み合わせで同じ色相のことを指します。明度と彩度の組み合わせによって同じ色相でも「薄い」、「暗い」、「冴えた」など、その印象は変わります。異なる色相を組み合わせても、色調が似ていれば統一のとれた印象になります。

明度・彩度

【色から受ける印象】