ホームページを作成する際、なかなか決まらないのがメインカラーの選定です。
コーポレートサイトであれば、コーポレートカラーをメインカラーとして利用するのが最適であり、一般的です。ただネットショップやサービス紹介用のホームページの場合、扱う商材やターゲットに合わせたページ作りをしなければいけないので、色選びから始める必要があります。

人は色からの影響を受けやすく、精神的な面だけではなく、肉体的な影響まで出ることが科学的に証明されています。
色の効果を理解せずになんとなく使ってしまうと、色の持つ力を十分に発揮できない、むしろマイナスの効果をもたらしてしまう場合もあります。(※1)

今回は、色の効果を最大限活用したホームページ作成ができるよう、基本色が持つイメージ・効果をまとめました。

ホームページだけでなく、ランディングページディスプレイ広告用のバナーなどにも応用可能なので、Web担当者、ディレクターの方はチェックしてみてください。

色の基本

基本的に、色は寒色・暖色・中性色の3つに分類できます。

・寒色系
・暖色系
・中性色

寒色

青色に代表されるような、冷たさ寒さを感じさせる色です。視覚的に副交感神経に作用し、興奮を鎮めたり食欲を減退させる効果があります。

暖色

赤・オレンジ・黄色・ピンクなど、暖かさ・ぬくもりを感じさせる色です。
感情を高揚させたり自律神経を刺激するため、性ホルモンの分泌を促進、筋肉の緊張の増大、食欲や空腹感の増進効果があります。

中性色

紫や緑のような寒色と暖色の中間にある色です。寒色・暖色両方のイメージを併せ持ちます。

寒色系の効果

与えるイメージ

・寒い
・涼しい
・信頼感
・清潔感
・誠実
・男性的
・知性
・憂鬱
・落ち着いている

青を使ったホームページ例

ニベア
ニベア公式サイト
http://www.nivea.co.jp/
ニベア製品のパッケージに使われている青をリンクさせ、ボディソープや洗顔料の清潔感が出るイメージが強調されています。

分析展公式サイト
分析展公式サイト
http://www.jp.horiba.com/connexion/jaima-show/index.html
青と大量のテキストで知的好奇心を掻き立てるような構成となっています。

ferica
電子マネー Ferica
http://www.sony.co.jp/Products/felica/
全面に青を使い、電子マネー「Ferica」の信頼感を強調しています。

暖色系の効果

与えるイメージ

・情熱的
・興奮
・活発
・危険
・暑い
・勝利
・積極的
・地獄
・怒り
・派手
・爆発

赤を使ったホームページ例

アラタナ
株式会社アラタナ
http://www.aratana.jp/
「ネットショップの今と未来をアツくする」というキャッチコピーに合わせ、赤を使った情熱的なイメージのホームページ仕上げています。

ポッキー
グリコ ポッキー エンジョイオリジナルミュージック
http://pocky.jp/enjoy/original_music/
赤と全面に散りばめた音符により、躍動的な雰囲気を表現しています。

チェアポップ
メディアチェアポップ
http://www.artec-japan.co.jp/mcp/
広告媒体の宣伝ページです。部分的に赤を使用し、アピールシたい要素をピンポイントで強調しています。

オレンジ

与えるイメージ

・陽気
・暖かい
・にぎやか
・温もりがある
・家庭的
・活力
・元気
・好奇心
・親しみやすい

オレンジを使ったホームページ例

犬
ペディグリー
http://www.pedigree.jp/index.aspx
ドッグフードを販売するペディグリーのホームページです。全面にオレンジを使用し、大きな犬の写真も使用することでオレンジ色の持つ快活さが犬にも反映され、「ペディグリー=快活な犬」をイメージさせています。

幼稚園
ふじおか中央保育園
http://www.fujiokachuo-hoikuen.jp/
保育園のホームページです。全体は淡いクリーム色で仕上げ、アクセントカラーとしてオレンジを使用することで柔らかくかつ元気のあるイメージを表現しています。

