クリックされやすいボタンの色は赤?緑?何色?

2018年04月19日

スーパーみえこさんスーパーみえこさん

クリックされやすいボタンの色は赤?緑?何色?

スーパーみえこさん
この前、鹿ちゃんにデザインして貰ったHPの電話ボタンの色の話なんですけどね
所長
どうしたん?
スーパーみえこさん
予約ボタンの色をデザインのテイストに合わせて緑色にしてくれてたんですけど、お客さんに赤色に変えてくれって言われたんですよ。
鹿ちゃん
赤と緑って補色配色になっちゃうんで、色差が大きくて下手すると不快な印象を与えちゃうから難しいんですよね…
スーパーみえこさん
そうなんですよね~。
あと、Webデザインの勉強してた時に先生に「資料請求とかのボタンは緑がクリックされやすい」って教えられたんですよ
所長
へえ~、そうなんや!
スーパーみえこさん
でも、お客さんは「赤の方が目立つし、気持ちを高揚させるからクリックされやすい」って言うんですよ
所長
確かにセールとか、50%OFFとかのチラシやPOPって、赤色が多いもんなぁ
スーパーみえこさん
「緑色がクリックされやすい」って教わった時に理由を聞かなかったんで、こっちも根拠を提示できなくて、結局赤色に変更したんです
鹿ちゃん
そこは、デザイナーの腕で補色配置でもイイ感じにしときました!
所長
さすが!
スーパーみえこさん
でも結局、緑色・赤色どっちがクリックされやすいのか…モヤモヤしたままなんです
所長
ABテストとかできたら分かるんやろけどなぁ

クリック率が高いボタンの色はあるの?

  • お問い合わせの件数を増やしたい!
  • 予約で満員にしたい!
  • もっと電話をかけて欲しい!
  • 資料請求の件数を増やしたい!
  • 購入ボタンを押して欲しい!
  • 無料サンプルを請求して欲しい!

…と思ったこと、Webやネット通販のお仕事をしていたらありますよね?
ホームページやランディングページのボタンを何色にしたらクリック率が上がるのでしょうか?

赤色なのか?緑色なのか?他の色なのか?そもそも色は関係あるのか?
モヤモヤしたので、ちょっと調べてみました。

Web業界ではボタンの色は緑色が定説!?

私がWebデザインの先生から教えられたように、Web業界では、長年「クリックされやすいCTAボタンは緑色」という定説があるようです。

今回、調べてみるまで知らなかったのですが、どうやら2009年にFirefox(ブラウザ)がダウンロードボタンの色でダウンロード数に変化があるか、ABテストをした実験結果が根拠となっているようです。

コンバージョン率の高いボタンの色はどれか?

参照:Firefox is Green

Firefoxのダウンロードページで、緑、青、紫、オレンジそれぞれの色のダウンロードボタンをランダムに表示させて、訪問数・ダウンロード数・コンバージョン率を1週間計測しました。

コンバージョン率の高いボタンの色の実験結果

参照:Firefox is Green

実験結果は、1位が緑(コンバージョン率77.3%)となりました。
最下位のオレンジ(コンバージョン率76.5%)と比べると差は約1%。
たったの1%と思うかもしれませんが、Firefoxの毎日のダウンロード回数が50万回とすると年間で200万人近くの差が出てしまいます。

本当に緑色のコンバージョン率が高いの?

では、実際にネット通販サイトでは「緑色のボタン」が使われているのでしょうか?
ネット通販大手5社を比較してみました。

大手ネット通販5社のボタンのデザイン

  • Amazon…オレンジ色
  • ヨドバシ.com…赤色
  • ZOZOTOWN…グレー
  • ベルメゾン…ピンク
  • 楽天市場…赤色

あれ…?
定説のがない!?

大手通販サイトでは赤色が優位のようですが、ボタンの色をじっく~りよく見てみるとヨドバシの赤は明るい赤、楽天市場の赤はクリムゾンレッド(深紅)なので、ロゴの色と合わせているみたいですね。
ZOZOTOWNもAmazonもロゴの色と揃えて、それぞれオレンジ・グレーになっているようです。
ベルメゾンだけがロゴの色と関係ないピンクですが…、女性ターゲットなのでピンクにしたのでしょうか?

色の効果で使い分けよう!

結局、ボタンの色で違いはあるの?と謎が深まったところで、色彩センスを磨くために
役に立つかなと読んでみた「色の力」という本にヒントがありました。

色が脳や神経に与える影響

赤→本能的に危険に備えて緊張が高くなる色
赤を見ると危険回避行動を促す、右前頭皮質の働きが活性化するのだそう。
相手に恐怖心を抱かせるため、政治家などリーダーとして自分を印象づけたい時に身に付けると効果的です。
また、交感神経を刺激して脈拍・血圧が上がるので、活動的な色・興奮させる色と言われています。

緑→創造力に効果を及ぼす色
クリエイティブなアイデアを生み出す場におすすめ
また、人を納得させる色でもありアンケートの回答用紙を色違い(赤・青・緑・黒)にして、賛成・反対・どちらでもないを書かせる実験をしたところ、赤は賛成・反対に関わらず極端な意見が29%を占め、青と黒はどちらでもないが多くなり(それぞれ47%、43%)、
緑は半数以上の53%が賛成したという結果になったそうです(ちなみに黒は賛成が36%)。
緑は安心感を与え、人を納得させる力が非常に強い色だと言われています。

青→神経を鎮める色
副交感神経は、青や紫など波長の短い色を見ると刺激されるため、呼吸や脈拍を減らす効果があり、心を落ち着かせる色です。
単純作業の効率が上がるので、事務的な仕事をする場所におすすめです。

ピンク→リラックス効果がある色
シアトルの海軍裁判所の独房の壁をピンク色にしたところ、囚人の攻撃性が弱まり鎮静効果が見られたそうです。
カウンセリングルームやリラクゼーションルームにおすすめです。

オレンジ→学習能力を高め、社会的行動を向上させる力も備えた色
小学校の教室など、人と話し合って学習を進める場所におすすめです。

まとめ

  • 衝動買いさせたい時(セール・特売・予定外の出費でも後悔しない金額の商品)には、興奮させる赤色を使いましょう!

 

  • 逆にじっくり検討してから買って欲しい時(保険など安心・安全・信用に関わる商品、住宅などの高額商品)は、安心感を与えて納得させる緑色を使いましょう!

 

  • 赤・緑にこだわらず、大手通販サイトの例のようにHPのテーマカラーやロゴの色も考慮したデザインにしましょう!

…と考えると、冒頭のお客さんの予約ボタンは比較的高額なサービスだったので「緑色のボタン」が正解だったかもしれません。
機会があれば提案してみようと思います。

※参考書籍:
ジャン=ガブリエル・コース著:色の力 消費行動から性的欲求まで、人を動かす色の使い方

犬猫の殺処分をなくすために…!

【ゆる研】ゆるい購買心理研究所のサイトにあるバナーからの広告収入は、すべて神戸市の動物愛護支援事業へ寄付させていただきます。

神戸市ホームページ 動物愛護支援事業へのご寄付のお願い

動物愛護支援事業では、犬猫の殺処分を減らし譲渡を促進する活動を行っております。

  • 譲渡前の子猫のミルクボランティア
  • 譲渡候補の犬猫の健康管理(ワクチン接種・血液検査等の健康管理・不妊去勢手術等)
  • 譲渡候補の犬猫の不妊去勢手術
  • 地域猫の不妊去勢手術への助成

ゆる研の運営スタッフや運営会社のポータルズスタッフは動物好きが多く、猫・犬・うさぎ・インコなど可愛いファミリーがたくさんいます!
私たちは、動物の殺処分のニュースに心を痛めており、1匹でも1頭でもなくせるようにと寄付活動を行っております。

私たちの趣旨にご賛同いただける方は、Amazon ・楽天でお買い物される際は下記広告バナーを入り口にしてください。広告収入を寄付させていただきます。

書籍のバナーから本を購入してくださっても広告収入が入るので、寄付させていただきます。

広告収入の金額・寄付活動については、お知らせ欄でご報告いたします。

マーケティング&売上アップに役立つ!おすすめ書籍

Twitterでも、マーケティング・デザイン・心理学、時々猫についてゆるく発信中