A/Bテストのアイデア：JPG vs WebP バナー広告とランディングページのクリック率
公開日 June 12, 2024
仮説：高速画像、クリック増加
ページ速度はユーザーエクスペリエンスとコンバージョン率に影響を与える重要な要素です。読み込みが遅いページは直帰率を高めます。画像はランディングページで最も大きな要素であることが多いため、最適化が最優先課題です。
WebPのような現代的な画像フォーマットは、同等の画質で従来のJPEGよりはるかに小さいファイルサイズを実現します。これにより、読み込み時間が短縮されます。
私たちの仮説： 標準的なJPGメインバナーを高度に最適化されたWebPバージョンに置き換えることで、ページの読み込み時間を削減し、ユーザーエクスペリエンスを向上させ、主要な行動喚起（CTA）のクリック率（CTR）が測定可能なほど上昇すると考えています。
なぜこのテストが重要か
- パフォーマンス最適化の効果を検証： 画像最適化がユーザー行動とビジネス目標に直接的な影響を与えることを具体的なデータで証明します。
- コアウェブバイタルの改善： 読み込みが速いヒーロー画像は、Googleの重要な指標である最大コンテンツ描画（LCP）スコアを直接改善します。
- 小さな改善の積み重ね： クリック率のわずかな向上（例：0.5%）でも、規模が大きければ収益に大きな影響を与えます。
A/Bテストの設定方法
Google Optimize（まもなく廃止予定ですが、原則は他のツールにも適用可能）、VWO、OptimizelyなどのA/Bテストツールが必要です。
ステップ1：画像アセットの準備
- 対照群（JPG）の作成： 元のヒーローバナーを高品質JPGとして保存します。これが「バージョンA」です。
- 実験群（WebP）の作成： 同じオリジナルバナーを画像変換ツールでWebPに変換します。視覚的な明瞭さを保ちつつ、JPGよりもファイルサイズを30～40%小さくするよう品質設定を調整します。これが「バージョンB」です。
- 画像のホスティング： JPGとWebPの画像をアップロードし、両方にURLでアクセスできるようにします。
ステップ2：A/Bテストの構成
-
実験の設定： A/Bテストソフトウェアで、対象のランディングページ向けに新規のA/Bテストを作成します。
-
バリアントの定義：
- オリジナル（対照群）： JPGバナーが表示される現在のページです。変更は不要です。
- バリアント1（WebP）： エディタでヒーローバナーの
<img>タグのsrc属性を、新規のWebP画像URLに変更します。
上級者向けオプション： 最も堅牢なテストを行うには、
<picture>要素を使用してWebP画像を提供し、古いブラウザ向けにJPGをフォールバックとして設定します。これにより、テストが技術的な問題で失敗するリスクを減らせます。<!-- バリアント1のコード --> <picture> <source srcset="your-banner.webp" type="image/webp"> <img src="your-banner.jpg" alt="..."> </picture> -
主要目標の設定： 主要目標はメインの行動喚起ボタンのクリック数です。この特定のボタンまたはリンクのクリックを追跡するようテストを構成します。これが主要なコンバージョン指標（CTR）です。
-
副次目標の追加（オプションだが推奨）：
- ページ読み込み時間： 各バリアントの平均ページ読み込み時間またはLCPを追跡します。
- 直帰率： 読み込みが速いページで直帰するユーザーが減るか観察します。
ステップ3：実施と分析
- トラフィックの分散： 開始時は50/50で分散し、訪問者の半数をオリジナルページ、もう半数をバリアントページに誘導します。
- テストの実施： 統計的有意性（通常は信頼水準95%以上）に達するまで実験を継続します。トラフィック量により、数日～数週間かかります。
- 結果の分析：
- WebPバリアントでクリック率が統計的に有意に向上したか？
- 実験群のページ読み込み時間は短縮されたか？
- 直帰率は減少したか？
結果の解釈
- 明確な成功： WebPバリアントがクリック率の有意な向上と読み込み時間の短縮を示した場合。アクション： WebPをサイト全体のヒーロー画像のデフォルトフォーマットとして全面的に導入します。
- 有意差なし： 読み込みが速くなってもクリック率に変化がない場合。分析： 特定のユーザー層やページでは、読み込み時間の差が行動に影響を与えない可能性があります。しかし、パフォーマンスの利点（コアウェブバイタルの改善）自体がSEOやユーザーエクスペリエンスに価値があるため、WebPへの移行は依然として有効です。
- 失敗： WebPバリアントのパフォーマンスが悪化した場合。分析： 画像の過剰圧縮による画質低下やテスト設定の技術的不具合が原因の可能性があります（極めて稀です）。
このシンプルなA/Bテストは、ウェブパフォーマンス最適化の技術的な取り組みを、目に見えるビジネス成果に直接結びつける効果的な方法です。
Advertisement