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

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

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

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

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

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

赤は愛と情熱の色

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

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

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

女性向けヘアメイク製品

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

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

注意喚起の赤を効果的に活用したウェブデザイン
注意喚起の赤を効果的に配色。赤い字の価格がお得感を主張しています。

ピンクは子宮の色

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

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

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

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

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

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

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

オレンジは太陽の色

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

テレビ局のホームページ

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

不動産の企業サイト

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

食品油のホームページ

食欲増進効果のあるオレンジ色で、シズル感を演出したウェブデザイン
食品が最も美味しく見えるオレンジ色を取り入れたウェブデザイン

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

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

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

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

運送会社のホームページ

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

緑は植物グリーンの色

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

温泉旅館のホームページ

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

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

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

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

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

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

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

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

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

IT大手の企業サイト

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

印刷大手の企業サイト

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

茶色は大地の色

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

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

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

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

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

まとめ:色相と色の特徴

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

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

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

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

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

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

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

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

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

会社の見せ方を戦略的に変えるには

質問です。

会社の見せ方を変えるには、何(の伝え方)を変えるのが効果的でしょうか。

(1) 肩書きやアイデンティティー
(2) 価値観やポリシー
(3) 商品ラインアップ・能力・機能

———————————————————

私も小さな会社を経営する人間の一人ですが、
小さな会社では経営者が変われば、大きく変わる事ができます。

ブランディングが未熟な会社でも、少しずつ変化して、
強いブランディングを手に入れた会社は沢山あります。

では、会社がより魅力的になった事を周囲に伝えるには、
どのような事が効果的でしょうか?

先の質問の選択肢(1)~(3)のどれもが正解です。
(1)が変われば(2)が変わり、
(2)が変われば(3)が変わります。

———————————————————

(1) 肩書きやアイデンティティーを変えるということ

自分の名刺に「代表取締役」とつくと、
他人からの見られ方だけでなく、自分自身の姿勢まで変わるのではないでしょうか。

会社にも同様の事がいえます。
社名に並ぶ“タグライン”が変わったり、何かの賞を受賞したり、
県内一位や日本一位、世界一位を獲得したりすると、
周囲からの見られ方が変わり、
それだけでなく、自社の「こうあるべき像」が変わります。

それには、誰もが認めるアイデンティティーを、繰り返し何度も何度も
社名とセットで伝えなくてはいけません。

ホームページでは、会社ロゴの上や下にタグラインを置く事が多いです。
10文字以内の短くてメッセージ性のある言葉が望ましいですね。

肩書きやアイデンティティーが一旦変われば、
そこから派生して、言葉づかい一つから商品に至るまで再調整する必要があります◎

(2)価値観やポリシーを変えるということ

体にいい食材を選んでいたサンドウィッチ屋さんがありました。

「野菜は有機野菜、卵やハムは放し飼いのみの国産を利用」
と書けば、どんな価値観で食材選びをしているのかが明確に伝わります。
それだけでなく、「本日の手作り」と書くことで、
健康志向の強いカスタマーに好感度を得ることに成功しました。

ホームページにはもちろん、店内にも価値観を表現した写真と言葉を飾り、
顧客へのメッセージという形に変えて伝え続けることが大切なのです。

(3)商品ラインアップ・能力・機能を変えるということ

商品やサービスに関わる品質・価格・利便性・スピードなど、
お客様に直接的に関わる内容を変えると、
周囲からの見られ方に劇的な変化が生まれます。

例えば、「納期を1日早くする」という企業努力をすることも大切ですが、

(2)で述べた価値観を裏付けして、伝わりやすいメッセージにすることも大切です。
「コンビニのような利便性を」
1日早い納期と品ぞろえがあれば、コンビニのような利便性がそろいます。

———————————————————

小さな会社の成長ロードマップ

WEBマーケティングで事業に成果を上げている会社は、
(1)-(2)-(3)
の一貫性がしっかりとしています。

この一貫性が、社会や業界に浸透するものを作ることができたなら、
たとえニッチだとしても業界のNo.1として、
他社をけん引する存在になります。
あるいは、その方向でWEBマーケティングを行なえます。

色んなビジネス書で、(3)だけをとりあげて他社との差別化を!
と叫んでいますが、小手先だけでなくて、
(1)-(2)-(3)の一貫性を作って、伝えていくことが
大切なんだと思います。