メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.adrop.io/llms.txt

Use this file to discover all available pages before exploring further.

Adrop Web SDK 1.2.3 以降で利用可能です。

​
概要

  • デフォルトモードは responsive です。ほとんどの媒体はそのままご利用いただけます。
  • 広告枠がカード/グリッドデザインで 固定の高さに固定されている必要がある場合 にのみ fixed を適用してください。
  • コンテナの height / aspect-ratio などのサイズ意図は inline style で明示することを推奨します（CSS class / Tailwind 単独は非推奨）。

​
モード比較

モード動作推奨ケース
responsive（デフォルト）コンテナ幅に合わせて広告サイズを自動選択。コンテナにサイズ意図がない場合、SDK が適切な min-height を自動で予約しコンテンツのジャンプ（CLS）を防止動的な高さを許容する一般スロット。収益と UX の両面で最適
fixedコンテナの height に広告をフィット（width:100%; height:100%）。幅に応じた自動サイズ選択は適用されない広告枠の高さがカード/グリッドデザインによって固定されており、responsive モードでレイアウトが崩れるスロット

​
CLS とは？

ページ読み込み中に広告が遅れて入ってきて本文が押し下げられる現象（Cumulative Layout Shift）です。ユーザーがクリックしようとしていたボタンが急に位置を変えて誤クリックを誘発し、検索ランキングや広告収益にも影響します。responsive モードは広告が入る前に場所を予約することでこのジャンプを軽減します。

​
どのモードを選ぶべきか

デフォルトの responsive のままを推奨します。 以下のケースに限って fixed にオプトインしてください。
  • 広告領域の高さがカード/グリッドデザインにピクセル単位で固定されており、responsive モードで変形してはいけない場合
  • ヘッダーやサイドバーのように他のコンテンツとピクセル単位の整列が必要なスロット
単なるコンテンツジャンプ（空白が広告で埋まる）だけが気になる場合は、モードを変更せずに下記のコンテナ作成推奨パターンに従ってください。SDK の自動予約が解決します。

​
モード指定方法

狭い範囲が優先されます。優先順位は次のとおりです。 
request オプション > HTML 属性 > グローバル設定 > デフォルト（'responsive'）

​
1. スロット単位、プログラマティック (renderAd)

await Adrop.instance().renderAd(container, {
  unit: 'YOUR_UNIT_ID',
  backfillMode: 'fixed',
})

​
2. スロット単位、HTML 属性（宣言的）

<div data-adrop-unit="YOUR_UNIT_ID"
     data-adrop-backfill-mode="fixed"
     style="width:100%; height:100px;"></div>

​
3. 媒体全体のデフォルト

Adrop.observe({
  appId: 'YOUR_APP_ID',
  backfillMode: 'fixed',
})
指定しない場合は 'responsive' が適用されます。

​
コンテナ作成推奨パターン

広告領域の height / aspect-ratio などのサイズ意図 は必ず inline style で明示してください。inline 意図があれば SDK は自動予約をスキップし、媒体のデザインをそのまま保ちます。 SDK が認識する inline 意図は次の 4 つです。
  • height
  • min-height
  • max-height
  • aspect-ratio
width / padding / margin / 色 / ボーダー / 影 / transition など、残りすべてのスタイルは CSS class や Tailwind を自由に使用できます。 上記 4 つのサイズ意図だけを inline にすれば十分です。

​
推奨パターン

<!-- 動的比率スロット: aspect-ratio のみ inline、それ以外は自由 -->
<div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full max-w-[640px] rounded-xl bg-gray-100 shadow-sm"
     style="aspect-ratio: 300 / 250;"></div>

<!-- 固定高さスロット: height のみ inline -->
<div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full bg-gray-50 rounded border"
     style="height: 90px;"></div>

<!-- 自動予約に任せる: サイズ意図なし -->
<div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full max-w-[728px]"></div>

​
非推奨パターン

<!-- Tailwind 等の CSS class でサイズ意図を固定 -->
<div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full aspect-[300/250] rounded-xl"></div>

<div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full h-[100px]"></div>

<!-- styled-components / CSS module のみで height / aspect-ratio を指定 -->
<StyledAdSlot data-adrop-unit="YOUR_UNIT_ID" />
SDK は inline 意図のみ認識するため、class だけで固定されたサイズは検出できません。自動予約が同時に適用されてコンテナ意図と衝突し、レイアウトが意図と異なって表示される可能性があります。
修正方法（いずれか）:
  1. サイズ意図のみを inline に移す（推奨） 
    <div data-adrop-unit="YOUR_UNIT_ID"
     class="w-full rounded-xl"
     style="aspect-ratio: 300 / 250;"></div>
  2. 自動予約を無効化 
    <div data-adrop-unit="YOUR_UNIT_ID"
     data-adrop-backfill-mode="fixed"
     class="w-full aspect-[300/250]"></div>

​
自動予約の動作（responsive モード）

responsive モードでは SDK がコンテナ幅に合わせて 安全な最小の高さを自動的に予約 します。
  • 実際の広告が予約値より 大きい 場合、コンテナは自然に拡張されます（ジャンプ幅が縮小されるだけ）
  • 実際の広告が予約値より 小さい 場合、空白が残ります（ジャンプは発生しません）
  • max-height ではなく min-height のみ設定されるため、overflow の心配はありません
媒体が inline で height または aspect-ratio の意図を表現している場合、SDK は自動予約をスキップします。

​
1.2.3 へのアップグレード時の影響

コンテナの状態変化
inline height / aspect-ratio あり影響なし（既存動作のまま）
サイズ意図 なし自動予約により空白のジャンプが軽減。広告動作は同一
CSS class / Tailwind のみで サイズ意図を固定自動予約が同時に適用されコンテナ高さが伸びる可能性あり → 上記非推奨パターンを参照して修正
デフォルト動作が responsive のため、コード変更なしでアップグレードしてもほとんどの場合安全です。デザインを 1.2.1 時点の動作で凍結したい場合は、グローバルまたはスロット単位の fixed オプトインを 1 行追加するだけで復元できます。

​
関連ガイド

バナー広告 (React)

React でバナー広告を実装

バナー広告 (CDN)

CDN 方式でバナー広告を実装

リファレンス

BackfillMode タイプ定義