デジタルマーケティングTips

LPやECサイト等のCTA/コンバージョンボタン色に関する諸説まとめ

記事タイトル画像:LPやECサイト等のCTA/コンバージョンボタン色に関する諸説まとめ

購入や申し込みにユーザーを誘導するボタンの配色は、サイトの売上や見込客獲得数を左右する最重要要素の一つです。が、色のおすすめについては諸説が飛び交い、長年論争になっています。サイトに合った選択をするための要点と、過去の主要な実験事例についてまとめました。

要点

ランディングページやECサイト等のボタンの色の重要性と選び方のコツ

  1. ボタンの色は売上や資料請求数に大きく影響する
  2. CTAボタン色の問題は様々な条件が絡み複雑である
  3. 迷ったらまず緑・赤・オレンジ等を候補にして検討
  4. 選んだ色がサイトで埋もれないか確認、できればA/Bテストも

メルマガでも情報を配信中です! ぜひご登録ください。

ボタンの色は売上や資料請求数に大きく影響する

購入・申し込み等のボタンは、「コンバージョンボタン」「Call to Actionボタン」(以下、CTAボタン)とも呼ばれ、購入や資料請求といったサイトの目標到達(コンバージョン)にとっては必須の要素です。

CTAボタンのアクション促進効果の強弱は、売上や見込客獲得数に大きく影響します。毎月何十万円も広告につぎ込むより、CTAボタンを一度改善する方が、コストパフォーマンスに優れる場合もあります。

それゆえ、CTAボタンのデザイン・大きさ・色・形状・文言・設置場所等については、日夜試行錯誤や研究が続けられています。

このうち、ボタンの【色】については、「緑だ」「いや赤だ」「いやオレンジだ」等の意見が飛び交っており、「結局何を信じればよいのか」と混乱のもとになりがちです。

CTAボタン色の問題が複雑である背景

ボタンの色は、よりコンバージョン率の高い色を追求し始めると、途端に複雑な問題になります。

これには主に以下の条件が絡みます。

  1. 色のもたらすイメージを考慮する必要がある
  2. ボタンと他の配色の調和を取る必要がある
  3. 個人的な色の好き嫌いが分かれる場合がある

1.色のもたらすイメージ

図:

色にはそれぞれ心理的な効果があり、見た人に促す感情や行動もそれぞれ変わります。また、大抵の色にはポジティブなイメージとネガティブなイメージが併存しています。

色のイメージは文化の差や個人の好みによる違いがあり、万国共通ではありませんが、中には比較的共通と呼べるものもあります。日本における一例としては以下の通りです。


ポジティブイメージ
×
ネガティブイメージ
情熱 興奮 パワー 生命危険 怒り
オレンジ暖かさ 希望 健康 家庭的わがまま
明朗 快活 元気 幸福注意 軽率
安全 調和 癒し 自然未熟 保守的
信頼 誠実 知性 清潔不安 冷酷
神秘 高貴 魅力 優雅二面性 警報
ピンク愛情 華麗 感謝 優しさ幼稚 弱さ
高級 重厚 威厳 絶対死 悪 絶望
清潔 純粋 平和 神聖空虚 降参

ボタンの色選択にあたっては、ボタンが訪問者に対してどのようなイメージを訴求すべきかを考慮することが重要です。

2.配色の調和

図:

色の組み合わせには、違和感のあるものとないものがあります。目立ちやすく、かつ違和感を感じさせないボタン色を選ぶことも、重要な要素です。

メイン1色+サブ1~2色+ボタン1色のように配色を選ぶ際、色相が3種類以上になる場合は、色相環上で正多角形・二等辺三角形・長方形のいずれかを形成する配色を選ぶと、色相差に規則性が生まれ、全体の色彩が調和しやすくなります。

Adobeのカラーパレットジェネレーター新しいウィンドウで開きますのような配色作成支援ツールが活用できると、作業効率化に繋がります。

※色相環…色を赤~黄~緑~青~紫~赤の順に循環させて円形に並べたもの。色を体系的に扱う際によく用いられます。

図:
メインカラー・サブカラー・ボタンカラーが90度間隔に並び、二等辺三角形を形成している例

3. 個人的な色の好み

図:

色によっては、個人的な好き嫌いが大きく分かれる場合があります。

代表例がピンクです。複数の調査で、主に女性が「好きな色」上位に挙げる一方で、「嫌いな色」に挙げる色でも男女問わず上位に入っています。

個人の色の好き嫌いを考慮する場合は、嫌われる色を避けて候補を選ぶ必要があります。

迷ったら3つの定番色「緑・赤・オレンジ」をまず候補にしよう

迷った場合、ひとまず「緑」「赤」「オレンジ」の3色のいずれかを最初に候補に挙げて検討するのがおすすめです。

この3色は、ボタン色の利用上位に挙げられる傾向にあります。他には「青」「黄」も比較的人気が高いです。

1.緑

