> ## Documentation Index
> Fetch the complete documentation index at: https://adcp-docs-ja.pier1.co.jp/llms.txt
> Use this file to discover all available pages before exploring further.
# Display Ads
このガイドでは、静的バナーからサードパーティタグ、HTML5 クリエイティブまで、AdCP におけるディスプレイ広告フォーマットの表現方法を説明します。
## ディスプレイフォーマットの特徴
AdCP のディスプレイフォーマットには次が含まれます。
* **ホスト型画像** - 静的画像ファイル（JPG, PNG, WebP, GIF）
* **HTML5 クリエイティブ** - 複数アセットのインタラクティブバナー
* **サードパーティタグ** - 外部アドサーバーが配信する JavaScript/HTML タグ
* **レスポンシブフォーマット** - 複数サイズに適応
* **リッチメディア** - エキスパンダブルやインタラクティブフォーマット
## 標準 IAB ディスプレイフォーマット
### Medium Rectangle (300x250)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 300,
"height": 250,
"file_types": ["jpg", "png", "webp", "gif"],
"max_file_size_kb": 200
}
}
]
}
```
### Leaderboard (728x90)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_728x90"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 728,
"height": 90,
"file_types": ["jpg", "png", "webp"],
"max_file_size_kb": 150
}
}
]
}
```
### Wide Skyscraper (160x600)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_160x600"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 160,
"height": 600,
"file_types": ["jpg", "png", "webp"],
"max_file_size_kb": 150
}
}
]
}
```
### Billboard (970x250)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_970x250"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 970,
"height": 250,
"file_types": ["jpg", "png", "webp"],
"max_file_size_kb": 300
}
}
]
}
```
### Mobile Banner (320x50)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "mobile_banner_320x50"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 320,
"height": 50,
"file_types": ["jpg", "png", "webp"],
"max_file_size_kb": 150
}
}
]
}
```
### Mobile Interstitial (320x480)
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "mobile_interstitial_320x480"
},
"type": "display",
"assets": [
{
"asset_id": "banner_image",
"asset_type": "image",
"asset_role": "hero_image",
"required": true,
"requirements": {
"width": 320,
"height": 480,
"file_types": ["jpg", "png", "webp"],
"max_file_size_kb": 300
}
}
]
}
```
## クリエイティブマニフェスト
### シンプルな画像バナーマニフェスト
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250"
},
"assets": {
"banner_image": {
"asset_type": "image",
"url": "https://cdn.brand.com/banner_300x250.jpg",
"width": 300,
"height": 250
},
"landing_url": {
"asset_type": "url",
"url_type": "clickthrough",
"url": "https://brand.com/spring?campaign={MEDIA_BUY_ID}"
},
"impression_tracker": {
"asset_type": "url",
"url_type": "tracker_pixel",
"url": "https://track.brand.com/imp?buy={MEDIA_BUY_ID}&cb={CACHEBUSTER}"
}
}
}
```
### アニメーション GIF マニフェスト
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250"
},
"assets": {
"banner_image": {
"asset_type": "image",
"url": "https://cdn.brand.com/animated_300x250.gif",
"width": 300,
"height": 250,
"animated": true,
"animation_duration_ms": 15000
},
"landing_url": {
"asset_type": "url",
"url_type": "clickthrough",
"url": "https://brand.com/spring"
}
}
}
```
## 実行コンテキストを持つ HTML ディスプレイフォーマット
HTML ディスプレイクリエイティブは、静的なメディアではなく実行可能なコードとして実行されます。異なるパブリッシャー環境は異なる実行制約を持ちます——完全な DOM アクセスを許すものもあれば、JavaScript の機能が制限された SafeFrame コンテナで実行するものもあります。
AdCP は、HTML が互換でなければならない実行環境を指定する明示的な **HTML アセット要件**を定義します:
* **`sandbox`**: 実行環境（`none`、`iframe`、`safeframe`、`fencedframe`）
* **`external_resources_allowed`**: クリエイティブが外部のスクリプト、画像、フォントを読み込めるか
* **`allowed_external_domains`**: 外部リソースの許可ドメイン（許可される場合）
* **`max_file_size_kb`**: HTML アセットの最大ファイルサイズ
### SafeFrame 互換 HTML バナー
SafeFrame は、広告クリエイティブとパブリッシャーページの間の安全な分離を提供する IAB 標準です。SafeFrame 互換のクリエイティブは `document.write()` を使えず、SafeFrame の拡張 API を使わなければならず、任意のクロスオリジンリクエストを行えません。
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_html_safeframe"
},
"name": "SafeFrame HTML Banner 300x250",
"type": "display",
"renders": [
{
"role": "primary",
"dimensions": {
"width": 300,
"height": 250,
"responsive": { "width": false, "height": false }
}
}
],
"assets": [
{
"item_type": "individual",
"asset_id": "banner_html",
"asset_type": "html",
"asset_role": "creative",
"required": true,
"requirements": {
"max_file_size_kb": 150,
"sandbox": "safeframe",
"external_resources_allowed": false
}
},
{
"item_type": "individual",
"asset_id": "landing_url",
"asset_type": "url",
"asset_role": "clickthrough",
"required": true,
"requirements": {
"protocols": ["https"]
}
}
]
}
```
### ネイティブ DOM HTML バナー
一部のパブリッシャーは、信頼できるクリエイティブに完全な DOM アクセスを許します。これらのフォーマットは標準の JavaScript API を使い、外部リソースを読み込めます。
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_html_native"
},
"name": "Native HTML Banner 300x250",
"type": "display",
"renders": [
{
"role": "primary",
"dimensions": {
"width": 300,
"height": 250,
"responsive": { "width": false, "height": false }
}
}
],
"assets": [
{
"item_type": "individual",
"asset_id": "banner_html",
"asset_type": "html",
"asset_role": "creative",
"required": true,
"requirements": {
"max_file_size_kb": 200,
"sandbox": "none",
"external_resources_allowed": true,
"allowed_external_domains": ["cdn.brand.com", "fonts.googleapis.com"]
}
},
{
"item_type": "individual",
"asset_id": "landing_url",
"asset_type": "url",
"asset_role": "clickthrough",
"required": true,
"requirements": {
"protocols": ["https"]
}
}
]
}
```
### フェンスドフレーム HTML バナー（Privacy Sandbox）
Chrome の Privacy Sandbox は、プライバシー保護の広告レンダリングのためにフェンスドフレームを導入します。これらは最も制限的な実行環境を持ちます。
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_html_fencedframe"
},
"name": "Fenced Frame HTML Banner 300x250",
"type": "display",
"renders": [
{
"role": "primary",
"dimensions": {
"width": 300,
"height": 250,
"responsive": { "width": false, "height": false }
}
}
],
"assets": [
{
"item_type": "individual",
"asset_id": "banner_html",
"asset_type": "html",
"asset_role": "creative",
"required": true,
"requirements": {
"max_file_size_kb": 100,
"sandbox": "fencedframe",
"external_resources_allowed": false
}
}
]
}
```
## サードパーティタグフォーマット
### JavaScript タグフォーマット
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_3p"
},
"type": "display",
"assets": [
{
"asset_id": "tag",
"asset_type": "javascript",
"asset_role": "third_party_tag",
"required": true,
"requirements": {
"width": 300,
"height": 250,
"max_file_size_kb": 200,
"https_required": true
}
}
]
}
```
JavaScript タグマニフェスト:
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_3p"
},
"assets": {
"tag": {
"asset_type": "javascript",
"content": ""
}
}
}
```
### HTML タグフォーマット
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_728x90_html"
},
"type": "display",
"assets": [
{
"asset_id": "tag",
"asset_type": "html",
"asset_role": "third_party_tag",
"required": true,
"requirements": {
"width": 728,
"height": 90,
"max_file_size_kb": 200,
"https_required": true
}
}
]
}
```
HTML タグマニフェスト:
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_728x90_html"
},
"assets": {
"tag": {
"asset_type": "html",
"content": ""
}
}
}
```
## HTML5 複数アセットフォーマット
HTML5 フォーマットは複数アセットを指定し、パブリッシャー側アドサーバーがインタラクティブクリエイティブに組み立てます。
### HTML5 バナーフォーマット
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_html5"
},
"type": "display",
"assets": [
{
"asset_id": "background_image",
"asset_type": "image",
"asset_role": "background",
"required": true,
"requirements": {
"width": 300,
"height": 250,
"file_types": ["jpg", "png"]
}
},
{
"asset_id": "logo",
"asset_type": "image",
"asset_role": "logo",
"required": true,
"requirements": {
"max_width": 100,
"max_height": 50,
"file_types": ["png", "svg"]
}
},
{
"asset_id": "headline",
"asset_type": "text",
"asset_role": "headline",
"required": true,
"requirements": {
"max_length": 25
}
},
{
"asset_id": "cta_text",
"asset_type": "text",
"asset_role": "call_to_action",
"required": true,
"requirements": {
"max_length": 15
}
}
]
}
```
HTML5 マニフェスト:
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_300x250_html5"
},
"assets": {
"background_image": {
"asset_type": "image",
"url": "https://cdn.brand.com/bg.jpg",
"width": 300,
"height": 250
},
"logo": {
"asset_type": "image",
"url": "https://cdn.brand.com/logo.png",
"width": 80,
"height": 40
},
"headline": {
"asset_type": "text",
"content": "Spring Sale - 50% Off"
},
"cta_text": {
"asset_type": "text",
"content": "Shop Now"
},
"landing_url": {
"asset_type": "url",
"url_type": "clickthrough",
"url": "https://brand.com/spring"
}
}
}
```
## レスポンシブディスプレイフォーマット
レスポンシブフォーマットはプレースメントの文脈に応じて複数サイズに適応します。
### レスポンシブバナーフォーマット
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_responsive"
},
"type": "display",
"responsive": true,
"supported_sizes": ["300x250", "728x90", "320x50"],
"assets": [
{
"asset_id": "background_image",
"asset_type": "image",
"asset_role": "background",
"required": true,
"requirements": {
"min_width": 728,
"min_height": 250,
"responsive": true,
"file_types": ["jpg", "png", "webp"]
}
},
{
"asset_id": "logo",
"asset_type": "image",
"asset_role": "logo",
"required": true
},
{
"asset_id": "headline",
"asset_type": "text",
"asset_role": "headline",
"required": true,
"requirements": {
"max_length": 30
}
}
]
}
```
## リッチメディアフォーマット
### エキスパンダブルバナーフォーマット
```json theme={null}
{
"format_id": {
"agent_url": "https://creative.adcontextprotocol.org",
"id": "display_970x250_expandable"
},
"type": "display",
"expandable": true,
"collapsed_size": "970x250",
"expanded_size": "970x600",
"assets": [
{
"asset_id": "collapsed_creative",
"asset_type": "html",
"asset_role": "collapsed_state",
"required": true,
"requirements": {
"width": 970,
"height": 250,
"max_file_size_kb": 200
}
},
{
"asset_id": "expanded_creative",
"asset_type": "html",
"asset_role": "expanded_state",
"required": true,
"requirements": {
"width": 970,
"height": 600,
"max_file_size_kb": 500
}
}
]
}
```
## ディスプレイ専用マクロ
[ユニバーサルマクロ](/docs/creative/universal-macros) に加えて、ディスプレイフォーマットでは以下をサポートします。
### プレースメントコンテキスト
* `{PLACEMENT_ID}` - IAB Global Placement ID
* `{FOLD_POSITION}` - above\_fold / below\_fold
* `{AD_WIDTH}` / `{AD_HEIGHT}` - 広告枠のピクセル寸法
### Web コンテキスト
* `{DOMAIN}` - パブリッシャードメイン（例: "nytimes.com"）
* `{PAGE_URL}` - ページの完全 URL（URL エンコード）
* `{REFERRER}` - HTTP リファラ URL
* `{KEYWORDS}` - ページキーワード（カンマ区切り）
### デバイスコンテキスト
* `{DEVICE_TYPE}` - mobile / tablet / desktop
* `{OS}` - iOS, Android, Windows, macOS
* `{USER_AGENT}` - 完全な UA 文字列
**ディスプレイマクロを用いた例:**
```
https://track.brand.com/imp?
buy={MEDIA_BUY_ID}&
placement={PLACEMENT_ID}&
domain={DOMAIN}&
fold={FOLD_POSITION}&
device={DEVICE_TYPE}&
cb={CACHEBUSTER}
```
## よく使われるファイル仕様
### 画像要件
* **ファイルタイプ**: JPG, PNG, WebP, GIF
* **最大ファイルサイズ**:
* 標準バナー: 150〜200KB
* 大型フォーマット (970x250): 300KB
* アニメ GIF: 500KB
* HTML5 初期ロード: 200KB
### サードパーティタグ要件
* **HTTPS 必須**: すべてのタグ URL は安全なプロトコルを使用
* **最大ファイルサイズ**: タグ内容 200KB
* **非同期ロード**: ページ表示をブロックしないこと
### アニメーション仕様
アニメ GIF フォーマットの場合:
* `animated`: true
* `animation_duration_ms`: アニメーション時間（ミリ秒）
* よくある長さ: 15000ms（15 秒）
## 関連ドキュメント
* [ユニバーサルマクロ](/docs/creative/universal-macros) - 完全なマクロリファレンス
* [Creative Manifests](/docs/creative/creative-manifests) - マニフェストの構造と検証
* [Asset Types](/docs/creative/asset-types) - 画像/HTML/JavaScript アセットの仕様