「ABテストの事例を取り入れれば、サイトを改善できるだろう」と考える担当者は少なくはないでしょう。

Webサイトごとに課題が異なるように、ABテストも目的にあわせた種類を選ぶことで有益な検証結果を得ることが可能です。

この記事では、ABテストの成功事例をテストの種類別に紹介します。ABテストの種類も解説していますので、より良い効果を得るためにもぜひお役立てください。

ABテストとは

Webサイトの改善にあたって、AとBの2パターンを比較してどちらがより成果を出すのか検証するテストを「ABテスト」と呼びます。デザイン以外にプログラムなどの比較検証に多く用いられているWebマーケティングの手法のひとつです。

テスト期間をずらして実施する方法を「逐次テスト」、同じ期間にテストを行う方法を「並行テスト」と呼びます。

ABテストを実施するメリット

ABテストはコスト面やWebサイト改善の効率化など以下の3つのメリットがあります。

1. コストを抑えて効率性を高められる
2. Webサイトの部分的な改善が可能
3. 改善の方向性を明確に定められる

Webサイトの改善と比べて、ABテストでは大規模なデザイン改修は不要です。ボタンの色や形など部分的な改善が可能なため、時間や手間などコストをかけずに効率的な比較検証ができます。小さな要素で検証しつつ、方向性を確認しながら進めることが可能です。

そもそもABテストとはどのようなテストなのか知りたい方は、下記の記事でくわしく解説しています。ぜひあわせてご覧ください。

関連記事：ABテストとは？ サイト改善に導く方法とおすすめツールを解説！

ABテストの種類3つ

ABテストには「多変量テスト」「複数ページテスト」「リダイレクトテスト」の3つの種類があり、それぞれ比較する要素の数や、組み合わせ方などやり方が異なります。かんたんに解説しましょう。

1.多変量テスト（MVT）

多変量テスト（Multivariated Test：MVT）は、複数の異なる要素を切り替えたパターンを比較するテストです。同じページ内で多くのパターンを比較検証できることから、2つ以上のパターンを使用するテストは「A/B/nテスト」と呼ばれることもあります。どの要素を組み合わせたら良いのか、判断がむずかしいときにおすすめの方法です。

ただし、効果的なテストを実施するには、パターンごとの十分なデータを取得するためにも一定のアクセス数が必要です。アクセス数が少ないWebサイトは、まず一定のアクセス数を集めることからはじめてください。

2.複数ページテスト（ファネルテスト）

複数ページテストは、文字どおり複数のページにわたる変更箇所を比較するテストです。サイト導線ごとのテストに向いており、同じページのAとBのパターンにくわえて、リンク先も対象としたパターンを比較します。

ユーザーがクリックしてほしい個所をスルーする、CTAにたどり着くまでに時間を要しているなど改善点を洗い出してから、ユーザーがページ内でスムーズに動けるようにサイトデザインを改善します。

複数ページテストはGoogleオプティマイズの「マルチページエクスペリエンス」という機能で実施できます。ほかのABテストツールでは「マルチページテスト」とも呼ばれています。

3.スプリットトテスト

通常のABテストでは同一URL内で実施しますが、「スプリットテスト」では異なるURL（パス）で識別した個別Webページでテストを実施します。ABテストツールの機能を用いるため、Webサイトのファイル構造を変更することはありません。

オリジナルページの要素や組み合わせ方を変えて実施するため、画像などが置かれているサーバーもそれぞれ異なります。かんたんにいえば、オリジナルページと酷似した別サイトを用意するイメージです。ページごとのデータが収集しやすく、計測・分析がしやすいメリットがあります。

テストページが採用となった場合、デザインとコーディングはすでに完了しているため、ソースコードを書き換える必要はなく、そのままオリジナルページに実装が可能です。

テスト実施までに準備がかかりますが、結果がでればすぐに反映できるため、スピーディーなWebサイトの改善が期待できます。デザインを大きく変えるようなWebサイトの大規模改修、LPOなどにおすすめです。

