ホームページは適切なカラーで効果UP！①～色の基礎知識～

会社のコーポレートカラーや同業他社に多い色合いなど、ホームページを作った際にイメージしていた基本カラーについて、じっくりお考えになったことはありますか？

色は、今後ホームページに新しいコンテンツを追加する、商品やサービスの画像を掲載する際にも、与えたい印象やイメージに大きな影響を及ぼします。
勿論、業界でよく選ばれている色には理由がありますが、ではその色はなぜ多く選ばれているのでしょうか。

消費者の購買は最初の90秒以内に無意識に判断され、そのうち62～90%が色に基づいていると明らかになっています。（出典：COLORCOM）

ホームページの色を適切に選ぶことで、自社の販促効果を高めましょう。

１．デジタルにおける色の表現
２．それぞれの色が持つイメージ
３．トーンを選ぶ

１．デジタルにおける色の表現

パソコンやスマートフォン、テレビなどのディスプレイでは色をRGBというカラーモデルで表現します。

これは「光の3原色」と呼ばれる、Red（赤）・Green（緑）・Blue（青）の3色の頭文字から取った名称です。

各色0～255の256段階に分けられており、それぞれの光を足し合わせて色を表現する方法で理論上1677万色もの表現が可能です。

このRGBについてはホームページに限らず、デジタルカラーの編集では度々目にするものになります。
難しく捉えず、“Rの数値を上げたら赤みが増す”程度の認識をもっていただくと良いでしょう。

２．それぞれの色が持つイメージ

では、実際に使用する色について、それぞれが与えるイメージを考えてみます。
ぜひ今後コンテンツを追加する際に参考にしてみてください。

２-１．赤

赤は太陽や血液を連想させる色で、エネルギーを感じさせます。
華やかさや力強さ、活発的なイメージを与え、注目を集める効果があります。

興奮色ともいわれる赤は攻撃性もありますが、決して悪い意味だけではありません。
スポーツでは多くの強豪チームが真っ赤なユニフォームを採用しています。

勝負時に己を奮い立たせる効果や優位性を感じさせる効果からか、英国の研究では赤いユニフォームのチームは勝率が高いと言われています。（出典：AFP）

２-２．オレンジ

オレンジは赤と黄の間に位置する色で、それぞれの良いとこ取りをした汎用性の高い色と言われています。

ビタミンカラーと呼ばれるオレンジは、親しみを与え、コミュニケーションを円滑にする色でもあります。
近年では、最も暖かみを感じる色とも言われており、その理由の一つとして、赤より攻撃性が低いことが挙げられます。

一方でオレンジは色の中でも目立つ色に分類され、多用すると「うるさい」「安っぽい」といった印象を与えてしまうこともあります。
こちらもポイントで使用することがおすすめです。

赤やオレンジは食欲増進効果だけでなく、エネルギーを消耗する色のため、回転率を上げる効果があります。そのため、ファーストフード店でもよく採用されています。

しかし、ホームページはじっくり閲覧してもらいたいもの。これらの色はポイントで採用したほうが良いでしょう。

２-３．黄

黄色は有彩色*の中でも特に明るい印象を与える色で、注目を集めたり、気分を高揚させたりする働きがあります。
※有彩色…色みの含まれる色のこと。白、グレー、黒は無彩色と呼びます。

楽しい、元気といったアクティブなイメージを与える黄色は、子供向けのホームページなどに適しています。

しかし、標識や踏切のイメージも強く、警告色としても知られる黄色。
刺激が強い色なので大きな面積で使用することは避けたほうが良いでしょう。

２-４．緑

どのような色とも相性が良い中間色である緑は、植物など身近に存在する色となります。

安心感や癒し、リラックス、温もりなどの優しい印象を与えるため、医療分野や飲食関係、家具や日用品などの幅広いジャンルの企業が取り入れています。

緑は保守的な印象も与えるため、営業色の強いホームページにはやや不向きと言えます。
チャットだけでなく様々なサービスを展開する「LINE」は明るく自然界にないような緑を採用することで、この保守的なイメージを打破しています。

２-５．青

空や水など最も身近な色のひとつである青は落ち着いたイメージを与え、さわやかさや清潔感、知的な印象を与えます。

日本人の最も好きな色と言われるほどで、製造業を始めとする様々な企業が、青を取り入れている傾向があります。

青は食欲抑制の効果が高く、飲食店など食品を取り扱う分野ではあまり目にしません。
飲食店の照明に蛍光灯が使われない理由も、青が持つ食欲抑制の効果が関係しています。

２-６．紫

聖徳太子が制定した「冠位十二階」のうち最も高位とされた紫は、日本だけにとどまらず外国諸国でも高貴な色として用いられてきました。

優雅や神秘的などのポジティブなイメージと、妖艶や不吉などネガティブなイメージの二面性を持つ色で、見る人によって印象が大きく変わる色です。

