ABテストとは、Webページの要素を2パターン用意し、ユーザーをランダムに振り分けて成果を比較する改善手法です。有料ツールを使わなくても、JavaScriptとGA4だけで実装できます。
ただし、ABテストはどのサイトでも有効なわけではありません。アクセス数が少なすぎると統計的に意味のある結果が出ず、時間の無駄になります。この記事では、ABテストを始めるべきアクセス数の判断基準と、コードで実装する具体的な方法を解説します。
ABテストを始めるべき判断基準
ABテストで統計的に有意な結果を得るには、一定のサンプル数（アクセス数）が必要です。VWOのサンプルサイズ計算ツールによると、信頼度95%・検出力80%でCVRの変化を検出するには、バリアントあたり数千〜数万のセッションが求められます。
月間PV別の判断目安
| 月間PV | ABテストの適性 | テスト期間の目安 |
|---|---|---|
| 1,000PV未満 | 時期尚早。改善施策を直接実施する方が効率的 | — |
| 1,000〜5,000PV | 大きな変更（ファーストビュー全体の差し替え等）のみ有効 | 4〜8週間 |
| 5,000〜10,000PV | CTAボタンやフォーム改善など中規模テストが可能 | 2〜4週間 |
| 10,000PV以上 | 細かい文言・色の変更も検証可能 | 1〜2週間 |
この目安は、現在のCVR（コンバージョン率）が1〜5%の場合の数値です。CVRが高いページほど少ないPVでもテスト可能ですが、CVRが0.5%未満のページでは月間10,000PV以上あっても検証に時間がかかります。
テストすべきか判断するチェックリスト
- 対象ページの月間PVが1,000以上あるか
- 現在のCVR（問い合わせ・購入・登録など）を計測できているか
- テストしたい仮説が明確か（「なんとなく変えてみる」はNG）
- 最低2週間はテストを継続できるか（途中で変更しない）
上記すべてに該当する場合、ABテストを始める準備ができています。1つでも該当しない場合は、先にアクセス解析の整備や集客施策を優先しましょう。
ABテストが効果的な4つのパターン
すべての要素をテストする必要はありません。以下の4パターンは、少ない工数で大きな改善が見込める優先度の高いテスト対象です。
1. CTAボタンの文言と配置
CTAボタンはABテストで最も効果が出やすい要素です。HubSpotの調査（2023年）では、CTAの文言変更だけでCVRが20〜30%改善した事例が報告されています。テストすべきポイントは以下の通りです。
- 文言: 「お問い合わせ」vs「無料で相談する」
- 色: ページの補色を使った目立つ色 vs ブランドカラー
- 配置: ファーストビュー内 vs コンテンツ読了後
2. ファーストビューの構成
ファーストビュー（スクロールせずに見える領域）はユーザーの直帰率に直結します。Google の調査によると、ユーザーの53%が読み込みに3秒以上かかるページを離脱します。以下の要素をテストすることで、ページの第一印象を最適化できます。
- キャッチコピー: 機能訴求 vs ベネフィット訴求
- メインビジュアル: 写真 vs イラスト vs 動画
- 社会的証明: 導入実績・レビューの有無
3. フォームのフィールド数
Formstackの調査（2023年）によると、フォームのフィールド数を削減するとCVRが平均25%向上します。ただし、リードの質とのトレードオフがあるため、ABテストで最適なバランスを見つけることが重要です。
- 最小構成（名前+メール）vs 詳細構成（名前+メール+電話+会社名）
- ステップフォーム（複数ページ）vs 単一ページフォーム
- 必須項目の数: 3項目 vs 5項目
4. 料金ページのレイアウト
料金ページは購入・契約の直前にユーザーが訪れるページです。Chargebeeの分析によると、料金ページの改善はサイト全体のCVR改善に対して最大のインパクトを持つとされています。
- プラン数: 2プラン vs 3プラン vs 4プラン
- 推奨プランの強調方法: バッジ vs 枠線 vs 背景色
- 年払い・月払いの切り替えUI: トグル vs タブ
ABテストの具体的な進め方（5ステップ）
ABテストは「とりあえず2パターン作って比較する」だけでは意味がありません。以下の5ステップで進めることで、再現性のある改善サイクルを回せます。
- 仮説を立てる: 「CTAの文言を"無料で相談する"に変更すると、CVRが向上するだろう。理由は現在の"お問い合わせ"では行動のハードルが高く感じられるため」のように、変更内容・期待する結果・理由を明文化する
- 計測環境を整える: GA4でコンバージョンイベントを設定し、テスト対象ページの現在のCVRを最低2週間計測してベースラインを把握する
- テストを実装する: JavaScriptでユーザーをランダムに振り分け、各バリアントの表示とイベント送信を実装する（次章で解説）
- 統計的有意差を判定する: 最低2週間以上データを収集し、サンプルサイズ計算ツールで有意差（信頼度95%以上）が出ているか確認する
- 勝ちパターンを本番反映する: 有意差が出たバリアントを正式実装し、テストコードを除去する。結果と学びをドキュメントに記録する
コードで実装するABテスト — ツールは不要
Google Optimize がサービス終了した現在、ABテストツールの多くは月額数万円〜数十万円の有料プランです。しかし、ABテストの本質は「ランダム振り分け」と「イベント計測」の2つだけ。JavaScriptとGA4があれば、ツールなしでABテストを実装できます。
JavaScriptによるランダム振り分け
以下のコードは、ユーザーをAパターン（オリジナル）とBパターン（バリアント）にランダム振り分けし、localStorage で割り当てを固定する実装例です。
function getABVariant(testName) {
const storageKey = `ab_test_${testName}`;
const stored = localStorage.getItem(storageKey);
if (stored === 'A' || stored === 'B') {
return stored;
}
const variant = Math.random() < 0.5 ? 'A' : 'B';
localStorage.setItem(storageKey, variant);
return variant;
}
// 使用例: CTAボタンのテスト
const variant = getABVariant('cta_text_2024');
const ctaButton = document.querySelector('.cta-button');
if (variant === 'B') {
ctaButton.textContent = '無料で相談する';
}
GA4でバリアント別にイベントを送信する
振り分けたバリアント情報をGA4のカスタムイベントとして送信し、どちらのパターンが成果を上げたか計測します。
// バリアント表示をGA4に送信
gtag('event', 'ab_test_impression', {
test_name: 'cta_text_2024',
variant: variant
});
// CTAクリック時にバリアント情報を付与
ctaButton.addEventListener('click', () => {
gtag('event', 'ab_test_conversion', {
test_name: 'cta_text_2024',
variant: variant
});
});
GA4の探索レポートで test_name と variant をディメンションに設定すれば、バリアント別のCVRを比較できます。
コード実装のメリット
| 比較項目 | 有料ツール | コード実装 |
|---|---|---|
| 月額コスト | 数万円〜数十万円 | 0円 |
| 導入の自由度 | ツールの仕様に依存 | 完全にカスタマイズ可能 |
| ページ速度への影響 | 外部スクリプト読み込みで遅延 | 軽量（数KB） |
| 統計判定 | ツール内で自動計算 | 自分で計算が必要 |
| 学習コスト | 低い（GUI操作） | JavaScript・GA4の知識が必要 |
コスト・速度・自由度の面ではコード実装が有利です。統計判定はオンラインの有意差計算ツール（ABテスト計算機）で補えるため、技術力があればツールは不要です。
ABテストでよくある3つの失敗パターン
1. サンプル数が不足したまま判断する
最も多い失敗は、十分なデータが集まる前にテストを終了することです。「3日間でBパターンのCVRが高いから採用」のような判断では、たまたまの偏りに過ぎない可能性があります。最低でも各バリアントに100件以上のコンバージョンが発生するまで待ちましょう。
2. 複数の要素を同時に変更する
ボタンの色・文言・配置を同時に変えると、どの変更が効果に寄与したのか分からなくなります。ABテストでは1回のテストで変更する要素を1つに絞るのが原則です。複数要素を同時にテストしたい場合は、多変量テスト（MVT）を検討してください。
3. 曜日や季節の影響を無視する
BtoBサイトでは平日と週末でCVRが大きく異なります。テスト期間が月曜〜水曜だけでは、週末のユーザー行動を反映できません。最低でも2週間（14日間）以上のテスト期間を確保し、曜日の偏りを排除しましょう。
まとめ
この記事は CodeQuest.work に掲載した記事を技術者向けに再構成したものです。
CROシリーズの他の記事: