やらなきゃ損!CTAボタンの配置・演出改善でコンバージョン率が4倍!

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

Firofoxの事例

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

目次

  • CTAボタンの配置・演出改善でCVRが4倍!
  • 改善内容①ボタンに有益な情報を入れる
  • 改善内容②ボタンに演出を加える
  • まとめ
 

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

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

変更前

 

変更後

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

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

ボタンの意味を伝える

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

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

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

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

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

ボタンに演出を入れる

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

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

  これらのサイト変更を行うことによって、明確な意図をもったユーザーがよりアクションを起こしやすいようになるサイトをつくり、CVRを向上させることに成功することが出来ました。
ボタンをロールオーバーさせる方法などについては、こちらの記事をご覧ください。 ロールオーバーをCSSで実現する (『ホームページの素』さま)
 

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

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

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

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

    ジャックアンドビーンズ

    →【無料】このような記事を定期的に読みたいと思いますか?

    【もっとwebマーケティングを学びませんか??】
    毎週水曜夜8時に魅力的な最新記事を受け取る!
    グロースハックのノウハウを見逃さない
    コンバージョン率を上げる情報を手に入れる!

    ※ブログの情報はこちらでも配信しています!

    follow us in feedly

    J&B Laboの関連記事

    色香を放つ流し目美人素材

    ドキドキだけじゃない。美人はコンバージョンも与えてくれる

    ...

    記事を読む

    検索リマケアイキャッチ

    検索リターゲティングでコンバージョン率が3倍に!?

    ...

    記事を読む

    increase-speed

    今すぐやりたい!サイトの表示速度を改善して利益を増やす10の方法。

    ...

    記事を読む

    Marketing_Copywriting_4_Magic_Words_to_Increase_Ecommerce_Sales

    覚えておきたい!これがランディングページでの効果的な色使いだ!

    ...

    記事を読む

    shopping-cart

    カートでの購入中断は終わりではない。コンバージョンへの始まりだ!購入を中断したユーザーをリカバリーしよう!

    ...

    記事を読む

    この記事をシェアする

    J&B Laboの新着記事