感受性を高める効果があり、音楽や演劇などの芸術分野で取り入れられることもあります。

２-７．ピンク

赤と白を合わせた色合いであるピンクは、赤同様、目を引く色となります。
女性的なイメージが強く、母性や優しい印象を与えます。

また、若い印象を与えることもあり乳幼児向けのホームページにも取り入れられています。

赤を含んでいるものの、攻撃的な感情を抑えるという正反対の性質を持っているところがおもしろいところ。
派手な色味では下品になってしまったり、安っぽく見えてしまったりすることもあるので注意が必要です。

２-８．茶

茶色は、赤やオレンジなどの暖色に黒を加えた色で、色の明るさ、鮮やかさなど、バリエーションがあります。
土や木など、自然界に多く存在する色であり、温もりや居心地のよさを感じさせる効果があります。

カフェなどは居心地の良い空間を提供するため、木を中心としたインテリアが多く見受けられます。

派手な色ではないため、飽きにくい反面、地味な印象を与えてしまうこともあります。
食欲を増進させる効果があり、飲食店のホームページにもおすすめです。

２-９．＜比較表＞

	連想するもの	ポジティブイメージ	ネガティブイメージ
赤	太陽血液炎リンゴ	熱い強い情熱的活動的明るい派手エネルギッシュ	危険怒り嫉妬争い
オレンジ	夕日みかんかぼちゃ	陽気フレンドリー前向き開放的積極的	安っぽい目立ちたがり屋くどい
黄	ひまわり光レモン	明るい華やか楽しい元気活発幸福フレンドリー	危険緊張軽率
緑	葉っぱ植物森林	安心感癒し健康平和安全さわやか再生成長	地味保守的優柔不断
青	空海水地球	清潔さわやか誠実信頼集中涼しげ	悲しみ不安消極的
紫	ぶどうすみれ藤なすあやめあじさい	高貴高級神秘的優雅知的	古風複雑不気味
ピンク	桜桃フラミンゴ	幸福優しい母性若いかわいいやわらかい甘い	派手下品ぶりっ子　集中力が途切れる
茶	大地土木コーヒーチョコレート	安心安定　温もり穏やか	地味頑固古い

３．トーンを選ぶ

「トーン」とは、色の属性である明度（明るさ）と彩度（鮮やかさ）を合わせた概念で、明度と彩度が似ている色を集めてグループ化したものとなります。

同じトーンでまとめると、一貫したイメージを持たせることができます。

華やかにしたい場合は鮮やかなトーン、堅実なイメージにしたい場合は落ち着いたトーンを選びましょう。

参考：PCCSトーン分類図（日本色研事業）

３-１．トーンのイメージ

ペール	軽い淡い弱い優しいかわいい甘い透明感ロマンティックで清楚なイメージ。女性・ベビー向け。
ライトグレイッシュ	大人しい上品なエレガント洗練された繊細なモダンでシックな大人の女性の雰囲気。冬のイメージ。
グレイッシュ	穏やか濁った渋い年配静的落ち着いた雰囲気。一見地味だが上品な演出ができる。
ダークグレイッシュ	高級感格調高い堅いダンディフォーマル重厚感があり、成熟した大人の男性向け。
ライト	澄んださわやか純粋素直無邪気かわいらしさを感じる若い女性向け。春のイメージ。
ソフト	柔らかい穏やかやさしいエレガント日本の伝統色に多い。上品な女性らしい表現に合う。
ダル	上質シックぼんやりした濁った地味ナチュラル、ノスタルジックな雰囲気。
ダーク	円熟したダンディ重厚感高級感クラシック都会的で落ち着いたトラディショナルなイメージ。
ブライト	陽気元気明朗健康的フレッシュポップ親しみやすくカジュアルなイメージ。子ども・若者向け。
ストロング	情熱的活動的豊潤充実ワイルド印象としてはビビッドに近い。
ディープ	充実伝統的和風実り落ち着きオリエンタルレトロで懐かしい印象。秋のイメージ。
ビビッド	冴えた派手な目立つ活発積極的スピーディーパワフルでスポーティな雰囲気。夏のイメージ。

このように、１つの色もトーンによって様々な印象へと変化します。

３-２．トーンで色を揃える

ホームページの色を選定する際、色を3つまでに抑えると配色がまとまりやすくなります。
もし、3色以上を使いたい場合は、トーンを揃えることで統一感を持たせられます。

トーンを揃えたら、文字の色も一緒に揃えてみましょう。より一層、統一感を出すことができます。

今回は、色についての基礎知識として、それぞれの色の持つイメージやトーンについて解説してまいりました。
次の記事では、一般的な好まれる色や業種による色の選び方について解説してまいります。

次記事：ホームページは適切なカラーで効果UP！②～適切な色を選ぼう～