HTML5バナーをアドサーバーに出す前の準備

バナーは自分の画面では完璧に見えても、アドサーバーに拒否されることがあります。多くの場合、原因は誰も確認しなかった技術的な細部です。このガイドでは、HTML5バナーをアップロードする前に確認すべきことを、順番に説明します。

はじめに

掲載先のプラットフォーム（または、その公式ドキュメント）に、次の3点を確認してください。受け付けるサイズ、各ファイルの容量の上限、外部リソースが許可されているかどうかです。この3つがそれ以外のほぼすべてを決めます。プラットフォームごとに基準は異なります。

パッケージ：ルートに index.html がある .zip

バナーは .zip ファイルとして納品します。中では、index.html をルート（フォルダの中ではなく）に置き、画像やフォントなどのリソースは、その横かサブフォルダに配置します。よくある間違いは、フォルダの中身ではなくフォルダそのものを圧縮することです。アドサーバーは .zip を開いてもルートに index.html を見つけられず、拒否します。

サイズや言語が複数ある場合、組み合わせごとに別のピースになり、それぞれが独自の .zip を持ちます。BannerMotionは既定で「ピースごとに1つの .zip」として梱包します。言語をフォルダにまとめる「サイズごとに1つの .zip」も選べます。

宣言されたサイズ

バナーは <head> 内の meta タグで自分のサイズを宣言します。プラットフォームはこれを読み取り、表示方法を決めるとともに、購入した枠と一致するか確認します。

<meta name="ad.size" content="width=300,height=250">

タグのサイズ、バナーのコンテナのサイズ、購入した枠のサイズは、ピクセル単位で一致している必要があります。300×600の枠に300×250のバナーを入れるのは、プラットフォームの問題ではなく、制作上のミスです。

clickTag：遷移先のリンク

遷移先のリンクは、バナーの中に固定で書き込みません。バナーは、プラットフォームが定義する clickTag という変数を読み取り、クリックされたときにそれを使います。こうすることで、アドサーバーはページ遷移の前に各クリックを計測できます。

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

見落としやすい点が3つあります。変数名は必ず clickTag と正確に書くこと（大文字と小文字を区別します）。ファイルに書く宛先はテスト用であり、多くのプラットフォームは配信時にそれを差し替えること。そして、バナーにはクリックのアクションが1つだけあり、ピース全体を覆っていること。プラットフォームによっては独自のライブラリや別の変数名を使うので、そのガイドを確認してください。

.zip の最大容量

各プラットフォームは .zip の上限を設けています。必ず圧縮後の最終的な .zip の容量を測ってください（圧縮前のフォルダではありません）。また、余裕を持たせてください。アップロード前に減らす方が、拒否されてから直すより簡単です。プラットフォームによっては、初回の読み込みと全体の容量を区別します（これは polite load と呼ばれます）。

BannerMotionは書き出し時に各ピースの容量を測り、設定可能な上限と比較します。ただし、この上限はプラットフォームの実際の上限の代わりにはなりません。バナーはサードパーティのライブラリを含まないため、容量を低く抑えやすくなっています。[PLACEHOLDER: 公開できる計測値がそろったら、1ピースの典型的な容量を記載。]

容量を増やすものは、大きい順に、動画、画像（特に Retina 画面向けの2倍解像度）、多くのスタイルを含むフォント、ライブラリです。減らすには、できるだけ画像の代わりにテキストとベクター図形（SVG）を使い、小さなアイコンは スプライト にまとめ、写真は圧縮し、使うフォントのウェイトだけを読み込みます。

外部リソースなし

バナーに必要なものはすべて .zip の中に入れてください。画像、フォント、ライブラリなどです。多くのプラットフォームは、別のサーバーに要求するファイル（CDNのフォント、外部でホストされたライブラリなど）をブロックまたは減点します。利用できるか、安全かを保証できないためです。BannerMotionのパッケージは自己完結型で、他のドメインへリクエストを送りません。

アニメーション、尺、繰り返し

プラットフォームは通常、アニメーションの長さと繰り返し回数を制限します（最大で約30秒、繰り返しは少数回であることが多いです）。正確な値はプラットフォームごとに異なります。BannerMotionの書き出しは、汎用プリセットで最大30秒の尺を前提としています。

誰にでも使える良い習慣が2つあります。最後のコマで、メッセージとボタンが完全に表示されていること（そのコマは画面に残るため）。そして、動きは多くの細かい動きではなく、少数の適切な キーフレーム と、滑らかな イージング で作ることです。

バックアップ画像

プラットフォームによっては、同じサイズのバックアップ画像（JPG、PNG、GIF）を求めます。ブラウザがHTML5を実行できない場合に表示されます。一般的には、アニメーションの最後のコマを使います。プラットフォームが必須かどうか、パッケージに含めるか別に提出するか、最大容量はいくつかを確認してください。BannerMotionでは、静止画のバックアップは書き出し画面で「近日公開」と表示されます。

アップロード前にテストする

.zip を新しいフォルダに展開し、index.html をブラウザで開きます。アニメーションが最後まで再生されること、テキストが切れていないこと、クリックで意図した宛先が開くこと、ブラウザのコンソールにエラーが出ていないことを確認します。キャンペーンで最も小さいサイズと最も大きいサイズの両方で繰り返してください。

テストできないバナーは、完成したとはいえません。

チェックリスト

• .zip のルートに index.html がある。
• ad.size タグが、バナーのサイズと購入した枠のサイズに一致している。
• クリックは clickTag を使い、クリックのアクションは1つだけ。
• .zip の容量が、プラットフォームの上限より小さい（BannerMotionは設定した上限で警告します）。
• 外部リソースがない。他のドメインへのリクエストが発生しない。
• 尺と繰り返し回数が、プラットフォームの許容内にある。
• 最後のコマに、メッセージ全体とボタンがある。
• ブラウザで、最も小さいサイズと最も大きいサイズの両方でテスト済み。

アップロード時：トラフィッキングとは

バナーをアップロードし、キャンペーン、期間、枠に割り当てる作業は トラフィッキング と呼ばれます。パッケージが正しく準備されていれば、この作業はアップロード、プラットフォームのプレビューでの確認、割り当てだけになります。公開後は、アドサーバーのレポートでクリックが計測されているか確認してください。

BannerMotionは、各ピースを宣言したサイズ、clickTag込み、容量を検証した状態で書き出し、不足があれば知らせます。アドサーバーへの直接送信は製品計画に含まれています。現時点では、パッケージをダウンロードして手動でアップロードします。