クリック率(CTA)を上げる色(カラー)で成約(CV)向上を狙う【マーケティング】

Web制作クリエイターの井上(@Kouki_Inoue0411)です。
昨今では、副業(複業)でプログラミングやWeBlog等で収益を上げられ不労所得を得られている方が増えてきました。

そこで、プログラミングしていてウェブサイト(ホームページ)での成果(コンバージョン率)が出るカラー(色)やブログのPV数向上させるカラーをご紹介します。

もちろん、会社のメインカラーが○○だから変えられない等、あると思いますので一つの例として参照にしてください。

さらに、ウェブサイトだけではなくチラシやポスターなどにも使えるので悩んだ時の参考として貰えればと思います。

“色(カラー)”の持つ力は絶大

カラーコーディネイターが存在するように生活の中では切っても切れない“色(カラー)”は、当然の如くビジネスの中に存在しターゲットとなっているあなたに対して購買を促しています。

色にはそれぞれの効果があると言われていますが、何色がどのような効果を生み出し販売を促す色なのか。
クリックしてもらい成約(CV)を狙う色は何色なのでしょうか。

ボタンのクリック率が高かったのは

A/Bテストで行われた結果として、

1. 緑色
2. オレンジ色
3. 赤色
4. 青色
5. 黒色

の順番です。

緑色

緑色は、中間的な色で【調和】や【安定】・【生命】を表す色です。
緑色と聞いたら最初に思い浮かぶのは『自然』ではないでしょうか？

そして、緑色を好む方の心理学として

「人の役に立とうとするときに選ばれるカラー」

「安心感を与えバランスを取ろうとするカラー」

とも言われています。
なので、配色に困ったときのベースカラーは緑色が良いかもしれません。

しかし、緑色には文化や国によって解釈が違うらしく【カビ】の色(浸食させる色)としているカラーでもあるので、インバウンドを行うときは気を付けたい色です。

オレンジ色

この本サイトもオレンジ色で、実はオレンジ色はビタミンカラーと言われており、観覧していて疲れない色でもあります。
※緑色も同様

オレンジ色は、【拡張色】【進出色】【ポジティブカラー】とも呼ばれており、オレンジ色は、大概の方に受ける万能カラーでもあります。

オレンジ色を好む方の心理学として、

「エネルギーと開放感のあるカラー」

「緊張を和らげ力を出せる状態にするカラー」

このオレンジ色は、個人的な解釈ですがベースカラーにすると、主張が強すぎるカラーになってバランスを取らなければならない色でもあります。

なので、使いどころとしては緑色と組み合わせたワンポイントが良いのではないでしょうか？

赤色

赤色は【主張】【興奮】【活発】な色で色の中でも一番最初に飛び込んでくのがこの赤色です。

赤色を好む方の心理学として

「熱や温かさを感じさせる活発なカラー」

「目を引き関心を集めるカラー」

ウェブ上でこの赤色をメインカラーに添えると赤い所だけ浮き出て見えるので【明度(めいど)】や【彩度(さいど)】を変えバランスよく配分することで赤は赤でも柔らかい赤色や、ポイントカラーでビビットの赤を使うことで効果的に伝えることが出来ます。

よくチラシやポスターと言ったローカルな紙ベースなアプローチで、よく赤色を使用しますが、ここが一番大切と言うところにこの赤色を使うのがコツです。

青色

青色は、【後退色】【鎮静色】【リラックスカラー】とも呼ばれています。
青色は、信頼・誠実・知性を表す色ですが、反対に冷たい・不安・寂しさを表すカラーでもあります。

青色を好む方の心理学として、

「気持ちを落ち着かせて、冷静にするカラー」

「集中力を高めたい時に使うカラー」

ビジネスサイトを製作させていただくときに一番多いのがこの青色のベースカラーです。
あまり、多くの青色を使ってしまうと、ウェブサイトが冷たく感じてしまうので他の色と組み合わせて使用するとより一層の効果を期待できます。

余談ですが、僕が運営しているウェブサイト制作・動画制作会社【KOKO.NET】のウェブサイトも黒 + 紺色ベースで配色を展開しています。

黒色

