効果的なa/bテストの方法とは？ポイントと具体例をご紹介【マーケティングコラム】

2021/10/13

コラム

Webサイトのコンテンツを改善したいものの、「なかなか成果が上がらない」「どのデザインが刺さるかわからない」といった悩みを抱えている企業担当者もいるでしょう。Webサイトの効果検証に最適なのは、「a/bテスト」です。この記事では、a/bテストを正しく理解するためのポイントをご紹介するとともに、a/bテストを実施するための基本をご案内します。

a/bテストとは？

「a/bテスト」とは、複数のパターンからコンテンツやクリエイティブの検証を行うマーケティング手法です。Web サイトでa/bテストを実施するのであれば、印象の異なる2種類（または複数）のデザインやアピール文を用意し、どのパターンが「CVR（コンバージョン率）が良かったか」「CTR（クリック率）が多かったか」を導き出します。a/bテストには有料ツールの他、無料で使用できるツールもあります。

a/bテストを行う目的

a/bテストの目的は、コンテンツやクリエイティブの改善を目指すことです。a/bテストを使った小さな変更の積み重ねが、大きな改善につながります。a/bテストによって、事前に「勝ちパターン」と「負けパターン」のそれぞれの傾向を知ることで、エンゲージ率の高いビジュアルや伝え方を把握できます。また、これはホームページのリニューアルなどにも活かせる知見です。a/bテストで得られた行動データを本番環境で活かせば、Webサイトの成果を高められるでしょう。

a/bテストの対象は？

・広告
バナー広告、リスティング広告、LP（ランディングページ／ユーザーが広告をクリックした後にたどりつくWebページ）などでa/bテストを活用できます。バナー広告のテキスト、リスティング広告の見出しや説明文、ランディングページのレイアウトなどがa/bテストの対象です。

・Webサイト
メインビジュアルの画像、メインコピーの訴求、フォーム画面、アクションボタンの色や位置などがa/bテストの対象です。

・アプリケーション
アプリストアのページを見た時に最初に表示されるアイコン、アプリのタイトル、アプリ内の解説文やデザインなどがa/bテストの対象です。

a/bテストの方法・流れ

事前準備

まずは現状分析からスタートしましょう。例えば「採用サイトの応募が少ない」ことを課題とする場合、改善に向けた仮説をいくつか立てます。この場合、「仕事内容がわかりにくい。働く社員の写真を載せれば、仕事のイメージが湧くのでは？」という仮説を立てたとしましょう。次に、「どのページを変更するか？」「a/bテストの期間をどれくらいにするか？」を決めて、資材を準備します。そして、a/bテストをするのに必要なa/bテスト専用ツールを選びます。

【a/bテストの事前準備に必要な条件の例】
・対象ページ
・対象ページの文言（キャッチ、仕事内容の説明文）
・対象ページの画像（ページの画像有無、変更）
・デザイン（文字のフォント・カラー、要素の配置）
・a/bテストツールの選定
・a/bテストを実施する期間（約1か月）

テストの実施

事前準備が整えば、専用ツールを使ってa/bテストを実施しましょう。a/bテストには、「期間を変えて2つのパターンのデザインを表示する場合」と「同じ期間にユーザーを分けて別々のデザインを表示する場合」の2つの方法があります。精度が高い方法は、同じ期間に別々のデザインを表示する後者のa/bテストです。具体的には、同一URLで同じ期間に2パターン（パターンAとパターンB）のWeb サイトを表示。例えば、100人のアクセスがあった場合、50人にはパターンAを、残りの50人にはパターンBを表示します。

テスト結果の検証

1か月ほどのa/bテストを終えたら、2パターンのうち、どちらの数値が良かったかを検証しましょう。「勝ちパターン」と「負けパターン」を知り、仮説が正しかったかを分析します。仮説が間違っていた場合は、また別の仮説を立てて、検証を続けます。a/bテストでは、「仮説→検証のサイクル」を実施して、PDCAを回すことが重要です。

a/bテストのメリット・デメリット

メリット

・コストがかからない
低コストで改善できるのがa/bテストのメリットです。Webサイトをリニューアルしようと思えば多額のコストがかかりますが、a/bテストを実施すれば、制作費用を抑えた一部改修ができます。大規模に修正するよりも、a/bテストで小さな改善をした方がコンバージョン率を高められる可能性があります。

・実施が簡単
プログラミングの専門知識がなくても、a/bテストの専用ツールがあれば、実施は簡単です。Google社「オプティマイズ」やAdobe社「Adobe Target」など、基本機能が無料のa/bテストが各社から提供されています。

