ボタンの配置、色や演出を「感覚」で決めていませんか？ボタン、特にCTA（Call To Action）と呼ばれるコンバージョンにつながるボタンの配置や色そして文言を変えるだけで、コンバージョン率は変動します。 とても有名な例で、Mozilla社が行った実験があります。この実験は、定期的に下記のボタンを1週間ごとに変更し、ダウンロード率を調査したものです。 皆さんは、下記のボタンでどれが最もクリックされたと思いますか？

Firofoxの事例

 結果は、緑色のボタンがダントツでダウンロードされたようです。この結果を受けてMozilla社のサイトでは、統一して緑色ボタンを利用しているそうです。 このように、ボタンの色を変えるだけでCVRに大きな変動があります。この結果を踏まえて私たちは、ボタンの配置や演出を変えみてもCVRに変動あるのかどうか調査を行ってみました。 

CTAボタンの配置・演出改善でCVRが4倍！

下記の図をご覧ください。下記の図は、ある会員登録サイトのボタン配置、演出を変更した前後を表したものです。 

変更前

変更後

 変更前と変更後では、フォーム到達率、CVRに大きな変動があります。変更後のフォーム到達率は変更前と比べて4%も上がり、CVRは約3%も上がりました。 少しボタンの配置と演出を変えるだけ、こんなにもCVRを改善することが出来るのです。では実際にどのような改善を行ったのか見ていきましょう。 

ボタンに有益な情報を入れる

ボタンの意味を伝える

今回のCTAボタンは、会員登録へのアクションに繋がるボタンです。しかし、変更前のボタンには『問合せる』という文言しか表示していなかった為、ユーザーの混乱を招く可能性がありました。したがって私たちは、ユーザーが次に行うアクションのイメージが湧きやすいように、ボタンを「会員登録ボタン」「ご相談ボタン」という２つの項目を設けました。 

ボタンのすぐ下に詳細を加える

変更前のサイトは、会員登録をした後のフローが不明瞭でした。ユーザーが次にどのようなアクションをとることになるかを明確に伝える為に、会員登録ボタンのすぐ下に会員登録の流れ・説明を設けました。 

登録が無料であることを伝える

ユーザーに金銭的なお得感を出すことは非常に有効です。会員登録が無料であることを伝え、登録することへの躊躇いを取り払いましょう。 

ボタンに演出を入れる

ボタンを立体的、ロールオーバーさせます。クリックできるということ目立てせたり、ボタンを押したくなるような思いを喚起させます。

?このようにマウスを合わせた際に色や形が変わるようにします。

 これらのサイト変更を行うことによって、明確な意図をもったユーザーがよりアクションを起こしやすいようになるサイトをつくり、CVRを向上させることに成功することが出来ました。

ボタンをロールオーバーさせる方法などについては、こちらの記事をご覧ください。ロールオーバーをCSSで実現する　（『ホームページの素』さま）

まとめ―常にABテストを行うことが大切

ボタンの色、配置は『この色、この配置がベスト』といって全てが統一されるものではありません。緑色ボタンの方がCVRが高いというサイトもあれば赤色の方が高かったという場合もあります。 できる限り、繰り返しテストを行うことで最適なボタンの配置・色・演出を見つけることが重要です。制作する側の視点ではなく、ユーザー視点に立って、サイト制作することがとても大切なのです。 ライター　小芝

【この記事を読んでいる人はこんな記事も読んでいます。】

• 本当の成果が欲しい人へ！SEOを成功に導く11の秘訣テクニック。
• 今すぐやりたい！サイトの表示速度を改善して利益を増やす10の方法。
• A/Bテストの進め方が丸分かり！79%コンバージョン率を改善した事例を徹底解説！
• 注目！フォームの入力エラーをリアルタイムで指摘してコンバージョン率を22%アップ！
• コンバージョン数を10％以上跳ね上げる！今すぐ試したい７つのA/Bテスト！
• 超簡単！サイト訪問者をコンバージョンする7つのシンプルすぎる方法。

000