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

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

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

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

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

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

レスポンシブ プレビュー パネルを切り替える

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

• [レスポンシブ] パネルでレスポンシブ プレビュー ボタン をクリックします。
• トップメニューから [表示] > [レスポンシブ] > [プレビュー] を選択します。

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

レスポンシブ プレビュー パネルのサイズを変更する

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

レスポンシブ プレビュー パネルを移動する

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

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

メディアルールを選択する

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

特定のプレビューのサイズを無効にする

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

ブラウザでプレビューする

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

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

単一サイズ

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

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

すべてのサイズ

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

• [サイズの表示] - 表示したい複数のサイズを選択します。[すべてのサイズ] を選択すると、リストされているすべてのサイズが選択されます。