冷凍食品
ウェブマガジンフリージー
http://www.kaitou-reitou.com/
冷凍食品の安全性を解説するホームページです。冷凍食品とは真逆のイメージをもつオレンジを敢えて使い、「冷たい」「冷めた」印象を和らげ、且つ健康的なイメージも強調しています。

黄色

与えるイメージ

・楽しい
・用地
・快活
・活発
・希望
・軽率
・幸福
・酸っぱい
・注意
・躍動
・愉快
・陽気

黄色を使ったホームページ例

イングリッシュ
5star英会話
http://www.5star-english.jp/own/index.asp
子供向けの英会話ホームページです。
TOPイメージに親しみやすさをイメージさせる黄色を使用し、ページ下部にも黄色の星マークを散りばめ、ファンシーな雰囲気も醸しだされています。

リプトン
リプトン公式サイト
http://www.liptonicetea.com/nl-NL/#/
リプトンのイメージカラーである黄色にグラデーションをつけ、紅茶のようなイメージを持たせたデザインを全面的に使用し、ひと目でリプトンが連想されるようなデザインとなっています。

ピンク

与えるイメージ

・幸福
・女性的
・安定
・ハート
・美容
・柔らかい
・若い
・ロマンチック
・愛情
・安らぎ
・可愛らしさ
・甘い
・春
・優しい
・幼さ
・恋

ピンクを使ったホームページ例

ワイズクリニック
ワイズレディースクリニック
http://www.yslc.jp/
初めて行くレディースクリニックに対して不安を抱えている女性に対して安心感と落ち着いた印象を与えられるような、淡いペールトーンのピンクが使用されています。

インテ
資生堂 インテグレート
http://www.shiseido.co.jp/ie/index.html
資生堂の女性向け化粧品です。鮮やかなビビッドピンクとハートをふんだんに用いたデザインで、ただ可愛いだけじゃない、個性的な女性像が想像できます。

リスティングのアカウント構造
ビューティーラボ
http://www.beautylabo.jp/
女性向けヘアカラー用品のホームページです。幅広い年齢層の女性に訴求するため、ピンク・淡いピンク・白と、ほとんどの女性に受け入れられやすい配色で構成されています。

中性色の効果

与えるイメージ

・さわやか
・やすらぎ
・安全
・回復
・健康
・再生
・自然
・若さ
・生命力
・平穏
・平和
・未熟
・癒し
・保守的
・バランス

緑を使ったホームページ例

クロレッツ
クロレッツ
http://www.clorets.jp/index.html
口臭ケアアイテムのクロレッツのホームページです。爽やかさを押し出すために緑と白が効果的に使われています。

薬局
永富調剤薬局
http://www.nagatomi.co.jp/
安心感・信頼感をアピールするため、優しいトーンのグリーンを利用しています。

旅館
帆山亭
http://www.hozantei.com/
自然に囲まれた温泉旅館のホームページです。淡い緑を使用し、緑に囲まれた温泉宿というイメージを打ち出しています。

与えるイメージ

・エキゾチック
・高貴
・高級
・上品
・神秘
・中性的
・不安定
・不思議
・癒し
・優雅

紫を使ったホームページ例

筑波大学附属病院
筑波大学附属病院の国際連携室
http://www.hosp.tsukuba.ac.jp/opima/
筑波大学附属病院の国際連携室の紹介ホームページです。白と紫をバランスよく使い、品位のあるデザインに仕上がっています。

まとめ

いかがでしたでしょうか?
上記に挙げたように、1つの色にしても様々なイメージを持っています。
彩度や明度によっても随分と印象が違います。メインカラーを決める時は、各色のイメージを十分理解したうえで選びましょう。

※1 参考文献
・色彩の生体心理効果
http://ci.nii.ac.jp/naid/110001091785

・被服における色彩効果についての研究 : 温度感と快・不快感
http://ci.nii.ac.jp/naid/110000954537

・色光の生理的・心理的効果に関する研究
https://dspace.wul.waseda.ac.jp/dspace/bitstream/2065/30300/1/NingenkagakuKenkyu_20_00_061_Kaku.pdf

このニュースを読んだあなたにおすすめ

このニュースに関連するカリキュラム

色のイメージを掴んだら、配色バランスについても理解しましょう。