> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/ab-testing/eowyre21ym.md).

# バリエーションをプレビューで確認する

### 概要 <a href="#id-1" id="id-1"></a>

A/Bテストのバリエーションを公開する前に、加えたすべての変更が保持されていることを確認することができます。

バリエーションをプレビューするには、下記3つの方法があります。

* [**ライブプレビューから確認**](#id-2)
* [**スクリーンショットのプレビューから確認**](#id-3)
* [**ビジュアルエディターから確認**](#id-4)
* [**モバイル（実機）で確認する方法**](#id-5)

{% hint style="info" %}
キャンペーンがドラフト状態の場合、バリエーションをプレビューすることはできません。
{% endhint %}

### ライブプレビューから確認 <a href="#id-2" id="id-2"></a>

1. キャンペーン作成画面&#x306E;**\[Review] > \[ライブプレビュー]**&#x3092;開きます。\
   \
   「プレビューURL」フィールドには、デフォルトのキャンペーン URL が自動入力されます。別のページのプレビューをロードする場合は、このURLを更新してください。

<figure><img src="/files/jJ3T93xEvZY9pvEt1MPe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
キャンペーンが複数のページで実行されている場合は、それらを個別に指定してプレビューしてください。
{% endhint %}

2. キャンペーンレベルのセグメンテーション条件を適用せずにバリエーションをプレビューするには、**「プレビューでキャンペーンのターゲティング条件を無視する（Ignore campaign targeting conditions in previews）」**&#x30AA;プションをチェックします。\
   \
   \[ターゲティング条件の表示（View targeting conditions）]セクションを展開すると、設定しているセグメンテーション条件を表示できます。

<figure><img src="/files/tVEyLJTOd5GsSteLuEBh" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
・デフォルトでは、このオプションは有効になっています。ターゲティング条件に従ったバリエーションをプレビューしたい場合は、チェックを外して無効にします。

・このオプション&#x306F;**、**&#x3042;らかじめ \[対象者とトラフィック]ページで事前セグメンテーション条件を適用した場合にのみ表示されます。
{% endhint %}

3. 完了したら、**「プレビューを開く」**&#x3092;クリックします。新しいタブでプレビューが開き、選択したバリエーションが表示されます。\
   \
   プレビューウィンドウの右下にプレビューモードデバッガーが表示され、キャンペーンに関する情報が表示されます。プレビューモードデバッガーには次のオプションが付属しています。

<figure><img src="/files/rMgUO3ruchXwYC7kwJKI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/q7vCrEayHekr2c2eOdTr" alt=""><figcaption></figcaption></figure>

* **Logs（ログ）**- 選択したバリエーションまたはコントロールに関する次の詳細を表示します。
  * 指標を達成したユニーク訪問者の数
  * 表示されたページがテストページのパターンと一致する場合
  * 変更された要素が非表示の場合
  * 訪問者のターゲティング条件が一致する場合
  * トリガーされるメトリックの名前
* **Campaign Info（キャンペーン情報）** - キャンペーンに関する次の情報が表示されます。
  * キャンペーンタイプ
  * キャンペーンの実施状況
  * ヒートマップの有効化状況
  * キャンペーン全体のトラフィック割り当て
  * キャンペーンを実行するページを定義するために指定される URL パターン
  * キャンペーンにおけるクロスドメイントラッキングのアクティブ化のステータス

{% hint style="warning" %}
プレビューを終了する場合は、プレビューモードデバッガーの「×」をクリックすると、プレビューモードが解除されます。

解除しないと、次に同じページにアクセスしたときもプレビューモードが維持されますので、ご注意ください。
{% endhint %}

ライブプレビューを使って、目標が計測されるか確認することも可能です。

詳細は[「ライブプレビューで目標が計測されるか確認する」](/testing/ab-testing/k7stjs3nyc.md)をご覧ください。

### スクリーンショットのプレビューから確認 <a href="#id-3" id="id-3"></a>

**\[Review] > \[Variation Screenshots]**&#x30BB;クションを使用すると 、加えた変更に基づいてバリエーションのスクリーンショットを表示できます。ここでは、すべてのバリエーションのスクリーンショットがサムネイルとして表示されます。

<div align="left"><figure><img src="/files/lcYlBRN3WxiCCZv2Ea6I" alt=""><figcaption></figcaption></figure></div>

表示されるスクリーンショットでは、特定のブラウザでバリエーションのスクリーンショットを表示するオプションがあります。

これを行うには、右上のドロップダウンからバリエーションとブラウザを選択し、\[スクリーンショットを表示]をクリックします。

<div align="left"><figure><img src="/files/fR8aVX5QPenwESBeNXNe" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
スクリーンショットを初めて表示する場合は、サーバーの負荷によっては、スクリーンショットの生成に数秒かかる場合があります。
{% endhint %}

### **ビジュアルエディターから確認** <a href="#id-4" id="id-4"></a>

ビジュアル エディターで変更を行った後すぐにプレビューを確認する方法です。

\[Configuration] > \[バリエーション]で、プレビューするバリエーションに対応す&#x308B;**「編集」**&#x30DC;タンをクリックします。これにより、ビジュアルエディターが表示されます。

<div align="left"><figure><img src="/files/gbEeOs8Or0vwVhlhHunE" alt=""><figcaption></figcaption></figure></div>

ビジュアルエディター内の \[バリエーション] パネルで、プレビューするバリエーションに対応する垂直省略記号をクリックし、\[**プレビュー]**&#x30AA;プションを選択します。

<div align="left"><figure><img src="/files/4CfXmNBH4nDWlEfWsQz9" alt=""><figcaption></figcaption></figure></div>

バリエーションに加えられた未保存の変更がプレビューが表示されるとすぐに自動保存されることを通知する警告ポップアップが表示されます。続行しても問題ない場合は、警告ポップアップ&#x306E;**\[プレビュー]**&#x30DC;タンをクリックします。バリエーションのプレビューが新しいタブで開きます。

{% hint style="warning" %}
プレビューを開くには、ポップアップを許可するようにブラウザを設定する必要があります。
{% endhint %}

{% hint style="info" %}

* バージョン (コントロールまたはバリエーション) ごとに開くことができるプレビュー タブは 1 つだけです。
* ブラウザータブのタイトルは、現在プレビューしているバリエーションのバージョン番号 (\[v1]、\[v2] など) を示します。こうすることで、ブラウザで複数のプレビュー タブを開いているときにバリエーションを識別できます。
* 特定のバリエーションのプレビュータブには、そのバリエーションのビジュアルエディターに保存されたさらなる変更が自動的に再ロードされます。
  {% endhint %}

### モバイル（実機）で確認する方法 <a href="#id-5" id="id-5"></a>

1. [「ライブプレビューから確認」](#id-2)手順3のように、右下にプレビューモードデバッガーが表示された状態で、プレビューリンクもしくはQRコードを活用しモバイルでプレビューを表示することができます。

<figure><img src="/files/txtGLDOlJBQHzTCzfQZv" alt=""><figcaption></figcaption></figure>

2. モバイル上で別のバリエーションに切り替えるには、クエリ パラメータ **`_vis_opt_preview_combination`** を次のように書き換えます。\
   \
   例えば、プレビュー URL が次の場合はコントロールを表示しています。\
   ■combination=1\
   [https://vwo.gaprise.jp/contact?test111&\_vis\_test\_id=250&\_vis\_opt\_random=0.17951604263851295&\_vis\_hash=748d5b03fee7352aa343f47579fe341c&\_**vis\_opt\_preview\_combination=1**](https://vwo.gaprise.jp/contact?test111&_vis_test_id=250&_vis_opt_random=0.17951604263851295&_vis_hash=748d5b03fee7352aa343f47579fe341c&_vis_opt_preview_combination=1)\
   \
   値を書き換えることでバリエーション1に切り替えることができます。\
   \
   ■combination=2\
   [https://vwo.gaprise.jp/contact?test111&\_vis\_test\_id=250&\_vis\_opt\_random=0.17951604263851295&\_vis\_hash=748d5b03fee7352aa343f47579fe341c&\_**vis\_opt\_preview\_combination=**](https://vwo.gaprise.jp/contact?test111&_vis_test_id=250&_vis_opt_random=0.17951604263851295&_vis_hash=748d5b03fee7352aa343f47579fe341c&_vis_opt_preview_combination=1)[**2**](https://vwo.gaprise.jp/contact?test111&_vis_test_id=250&_vis_opt_random=0.17951604263851295&_vis_hash=748d5b03fee7352aa343f47579fe341c&_vis_opt_preview_combination=2)\
   &#x20;      &#x20;

※本ページは[\[原文：Previewing Variation of Your A/B Test in VWO\]](https://help.vwo.com/hc/en-us/articles/360021310593-Previewing-Variation-of-Your-A-B-Test-in-VWO)を翻訳・加筆修正しています。