Display Ads

このガイドでは、静的バナーからサードパーティタグ、HTML5 クリエイティブまで、AdCP におけるディスプレイ広告フォーマットの表現方法を説明します。

ディスプレイフォーマットの特徴

AdCP のディスプレイフォーマットには次が含まれます。

ホスト型画像 - 静的画像ファイル（JPG, PNG, WebP, GIF）
HTML5 クリエイティブ - 複数アセットのインタラクティブバナー
サードパーティタグ - 外部アドサーバーが配信する JavaScript/HTML タグ
レスポンシブフォーマット - 複数サイズに適応
リッチメディア - エキスパンダブルやインタラクティブフォーマット

標準 IAB ディスプレイフォーマット

Medium Rectangle (300x250)

{
  "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)

{
  "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)

{
  "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)

{
  "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
      }
    }
  ]
}

{
  "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)

{
  "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
      }
    }
  ]
}

クリエイティブマニフェスト

シンプルな画像バナーマニフェスト

{
  "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",
      "url": "https://track.brand.com/imp?buy={MEDIA_BUY_ID}&cb={CACHEBUSTER}"
    }
  }
}

アニメーション GIF マニフェスト

{
  "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"
    }
  }
}

サードパーティタグフォーマット

JavaScript タグフォーマット

{
  "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 タグマニフェスト:

{
  "format_id": {
    "agent_url": "https://creative.adcontextprotocol.org",
    "id": "display_300x250_3p"
  },
  "assets": {
    "tag": {
      "asset_type": "javascript",
      "content": "<script src=\"https://ad-server.brand.com/serve?campaign={MEDIA_BUY_ID}&size=300x250&cb={CACHEBUSTER}\"></script>"
    }
  }
}

HTML タグフォーマット

{
  "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 タグマニフェスト:

{
  "format_id": {
    "agent_url": "https://creative.adcontextprotocol.org",
    "id": "display_728x90_html"
  },
  "assets": {
    "tag": {
      "asset_type": "html",
      "content": "<iframe src=\"https://ad-server.brand.com/render?campaign={MEDIA_BUY_ID}&size=728x90&cb={CACHEBUSTER}\" width=\"728\" height=\"90\" frameborder=\"0\" scrolling=\"no\"></iframe>"
    }
  }
}

HTML5 複数アセットフォーマット

HTML5 フォーマットは複数アセットを指定し、パブリッシャー側アドサーバーがインタラクティブクリエイティブに組み立てます。

HTML5 バナーフォーマット

{
  "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 マニフェスト:

{
  "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"
    }
  }
}

レスポンシブディスプレイフォーマット

レスポンシブフォーマットはプレースメントの文脈に応じて複数サイズに適応します。

レスポンシブバナーフォーマット

{
  "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
      }
    }
  ]
}

リッチメディアフォーマット

エキスパンダブルバナーフォーマット

{
  "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
      }
    }
  ]
}

ディスプレイ専用マクロ

ユニバーサルマクロに加えて、ディスプレイフォーマットでは以下をサポートします。

プレースメントコンテキスト

{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 秒）

ディスプレイフォーマットの特徴

標準 IAB ディスプレイフォーマット

Medium Rectangle (300x250)

Leaderboard (728x90)

Wide Skyscraper (160x600)

Billboard (970x250)

Mobile Banner (320x50)

Mobile Interstitial (320x480)

クリエイティブマニフェスト

シンプルな画像バナーマニフェスト

アニメーション GIF マニフェスト

サードパーティタグフォーマット

JavaScript タグフォーマット

HTML タグフォーマット

HTML5 複数アセットフォーマット

HTML5 バナーフォーマット

レスポンシブディスプレイフォーマット

レスポンシブバナーフォーマット

リッチメディアフォーマット

エキスパンダブルバナーフォーマット

ディスプレイ専用マクロ

プレースメントコンテキスト

Web コンテキスト

デバイスコンテキスト

よく使われるファイル仕様

画像要件

サードパーティタグ要件

アニメーション仕様

関連ドキュメント

Documentation Index

​ディスプレイフォーマットの特徴

​標準 IAB ディスプレイフォーマット

​Medium Rectangle (300x250)

​Leaderboard (728x90)

​Wide Skyscraper (160x600)

​Billboard (970x250)

​Mobile Banner (320x50)

​Mobile Interstitial (320x480)

​クリエイティブマニフェスト

​シンプルな画像バナーマニフェスト

​アニメーション GIF マニフェスト

​サードパーティタグフォーマット

​JavaScript タグフォーマット

​HTML タグフォーマット

​HTML5 複数アセットフォーマット

​HTML5 バナーフォーマット

​レスポンシブディスプレイフォーマット

​レスポンシブバナーフォーマット

​リッチメディアフォーマット

​エキスパンダブルバナーフォーマット

​ディスプレイ専用マクロ

​プレースメントコンテキスト

​Web コンテキスト

​デバイスコンテキスト

​よく使われるファイル仕様

​画像要件

​サードパーティタグ要件

​アニメーション仕様

​関連ドキュメント

ディスプレイフォーマットの特徴

標準 IAB ディスプレイフォーマット

Medium Rectangle (300x250)

Leaderboard (728x90)

Wide Skyscraper (160x600)

Billboard (970x250)

Mobile Banner (320x50)

Mobile Interstitial (320x480)

クリエイティブマニフェスト

シンプルな画像バナーマニフェスト

アニメーション GIF マニフェスト

サードパーティタグフォーマット

JavaScript タグフォーマット

HTML タグフォーマット

HTML5 複数アセットフォーマット

HTML5 バナーフォーマット

レスポンシブディスプレイフォーマット

レスポンシブバナーフォーマット

リッチメディアフォーマット

エキスパンダブルバナーフォーマット

ディスプレイ専用マクロ

プレースメントコンテキスト

Web コンテキスト

デバイスコンテキスト

よく使われるファイル仕様

画像要件

サードパーティタグ要件

アニメーション仕様

関連ドキュメント