ブランディングやマーケティングの場では、色の選び方はプロジェクトの成功を左右する大きな要因のひとつです。
商品・サービスのブランドイメージと色の与えるイメージは強い結びつきがあることは自明です。
では、フォームコンバージョンを決める要である送信ボタンの色はどうでしょうか？
「ユーザーのフォーム送信を促進してくれる色」とは、一体何色なのでしょうか。
今回はCTAボタンの例も含めながら、ボタンに最適な色についてケーススタディを通して考えていきたいと思います。
色が与える印象の違い
マーケティングには欠かせない色のイメージですが、具体的にはどういったものかを見てみましょう。
下記はKissmetricsが公開したインフォグラフィックス「How do colors affect purchases?（＝色が購買行動に与える影響）」の引用です。
どの色がどのような影響を与えるかと示したものとなっています
（※厳密には色のイメージは国や文化によって異なります。今回引用するのは北米圏においての一般的なイメージとなります）
- 黄色…楽天的、元気。注意書きとしてよく使われる
- 赤…エネルギッシュ、鼓動を早める。セールでよく使われる
- 青…信頼、安全性の色。銀行やビジネスシーンで多用
- 緑…健康、眼に優しい。リラックス系のサービスで多用
- オレンジ…アグレッシブさ。購読、購入などのCTAボタンに使われる
- ピンク…ロマンティックでフェミニン。女性や少女向けの店舗に使われる
- 黒…パワフル、それでいてスマート。高級路線のストアに多い
- 紫…癒やしと穏やかさの色。美容やアンチエイジングの商品に多い
色のイメージだけで言えば、セールのイメージの強い赤色や、「CTAボタンに多用」とされているオレンジ色が優勢のように思えます。
ボタンの色を変えた改善効果ケーススタディ
それでは実際にボタンの色を変えてフォームの成績が変化した事例を見てみることにしましょう。
赤・オレンジ系統に変化させた例
まずは、色のイメージからいうと良さそうな赤やオレンジ系のケーススタディです。
事例1
CTAボタンの例にはなりますが、Performableというサイトが緑色と赤色の2種類でボタン色のABテストを実施しました。
テストは上記に引用の画像の通り、ほかの要素は変えずにボタンの色のみを変えて行われました。
結果は、赤色のボタンのほうがが21%コンバージョンが多くなる結果となりました。
※参考：The Button Color A/B Test: Red Beats Green
続いて似たような事例を紹介します。
事例2
CareLoggerというサイトでは、同様にサイトトップのCTAボタンの色を赤と緑の2種類用意してABテストが行われました。
結果は、赤色のほうががCVRが34％増加するということになりました。
事例3
続いてもうひとつ。とある携帯電話のEコマースサイトによる事例です。
ここでは緑のテキスト、緑のボタン、赤（濃いオレンジ）のボタンの3種類テストが実施されました。
ここでも赤（濃いオレンジ）が5％優勢、という結果が出ています。
※参考：Which Color Converts The Best?
暖色系に変化させた例
やはり赤色やオレンジに変化させたことで成績が改善した例は存在するようです。
では、赤とオレンジに限ったことなのでしょうか。もう少し事例を見てみることにしましょう。
続いて、赤やオレンジ以外の暖色系に変化させた例です。
事例4
まずは弊社の事例から。
ボタンの色のみを変化
弊社運営メディアでフォームの送信ボタンを、紺色からピンク色に変えたところ、フォームの送信完了率が1.9倍に改善しました。
事例5
続いて黄色に変化させた例です。
この例では、もともとライトグリーンだったボタンを黄色に変えたところ、CVRが14.5％増加したとのことです。
参考元：12 Surprising A/B Test Results to Stop You Making Assumptions
事例6
RIPTというアパレルECの例では、CTAボタンを緑から黄色へ変化させています。
黄色のボタンに変えたことが6.3％の売上増をもたらしたとのことです。
※参考元：How RIPT Apparel increased their sales by 6.3% using Visual Website Optimizer – VWO Blog
ここまでで、一応他の暖色系で成績が改善した事例もあることがわかります。
寒色系で改善した例
しかし、暖色系が良いと結論付けるには問題があります。単純に、その逆の事例も存在するためです。
事例7
Monetateが実施したテストでは、青色とオレンジ色のボタンによるABテスト検証が実施されました。
このテストでは、青色ボタンのほうの成績が、オレンジ色よりも9％上回る結果となっています。
※参考元：Website Testing Wins: Orange or Blue?
事例8
続いて、寒色同士のテスト結果で興味深いものを紹介します。
あるEコマースサイトのテストでは、CTAボタンを紺色から緑色に変えました。
その結果、売上が35.81%も改善することとなりました。
※参考元：10 Call-to-Action Case Studies with Examples from Real Button Tests
色の問題かどうかは疑わしい
以上、多くのボタンの色を変化させた事例を見てきました。
確かに、色のイメージ上は良さそうな赤やオレンジにボタン色を変えたことで、成績が改善した事例は存在しました。
しかし、他の暖色系でも成績が改善しているどころか、まったく逆で寒色系のほうが成績が良かったり、寒色系同士でも売上を左右したりしています。
単純にボタンの色がフォームの成績に関与していると結論付けるのは難しそうです。
では、なぜボタンの色を変えただけでフォームの成績が向上したのでしょうか。
たとえば事例5では、ボタン色を変えたせいというよりは、色を変えたことで文言の可読性が向上していることが理由にも思えます。
改善後（右）のほうは、黄色というよりは、文字が白抜きから黒になったことで文字が読みやすくなった印象がある
また、事例6の例でも、色の変化以前にボタンの形や内包する文言が変わっているため、単純に比較することは難しいと思います。
黄色のボタンのほうには、「$10 ONLY FOR 24 HOUR」の訴求文が加わっている
そして、注目したいのはボタン色を暖色系に変えて成績改善した3例（事例1、2、4）については、サイトやブランドロゴが寒色系基調だったという共通点があります。（事例3、7、8については元サイトの色は不明）
寒色系のデザインのなかに色相の逆側に位置する暖色系の色を配置すれば、当然、目立って見えます。
事例1のサイトロゴは緑色
このように考えると、ボタンの色そのものが原因で成績が改善したのではなく、ボタンの色を変えることで（明度やコントラストの影響で）可読性が向上したり、サイトデザインのなかから引き立って見えたことが改善に繋がったと見たほうが良さそうです。
結論：普遍的なボタンにふさわしい色は存在しない
今回ケーススタディを見てきたなかでの結論では、普遍的にフォームの成績を改善するボタン色は存在しないということになります。
ボタンにはどの色が正解という答えはなく、大切なのは、サイト上できちんと引き立って見えるかどうかです。
そのため、当然サイトによって最適なボタンの色は異なると言えるでしょう。
あなたのサイトにベストなのは何色でしょうか。ボタンとページのデザインのバランスを考えて、ボタンの色の検討・検証を行ってみてください。
