レスポンシブドキュメントをプレビューする

レスポンシブ機能は、AMP HTML 広告ではサポートされていません。動画広告、アニメーション GIF、イメージ広告では、マルチサイズレイアウトを使用できます。

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

レスポンシブプレビューは、レスポンシブドキュメントでのみ使用でき、プレビュー可能なサイズをすべて表示します。

ドキュメントの作成中にプレビューする

レスポンシブプレビューパネルはステージの横に表示され、ドキュメントを変更すると自動的に更新されます。このパネルのプレビューには、現在のページとタイムラインの位置も反映され、ページの切り替えやアニメーションのプレビューとスクラブが行えます。

イベントの動作を確認するには、代わりにブラウザでドキュメントをプレビューします。

レスポンシブプレビューパネルを開閉するには、次のいずれかの方法を使用します。

開いたパネルは、右上の [X] をクリックして閉じることができます。

レスポンシブプレビューパネルの幅や高さを変更するには、ステージに最も近いパネルの端をドラッグします。

レスポンシブプレビューパネルは、ステージの上下左右いずれにも移動できます。

パネルを配置する新しい位置に黄色のバーが表示されるまで、パネルの上部にあるハンドルをドラッグします。

レスポンシブプレビューパネルでプレビューをクリックし、[レスポンシブ] パネルでサイズを選択します。

レスポンシブプレビューパネルで特定のプレビューにカーソルを合わせると、プレビューの右上にグレーの [X] が表示されます。[X] をクリックすると、プレビューでそのサイズを無効にできます。

Google Web Designer ウィンドウの右上にある [プレビュー] ボタンをクリックすると、ブラウザでプレビューが開きます。

ブラウザのレスポンシブプレビューでは、さまざまなモードとサイズを選択できます。サイズのリストには、広告環境の一般的なサイズに加えて、有効にしたカスタムの配信サイズが表示されます。

ドキュメントを 1 つのサイズのみでプレビューするには、このモードを選択します。

[サイズの表示] - 表示したいサイズを選択します。
[カスタムサイズの入力] - [単一サイズ] > [カスタム] を選択すると、このフィールドを編集して新しいサイズを設定できます。そのためには、プレビューのサイズ変更ハンドルをドラッグするか、プレビュー領域の上部または左側に表示される灰色のバーをクリックします。

ドキュメントを複数のサイズでプレビューするには、このモードを選択します。

改善できる点がありましたらお聞かせください。