デジタルマーケティングTips
LPやECサイト等のCTA/コンバージョンボタン色に関する諸説まとめ
購入や申し込みにユーザーを誘導するボタンの配色は、サイトの売上や見込客獲得数を左右する最重要要素の一つです。が、色のおすすめについては諸説が飛び交い、長年論争になっています。サイトに合った選択をするための要点と、過去の主要な実験事例についてまとめました。
※ボタンの文言・形状・配置に関する記事はこちら
LPやECサイト等のCTA/コンバージョンボタンの文言に関する諸説まとめ
要点
ランディングページやECサイト等のボタンの色の重要性と選び方のコツ
メルマガでも情報を配信中です！ ぜひご登録ください。
ボタンの色は売上や資料請求数に大きく影響する
購入・申し込み等のボタンは、「コンバージョンボタン」「Call to Actionボタン」(以下、CTAボタン)とも呼ばれ、購入や資料請求といったサイトの目標到達(コンバージョン)にとっては必須の要素です。
CTAボタンのアクション促進効果の強弱は、売上や見込客獲得数に大きく影響します。毎月何十万円も広告につぎ込むより、CTAボタンを一度改善する方が、コストパフォーマンスに優れる場合もあります。
それゆえ、CTAボタンのデザイン・大きさ・色・形状・文言・設置場所等については、日夜試行錯誤や研究が続けられています。
このうち、ボタンの【色】については、「緑だ」「いや赤だ」「いやオレンジだ」等の意見が飛び交っており、「結局何を信じればよいのか」と混乱のもとになりがちです。
CTAボタン色の問題が複雑である背景
ボタンの色は、よりコンバージョン率の高い色を追求し始めると、途端に複雑な問題になります。
これには主に以下の条件が絡みます。
1.色のもたらすイメージ
色にはそれぞれ心理的な効果があり、見た人に促す感情や行動もそれぞれ変わります。また、大抵の色にはポジティブなイメージとネガティブなイメージが併存しています。
色のイメージは文化の差や個人の好みによる違いがあり、万国共通ではありませんが、中には比較的共通と呼べるものもあります。日本における一例としては以下の通りです。
| 色 | ○ ポジティブイメージ | × ネガティブイメージ |
|---|---|---|
| 赤 | 情熱 興奮 パワー 生命 | 危険 怒り |
| オレンジ | 暖かさ 希望 健康 家庭的 | わがまま |
| 黄 | 明朗 快活 元気 幸福 | 注意 軽率 |
| 緑 | 安全 調和 癒し 自然 | 未熟 保守的 |
| 青 | 信頼 誠実 知性 清潔 | 不安 冷酷 |
| 紫 | 神秘 高貴 魅力 優雅 | 二面性 警報 |
| ピンク | 愛情 華麗 感謝 優しさ | 幼稚 弱さ |
| 黒 | 高級 重厚 威厳 絶対 | 死 悪 絶望 |
| 白 | 清潔 純粋 平和 神聖 | 空虚 降参 |
ボタンの色選択にあたっては、ボタンが訪問者に対してどのようなイメージを訴求すべきかを考慮することが重要です。
※参照：代表的な色のイメージと性質・色の意味 - 色カラー
https://iro-color.com/episode/about-color/
【ビジネス生存戦略】カラーイメージを味方につける - DICカラーデザイン
https://www.dic-color.com/knowledge/business/color_image.html
2.配色の調和
色の組み合わせには、違和感のあるものとないものがあります。目立ちやすく、かつ違和感を感じさせないボタン色を選ぶことも、重要な要素です。
メイン1色＋サブ1～2色＋ボタン1色のように配色を選ぶ際、色相が3種類以上になる場合は、色相環※上で正多角形・二等辺三角形・長方形のいずれかを形成する配色を選ぶと、色相差に規則性が生まれ、全体の色彩が調和しやすくなります。
Adobeのカラーパレットジェネレーターのような配色作成支援ツールが活用できると、作業効率化に繋がります。
※色相環…色を赤～黄～緑～青～紫～赤の順に循環させて円形に並べたもの。色を体系的に扱う際によく用いられます。
メインカラー・サブカラー・ボタンカラーが90度間隔に並び、二等辺三角形を形成している例
※参照：色彩調和論 - 日本色研事業株式会社
http://www.sikiken.co.jp/colors/colors12.html
色相環 - しきそうかん | 武蔵野美術大学 造形ファイル
http://zokeifile.musabi.ac.jp/%E8%89%B2%E7%9B%B8%E7%92%B0/
PCCSの色相 - 日本色研事業株式会社
http://www.sikiken.co.jp/pccs/pccs02.html
カラーホイール、カラーパレットジェネレーター | Adobe Color
https://color.adobe.com/ja/create/color-wheel
Paletton.com
https://paletton.com/
Color Palette Generator - Create Beautiful Color Schemes
https://colors.muz.li/
3. 個人的な色の好み
色によっては、個人的な好き嫌いが大きく分かれる場合があります。
代表例がピンクです。複数の調査で、主に女性が「好きな色」上位に挙げる一方で、「嫌いな色」に挙げる色でも男女問わず上位に入っています。
個人の色の好き嫌いを考慮する場合は、嫌われる色を避けて候補を選ぶ必要があります。
※参照：みんなの色彩感覚！好まれる色と嫌われる色 - 色カラー (2012～2017)
https://iro-color.com/questionnaire/result/color-likes.html
好きな色・嫌いな色 - 高校生白書 / 中学生白書 / 小学生白書 Web版 - 学研教育総合研究所 (2017～2018)
https://www.gakken.co.jp/kyouikusouken/whitepaper/h201809/chapter4/09.html
https://www.gakken.co.jp/kyouikusouken/whitepaper/j201708/chapter4/05.html
https://www.gakken.co.jp/kyouikusouken/whitepaper/201809/chapter4/09.html
専門学校志望者・大学志望者比較 好きな色・嫌いな色 - 高校生白書 - JS日本の学校 (2005)
https://school.js88.com/common/contents/student-data/list?hakusho_cd=5
https://school.js88.com/assessment/wp03/wp03_P030.pdf
迷ったら3つの定番色「緑・赤・オレンジ」をまず候補にしよう
迷った場合、ひとまず「緑」「赤」「オレンジ」の3色のいずれかを最初に候補に挙げて検討するのがおすすめです。
この3色は、ボタン色の利用上位に挙げられる傾向にあります。他には「青」「黄」も比較的人気が高いです。
※参照：Top Creatives: How to Select a Color for CTA Buttons (2014/11/13)
https://www.chartboost.com/blog/top-creatives-how-to-select-a-color-for-call-to-action-buttons/
The Truth About the Best and Worst Call to Action Button Colors for Your Website - Business Resource Center (2019/08/09)
https://smallbusiness.yahoo.com/advisor/resource-center/truth-best-worst-call-action-button-colors-website-212506540/
17 Best Practices for Crazy-Effective Call-To-Action Buttons (2015/02/20公開、2020/02/25更新)
https://www.wordstream.com/blog/ws/2015/02/20/call-to-action-buttons
Best color for Add to Cart/Buy button - amasty blog (2016/03/25)
https://amasty.com/blog/best-color-add-cart-buy-button/
1.緑
緑は「青信号」すなわち「安全」「進め」の色として、古くから欧米圏を中心にボタン押下を促進する色の定番とされてきました。ボタン色関連の記事でも「世の常としてあらゆるマーケターが緑のボタンを好む」「緑はWeb 2.0系サイトの多くで頻繁に使われる」とたびたび言及されます。また、緑以外の色の有効性を試すためのA/Bテストにおいても、比較対象として頻繁に使用されます。
※参照：Pushing the Right Buttons: Do Green CTAs Always Work Better? - ABTasty (2019/11/18)
https://www.abtasty.com/blog/green-ctas-always-work-better/
2.赤
赤は以前は「赤信号」すなわち「停止」「警告」「いいえ」のイメージが先行していました。「はい、削除します」というボタンの色を緑(＝Yes)と赤(＝警告)のどちらにすべきか、という疑問が出た例もあります。
一方で、赤はアグレッシブな色としても知られ、スポーツにおいては「2004年アテネ五輪で赤いユニフォームの選手の方が勝率が高かった」という事例も指摘されていました。
赤が緑より高いコンバージョン率を出す実験結果が複数示されてからは、熱意やパワーでコンバージョンを促す、暖色系CTAボタンの定番の一つに挙げられています。
※参照：Should "Yes, delete it" be red, or green? - User Experience Stack Exchange (2014/01/11)
https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/
Red Outfits Give Athletes Advantage - Live Science(2005/05/18)
https://www.livescience.com/276-red-outfits-give-athletes-advantage.html
a. CareLogger社サイトのA/Bテスト事例(2010年)
カナダCareLogger社(現在は閉鎖)のサイトにおいて、緑と赤のCTAボタンでA/Bテストを600回行った結果、赤の方がコンバージョン率が34%増加した、という実験結果が発表されています。(同社では他の施策との組み合わせで合計72%のCV率改善に成功しています)
※参照：How We Improved Our Conversion Rate by 72% - DMix.ca (2010/05/29)
https://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/
b. Performable社サイトのA/Bテスト事例(2011年)
米Performable社(MAツール開発会社、のちにHubspotが買収)のサイトにおいて、緑と赤のCTAボタンでA/Bテストを2000回以上行った結果、赤いボタンの方が21%クリック回数が多かった、という実験結果が発表されています。
※参照：The Button Color A/B Test: Red Beats Green - Hubspot (2011/08/02公開、2017/02/21更新)
https://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx
3.オレンジ
熱意や明るさが伝わる暖色系のもう一つの代表例がオレンジです。代表例としてはAmazonの購入ボタンです。
赤の懸念点であった「警告」のイメージを避けられるため、赤のネガティブイメージを避ける場合の暖色案として多用される傾向にあります。
「Big Orange Button(BOB)」は一部でキーワードのような扱いとなっており、LPOツール大手Unbounce社でもオレンジのボタンを推奨しています。
※参照：The Future of the Marketing Call-To-Action Button: Big, Shiny & Animated (2009/12/03)
https://unbounce.com/conversion-rate-optimization/the-future-of-marketing-call-to-action-buttons/
a. GSM.nlのテスト事例 (2010年)
オランダの携帯電話会社GSM.nl(現Belwinkel.nl)のサイトで、サイトの購入ボタンの色について、[色なし(文字のみ)][緑][オレンジ※]の3種類でA/Bテストを行ったところ、オレンジの場合直帰率を5%低減(防止)させる結果になりました。
※記事中ではRedと記載されていますが、赤というよりはオレンジに近く、記事中でも「まあ技術的にはオレンジ」と記述されています
※参照：GSM.nl Reduced Bounce Rate Through Improved User Engagement - VWO Success Stories (2010/08/17)
https://vwo.com/success-stories/gsm/
b. SAPのテスト事例 (2013年)
ソフトウェア企業SAP社米国法人のサイトで、「オレンジ色の大型ボタン(BOB = Big Orange Button)」の導入を含む数々のランディングページ改善を行ったところ、ページからの見込み客獲得率が32.5%向上しました。(ただし他施策との合わせ技であり、ボタン単体の効果については記載なし)
※参照：SAP lifts their lead generation by 32.5% - Widerfunnel (2013/06/11)
https://www.widerfunnel.com/case-studies/sap-landing-page-optimization/
定番を過信せず、サイトとのデザインの相性を確認してから本格導入することも重要
サイトのメインカラーと色相を離さないと、ボタンが目立たなくなる
前述のPerformable社の事例(緑より赤の方がCVがよかった)について、「赤ボタンが緑より高いCVを出したのは、ボタン色が緑のときにメインカラーと被ったから」と指摘する記事が複数あります。定番3色から選ぶにしても、最低限サイトのメインカラーとの重複を避けることが重要です。かつ色の調和がとれたものを選べられるとベターです。
※参照：Which Is the Best Call to Action Button Color? Here's What Research Shows - OptinMonster (2019/04/22公開、2020/01/24更新)
https://optinmonster.com/which-color-button-converts-best/
Which Color of CTA Button Converts the Best - Automotive Digital Advertising (2019/06/03)
https://www.moveyourmetal.com/which-color-of-cta-button-converts-the-best/
できればA/Bテストで確認
必ずしも定番色が有利に働くとは限らない場合もあります。
英国のSEO企業・Platonik社では様々なサイトにおけるA/Bテストを行っており、必ずしも緑・赤・オレンジが他の色より優れるとは限らない結果を出しています。
- ●＞●：緑の方がオレンジより86%クリックが多い
- ●＞●：緑の方が赤より31%クリックが多い
- ●＞●：マゼンタの方が赤より68%クリックが多い
- ●＞●：マゼンタの方が緑より25%クリックが多い
- ●＞●：緑の方が黄より132%クリックが多い
選んだ色が本当に自サイトに合っているかどうか、事前に数百～数千回のA/Bテストで確認してから本格導入できると、より確実に成果を上げられるようになります。
※参照：31 Call To Action Button Examples to use with your first A/B Test today - platonik (2017/06/01)
https://www.platonik.co.uk/call-to-action/
まとめ
ボタンの色選択は売上や資料請求数に直結する重要な要素ですが、突き詰めると様々な条件が絡み、選択が難しくなります。迷った場合は、定番の色を候補にしつつ、サイトのメインカラーとの重複回避・親和性確保を考えて、A/Bテストなどで最終確認をしていくと、着実な成果に近づきます。
マックスマウスからのお知らせ
Webマーケティングの成果アップに役立つ情報をメールマガジンでお届け！
SEO・LPO・EFOなどWebで成果を上げるための改善・最適化、デザイン改修、A/Bテスト等に加え、マーケティングWebサイトでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
