あなたのサイトのCTAボタンは、クリック率の上がる色を取り入れていますか？
サイト改善において「最も効果が出やすい箇所から改善する」のは常識なので、ぜひこの記事を読んで、ボタン周りを徹底的に改善しましょう。
今日はあなたのサイトに最適なCTAボタンの「色」をお教えします。
目次
最も成約率が上がるCTAボタンとは
「最も成約率の上がるCTAボタン」についてネットで検索すると様々な情報が出てきます。
「緑色のCTAボタンが良い」
「テキストリンクが良い」
「立体的なボタンが良い」
皆さんはこの情報を見た際に、そのデザインが「なぜ成約率が上がるのか」その理由を考える必要があります。
さて、いきなりですがクイズです。
下記のボタンの1番〜５番の中でクリック率が高いのはどのボタンでしょうか？
正解は…..
実はクリックされやすいボタンが変化しているため、正解は時期によって異なります。
ちなみに現在だと、一番クリックされやすいのは３番です。
ですが、少し前までは５番が最もクリックされやすく、その前は４番が最も効果的なボタンでした。
では、なぜ時期によってクリック率が変わるか、これから解説していきます。
ボタンの色の歴史
学生時代、現代を学ぶために、社会で歴史の授業を学びましたよね。
それと同じで、ボタンの色の歴史を知っておくことは、実はサイト改善において重要な知識です。
Windowsボタンの歴史が鍵を握る
あなたはこのボタンを覚えていますか？
これは1980-1990年代にWindowsで使用されていたボタンです。
現在では、このボタンデザインはあまり目にしませんが、それには理由があります。
この時代、上記のようなブラウザクラッシャーの影響でユーザーの多くが、この灰色の立体的なボタンが怖くなり、クリックすることを躊躇するようになります。
そうなると、クリックするのが怖いボタンを使い続けるわけにはいかないので、Windowsはボタンのデザインを変更しました。
無敵の緑色ボタン？
灰色から改善されたのが、この緑色のボタンです。
当時はこの緑色のボタンが良いと全世界に発表され、あらゆるサイトで似たデザインの使用割合がぐんと増えました。
実際に、この時代はネットショップでも緑色のボタンのクリック率が高くなりました。
WEBブラウザで現在も名を挙げるFirefoxが、当時行ったテストでは、圧倒的に緑色のボタンがクリックされやすいというデータも残っています。
その他の多くの企業でも、緑色のボタンのクリック率が高くなるということが続々と証明されました。
参考：https://www.highervisibility.com/website-design/services/conversion-optimization/
ここまでの流れで、勘が鋭い方であればもうお気付きかもしれません。
誰でも安心してクリック出来るボタンは、誰でも使いたくなりますよね。
無敵の緑色ボタンはこの頃、広告でも多用されるようになり、悪用される機会も増え、再び多くのユーザーは緑色ボタンに不信感を覚えるフェーズに突入します。
つまりボタンには旬が存在するのです。
ではボタンの色やデザインの旬を知る方法はあるのでしょうか？
OSのデザインをチェックするべし
Windowsが使用するボタンの色は、灰色から緑色、そして青色ベースのボタンに変わっています。
そして、Googleや、Twitter・Facebookも青色のボタンを使用しています。
つまり旬の色とは、OSデザインや、スマホのシステム環境設定など、多くのユーザーが使用する機器において使用頻度が高い、慣れ親しんだボタンの色・デザインからヒントが得られます。
安心してクリック出来るデザインを先取りすることが秘訣なのです。
ボタンデザインによって、クリック率が変化している理由は、「本能で行動して、学習して、繰り返し行動」と言う信頼性を生み出す流れに起因します。
したがって、あなたのサイトのCTAボタンにOSデザインを取り入れると、顧客はすでにオペレーションシステムのデザインを学習しているので、成約率の平均点が取れます。
あなたのサイトを使用するユーザーを知ることが重要
しかし、これまでにもお伝えしている通り、「今、良いとされているボタン」も悪用されると信頼性を失います。
実際に、青色のだましボタンも増加しているのが現状です。
「どの色が旬であるか」ということよりも、さらに重要なのは下記の３点です。
- 顧客が信頼しているのはどのデザインか
- 自分のサイトのユーザーはどの段階にいるのか
- お客様の経験・パターン認識を知ること
もしあなたのサイトを使用するユーザーが、現在でもスマホよりPCを扱うことが多く、当時のボタンに騙されてない人であれば、いまだに角形の灰色や、緑色のボタンを押すユーザー層もいるかもしれません。
またボタンではなく、テキストリンクを好むユーザーの割合が多い可能性もあるでしょう。
ぜひ、CTAボタンの色やデザインをテストして、あなたのサイトのユーザーを理解することから始めましょう。
物販のサイトならこの色を使ってみて
あなたのサイトが物販であれば、利用するユーザーは大手のサイトも利用している可能性が高いでしょう。
▼amazonの購入ボタン
▼楽天の購入ボタン
これらのボタンは「押すと安心して買い物が出来る」と、ユーザーが教育されてきているので、信頼性が高く、クリック率が上がる可能性があります。
色の対比でクリック率をUPさせる方法とは
これまでの内容では、ユーザーの使用頻度が高いボタンの色に焦点を当てて、お伝えしてきました。
しかし、あなたのサイトのテーマカラーと、ボタンの色が同色であれば、ボタンが目立っていないと言う理由でクリックされていないケースも、十分に考えられます。
最後に、色の種類ではなく、色の対比でデザインしていくコツをお教えします。
自分のサイトの色に合わせたボタンにする
色の配色比率は上記のように、配分することが秘訣です。
- ベースカラーの70％：背景の要素
コントラストを出すためにグレーや白を選ぶと、メインカラーとアクセントが目立つようになるので、おすすめです。
- メインカラー25％：テキスト等の要素
グレー・黒を選ぶと、ベースカラーが淡い色の場合、視認性が高くて見やすいサイト配色になります。
- アクセントカラー5％：ボタン等の目立たせたい箇所
ユーザーが学習したパターンに基づいた色で、有色>無色。目立つ色を配色してみましょう。
大切なのはコントラスト
下記の図の色相環で、強調色と60度にある色を意識してサイトの配色を決めるのがおすすめです。
例えば、赤い文字を強調色で使うのであれば、リンクやボタンは緑色や青色にすると配色として目立ちやすい色になります。
カラーバランスを調べるツール「Adobe Color」では、「カラーホイール＞トライアド」から60度の位置にある、強調色を簡単に探せます。
参考：Adobe Color
色覚障害に対応するツールもあるので、自分のサイトでは、どの色が最適なのか早速確認してみてください。
まとめ
今回はクリック率が上がる、CTAボタンの色についてお話ししました。
どのサイトでも通用する「無敵のボタンの色」は無いことを理解していただけたでしょうか？
混在するネットの情報に惑わされずに、あなたのサイトを利用するお客様が事前にたくさん使っているサイトを知り、その情報と配色を調整した、安心してクリック出来る目立つボタンにしましょう。
CTAボタンの色だけでなく、ボタン周りのマイクロコピーも改善したい方は、ぜひLINE登録して「売れる」マイクロコピーの特典を無料で受け取ってください。
↓ ↓ ↓