ABテストの活用シーン3つ

ABテストは、異なるバージョンの変数（Webページ、ページ要素など）を異なるセグメントの訪問者に同時に表示し、どのバージョンが最大の影響を与えるかを決定する無作為な実験プロセスです。

そのためABテストは、マーケティング、製品開発、UI/UXデザインなど、多岐にわたる分野で活用されています。

以下では、ABテストの主な活用シーンを解説します。

1.Webサイトを改善するとき

ABテストを使用して、Webサイトのさまざまな要素の効果を測定し、最も効果的なデザインを決定できます。

例えば、ランディングページのヘッダー画像をA/Bの2つのバージョンでテストし、どちらがより多くのクリックやコンバージョンを生むかを分析します。

また、フォームの長さやボタンの色など、ユーザーの行動に影響を与える可能性のある要素をテストすることもできます。

2.マーケティング施策を最適化するとき

ABテストは、メールキャンペーンの件名や広告のコピー、プロモーションのオファーなど、マーケティング施策のさまざまな要素に対しても活用できます。

マーケティング施策の最適化では、異なるメッセージング戦略をテストして、最も反応が良いものを見つけ出し、ROIを最大化します。

3.製品開発やUI/UXデザインを策定するとき

製品開発やUI/UXデザインを策定する際は、新しい機能やデザインのプロトタイプをABテストによって評価し、ユーザーにとって最も魅力的で使いやすいオプションを選択します。

これにより、製品の市場投入前にユーザーのニーズに合わせた調整を行うことができ、成功率を高めることが可能です。

このように、ABテストはデータに基づいた意思決定を支援し、ビジネスの成果を向上させるための強力なツールです。適切な計画と実施により、Webサイトのパフォーマンス、マーケティングの効果、製品の品質を大幅に改善することが可能です。

ABテストの国内成功事例をテストの種類別で紹介

より良い検証をおこなうために、ABテストの成功事例を参考にするのも効果的です。ABテストの種類別に国内の成功事例を3つ紹介します。

【多変量テスト】auフィナンシャルサービス株式会社

auファイナンシャルサービス株式会社は、Web上で新たな顧客獲得に向けてLPを改善するためにABテストとあわせて多変量テストを実施しました。

ABテストではCVボタンの色と形、テキスト、メインビジュアルのテストを実施して勝ちパターンを把握。そのあとに、多変量テストでコンテンツの表示順やロゴの有無でパターンを作成して実施しました。この多変量テストの実施により、CVR119％も改善されています。

【複数ページテスト】ソニー株式会社

ソニー株式会社はWeb販売のプラットフォームの売上改善を目的に、キャンペーン用バナー広告のABテストと複数ページテストを実施してCVRを20％向上させています。

テストではオリジナルバナーと2つのパターンを用意して検証をおこないました。結果はキャンペーンに言及していないバナーが勝ちパターンとなりましたが、さらに地域やデバイスごとにセグメントし、ユーザーの行動データを分析して今後のターゲットまで定めています。

また、製品の一覧ページでは製品の説明文を簡潔にすればユーザーの意思決定が速くなるのではないかという仮説を立てて、複数ページテストを実施しました。結果、簡潔な説明に変更したページが成果を出しています。

【スプリットテスト】Sasuke Financial Lab株式会社

『Sasuke Financial Lab株式会社』は、オンライン保険代理店『保険ドーナツ』のサービスサイト開発において、スプリットテストを実施しました。

目標は、プロダクトのターゲットとなる女性に見たいと思ってもらえるようなデザインです。開発は株式会社GIGと連携し、初期段階からテストサイトを制作して進めました。

結果、これまでの保険サービスのイメージを変えるようなキュートなデザインのプラットフォームが完成しました。スマートフォンでも使いやすいUIデザインは、高く評価され専門誌にも掲載されています。

なお、オンライン保険代理店『保険のドーナツ』は、より良いサービスを提供するために2021年9月17日に『コのほけん！』へリブランディングされました。これにより現在は『保険のドーナツ』は閲覧できません。

ABテストのやり方｜6ステップ

ABテストを成功させるには、基本的な手順をふまえて実施することが大切です。ABテストのやり方についてかんたんに解説します。

1. ABテストのゴールを明確にする

ABテストは実施するタイミングで検証結果が変わるため、まずは目的となるゴールを明確に決めておくことが大切です。明確なゴールが決まっていれば、仮説も立てやすくなりますし、成果も評価しやすくなります。

＜ゴールの例＞

• 会員登録
• 購入
• 資料請求
• メルマガ購読
• 問い合わせ

2. ペルソナの設定で理想のユーザー像を明確にする

目的を明確にしたら、ペルソナを設定します。ペルソナとはターゲットよりもさらに深く掘り下げた人物像のことです。年齢や性別以外に以下のように詳細な項目を設定します。

＜ペルソナの項目例＞

• 年齢
• 性別
• 居住地／出身地
• 興味や関心
• ライフスタイル
• 勤務先
• 職種
• 家族構成

ペルソナはユーザーのニーズを深く理解できるため、施策ごとの方向性を定めやすくなるメリットがあります。また、顧客視点で改善点を考えるのにも役立つため、ABテストの効率性を高めることが可能です。

ペルソナの設定方法については、以下の記事で解説しています。ぜひ参考になさってください。

関連記事：UXデザインに欠かせないペルソナ設計の方法は？ 注意点や活用方法も解説

3. どこを検証するのか？検証ポイントを決める

目的を明確に決めたら、検証をおこなうポイントを明確にします。たとえばLPからの売上を伸ばしたい場合、以下の項目をチェックすることで検証するポイントがわかります。

• LPのアクセス数
• 購入フォームまでたどり着いた人数
• 購入者数

上記3つの段階で離脱率が大きいところが検証ポイントです。フォームまでたどり着く前の離脱率が大きければ、LPからフォームへのサイト導線を考えなくてはいけません。

4. 仮説を立ててプロトタイプを作成する

離脱率を下げるためには、離脱理由となる仮設を立てる必要があります。適切な仮説が立てられなければ、離脱した要因がわからず、改善につなげられないためです。

「とにかく複数のページを作って良いものを選んでみよう！」とあやふやなままABテストを実行しても、離脱率を下げられることもあります。しかし、次に同じようなことが起きても、理由を把握していなければ施策に生かせません。

立てた仮説をもとにプロトタイプを作成します。プロトタイプとは検証に使用する試作品です。プロトタイプの作成方法は、以下の記事で解説していますので、参考になさってください。

関連記事：Webデザインのプロトタイプとは？ 作成方法やおすすめツールを紹介

5. ABテストを実行する

プロトタイプを用意したら、ユーザーをランダムに分けてABテストを実行します。AとBのどちらのアクセス数が多かったか、何人が購入フォームまでたどり着いたのかをチェックします。

ABテスト実施後はアクセス解析ツールやヒートマップツールなどを利用して、ユーザーがページ内でどのように行動したのか分析をします。

6. テスト結果を分析し改善に活かす

テスト結果が悪かったら、悪かった要因を分析します。良い結果を得られたら、オリジナルパターンに反映させてください。さらにより良いパターンはないか、Webサイトから得られるデータを分析し、改善点を探すことが大切です。

PDCAサイクルの回し方

Webマーケティング施策において、目標を達成するためにおこなうプロセスを「PDCAサイクル」と呼びます。ABテストのPDCAサイクルを効果的にまわすためのプロセスは以下のとおりです。

ABテストは1回だけやれば終わりではありません。時代とともに求められるデザインやユーザーのニーズは変化します。Webサイトで成果を出し続けるには、PDCAのサイクルを回し続けることが大切です。

