markelog(マーケログ)|WEBマーケティングブログ

WEBマーケティングブログ

ランディングページの色が売り上げを100%変える! <実践系カラーリング>厳選6選

      2016/04/25

↓↓今なら2,980円⇒無料!レビューもあり!
全世界で100万人が読んだマニフェストが日本上陸!

1.はじめに

色にはそれぞれイメージがあることはご存知かと思います。

いわゆる色彩効果です。

心理学的にも研究されてきた色が与える力は、当然、ウェブサイトのデザイン・カラーリングにも影響を与えます。

くわえて、サイトの場合は製品やサービス、ブランドカラーなども意識しながら、ユーザーにとって受け入れやすく、使いやすいものでないと行けません。

いかにしてユーザーの滞在時間を引き伸ばし、コンバージョンをしやすい環境を作れるかどうか。

サイトのコンテンツと同じレベルで色も検討すべき課題となります。

今回は色の力でコンバージョン数を伸ばすために、実例を交え、それぞれの色が持つ力について考えていきたいと思います。

2.事例集

まずは実例集をご覧ください。

2-1. FACES OF NYFW

Faces of NYFW SS15 - A Socius Hub

http://www.facesofnyfw.com/

華やかな写真を、あえてモノクロで表現。色は「見せ方次第」で変わります。

NYファッションウィークで行われるショーやその舞台裏の様子を写真や動画で紹介しているサイトです。

トップページは写真がタイル上に敷き詰められた構成。写真にマウスポインタを乗せると、その写真だけがカラー表示になります。それまでの静かな印象からのギャップも手伝って、写真からは、いっそう華やいだ印象を受けます。

ファッションショーの写真はそれ自体に惹きつける力があるので、それを上手く利用した、見る人に強い印象を与える作りですね。

2-2. KIRIN 別格

kirin_bekkaku

http://www.kirin.co.jp/products/softdrink/bekkaku/

商品のテーマカラーである金色を全面に押し出したサイトデザイン。

一面が金ですが、グラデーションのかかった市松模様になっていて単調という印象は受けない。

とにかく高級感が伝わってくる色使いで、文字の黒色も視認しやすくなっていますね。

黒が差し色になっていて、漆と金箔のようにどこか和風を感じさせるため、日本人にも受け入れやすい印象です。

商品の色使いに合わせることで、商品のコンセプト・セールスポイントを十二分にアピールしているといえます。

2-3. usioproject

USIO Design Project #02 ウシオデザインプロジェクト公式サイト

http://usioproject.com/

サイトのデザインは青を基調とし、ファーストビューでは石垣島の魅力が視覚的に伝わるよう、写真を画面幅いっぱいに表示しています。また、スクロールしていくとグローバルメニューが出現しますので、サイトの目的やその他サービスメニューへの導線がわかりやすいUIとなっている点も重要です。

各コンテンツ表示も情報量がシンプルに、なおかつ文字サイズも大きく、クリック範囲も大きいので迷子になりません。

2-4. ユニクロ

UNIQLO

www.uniqlo.com/jp

ユニクロのグランドカラーである赤がアクセントになっています。製品を色相順に並べることによって、カラフルな製品も調和させている点は、店内ディスプレイと同様に一貫性を持っています。

その部分に顧客の好みや個性とのマッチング意識を強く感じさせられます。

製品をクリックすると、拡大表示されてディテールを見ることができ、洋服の繊維や、裁縫の仕方など細かな部分もチェックできる仕様となっていて、ユーザーの購買欲を刺激している点も見逃せないテクニックです。

2-5. 無印良品

muji

www.muji.net

無印良品のサイトは白を基調にしながらもコーポレートカラーであるえんじ色を力強く効果的に使ってわかりやすいサイトになっています。

セールもサービス内容もこのえんじ色で統一することでわずらわしい多色表現から開放されています。このあたりはユニクロとは一線を画し、無印ブランドが好きな人をとことん取り込もうとする意識が見え隠れしますね。

商品そのものはホワイトベースの上にシンプルに乗せることで、商品が際立つように構成しています。

2-6. アップル

Apple

https://www.apple.com/jp/

モノトーン+カラフルを効果的に使い分ける。

アップルはサイトもそうですが商品、パッケージ、広告などすべてモノトーンを基本としていますが、突然カラフルな要素を入れるような配色構成の手段をとっています。

そのほうがモノトーンとの比較で効果的に商品の魅力や広告の魅力なども出しているといえます。

現在のアップルのサイトは白に黒文字でアクセントの文字色に水色、一部商品や写真でカラフルな要素というパターンで統一しています。

3.それぞれの色がもつ特徴

3-1. 赤

・色の持つプラスのイメージ

情熱的、活動的、積極的、エネルギッシュ

・概要

精神面に大きな影響を与える色で、エネルギッシュなイメージを与えます。強調したいときや、食品などとの相性が良い色です。

3-2. 黄

・色の持つプラスのイメージ

幸福感、明るい、注意、希望

・概要

気分をアップしてくれる色であり、注意を促す色でもあります。また幸福感をもたらしてくれる色でもあるので、求人や子供系のサイトで活用できます。

3-3. オレンジ

・色の持つプラスのイメージ

活気、親近感、暖かい、健康

・概要

赤と黄色の両方の特徴を持つ色です。明るい気分になり、活動的なイメージを与えます。

3-4. ピンク

・色の持つプラスのイメージ

優しさ、かわいい、女性的

・概要

攻撃性を全く感じさせない色で、女性的なイメージを与えます。特に美しいというより、かわいさを表現したい場合に使いたい色です。

3-5. 白

・色の持つプラスのイメージ

清潔、清廉、純粋、シンプル

・概要

清潔さやリラックスといったイメージを持つ色です。理想の高さを示す色でもあり、思い切ったブランディングを行いたいときに使えます。

3-6. 青

・色の持つプラスのイメージ

誠実、さわやか、男性的、冷静

・概要

リラックス効果のある色として知られ、信頼感や安心感をイメージとして与えたい時に活用します。ビジネス系サイトで良くみられる色ですね。

3-7. 緑

・色の持つプラスのイメージ

自然、調和、寛容、健康、安らぎ

・概要

青と同様にリラックス効果のある色ですが、こちらはより根っこの部分で安心感を与えてくれます。頭脳に訴える色でもあるので、新しいサービスや製品を訴えたいときに活用できます。

3-8. 黒

・色の持つプラスのイメージ

力強さ、艶、洗練、都会的、上品、高級

・概要

どこか突き放した印象を与える色です。それゆえ高級感や重厚感を訴えたいときに活用できます。

4.まとめ

日本人的な話で▽まとめるのは若干気が引けますが、わずかな色の違いを敏感に感じとり、それぞれの色の名前をつけてきた文化的な背景がルーツにあるだけに、サイトに使う色はセンシティブなものとしてとらえるべきではないでしょうか。

成果の出るランディングページ作成ソフト「MeVIUS-メビウス-」について詳しく知りたい方はこちら!

 - WEBデザイン, コンテンツマーケティング ,

スポンサーリンク

  関連記事

iphone-410311_640
【4月21日】Googleスマホ最適化アルゴリズム発動|対処方法と今後の対応

【8/17まで・無料動画】毎月300人のFacebook集客方法! Google …

amazon_payment1
いま知っておきたい!Amazonペイメントについてまとめました。

【8/17まで・無料動画】毎月300人のFacebook集客方法! はじめまして …

seo-793030_640
SEOで順位が上がらない原因は?サイト状況を監査しよう。

【8/17まで・無料動画】毎月300人のFacebook集客方法! 「これからS …

seo-2394237_640
検索キーワードの意味を想像して、インテントを見つけよう

【8/17まで・無料動画】毎月300人のFacebook集客方法! サイト運営に …

laptop-593673_640
リスク以上のメリットも!海外有料WordPressテーマの特徴を紹介!

【8/17まで・無料動画】毎月300人のFacebook集客方法! 数あるCMS …

science-fiction-380755_640
なぜ人工知能ビジネスが注目されているのか?ビジネス事例4選。

【8/17まで・無料動画】毎月300人のFacebook集客方法! 人工知能はも …

follow-1210793_640
インフルエンサー・マーケティングを始める前に知っておきたい5つのこと

【8/17まで・無料動画】毎月300人のFacebook集客方法! 近年、広告の …

bakugai
爆買い後の中国人観光客ビジネス・マーケティング施策3つ

【8/17まで・無料動画】毎月300人のFacebook集客方法! ここ数年続い …

settings-265131_640
【2015年夏版】はじめに導入したいWordPressプラグイン20選

【8/17まで・無料動画】毎月300人のFacebook集客方法! WordPr …

億万長者の不況に強いビジネス戦略1
ダン・ケネディの「億万長者の不況に強いビジネス戦略」読了後レビュー

ダン・ケネディの「世界一シビアな「社長力」養成講座」を昨年の秋に読んだのですが、 …