サイトの配色を決める時に抑えておきたい色の特徴とWEBデザイン

Pocket



WEBの使用色を逆算式で選んで、色を味方につける

私たちは、日頃から無意識的に色から多くの印象を受け取っています。
WEBの配色を適切に選ぶと、色を味方につけて、効果的に伝えることができます。
そのためには、WEB運営側は「どんなイメージを届けたいか」から逆算して、WEBの使用色を選ぶことが大切ですね。

色が私たちの身体に与える影響「ライト・トーナス」

私たちの筋肉が色を感じると、筋肉が緊張したり弛緩したりします。
リラックスした状態を23として、緊張の度合いを数値化したものを「ライト・トーナス値(Light Tonus)」と言います。
※トーナス(tonus)とは、英語で緊張という意味

ライトトーナス効果
このように、色は私たちの身体を変化させ、気持ちにも影響を与えます。
では、これらの効果をどのように活用すれば、マーケティングやホームページに役立てる事ができるのかを見ていきましょう。

赤は愛と情熱の色

配色の仕方によって、男性的にも女性的にも表現できる色です。
また、交通標識に使われているほど、注意喚起に適しています。
赤×男性的なデザイン⇒情熱的な力強さや安定感、前進する力
赤×女性的なデザイン⇒成熟した女性らしさや美しさ
赤×SALE⇒購買意欲を煽り、お得感を主張する色。

インターネットセキュリティーの企業サイト

赤が持つ力強さや安定感、注意を活用したウェブサイト

赤が持つ力強さや安定感を表現。業種柄、注意喚起の赤を効果的に使用していると思います。

女性向けヘアメイク製品

赤と女性が組み合わさると、大人の女性の美しさを演出

ピンクではなく赤を用いることで、成熟した大人の女性的魅力が演出されています。

生鮮食品のオンラインスーパー

注意喚起の赤を効果的に活用したウェブデザイン

注意喚起の赤を効果的に配色。赤い字の価格がお得感を主張しています。

ピンクは子宮の色

お母さんが子供を包み込むような優しさや愛情を表現できます。
赤色と比較すると、より優しい女性らしさや母性を表現するのに適しています。

幼児向け教育のホームページ

濃淡のピンクを全面に配色して、赤ちゃんワールド全開。

濃淡のピンクを全面に配色して、赤ちゃんワールド全開。

女性向けストッキングのキャンペーンサイト

コケティッシュにピンクを使用、黒を効果的なアクセントにした女性向けウェブデザイン

ピンクをコケティッシュに使い、黒をアクセントに取り入れた女性向けのウェブデザイン

女性向けヘアケア製品のキャンペーンサイト

ピンクは個性が強くなりがちですが、色面積を抑えることで、軽やかに女性らしさを演出。

ピンクは個性が強くなりがちですが、色面を抑えることで、軽やかに女性らしさを演出。

オレンジは太陽の色

太陽のように明るい雰囲気を演出できる色で、社交的・満足感・幸福感を表現。
飲食業界では食欲増進・シズル感を出すのに欠かせません。

テレビ局のホームページ

人々が集まる色、オレンジ。にぎわい感と幸福感を表現したWEBサイト

人々が集まる色、オレンジ。にぎわい感と幸福感を表現したWEBサイト

不動産の企業サイト

企業サイトもオレンジを使えば親近感が湧く印象のWEBデザインに。

企業サイトもオレンジを使えば親近感が湧く印象のWEBデザインに。

食品油のホームページ

食欲増進効果のあるオレンジ色で、シズル感を演出したウェブデザイン

食品が最も美味しく見えるオレンジ色を取り入れたウェブデザイン

黄色は中性的でエネルギッシュな色

さわやかで新鮮な演出に最適。
緑・オレンジ・赤など他の色と組み合わせて配色することで、温度感が変わってきます。

サプリドリンクの商品ホームページ

元気でエネルギッシュ、活動的な印象を全面に出たWEBデザイン

元気でエネルギッシュ、活動的な印象を全面に出たWEBデザイン

運送会社のホームページ

企業サイトのアクセントカラーに黄色を使えば、黄色の持つ活動的なエネルギーの演出も

