ウェブの世界では、スマートフォンやタブレット端末など、さまざまな画面サイズ、解像度のデバイスが日々登場しています。そのため、異なるデバイスの一つ一つに対応するウェブサイトを設計することは、日頃サイト運営者様の頭を悩ませていることと思います。また、サイトの設計と合わせて、掲載する広告ユニットもデバイスごとに効果的なものが異なることは明らかです。そうした環境の変化に対応するため、Google は新しく「レスポンシブ広告ユニット」の提供を開始しました。

レスポンシブ広告ユニットの特徴は大きく 2 つあります。
  • レスポンシブウェブデザインを導入したウェブページ上で連動させ、様々なデバイスに対応することができます。
  • 配信される広告のサイズを動的に指定できるため、デバイスに応じてページを読み込む際に、広告もそれに合わせて表示させることができます。
この機能はまだベータ版の段階にありますので、以下の点をご確認ください。今後いただいたフィードバックなどを含め改善をして参ります。
  • 表示する広告の縦横サイズを設定する際には、必ず固定のピクセル値を指定しましょう。
  • 指定する縦横サイズは、AdSense でサポートされる広告サイズのいずれかにしてください。現在リンク ユニットはサポートされていません。
  • レスポンシブ広告ユニットは最初のページ読み込み時のみレスポンシブに対応します。最初の読み込みの後で、画面の向きを変更するなど、画面サイズに変更があっても、新しい広告が表示されることはありません。この機能については、現在対応を準備中ですので、もうしばらくお待ちください！
  • ユーザーのブラウザがメディア クエリに対応されてない場合に備え、必ずデフォルトの広告サイズを設定してください。
それでは、レスポンシブ広告ユニットを作成する流れをご説明いたします。

ステップ 1 - 広告サイズにレスポンシブ広告ユニットを指定



ステップ 2 -「保存して広告コードを取得」をクリック

ステップ 3 - 取得した広告コードに含まれる CSS メディア クエリのサンプルを変更



より詳しい例と、利用開始の手順については、ヘルプセンターをご覧ください。レスポンシブ デザインについて理解を深めたい場合は、Google Developers のリソースをご覧ください。

先日の非同期型広告コードに続くベータ版機能として、レスポンシブ広告ユニットをご提供できることになったのも、かねてからサイト運営者様より、ユーザーがウェブページ上でより質の高いユーザー エクスペリエンスを実現できるよう、レスポンシブウェブデザインに対応した広告を提供してほしいというご意見をいただいていたからです。引き続き、みなさまからのご意見・ご要望をお待ちしております。

近日中にさらにいくつかの発表を予定しておりますので、引き続き Inside AdSense Japan ブログをご覧ください。

【関連リンク】
2012 年 8 月 3 日
モバイルに適したウェブサイトの構築方法

Posted by Nick Radicevic - AdSense プロダクト マネージャー
2013 年 8 月 7 日