緑は「青信号」すなわち「安全」「進め」の色として、古くから欧米圏を中心にボタン押下を促進する色の定番とされてきました。ボタン色関連の記事でも「世の常としてあらゆるマーケターが緑のボタンを好む新しいウィンドウで開きます」「緑はWeb 2.0系サイトの多くで頻繁に使われる新しいウィンドウで開きます」とたびたび言及されます。また、緑以外の色の有効性を試すためのA/Bテストにおいても、比較対象として頻繁に使用されます。

2.赤

赤は以前は「赤信号」すなわち「停止」「警告」「いいえ」のイメージが先行していました。「はい、削除します」というボタンの色を緑(=Yes)と赤(=警告)のどちらにすべきか、という疑問が出た新しいウィンドウで開きます例もあります。

一方で、赤はアグレッシブな色としても知られ、スポーツにおいては「2004年アテネ五輪で赤いユニフォームの選手の方が勝率が高かった新しいウィンドウで開きます」という事例も指摘されていました。

赤が緑より高いコンバージョン率を出す実験結果が複数示されてからは、熱意やパワーでコンバージョンを促す、暖色系CTAボタンの定番の一つに挙げられています。

a. CareLogger社サイトのA/Bテスト事例(2010年)

カナダCareLogger社(現在は閉鎖)のサイトにおいて、緑と赤のCTAボタンでA/Bテストを600回行った結果、赤の方がコンバージョン率が34%増加した、という実験結果が発表されています。(同社では他の施策との組み合わせで合計72%のCV率改善に成功しています)

b. Performable社サイトのA/Bテスト事例(2011年)

米Performable社(MAツール開発会社、のちにHubspotが買収)のサイトにおいて、緑と赤のCTAボタンでA/Bテストを2000回以上行った結果、赤いボタンの方が21%クリック回数が多かった、という実験結果が発表されています。

3.オレンジ

熱意や明るさが伝わる暖色系のもう一つの代表例がオレンジです。代表例としてはAmazonの購入ボタンです。

赤の懸念点であった「警告」のイメージを避けられるため、赤のネガティブイメージを避ける場合の暖色案として多用される傾向にあります。

「Big Orange Button(BOB)」は一部でキーワードのような扱いとなっており、LPOツール大手Unbounce社でもオレンジのボタンを推奨しています。

a. GSM.nlのテスト事例 (2010年)

オランダの携帯電話会社GSM.nl(現Belwinkel.nl)のサイトで、サイトの購入ボタンの色について、[色なし(文字のみ)][緑][オレンジ]の3種類でA/Bテストを行ったところ、オレンジの場合直帰率を5%低減(防止)させる結果になりました。

※記事中ではRedと記載されていますが、赤というよりはオレンジに近く、記事中でも「まあ技術的にはオレンジ」と記述されています

b. SAPのテスト事例 (2013年)

ソフトウェア企業SAP社米国法人のサイトで、「オレンジ色の大型ボタン(BOB = Big Orange Button)」の導入を含む数々のランディングページ改善を行ったところ、ページからの見込み客獲得率が32.5%向上しました。(ただし他施策との合わせ技であり、ボタン単体の効果については記載なし)

定番を過信せず、サイトとのデザインの相性を確認してから本格導入することも重要

サイトのメインカラーと色相を離さないと、ボタンが目立たなくなる

前述のPerformable社の事例(緑より赤の方がCVがよかった)について、「赤ボタンが緑より高いCVを出したのは、ボタン色が緑のときにメインカラーと被ったから」と指摘する記事が複数あります。定番3色から選ぶにしても、最低限サイトのメインカラーとの重複を避けることが重要です。かつ色の調和がとれたものを選べられるとベターです。

できればA/Bテストで確認

必ずしも定番色が有利に働くとは限らない場合もあります。

英国のSEO企業・Platonik社では様々なサイトにおけるA/Bテストを行っており、必ずしも緑・赤・オレンジが他の色より優れるとは限らない結果を出しています。

  • :緑の方がオレンジより86%クリックが多い
  • :緑の方が赤より31%クリックが多い
  • :マゼンタの方が赤より68%クリックが多い
  • :マゼンタの方が緑より25%クリックが多い
  • :緑の方が黄より132%クリックが多い

選んだ色が本当に自サイトに合っているかどうか、事前に数百~数千回のA/Bテストで確認してから本格導入できると、より確実に成果を上げられるようになります。

まとめ

ボタンの色選択は売上や資料請求数に直結する重要な要素ですが、突き詰めると様々な条件が絡み、選択が難しくなります。迷った場合は、定番の色を候補にしつつ、サイトのメインカラーとの重複回避・親和性確保を考えて、A/Bテストなどで最終確認をしていくと、着実な成果に近づきます。

マックスマウスからのお知らせ

Webマーケティングの成果アップに役立つ情報をメールマガジンでお届け!

SEO・LPO・EFOなどWebで成果を上げるための改善・最適化、デザイン改修、A/Bテスト等に加え、マーケティングWebサイトでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください!