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

広告コードの導入

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

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

主な特長

  • 利用可能なスペースに合わせてサイズを自動調整。レスポンシブ広告コードを使用すると、ページのレイアウトに合わせて広告ユニットのサイズが自動調整されるため、サイトのコードがシンプルになり、時間と労力を節約できます。ユーザーの端末の画面サイズと空きスペースに基づいて、必要なサイズが動的に算出されます。

  • 画面の向きが変わった場合でも適切なサイズの広告を配信。端末の向きが変わってレスポンシブ ページのレイアウトが変化した場合(タブレットや携帯電話を縦向きから横向きにした時など)、新しいページ レイアウトに合った適切なサイズの広告を新たにリクエストして表示します。

    注:
    • 端末の向きが変わって新しい広告が読み込まれると、表示されていた元の広告はキャッシュに保存されます。そして端末の向きが元に戻ると、別の新しい広告ではなくキャッシュに保存された元の広告が表示されます。
    • 画面の向きの変化に合わせて広告が更新され、広告リクエスト数が増えるため、インプレッション収益(RPM)やクリック率(CTR)が少し低下する可能性があります。ただし、総合的な収益に対する影響はありませんので、ご安心ください。
  • モバイル端末に全幅広告を表示。Google が行ったテストの結果、モバイル端末が縦表示の場合には、全幅サイズのレスポンシブ広告で成果が上がることが判明しています。そのため、サイトでの広告収益が増えるよう、ユーザーの端末が縦向きの場合にはレスポンシブ広告ユニットを自動的に拡大し、画面の幅いっぱいに表示します。
    注:
    • レスポンシブ広告が拡大されるのは、良好なパフォーマンスと優れたユーザー エクスペリエンスが見込まれる場合に限ります。
    • レスポンシブ広告のタグパラメータを追加すると、全幅レスポンス広告を無効にできます。ただし、無効にすると増収の機会を逃す可能性があるため、おすすめはしません。

技術的な注意事項

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

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

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

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