CTA(Call to Action)ボタンに関わる要素はすべてA/Bテストをしてみましょう | Optimizely 正規代理店イー・エージェンシー
  • 2016年07月15日

CTA(Call to Action)ボタンに関わる要素はすべてA/Bテストをしてみましょう

Optimizely社メールマガジンにて、連載されたTips集を訳した記事です。


ウェブサイト上のCTA(Call to Action:以下、CTA)とは訪問者にクリックを促すことをいいます。
e-コマースサイトにおける最もわかりやすいアクションとはアイテムをカートに追加し、「購入プロセス上の次のステップへ進む」ことであり、その中でもとくに大事にされるCTAは、「購入の確認をする」ことになります。CTAボタンのデザインに適用する最善の方法は、改善を始めるのに「良い場所を気づく」こと、それから、それぞれの施策における「最善の処置をテストに織り込む」ことだと気づけることです。
(Smashing Magazineに掲載された「CTAのベストプラクティス」の記事は説明が素晴らしいです。ぜひ、ご参照ください。)

お客様は、必ずしも世界におけるすべてのベストプラクティスのパターンのように行動するわけではなりません。以下にどのような考えを持ってテストすべきかのアイデアをお伝えします。

ボタンの場所、サイズ、量

“Web上のCTAボタンの位置は訪問者の目に留まるかどうかについて重要な意味を持ちます。”
— Smash Magazine Call to action best practices から引用

商品画像からボタンまでの距離をテストしましょう


商品詳細や商品画像とボタンの位置の関係は、シームレスなユーザー体験に対し、大きなインパクトを与える力があります。
いくつかの例を下記に挙げていきます。

  • Nordstrom.com:商品ページの下部にCTAを配置
  • nordstrom 購入ページ

  • Amazon.com :下部にあるすべての商品詳細について上部右にボタンを配置
  • Amazon 購入ページ

  • Urbanoutfitters.com は商品画像のすぐ横にボタンを配置
  • Urbanoutfitters 購入ページ

    チェックアウトファネルの中に、”次へ進むボタン”でテストしましょう


    ふたつのCTAがある場合は、それぞれの位置とサイズをテストしましょう。

  • Target.com:2つの”購入へ進む”ボタンを設置
  • target.com 購入ページ

  • BestBuy.com :カート詳細画面下部で”次へ”ボタンが1つに絞りました
  • bestbuy.com 購入ページ

  • Asos.com :は購入プロセスの次のページへすすむために2箇所にボタンを設置
  • Asos.com 購入ページ

    商品詳細ページの中に2つのCTAがある場合、それぞれの位置とサイズをテストしましょう

    “Webページでは、まわりの要素に比べて、対象の要素は重要です。大きければ大きい程より重要ということが言えます。”
    — Smash Magazine Call to action best practices から引用


    もしユーザーが購入、もしくは次のページへ遷移するためにボタンを探さなければならないようであれば良くないユーザー体験をさせているということになります。
    ボタンについて最も重要なことは”カートに追加する”もしくは”ウィッシュリストに加える”でしょうか?もし”今すぐ購入する”と”カートに追加する”の選択肢があるとしたら、あなたならどちらで購入しますか?

  • eBay.com :”カートに追加する”ボタンの上に”今すぐ購入する”ボタンを配置
  • eBay.com 購入エリア

  • Gilt.com :”すぐに購入”ボタンの隣に”カートに追加する”ボタンを配置
  • Gilt.com 購入エリア

    2番目のCTAボタンの1つをデザインパーツではなく、
    プレーンテキストリンクにしてテストしてみましょう

  • Walmart:”ウィッシュリストに追加する”のCTAにプレーンテキストを使用
  • null

    “CTAボタンには周りの要素や背景に比べてコントラストが高い色を使いましょう。なぜならユーザーにCTAに気づいてもらうことが不可欠だからです。”
    — Smash Magazine Call to action best practices から引用

    CTAボタンにコントラストが高い色とブランドカラーで
    テストしてみましょう


    CTAについて、ブランドカラーから外れ、背景や周りの要素に対して際立って構いません。

  • Zappos.com :”カートに追加する”のCTAボタンと価格の色に緑を使用

  • カートのCTAはすべて明るいオレンジ色でしたが、緑を使用しています。

    言い回し


    言葉の使い方例えば、「急いだ方がいいですよ。」という、”煽り”感を出してみると、
    ユーザーの反応がすごく良くなるなどがあります。
    しかし、実際にどんな言葉を使ってユーザーの流れを作ると良いのでしょうか?


    例えば、「購入する」とそのままを記載した場合と、「購入に進む」に変更した場合のようなテストを行ってみると、
    驚くべきコンバージョンの違いが出るかもしれません。
    下記事例が良い例です。

  • Insound.com:購入プロセスの最後から2番目のプロセスで4種類の異なるボタンでテストを行う

  • Insound.comでは、購入プロセスで次のフローへ進むことをゴール設定とした時に、
    以下の4パターンで、ボタンの文言によるテストを行い、どのボタンが最もクリックされるかを計測しました。

     

    1. 注文内容を見る
    2. 次へ
    3. 送信する
    4. もう少しで注文完了!

     

    結果は「1. 注文内容を見る」と記載されたボタンが、コンバージョンで8%増加しました。
    このテストの詳細説明と結果は、以下、Insound.comの事例紹介ページでご覧いただけます。
    How 2 Words Lifted Insound’s Checkout Funnel Conversion to 54%

    CTAボタンのカイゼンを行ったテスト事例はこちら↓
    事例:ハワイ旅行専門店「ファーストワイズ」 A/Bテスト事例紹介【カンタン改善テスト】


    Optimizelyのサポートに関するお問い合わせはこちらまで

    前へ
    次へ

    ブログの関連記事

    サーバーサイドで実験する理由
    Optimizely Xを活用した分野別A/Bテスト活用シーン
    議論白熱! Speee社がA/Bテストの社内勉強会(レビュー会)「ABtestNight」を開催
    Optimizelyって、どんな会社?(3)スタッフ同士のパートナーシップ&フレンドシップと、イノベーションを生む街サンフランシスコ
    Iron Mountain、リードジェネレーションプロセスを最適化

    ブログのよく読まれている記事