[最終結論]ボタンの色の残念な真実

中村です。

今朝お届けした音声は、
もう聞いていただけましたか？
↓
成約率を高めるCTAボタンの作り方:前篇
⇒ https://www.himalaya.com/ja/episode/1680751/86884653

今日の音声で話をしているのは、
ウェブページに使われている
「ボタン(CTAボタン)」に使われる
“色”についての話です。

で、このボタンって言うのは、
例えば、、、

https://office-nj.com/wp-content/uploads/2020/02/btn_20200223_1.png
https://office-nj.com/wp-content/uploads/2020/02/btn_20200223_2.png
↑の画像で言うならば、
赤線で囲まれたボタンのこと。

で、このボタンを押すことによって、
購入画面に進んだり登録完了したりと
色々なアクションが起きるわけです。

つまり、僕たちページを用意する側は、

「どうやったらこのボタンを
　クリックしてもらえるのか？」

を一生懸命考えて、コピーを変えたり、
商品の魅力を高めたりしてるわけです。

で、そんな「ボタン」については、
もう何年間と続いている議論があって、
それが『何色がベストか？』なんです。

そう。

事実として全く同じコピー、
同じデザインのページであっても、
「ボタンの色」を変えるだけで
成約率(ボタンを押される率)が
上がるってことがあるんですよね。

で、これってめちゃくちゃ魅力的な
話題だと思いませんか？

ボタンの色を変えるだけで
成約率が上がるなんて最高です。

なので、成約率を上げるデザインの
話題になったら必ず“色”の話題も
セットで出てきているわけですね。

でも、実はこの議論には結論が出てて、
今も議論している人って言うのは、
「1つのデータしか見てない人」です。

なので、ボタンの色は「緑！」って
決めつけて伝えてる人がいますけど、
あれは間違ってるってことです。

例えば、、、

「赤色の方が反応が高い」という
テストデータとかはあるわけなんですが、
それと同時に「赤が負けたデータ」も
またたくさん出てくるんですよね。

そして、これは他の色でも同じで、
緑が勝つデータも出てくるし、
緑が負けるデータもあるんです。

じゃあ「どんな色でも良いの？」と
言われたら、またそれも違います。

結論から言うと、
成約率を高めるボタンの色は、
「コントラストが効いた色」です。

つまり、「緑」「赤」「オレンジ」なんて、
絶対の正解はないってことです。

うーん、残念ですね…。

世の中みんなが大好きな
「絶対の正解」は
またしてもありません。

でも、この画像を見ていただければ、
たぶん一発で意味が理解できると思います。
↓
https://office-nj.com/wp-content/uploads/2020/02/btn_20200223_2.png

これ、さっきも紹介した画像ですけど、
CTAボタンを囲っている赤い四角を
もう一度見てもらえますか？

まず、そもそもなんですけども、
この画像の中には

１．右上の小さいやつ
２．中央やや右下のでかいやつ

とボタンは2つあります。

もしかしたらなんですけども、
画像を注意深く見なかった場合、
右上を四角で囲っていることに
気づかなかったかもしれません。

あなたは気づきましたか？

つまりはそういうことです。

基本、ウェブページに来た人は、
注意深く細部まで見ることはなくて、
「集中力が低い流し読み」をしてます。

だから、ボタンが目立っていなければ、
そこに注意がいかないわけなんですよね。

じゃあ、なんで右上のボタンを囲った
赤い四角が目に入りにくいのか？

それこそが「コントラスト」です。

大きいボタンの方は、

・背景は透過された黒
・ボタンの色が緑

なので赤色が目立っています。

一方で、右上の赤い四角は、
背景が明るいオレンジになっていて、
赤い色が目立ちにくいわけですね。

ちなみに、過去にFirefoxが行ったテストで
「緑色のボタンが1番だった」って
結果を公表したことがあるんですね。
⇒ https://news.mynavi.jp/article/20090622-a053/

だから「ボタンは緑！」派閥は
今でもかなり多くいます。

けど、例えば、この話題で
有名なのがこの画像。
↓
https://office-nj.com/wp-content/uploads/2020/02/ERTcdUoVAAYBQmo.jpg

この場合では緑の成約率を100%とした時、
赤の成約率は121%だったそうです。

つまりは、赤の方が成約率良かったと。

でも、よく見てみたら、
ロゴやその下のアイコン、
右に配置された画像などの目立つ色が
緑になってますよね。

つまり、コントラストが効いてるのが
「赤色」だってことなんですよ。

まあ僕たちは「ボタン」の話題の中で
サイトの画像を見ているわけなので、
緑のボタンもよく見えています。

でも、逆に、この程度の馴染み具合で
成約率に差が生まれるくらいには、
ページの訪問者は一瞬でボタンの判断が
できないってことなんですよね。

それが初訪問ならなおさらです。

もう一度結論を言いますけども、
成約率を高めるボタンの色は、
「コントラストが効いた色」です。

で、明日の朝の音声では、
成約率を高めるボタンについて、

・コピーライティング
・ボタンを置く位置

についての話をしています。

ぜひ、そっちも楽しみにしててください。

(株)オフィスNJ代表
中村純
(東京・下北沢の自宅から)