ドキュメントAdvertisingCreative ガイド

Advertising CreativeのHTML5 クリエイティブ仕様

最終更新日： 2026年4月3日

作成対象：

  • User

このドキュメントでは、Creative内のHTML5 クリエイターの要件とAPI サポートの概要を説明します。 このAPIは、クリエイティブ配信時に属性を設定できるHTML5 クリエイターの開発をサポートしています。

範囲

Creativeは、ページ上の設定された境界線内に表示されるリッチメディア以外のクリエイティブを含むHTML5 バナーをサポートしています。 次の種類のHTML5 クリエイティブを使用できます。

  • HTML5: クリエイティブの作成と人身売買の際に設定可能なランディングページ URLを5つまでサポートします。

  • 柔軟なHTML5: クリエイティブの作成と人身売買の際に設定できるランディングページ URLを5つまでサポートしています。また、クリエイティブの作成と人身売買の際にクリエイティブ属性を変更することもできます。

要件定義

フォルダーと圧縮の要件

  • クリエイティブは、ZIP ファイル（.ZIP形式）でパッケージ化する必要があります。 ネストされたZIP ファイルはサポートされていないので、外部の圧縮フォルダー内に圧縮フォルダーを含めないでください。

  • ZIP ファイルには、少なくとも1つのHTML ファイル（メインのHTML表示ファイル）が含まれている必要があります。これには、Creative JavaScript ライブラリへの参照が含まれます。 メインのHTML ファイルは、ルートフォルダーまたはサブフォルダーのどちらかにできます。

  • HTMLのメインファイルには、特殊文字が含まれていない限り、任意の名前を付けることができます。ただし、index.htmlをお勧めします。

  • 最終的なクリエイティブをレンダリングするために必要なすべてのサポートアセットは、HTMLの表示ファイルと同じフォルダーか、メインフォルダーのサブフォルダーにある必要があります。

  • クリエイティブで参照していないファイルをクリエイティブに含めないでください。

Advertising Creative JavaScript ファイルのインクルード

メインのHTML ファイルには、JavaScript ファイル AMOLibrary.jsへの参照を含める必要があります。他のファイルは含まれません。 次のアドレスを使用して、<head> セクションの最初の行にあるファイルを呼び出します。

https://ads.everesttech.net/ads/static/local/AMOLibrary.js

このファイルには、終了イベントのローカルテストが問題なく実行されるように機能が含まれています。

HTML5のクリエイティブ要件

静的HTML5でのクリックスルーURLのサポート

amo.registerClick(clkVar, clkUrl)

クリックスルーURLと、各URLの参照に使用される関連パラメーター（clickTagと呼ばれます）を登録します。 このAPIは、クリック トラッキングを追加する場所をCreative広告サーバーに通知します。 このAPIを使用して、対応するランディングページのURLを持つクリックタグ変数を5つまで登録できます。

NOTE
HTML5 クリエイティブに含める静的URLは、ローカルテストの目的でのみ使用され、上書きされます。 HTML5 クリエイティブをアップロードする場合、各clickTag変数のデフォルトのランディングページを定義します。 アップロードしたHTML5 クリエイティブを広告エクスペリエンスに割り当てる場合、オプションで各clickTag変数のデフォルトのランディングページを上書きでき、Creativeはエクスペリエンスの保存時にURLにクリックトラッキングを追加します。
パラメーター

  • clkVar — クリック変数（通常は「clickTag」）の名前。二重引用符で囲みます。

  • clkUrl – このクリック変数のランディングページ URL。二重引用符で囲みます。

使用状況

メイン HTML ファイルのamo.registerClick() セクションで<head>を呼び出します。

例

amo.registerClick("clickTag","http://www.example.com")

amo.onAdClick(clk, event)

終了イベントをトリガーします。これにより、ユーザーはclickTag用に設定されたランディングページにリダイレクトされます。 ローカルテスト中、この関数は、関数に渡されるURLが登録されたかどうかを開発者に警告します。

パラメーター

  • clkTag — ランディングページ URLを割り当てるために使用するクリック変数の名前。1つの引用符で囲んだamo.registerClick()関数を使用します。

  • event — （オプション）JavaScriptの「クリック」イベントオブジェクト。 これはクリック数の座標を記録し、クリエイティブのパフォーマンスを分析するためにさらに使用できます。

使用状況

メイン HTML ファイルのamo.onAdClick() セクションで<body>を呼び出します。

例

amo.onAdClick('clickTag')またはamo.onAdClick('clickTag',clickEvt)

柔軟なHTML5のクリエイティブ要件

柔軟なHTML5でのクリックスルーURLのサポート

amo.registerClick(clkVar, clkUrl)

クリックスルーURLと、各URLの参照に使用される関連パラメーター（clickTagと呼ばれます）を登録します。 このAPIは、クリック トラッキングを追加する場所をCreative広告サーバーに通知します。 このAPIを使用して、対応するランディングページのURLを持つクリックタグ変数を5つまで登録できます。

NOTE
HTML5 クリエイティブに含める静的URLは、ローカルテストの目的でのみ使用され、上書きされます。 HTML5 クリエイティブをアップロードする場合、各clickTag変数のデフォルトのランディングページを定義します。 アップロードしたHTML5 クリエイティブを広告エクスペリエンスに割り当てる場合、オプションで各clickTag変数のデフォルトのランディングページを上書きでき、Creativeはエクスペリエンスの保存時にURLにクリックトラッキングを追加します。
パラメーター

  • clkVar — クリック変数（通常は「clickTag」）の名前。二重引用符で囲みます。

  • clkUrl – このクリック変数のランディングページ URL。二重引用符で囲みます。

使用状況

メイン HTML ファイルのamo.registerClick() セクションで<head>を呼び出します。

例

amo.registerClick("clickTag","http://www.example.com")

amo.onAdClick(clk, event)

終了イベントをトリガーします。これにより、ユーザーはclickTag用に設定されたランディングページにリダイレクトされます。 ローカルテスト中、この関数は、関数に渡されるURLが登録されたかどうかを開発者に警告します。

パラメーター

  • clkTag — ランディングページ URLを割り当てるために使用するクリック変数の名前。1つの引用符で囲んだamo.registerClick()関数を使用します。

  • event — （オプション）JavaScriptの「クリック」イベントオブジェクト。 これはクリック数の座標を記録し、クリエイティブのパフォーマンスを分析するためにさらに使用できます。

使用状況

メイン HTML ファイルのamo.onAdClick() セクションで<body>を呼び出します。

例

amo.onAdClick('clickTag')またはamo.onAdClick('clickTag',clickEvt)

柔軟なHTML5でのクリエイティブ属性のサポート

amo.registerAttribute(key, type, value)

クリエイティブまたはエクスペリエンスの作成時に変更できるクリエイティブの属性を定義します。 クリエイティブまたはエクスペリエンスの作成時に設定できるクリエイティブ属性は、最大20個まで定義できます。

NOTE
このメソッドで定義された値はローカル開発にのみ使用され、ライブ広告の配信では使用されません。
パラメーター

  • key – 属性の英数字の名前。 アルファベット文字で始める必要があります。

  • type – 属性の種類（TEXTまたはIMAGE）。

  • value — テスト用の属性の値。 タイプ IMAGEの属性の場合、値は画像ファイルへの相対パスである必要があります。

使用状況

amo.registerAttribute()を呼び出して、ローカルモードでのテスト中に1つのクリエイティブ属性、タイプ、値を登録します。 サンプル値として使用される画像ファイルは、アップロードされたパッケージと共にZIP ファイルにパッケージ化する必要があります。

amo.attributes

クリエイティブ属性変数の名前と値をクエリするJSON オブジェクト。 オブジェクトキーは属性名で、値はその属性の値です。

ローカル テスト モードでは、キーと値のペアは、amo.registerAttribute APIによって登録されたペアです。 制作の場合、クリエイティブの作成および人身売買の際に、クリエイティブ属性変数名と値を設定する必要があります。

Creativeの必要コンテンツ構成

Advertising DSPで利用可能なディスプレイ交換のほとんどは、次のクリエイティブ要件を備えています。

  • すべての広告画像を囲むには、しっかりとした境界線が必要です。

  • 拡大する広告は許可されていません。

  • ランディングページを新しいウィンドウで開く必要があります。

  • ランディングページドメインとそのサブドメインは、35文字以下である可能性があります。 注意：​最終的なランディングページ URLは、HTML5 アセット自体ではなく、DSPで定義されます。

  • 広告のオファーに対する免責事項は、ランディングページだけでなく、広告自体に含める必要があります。

JSON オブジェクトおよび配列としてのコンテンツの例

JSON オブジェクトとしてのコンテンツの例

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
}

JSON配列としてのコンテンツの例

[{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
},

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-mobile-720x520.png",
"product_url": "http://adobe.com/"
}

]

HTML5 クリエイティブの例

フォルダー構造の例（解凍後）

  • index.html

  • /assets （フォルダー）

    • bg.jpg （JPG、PNG、SVG、またはGIFの画像）

単純なHTML5 クリエイティブ用のHTML ファイル（index.html）の例

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

静的なHTML5 クリエイティブ用のHTML ファイル（index.html）の例

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  amo.registerClick("clickTag2","http://www.example2.com");
  amo.registerClick("clickTag3","http://www.example3.com");
  amo.registerClick("clickTag4","http://www.example4.com");
  amo.registerClick("clickTag5","http://www.example5.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>
Related Articles
recommendation-more-help
advertising-help-creative