ABテストのやり方｜始める判断基準とコード実装方法

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 = '無料で相談する';
}

参考: Web Storage API – MDN Web Docs

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 イベントを送信する – Google Developers

GA4の探索レポートで test_name と variant をディメンションに設定すれば、バリアント別のCVRを比較できます。

コード実装のメリット

比較項目	有料ツール	コード実装
月額コスト	数万円〜数十万円	0円
導入の自由度	ツールの仕様に依存	完全にカスタマイズ可能
ページ速度への影響	外部スクリプト読み込みで遅延	軽量（数KB）
統計判定	ツール内で自動計算	自分で計算が必要
学習コスト	低い（GUI操作）	JavaScript・GA4の知識が必要