基本的にはウェブサイトでは黒色(#000000)は、使用しません。
若干グレー(#666666)が入っている方が文が読みやすいので真っ黒は基本的には使用しません。
本サイトやほかのブログサイトも真っ黒ではなく若干のグレーで統一されています。
黒色は、【強硬色】【重量色】【周囲の色を引き締める色】としされています。

黒色を好む方の心理学として

「強さや圧力、権力など力を感じさせるカラー」

「存在感と影やの2面性を持つカラー」

黒色をベースカラーに使うと引き締まったスタイリッシュなイメージのウェブサイトが出来ます。
しかし、背景を黒して文字を白にされている方がいますが正直、読みづらいです。

理由は簡単で、黒色は締めるカラーで白色はボヤけるカラーです。
要は、滲んで見えるので読みづらく観覧しづらいウェブサイトになってしまいます。

反転色を使用する場合には、十分な知識を身に着けてから使用することをお勧めします。

番外編 : 円熟した青(#0044CC)

この円熟した青色(#0044CC)は、

BingのユーザーエクスペリエンスマネージャーであるPaul Ray氏は米国時間3月16日、複数の色合いの中から特定の青色（色に詳しい人のために紹介しておくと、「#0044CC」）を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。

KUMALOG Bing採用のテキストリンク色(#0044CC)がGoogle AdSenseのクリック率改善に使えるかも

リンク色での効果を期待できる色だと証明されています。
ウェブサイトを製作されたことがある方はお気づきだと思いますが、デフォルトのリンク色は青色で、リンクマウスオーバー色は濃い青、リンク観覧済みは紫色です。

つまり、クリックしてもらい易いカラーはこの円熟した青(#0044CC)なのかもしれません。

マーケティングの観点から

色の持つ心理は理解いただけたと思いますが、どの様に使って行けばいいのかをご紹介します。

赤色で購買意欲を刺激する

上記でも紹介しましたが、赤い色は強調色なので浮き出て見えます。
例えば、

どちらが、訴えているように見えるでしょうか？
次に、枠で囲むと更にメッセージの強いように見えます。

このように、赤色でメッセージの強調を行い購買にリンクされる方法は、よく目にする機会もあると思います。
次は、枠の形についてです。

角が丸いと柔らかい印象があります。
そして、次は枠の大きさと配分です。

左の画像の方が安定して見えないでしょうか。
左右の内側の余白を入れ、上下にも多少入っています。
この“パディング(Padding)”を入れることで更に効果的に強調をすることが出来ます。

スペース(抜け感)で強調力UP

画像(アイキャッチ)とのバランスも大切でスペースがあるからこそ栄えるものあります。

一例ですが、スペースをほとんどとらず積ん止めった印象がありますが、賑わっている印象もあります。

次に、スペースを意識して抜け感を入れてみると、カテゴライズされて見やすく・観覧し易くなったと思います。
スペースを入れることで安心感と安定感を与える事が出来ます。

しかし、反対にスペースをとり過ぎてしまうと貧祖な感じになってしまいます。
バランスよく配分するからこそ効果を発揮できます。

では、更に少しUIデザインに変えていくと

まずは、値段の色を強調色に変えて商品紹介の文字を黒(#111111)→黒グレー(#444444)に変更して、強すぎない黒に変更しています。

ここでも、文字の色をグレーにしてしまい、主張しなさすぎの見えずらい文字になってしまうことは避けたいところです。
グレー＝オシャレとは違います。
ユーザーにストレスなく見て貰うことが一番大切です。これをUIデザインと言います。

余談ですが、下記のデザインの画像はAmazonさんのUIデザイン一例です。
参考にされてみてください。

更に、文字と文字との間のスペースや段落のスペースも意識することで抜け感を表現して表現を強調できます。
文字の大きさにも注意が必要です。

色の配分で印象を変える

配色次第でイメージの変化が期待できます。

上記画像の上段は【彩度】の変化です。
左の赤は、大人っぽい印象が残ります。
右の赤は、柔らかい印象に変わります。

下段の画像は、赤枠に文字色の変化で訴える力と印象が変わります。

• 左の赤枠+黒字では、赤が重くなった印象があります。
• 真ん中の赤枠+黄色字は、訴える力がある2色が混ざり合うことで強調できるカラーになりましたが、落ち着かない印象も同時にあります。
• 右の赤枠+青字は反転色です。青字が浮き出て見えると思います。

余談ですが→「このブログでみなさんの役に立ちたいんだよ！」のようにすると強調出来て伝えたいことが一目でわかります。

アースカラーで落ち着いた配色のデザインに

アースカラーとは、地球の大地や植物などの自然物をイメージした茶色～緑色系の色を総称するアパレル用語。ヒッピームーブメントの影響を受けた自然志向のファッションとして、1970年代に誕生した概念である。

Wikipedia アースカラー

まとめ

最終的なコンバージョン(CV)を狙うカラーは、

これは、ウェブサイトに限らずチラシ・ポスターにももちろん反映される事です。
ここでは、記載していませんが1ページで使用するカラーは、3～5カラーぐらいがちょうどいいとされています。
あまりにも多くのカラーを使い過ぎると、チンドン屋のような配色になってしまうので、メインカラーに元図いたサブカラーを選別して展開することでユーザーが迷うことない導線作りが出来るはずです。

しかし、色々な色を使うことが絶対にダメと言う事ではなく使うならとことん使いスペシャリティーがある伝え方も可能です。
この方法は、かなり上級者のやり方なので初心者の方がこのレインボー配分を行うと目がチカチカする意味が分からないものになってしまうので最初うちは手を打差に事をお勧めします。

カラー配分で悩んでる方の一つの参考になれば幸せです。

参照したサイト

読むだけで配色センスがレベルアップ！５分程度で読める良記事まとめ :
https://commte.net/1911

Bing採用のテキストリンク色(#0044CC)がGoogle AdSenseのクリック率改善に使えるかも :
https://kumalog.com/2010/03/19144916.php

【勝負あり】クリック率が高いボタンリンクの色・大きさ・形・アニメーション :
https://junichi-manga.com/btn-link-cv/

色カラー :
https://iro-color.com/