レスポンシブ機能は、AMP HTML 広告ではサポートされていません。動画広告、アニメーション GIF、イメージ広告では、マルチサイズ レイアウトを使用できます。
レスポンシブ デザインでは、さまざまな向きやサイズのビューポートにフレキシブルに適応するレイアウトを使用できるため、複数のレイアウトを作成する必要がありません。Google Web Designer には、レスポンシブ デザインでページを作成するためのさまざまなツールが用意されています。
ドキュメントには、レスポンシブ ページのディメンションが少なくとも必要です。また、オブジェクトのサイズや位置を割合で指定して、可変レイアウトを作成することもできます。ビューポートのサイズやサイズ範囲ごとに各要素をカスタマイズするには、メディアルールを使用します。
イメージ広告はレスポンシブにできませんが、マルチサイズ レイアウトでレスポンシブ ワークフローを使用して、1 つのドキュメントからさまざまなサイズをエクスポートできます。
レスポンシブ ページのディメンション
ドキュメント全体をレスポンシブにする
レスポンシブ ドキュメントのページの幅と高さは、画面の表示領域がすべて埋まるよう、100% に設定します。
-
既存のドキュメントの場合: [レスポンシブ] パネルで [レスポンシブ レイアウト] チェックボックスをオンにします。
-
新しく作成するファイルの場合: 新しいファイルのダイアログで、ディメンションを指定するときに [レスポンシブ レイアウト] チェックボックスをオンにします（すべてのファイル形式で利用できるわけではありません）。
ページのコンテンツをレスポンシブにするには、可変レイアウトとメディアルールを使用します。
可変レイアウト
割合に基づくサイズと位置
ページのディメンションだけでなく、要素のサイズや位置も、ピクセルの代わりに割合で指定できます。その場合、親コンテナが変化しても、親コンテナに対する要素のサイズと位置関係の割合は保持されます。
要素を配置する場合、位置揃えツールや均等割り付けツールの可変レイアウト オプションを使用すると、割合に基づく位置を簡単に設定できます。
メディアルール
向きやサイズごとに、属性と CSS スタイルをオーバーライドする
メディアルールを使用すると、ドキュメントでビューポートのサイズと向きを検出し、それに応じてさまざまなスタイルと属性を適用できます。たとえば、スマートフォンではコンテンツを 1 列で表示し、タブレットでは同じコンテンツを 2 列で表示するといったことができます。このような変更はオーバーライドと呼ばれ、指定したサイズまたはサイズ範囲に対して行われます。
[レスポンシブ] パネルでは、次のルールセットを切り替えることができます。
- デフォルト ルール: デフォルトのスタイルセットに変更を加える場合、またはすべてのビューポート サイズに適用される変更（アセット、コンポーネント、イベントの追加や削除など）を行う場合は、[ベース ドキュメントを編集する] を選択します。
- メディアルール: 特定のサイズまたはサイズ範囲を選択して、そのビューポート サイズのデフォルト スタイルと属性をオーバーライドします。
メディアルールを選択すると、そのサイズまたはサイズ範囲にのみ適用されるスタイルと属性を設定できます。たとえば、要素の位置、サイズ、ソース、鮮明度、アニメーションを調整できます。 Google Web Designer では、テキスト コンテンツ、テキストの適合に関する設定、コンポーネント プロパティをオーバーライドすることもできます。
詳しくは、メディアルールとオーバーライドの説明をご覧ください。
