複数の画面サイズ向けのデザイン

この機能は AMPHTML 広告では使用できません。

HTML ページや広告は、さまざまなサイズと向きで表示される可能性があります。目的のビューポートのサイズが正確にわかる場合は、そのサイズに合わせてデザインできます。ユーザーのビューポートの向きやサイズがわからない場合、Google Web Designer ではいくつかの方法を使用して、ビューポートに合わせて変化する広告やページを作成することができます。

画面の向きに合わせたページを別々に作成する

縦向きと横向きの両方で表示される広告がある場合は、縦向き用のページと横向き用のページを別々に作成し、[Alt ページ] プロパティを使ってこの 2 つのページを関連付けることが最も簡単な方法です。レスポンシブ レイアウトを使用しないインタースティシャル広告を作成する場合は、これが自動的に行われます。通常、特定の画面サイズ向けの広告を作成する場合はこれが最適な方法です。

重要: 縦向き用と横向き用の別々のページを使って非レスポンシブ広告を作成し、その後レスポンシブ レイアウトを使うようにその広告を変更する場合は、Alt ページを削除し、広告が正しく動作するよう縦向きと横向きの別々のメディアルールを追加する必要があります。

レスポンシブ レイアウト

さまざまなサイズに対応する HTML ページや広告を作成する必要があり、特定の画面サイズに合わせてデザインしない場合は、レスポンシブ レイアウトを使用します。レスポンシブ レイアウトではメディアクエリを使ってさまざまなビューポートのサイズを認識し、レイアウト ルールを変更してビューポートに収まるようにドキュメントを調整します。こうしたレイアウトの変更は「ブレークポイント」(スタイルのルールが変更されるビューポートの幅)で行われます。

Google Web Designer では、ビューポートの幅の変化と高さの変化の両方に対してブレークポイントを設定して、さまざまなサイズで適切に表示されるようにスタイルを設定できる広告を作成することが可能です。また、それぞれの画面の向きごとに別々のブレークポイントのセットを使用した、縦向き版と横向き版の広告を個別に作成することもできます。

向きをデュアルに設定した広告をレスポンシブ レイアウトで作成すると、単一のページが作成され、メディアルールを使用してモバイル端末の画面の向きが判断されます。

レスポンシブ広告のワークフロー

可変デザイン

レスポンシブ レイアウトとともに、可変デザインツールを使用して視覚的要素を配置することで、ビューポートが変化した場合に、その変化に比例してデザイン内の要素を移動させることができます。たとえば、要素が左端から 30% の位置に配置されている場合は、元のビューポートの大きさに関係なく、移動する際にその比率が保たれます。

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