クリックされやすいボタンの色は赤？緑？何色？
2018年04月19日
あと、Webデザインの勉強してた時に先生に「資料請求とかのボタンは緑がクリックされやすい」って教えられたんですよ
クリック率が高いボタンの色はあるの？
目次
- お問い合わせの件数を増やしたい！
- 予約で満員にしたい！
- もっと電話をかけて欲しい！
- 資料請求の件数を増やしたい！
- 購入ボタンを押して欲しい！
- 無料サンプルを請求して欲しい！
…と思ったこと、Webやネット通販のお仕事をしていたらありますよね？
ホームページやランディングページのボタンを何色にしたらクリック率が上がるのでしょうか？
赤色なのか？緑色なのか？他の色なのか？そもそも色は関係あるのか？
モヤモヤしたので、ちょっと調べてみました。
Web業界ではボタンの色は緑色が定説！？
私がWebデザインの先生から教えられたように、Web業界では、長年「クリックされやすいCTAボタンは緑色」という定説があるようです。
今回、調べてみるまで知らなかったのですが、どうやら2009年にFirefox（ブラウザ）がダウンロードボタンの色でダウンロード数に変化があるか、ABテストをした実験結果が根拠となっているようです。
Firefoxのダウンロードページで、緑、青、紫、オレンジそれぞれの色のダウンロードボタンをランダムに表示させて、訪問数・ダウンロード数・コンバージョン率を1週間計測しました。
実験結果は、1位が緑（コンバージョン率77.3%）となりました。
最下位のオレンジ（コンバージョン率76.5％）と比べると差は約1％。
たったの1％と思うかもしれませんが、Firefoxの毎日のダウンロード回数が50万回とすると年間で200万人近くの差が出てしまいます。
本当に緑色のコンバージョン率が高いの？
では、実際にネット通販サイトでは「緑色のボタン」が使われているのでしょうか？
ネット通販大手5社を比較してみました。
- Amazon…オレンジ色
- ヨドバシ.com…赤色
- ZOZOTOWN…グレー
- ベルメゾン…ピンク
- 楽天市場…赤色
あれ…？
定説の緑がない！？
大手通販サイトでは赤色が優位のようですが、ボタンの色をじっく～りよく見てみるとヨドバシの赤は明るい赤、楽天市場の赤はクリムゾンレッド（深紅）なので、ロゴの色と合わせているみたいですね。
ZOZOTOWNもAmazonもロゴの色と揃えて、それぞれオレンジ・グレーになっているようです。
ベルメゾンだけがロゴの色と関係ないピンクですが…、女性ターゲットなのでピンクにしたのでしょうか？
色の効果で使い分けよう！
結局、ボタンの色で違いはあるの？と謎が深まったところで、色彩センスを磨くために
役に立つかなと読んでみた「色の力」という本にヒントがありました。
色が脳や神経に与える影響
赤→本能的に危険に備えて緊張が高くなる色
赤を見ると危険回避行動を促す、右前頭皮質の働きが活性化するのだそう。
相手に恐怖心を抱かせるため、政治家などリーダーとして自分を印象づけたい時に身に付けると効果的です。
また、交感神経を刺激して脈拍・血圧が上がるので、活動的な色・興奮させる色と言われています。
緑→創造力に効果を及ぼす色
クリエイティブなアイデアを生み出す場におすすめ
また、人を納得させる色でもありアンケートの回答用紙を色違い(赤・青・緑・黒)にして、賛成・反対・どちらでもないを書かせる実験をしたところ、赤は賛成・反対に関わらず極端な意見が29%を占め、青と黒はどちらでもないが多くなり(それぞれ47%、43%)、
緑は半数以上の53%が賛成したという結果になったそうです(ちなみに黒は賛成が36%)。
緑は安心感を与え、人を納得させる力が非常に強い色だと言われています。
青→神経を鎮める色
副交感神経は、青や紫など波長の短い色を見ると刺激されるため、呼吸や脈拍を減らす効果があり、心を落ち着かせる色です。
単純作業の効率が上がるので、事務的な仕事をする場所におすすめです。
ピンク→リラックス効果がある色
シアトルの海軍裁判所の独房の壁をピンク色にしたところ、囚人の攻撃性が弱まり鎮静効果が見られたそうです。
カウンセリングルームやリラクゼーションルームにおすすめです。
オレンジ→学習能力を高め、社会的行動を向上させる力も備えた色
小学校の教室など、人と話し合って学習を進める場所におすすめです。
まとめ
- 衝動買いさせたい時（セール・特売・予定外の出費でも後悔しない金額の商品）には、興奮させる赤色を使いましょう！
- 逆にじっくり検討してから買って欲しい時（保険など安心・安全・信用に関わる商品、住宅などの高額商品）は、安心感を与えて納得させる緑色を使いましょう！
- 赤・緑にこだわらず、大手通販サイトの例のようにHPのテーマカラーやロゴの色も考慮したデザインにしましょう！
…と考えると、冒頭のお客さんの予約ボタンは比較的高額なサービスだったので「緑色のボタン」が正解だったかもしれません。
機会があれば提案してみようと思います。
※参考書籍：
ジャン=ガブリエル・コース著：色の力 消費行動から性的欲求まで、人を動かす色の使い方
