CTAボタンは何色が最適か

はじめに

WEBサイトに必要な要素にCTA（Call to Action）ボタンがあります。
CTAボタンの作成に必要な要素は多々ありますが、今回は「色」に絞って、何色がボタンとして最適なのか、お話していきます。

最もよく使われている色とは？

Mozilla Firefoxが行ったCTAボタンの調査によると、クリックされた数が最も多かったのは「緑色」と公表されています。

(参考元：s://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/）

実際に多くの記事ページやLPで、ボタンの色に緑が採用されているのを見かけます。
なぜ緑色が選ばれるのか。それは緑色のもつ色の特性が関係していると考えられます。
緑には一般的に希望や安心を連想させるとともに、「前に進む」「アクションを促す」イメージがあるからです。

緑が絶対とは限らない

では、今後作成するボタンも全て緑にすればいいかというと、そういうわけではありません。
海外で実施されたボタンの色によるCVRの変化に関する研究をいくつか紹介します。

【1　HubSpotが行ったABテスト】

⇒緑色のボタンよりも赤色のボタンをクリックした人が21%多かった

（参考元：https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx）

【2　VWOが行ったABテスト】

⇒緑色のボタンよりもオレンジ色のボタンをクリックした人が5%多かった

（参考元：https://vwo.com/success-stories/gsm/）

【3　Monetateが行ったABテスト】

⇒オレンジ色のボタンよりも青色のボタンをクリックした人が9%多かった

以上の研究結果から、緑色であっても他の色よりCVRが落ちることもあり、一概にどの色が最適かと断言することはできません。

結局のところ、何色がいいのか？

CVRにおいて特定の色が最適だということは出来ませんが、CTAはサイト訪問者をフォームや商品購入ページへの誘導が目的なので、そのサイト上で目立つ必要があります。

先ほどのHubSpotの研究では緑色のボタンがCVRが低い傾向にありましたが、これはサイトが全体的に緑が多く、緑色のボタンが目立たなかったためと考えられます。

なので、ボタンの色は何色が最適なのかはサイトごとに違い、そのサイトでのコントラストの高い色や視認性の高い色を選ぶのがいいと思います。
下記のナイテックス(株)のサイトでは、メインカラーの青色に対し対照色相となるオレンジ色をボタンの色において、コントラストの高いCTAボタンとなっています。

まとめ

CTAボタンは特定の色が最適というものがないから何色でもいいというわけではありません。先ほどの研究にもあるように、ボタンの色の違いによってCVRが影響するのでサイトにふさわしいボタンの色を見つけていくのは重要です。
ボタンは他にも立体感・余白・テキスト等、CVRの向上に必要な要素は多々ありますが、何色で作成するべきかも重要なポイントです。

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。