・結果がわかりやすい
a/bテストを実施すれば、仮説の土台となる数値データが蓄積できます。形に見えにくいものを数値化して、わかりやすく捉えられるのがa/bテストのメリットです。感性に左右されがちなデザインですが、客観的な数値を根拠として改善ができれば、より正解に近づけるでしょう。

デメリット

・仮説を明確にしないと求めるデータが得られない
仮説が明確でなければ、a/bテストが無駄に終わる可能性があります。曖昧な憶測でa/bテストを実施しても、意味のあるデータは得られません。

・確かなデータを得るのに時間がかかる場合がある
ある程度の母数が必要なa/bテストは、確かなデータを得るまでに一定のテスト期間が求められます。アクセス数の少ないWebサイトはコンバージョンが得られないため、結果が出るまでに多くの時間がかかることもあるでしょう。

効果的なa/bテストを実施するためのポイント

テストを実施する目的を明確に

a/bテストの効果を発揮するには、「何のためにテストをするのか？」という目的を決めることです。「ページの滞在時間を長くしたい」「ページの離脱率を下げたい」など、目的によって着眼点が変わってきます。

テストを実施する時期・タイミングに注意する

a/bテストはイベント時期によって影響を受ける可能性があります。クリスマスやボーナス時期などの外的要因によってコンバージョン率に差が出てしまうため、そういった期間ではa/bテストの実施が正確に行えないかもしれません。

仮説は具体的に持つ

a/bテストの仮説を考えるには、ユーザー心理を重要視しましょう。憶測に基づくと、効果的なa/bテストが行なえません。「このデザインであれば、ユーザーはこう感じて、こう行動するはず」というように、ユーザー心理を踏まえましょう。

テストを行う対象や箇所はひとつに絞る

比較検証をするa/bテストですが、変更を加えるのは1箇所だけにしてください。例えばWebサイト（パターンAとパターンB）において、バナーのデザイン・キャッチコピーの文言・ボタンの色など、いくつもの箇所を変更すると、何が原因で効果があったかわからなくなります。
テストを実施する目的の例「ページの滞在時間を長くしたい」の場合は、テキストでの説明から図表やグラフメインの表現に変更するなどして顧客の理解を深め、より読み進めやすくする工夫をする、「ページの離脱率を下げたい」の場合は対象ページのコンテンツをリライトして短時間で知りたい情報が得られるようにするなどが考えられます。

a/bテスト4つの具体例

1.コピーの訴求内容

・ポイント
Webサイトのコピーには、わかりやすい文言を記載しましょう。文言の変更だけで、クリック率が変わることもあります。

・テストの実施例
転職サイトのコピーが「転職エージェントが味方（パターンA）」だったとします。パターンBとして「夜間・土日に相談可能な転職エージェントが味方」に切り口を変え、a/bテストを実施。「夜間・土日」という付加価値となる情報追加で、コンバージョン率が高まるかを検証します。

2.メインビジュアルの変更

・ポイント
Webサイトの顔となる「メインビジュアル」。インパクトがあり、「何を提供しているサイトなのか？」が一目瞭然でわかるビジュアルを使用しましょう。

・テストの実施例
ECサイトのメインビジュアルが「商品のアップ写真（パターンA）」だったとします。違うパターンとして「商品を使っている人物写真（パターンB）」に変更すれば、a/bテストによって「勝ちパターン」のビジュアルを明確にできます。

3.問い合わせなどのフォーム画面の変更

・ポイント
フォーム画面が適切でないと、ユーザーを逃がしてしまいます。離脱が多い場合は、ユーザーが行動を起こすための必要要素を検証しましょう。

・テストの実施例
フォーマット画面が「問い合わせ（パターンA）」だったとします。複数パターンとして、「相談予約（パターンB）」「まずは相談する（パターンC）」「プロに連絡（パターンD）」など、さまざまな切り口でa/bテストを実施し、どれが最も成果が出たかを導きます。

4. アクションボタンの文言の変更

・ポイント
Webサイトのアクションボタンは、ユーザーの行動を誘導する目的で設置されています。導入動線に近いボタン周りは、見た目にインパクトを持たせた方が良いでしょう。

・テストの実施例
アクションボタンが、地味なグレー色の「今すぐチェック（パターンA）」だったとします。パターンBとして、アクションボタンを赤色に変え、他のボタンよりも大きくしたものに変更。さらに文言を「1分でチェック」に変えてa/bテストを実施し、どちらの効果があったかを検証します。