最適なボタンの色は？

ランディングページの代表的なA/Bテストの一つとして、「ボタンの色を変更」があります。
弊社でも何度も、ボタンの色変更テストを実施してきました。

テストを実施する色として、赤や緑などがありますが、まずは、色が持つ意味から見ていきましょう。

赤色

赤はとても目立つ色です。
交通信号機で最も重要な「止まれ」を表すのに赤が用いられた理由は、波長が長く空気中の塵やホコリなどに遮られにくいからとも言われています。

そんな目に届きやすい赤は、購買欲や食欲を刺激する色と言われており、広告などで頻繁に使用されます。

しかし、「危険」や「怒り」などを連想させる色でもあり、使い方を間違えるとボタンを押しづらくさせる恐れがあります。

緑色

緑は平和を象徴する色です。
中間色のため、他の色と調和しやすい性質があります。

癒やしを感じる色であり、病院や薬局など、安心・安全などをイメージさせたい場合などで頻繁に使用されます。

しかし、中間色のためデザインと同化しやすく、ユーザーがボタンを見落としてしまう恐れがあります。

ケーススタディ

あるランディングページで実際にA/Bテストを行いました。
このランディングページは、CTAは赤系でデザインされていました。

CTAを現行のものと、緑バージョンを用意し、その他のコンテンツは一切変えずにA/Bテストを実施しました。

約2週間計測したところ、以下のような結果となりました。

ボタンの色を緑に変更しただけで、CVRに劇的な変化が現れました。

緑＝ベスト・プラクティスなのか

よく「緑にするとCVR」が上がると言われますが、果たして緑が最もCTAに効果的な色なのでしょうか。

弊社で、あらゆるランディングページでボタンの色変更テストを行ってきましたが、確かに緑の勝率は他の色と比較してやや高いものの、必ず勝つということはありません。

ランディングページにおけるCTAは、

「ユーザーをフォームや電話に誘導するための、最後のひと押し」

がミッションです。
例えば、ランディングページ全体が緑色の場合、ボタンも緑にした結果、周りのデザインと同化してしまい、CVRが低下した例もあります。
最後のひと押しをするまでもなく、ユーザーがボタンを発見しづらくなったのかもしれません。

まずは「CTAが目立っているかどうか」をチェックしてください。
その上で、ページのデザイン毎に、最適なボタンの色をA/Bテストで見つけていきましょう。

また、A/Bテストの結果を集計する場合は、

「全体集計と、セグメント毎の集計を行う」

ことを忘れないようにしましょう。

例えば、全体集計で見ると○○色が勝ちだが、リピーターの場合は○○色の方がいい、なんてことはよくあります。
色彩学と組み合わせ、ターゲットのユーザーに対して、最適なボタンの色を選ぶことが重要です。

余談ですが、「タップしたくなるボタン」「クリックしたくなるボタン」も重要です。また次回に…。

ランディングページ・チェックリスト

ボタンの色だけでなく、ランディングページを改善するためのチェック項目はいくつもあります。
実際に弊社のスタッフも実施している代表的なチェック項目をまとめておりますので、ぜひダウンロードして活用してみてください。

また、弊社ではランディングページの無料簡易分析も承っております。
プロ視点で見た、貴社ランディングページの課題点を発見し、オーダーメイドの分析結果資料をお届けいたします。
詳しくはチェックリストをご覧ください。

いますぐダウンロードしてみる（無料）