ABテストで正しい検証結果を得るための5つのポイント

ABテストのやり方を間違えると、思うような結果を得ることができません。効率よくPDCAを回すために、押さえておきたいポイントを解説します。

1. ABテストは同じ時期に検証する

ABテストではAとBの2つ以上のパターンを使用します。Aは午前、Bは午後など条件が異なると、アクセスするユーザーの属性などが変化するため、検証結果が変わってしまいます。正しい検証結果を得るためにも、同じ時期に検証することがポイントです。

たとえば月末にかけて申込者が増えるサービスの場合、月末に実施したテストが勝つことが想定されます。フェアなテストを実施するためにも、条件はそろえてください。

2. 2週間～1か月の検証期間を設定する

ABテストは気軽に取り組みやすいため、ボタンやテキストなど要素を絞って実施することでPDCAのサイクルを素早く回し続けることが可能です。ただし、検証期間が短かすぎると検証結果がズレたものになります。

正しい検証結果を得るには、2週間〜1か月の期間を設けることがポイントです。とくに変更箇所の多い多変量テストは長期間実施することで、曜日や時間で変動があっても平均的な結果を出せます。

3. 一定のアクセス数を確保する

Webサイトは規模や運営会社が扱うプロダクトによって母数が異なるのが特徴です。BtoB向けのWebサイトはBtoC向けに比べて、扱うプロダクトが法人向けと限定的なため、母数に制限があります。

ABテストで有益な結果を得るには、Web広告やSNS広告を出して一定のアクセス数を確保することが大切です。どうしても増やせないときや開設したばかりのWebサイトでABテストを実施するときは、検証に必要な十分なデータが集まるまで検証期間を延ばす方法もあります。

4. テストの要素は1つにしぼる

ABテストではどこを変更したら成果が出たのかを知ることが大切です。Webサイト全体のカラーやファーストビューの変更は、見た目の変化が大きいため明確にあげることができます。

しかし、ひとつのパターンでCTAボタンのカラーとコピーテキスト、デザインまで変更した場合、どの要素で効果が出たのか判断がむずかしくなります。複数の要素を変更するときは、複数ページテストや多変量テストを実施してください。

5. Googleアナリティクスなど分析ツールを活用する

ABテストの検証結果をもとに、より良いWebサイトへ改善するときはテスト結果の分析が大切です。ページの滞在時間、アクセスしてきた地域、経路など定量的なデータの収集・分析が行える分析ツールの活用がおすすめです。

Webサイトの滞在時間を知りたいなら「Googleアナリティクス」、部分改修によるクリック率の検証は「ヒートマップ」が便利です。

UI/UXデザイナーをお探しならクロスデザイナーへ！

ABテストの成功事例を自社Webサイトに取り入れようと思っても、すぐにうまくいくとは限りません。プロダクトが同じでもWebサイトを訪れるユーザーは、さまざまな要素が異なります。そのため、ABテストで検証するときは、定量データをもとに自社なりの仮説を立てたうえでテストを行うことが大切です。

プロトタイプの作成など一部の業務を委託すれば、綿密な分析を行えます。もし、社内のリソースが不足しているなら、スキルの高いデザイナー人材を採用できるエージェントサービス「クロスデザイナー」がおすすめです。

フリーランスデザイナーに特化したエージェントサービスのクロスデザイナーは、登録時に厳正な審査基準を設けており、通過率はわずか5％です。採用難易度の高い即戦力デザイナーの中から、自社にマッチしたデザイナーを最短即日で提案できます。

また双方の合意があれば、アサイン後に正社員への契約形態の変更も可能。

WebデザイナーやUI／UXデザイナー、アプリデザイナーなど多数在籍しているため、あらゆるクリエイティブにも対応できます。

下記からサービス資料と、デザイナー採用についての簡単なまとめ資料を無料でダウンロードできます。ぜひ貴社のデザイナー採用にお役立てください。