企業サイトの挿し色に黄色を使えば、黄色の持つ活動的な印象に

緑は植物グリーンの色

植物の緑を連想させ、自然や癒し、協調性や調和を表現。
ナチュラルやエコを演出するのみも使われます。
運転の若葉マークに象徴される、若々しさやフレッシュなイメージも。

温泉旅館のホームページ

樹木の緑は、自然や癒しを人々の心に伝えてくれます。薄い緑で写真をなじませているのが特徴のWEBデザイン。

樹木は癒しの心伝えてくれます。薄い緑で写真をなじませているのが特徴的。

乳幼児~中学生向け学習塾のホームページ

子供向けのWEBデザインは、親しみと安心館を感じる緑をポイントカラーに。

子供向けのWEBデザインは、親しみと安心館を感じる緑をポイントカラーに。

ヒントを届ける小売店のホームページ

濃い緑と白のコントラストは、ナチュラル&エコだけではんく、信頼と調和の印象を鮮やかに残すデザイン

緑と白のコントラストは、ナチュラル&エコと、信頼&調和の印象を鮮やかに残す

青は海・空・宇宙を連想させる色

清潔感・信頼感・安定感を表す青は、ビジネスに必要な要素が全て揃っている色。
日本人が最も好む色でもあることから、企業サイトで最も多い色でもあります。
空や水の色と近く、穏やかさ・冷静さを表現するのにも便利な色です。

沖縄の観光情報ポータルサイト

大きな海や大きな空は、自由を連想させる青色。

大きな海や大きな空は、自由を連想させる青色。

IT大手の企業サイト

理知的で先進的、それでいて清潔感を感じる青は、企業サイトに最も使われる色の一つ。

理知的で先進的、それでいて清潔感を感じる青は、企業サイトに最も使われる色の一つ。

印刷大手の企業サイト

どんな時も冷静な印象を保つ青は、信頼と安定を感じさせる企業サイトに最適です

どんな時も冷静な青は、信頼と安定を感じさせる企業サイトに最適です

茶色は大地の色

ゆるがない大地を象徴するので、安定感やリラックスを演出。
薄いベージュと合わせれば、歴史やアンティークな雰囲気を演出するのに便利。

高級ホテルのホームページ

落ち着いた茶色は、歴史や重厚感を届けるWEBデザインに。

落ち着いた茶色は、老舗の歴史や重厚感を届けるWEBデザインに。

大手チェーン喫茶店のホームページ

落ち着いたカフェスペースには、大地のような揺るがない落ち着きを演出する茶色がトレンド。

ゆっくりできる飲食店は、揺るがない大地のような落ち着きを演出する茶色がトレンド。

まとめ:色相と色の特徴

色相を順に取り上げていきましたが、いかがでしょうか。
最後に、取り上げた色をまとめます。

赤:
【特徴】興奮させる色、注意喚起
【イメージ】情熱的・大人の美しさ・安定感

ピンク:
【特徴】母性を思い出させる色
【イメージ】母性・女性らしさ・若々しさ

オレンジ:
【特徴】太陽の色
【イメージ】にぎやか・陽気・ポジティブ・社交的

黄色:
【特徴】気分が明るくなる
【イメージ】希望・光・エネルギッシュ・知恵

緑:
【特徴】自然や植物の色
【イメージ】若さ・自然・癒し・調和・平和

青:
【特徴】海・空・宇宙の色
【イメージ】信頼・清潔・冷静・自由・誠実

茶色:
【特徴】大地の色
【イメージ】安定・リラックス・歴史・アンティーク

デザインで最も記憶に残り易いのが色だという説もあります。
今回の記事内では、知名度の高い大企業のホームページばかりを例に挙げましたが、
知名度の低い中小企業にこそ、色を味方につけてブランド戦略を考えるメリットがあるのではないでしょうか。

Pocket


TOMOKO

Written by: TOMOKO

中小企業のWEBコンサルタントとして、様々な業界にWEBサイトで新規顧客獲得のための企画・運営に携わり、その数は300社にのぼる。 株式会社S-FACTORY代表。 Google公認プロフェッショナル認定 Adwords初級・上級認定、Analytics認定 Google + Twitter

感想・ご意見