広告や HTML ページのプレビュー

作成中の広告や HTML ページをお使いのブラウザでプレビューすることで、パブリッシュしたときにどのように表示されるのか、どのように動作するのかをイベントも含めて確認できます。プレビューは、お使いのパソコンで表示する機能です。ファイルを他のユーザーと共有したい場合は、プレビューではなくパブリッシュしてください。

プレビューするには、ウィンドウの右上にある [プレビュー] ボタン をクリックします。

ソースファイルに含まれている HTML ファイルを直接開いても、お使いのブラウザでドキュメントをプレビューすることはできません。代わりに、Google Web Designer のプレビュー機能を使用してください。

ブラウザの選択

Google Web Designer では、インストールされているブラウザが自動的に検出されます。プレビューに使用するブラウザを選択するには、[プレビュー] ボタンの下矢印をクリックして、リストからブラウザを選択します。ここで選択したブラウザが、その後のプレビューで使用するデフォルトのブラウザになります。

レスポンシブ ビューポートの選択

レスポンシブ ドキュメントの場合は、[プレビュー] ボタンの下矢印をクリックすることで、使用可能なプレビュー サイズの範囲を選択できます。

  • [標準] - 広告環境における一般的なサイズ。
  • [詳細] - 広告環境におけるすべてのサイズ。

プレビュー モード

Google Web Designer には、ドキュメントの種類に応じてさまざまなプレビュー モードが用意されています。プレビュー ページの上部にあるコントロールからプレビュー モードのオプションを選択できます。

ドキュメントに使用できるプレビュー モードのオプションを確認するには、下記の表をご覧ください。単純なバナー広告にはプレビュー モードのオプションはありません。

ドキュメントにパララックス コンポーネントが含まれている場合、プレビュー ページでは、コンポーネントを上下にスクロールすることができるコンテンツを使って、モバイル ウェブページでの表示をエミュレートできます。

  • 端末 - モバイル端末または [カスタム] を選択します。
  • 端末を回転 - 縦向きと横向きを切り替えます。
  • ビューポートのサイズ - 端末で [カスタム] を選択している場合、この欄を編集するか、プレビューのサイズ変更ハンドルをドラッグすることで、新しいサイズを設定できます。

パララックス広告では、常にパララックス プレビュー モードが使用されます。

ドキュメントの種類 プレビュー モードのオプション

エキスパンド、インタースティシャル、HTML ページ

ドキュメントのプレビューをインタラクティブに操作して、動作を確認できます。

  • [プレビュー モード] - [デスクトップ] または [モバイル] を選択します。
  • [モバイル] を選択した場合は、次の追加オプションを選択できます。
    • 端末 - モバイル端末または [カスタム] を選択します。
    • 端末を回転 - 縦向きと横向きを切り替えます。
    • ビューポートのサイズ - 端末で [カスタム] を選択している場合、この欄を編集するか、プレビューのサイズ変更ハンドルをドラッグすることで、新しいサイズを設定できます。

レスポンシブ

プレビューでは、レスポンシブ ドキュメントがさまざまなサイズでどのように表示されるかを一目で確認できます。

  • [プレビュー モード] - [単一サイズ]、または同時に複数のサイズを表示する場合は [すべてのサイズ] を選択します。サイズのリストは、レスポンシブ ビューポートの選択によって異なります。
  • [カスタムサイズの入力] - [単一サイズ] > [カスタム] を選択した場合は、この欄を編集するか、プレビューのサイズ変更ハンドルをドラッグすることで、新しいサイズを設定できます。
    • ブレークポイントがある場合は、プレビュー領域の上部または左側にある範囲をクリックすることで、ブレークポイントに合わせてプレビューのサイズを変更できます。

ダイナミック

さまざまなサンプルデータのセットを使用してダイナミック広告をプレビューできます。

  • [プレビュー モード] - [単一サイズ]、またはさまざまなサンプルデータを使用して複数のバージョンを表示する場合は [すべてのサンプルデータ] を選択します。
  • [サンプルデータ] - プレビューするサンプルデータ セットを選択します。

ドキュメントの種類が複数ある場合

ドキュメントの種類によっては、他の種類のオプションは表示されません。

  • エキスパンド広告とインタースティシャル広告をプレビューする場合、その広告がレスポンシブまたはダイナミックであっても、同時に表示できるのは 1 つのバージョンのみです。
  • ドキュメントにレスポンシブとダイナミックの両方がある場合(エキスパンド広告またはインタースティシャル広告ではない)、同時にプレビューできるのは複数サイズまたは複数フィードのいずれかのみです。

プレビューの再読み込み

広告または HTML ページのプレビューを初期状態にリセットするには、プレビュー コントロール バーの右側にある再読み込みボタン Refresh icon をクリックします。

レスポンシブ広告またはダイナミック広告の複数のバージョンをプレビューしている場合は、各バージョンの下にある再読み込みボタン Refresh icon をクリックすることで、そのバージョンのみを再起動できます。

変更内容のプレビュー

ブラウザでプレビューを開いた後でドキュメントまたはサンプルデータに対して変更を行った場合、ページを更新してもそのプレビューに変更内容は反映されません。変更内容を確認するには、新たにプレビューを開きます。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。