レスポンシブ レイアウトの概要

メディアクエリを使用してレスポンシブ レイアウトの広告を作成する
レスポンシブ デザインでは、固定されたレイアウトではなく、柔軟性のあるレイアウトを使用します。つまり広告の場合、広告を 1 つ作成すれば、向きやサイズの変化に応じて要素のスタイルを変えることができ、似たような広告を複数作成する必要がなくなります。Google Web Designer では、標準的なレスポンシブ デザインの原則に沿って、CSS3 メディアクエリが使用されるので、さまざまなサイズの広告に対して異なるスタイルルールを適用できます。

レスポンシブ ドキュメントを作成する

新しいファイルを初めて作成するときには、ディメンションを選択する際に [レスポンシブ レイアウト] チェックボックスをオンにすることができます。その場合、ページの幅と高さが 100% に設定されるので、画面上の利用できるスペースをすべて占めることになります。また、既存のドキュメントについて [ビューポートに合わせる] チェックボックスをオンにした場合も、同様の効果が得られます。

ドキュメント内の要素をレスポンシブにするには、可変レイアウト(割合を指定した配置)を使用してブレークポイントを追加します。

ブレークポイント

ウェブ デベロッパーは、メディアクエリを使用して、ウェブページの幅が広がったときのページのレイアウトやスタイルを変更できます。たとえば、スマートフォンではコンテンツを 1 列で表示する一方で、タブレットでは表示できる幅が広いので同じコンテンツを 2 列で表示する、といったことができます。こうしたレイアウトの変更は、ブレークポイント(スタイルのルールの変わり目となるビューポートの幅)で行われます。

Google Web Designer では、ビューポートの幅と高さの両方の変化に対してブレークポイントを指定できるので、1 つの広告について、さまざまなサイズと向きに応じたスタイルを設定することができます。また、画面の向きごとにブレークポイントのセットを別々に指定して、縦向きと横向きで異なるバージョンを作成することもできます。

高さと幅のブレークポイントでグリッドが決まる

高さと幅の両方でブレークポイントを作成する際は、それぞれ異なるスタイルのセットで複数の四角形の領域を設定することになります。たとえば、縦と横に 1 つずつブレークポイントを使用する場合、それぞれ固有のメディアルール セットを持つスタイルを 4 つ作成することになります。

Google Web Designer では、幅と高さが異なる複数の領域が広告に含まれている場合、各領域が異なる色のバーとしてルーラー上に表示されるので、そうした領域を区別しやすくなっています。異なる領域が重なる四角形部分は、それぞれ固有のスタイルで表示されます。

レスポンシブ レイアウトではコンテンツを変えずにスタイルだけを変更可能

メディアクエリではスタイルを変更できますが、コンテンツの追加や削除はできません。たとえば、サイズの小さい広告に使用する画像があるとしましょう。ただ、特定のサイズを超える広告には別の大きな画像を使ったり、サイズの大きい広告には他の画像を追加したりしたい場合もあるかもしれません。広告がブレークポイントを超えたとき、メディアクエリでは、このようなアセットを追加することはできません。

こうした制約に対処するには、アセットを表示させる必要があるときまで非表示にしておきます。たとえば、大きいバージョンの広告だけで使用する画像を追加し、CSS でスタイルを visibility:hidden として指定すると、大きいバージョンの広告でのみスタイルを visibility:visible に変更できます。

レスポンシブ広告に可変レイアウトを使用可能

レスポンシブ デザインのもう一つの要素として、可変レイアウトがあります。配置ツールを使用する前に [選択範囲] ツールバーで [可変レイアウト] を有効にすると、割合(%)に基づく配置を利用できます。この配置では、コンテナのサイズが変わっても、要素間の相対的な位置や、要素とその要素が含まれているコンテナの相対位置が維持されます。また、割合(%)を指定した要素サイズとピクセルを指定した要素サイズを組み合わせて使用することもできます。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。