検索
検索をクリア
検索終了
Google アプリ
メインメニュー

広告コードの導入

レスポンシブ広告ユニットについて

レスポンシブ ウェブデザインとは、表示されている端末(画面)の機能に応じて、ウェブサイトの表示を動的に制御できる機能を指します。レスポンシブ広告ユニットを使用すると、各端末において広告以外の部分のレイアウトに合わせて広告のサイズを制御できます。レスポンシブ ウェブデザインの一般的な情報については、Google デベロッパー サイトの Web Fundamentals(ウェブの基本)をご覧ください。

主な特長

  • 利用可能なスペースに合わせてサイズを自動調整。レスポンシブ広告コードを使用すると、ページ レイアウトに合った広告ユニットのサイズが自動的に指定されるので、コードがシンプルになり、時間も労力も節約できます。広告ユニットの親コンテナの幅に基づいて必要なサイズを動的に算出し、その幅に最適な高さを決定します。

    たとえば、幅を 30% に指定した <div> タグ内にレスポンシブ広告コードを配置している場合は、使用される画面の幅に合わせて広告のサイズを自動的に修正して配信します。1,024 ピクセル幅のタブレットにページが表示される場合は 307×250 の広告を配信し、1,680 ピクセル幅の 21 インチ デスクトップ PC の場合は 504×60 の広告を配信します。
  • 画面の向きに合わせて広告のサイズを変更できる。端末の向きが変わってレスポンシブ ページのレイアウトが変化した場合(タブレットや携帯電話を縦向きから横向きにした時など)、新しいページ レイアウトに合った適切なサイズの広告を新たにリクエストして表示します。

    注:
    • 端末の向きが変わって新しい広告が読み込まれると、表示されていた元の広告はキャッシュに保存されます。そして端末の向きが元に戻ると、別の新しい広告ではなくキャッシュに保存された元の広告が表示されます。
    • 画面の向きの変化に合わせて広告が更新され、広告リクエスト数が増えるため、インプレッション収益(RPM)やクリック率(CTR)が少し低下する可能性があります。ただし、総合的な収益に対する影響はありませんので、ご安心ください。

技術的な注意事項

次のようなケースでは、レスポンシブ広告ユニットを正しく機能させるために追加の対応が必要となります。

  • サイトでサードパーティの JavaScript を使用している。たとえば、ページが完全に読み込まれるまで広告を非表示にするスクリプトをサイトが使用しており、このようなスクリプトがレスポンシブ広告コードより先に実行される場合は、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。このような場合は、コードを修正し、CSS メディアクエリを使って広告ユニットのサイズを設定する必要があります。詳しくは、レスポンシブ広告ユニットを修正する方法をご覧ください。
  • 親コンテナに幅が設定されていない。幅が明示的に設定されていない親コンテナ(フローティング要素など)の中にレスポンシブ広告コードを配置している場合、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。このような場合には、コードを修正し、CSS メディアクエリを使って親コンテナのサイズを設定する必要があります。詳しくは、レスポンシブ広告ユニットを修正する方法をご覧ください。
  • 親コンテナの高さが固定または制限されている。レスポンシブ広告は端末やブラウザの種類によって高さが異なるため、高さが固定または制限されているコンテナには設置しないでください。レスポンシブ広告の高さに制限を設ける必要がある場合、コードに変更を加え、CSS メディアクエリを使って親コンテナの高さを設定する必要があります。詳しくは、レスポンシブ広告ユニットを修正する方法をご覧ください。

他にも次のようなケースがあります。

  • 携帯端末の接続状況が良くない。接続状況の良くない携帯端末では、レスポンシブ広告コードが親コンテナの幅に最適な高さを算出している間にブラウザのリフローが発生する可能性があります。詳しくは、ブラウザのリフローに関する記事をご覧ください。
この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。