見出し画像

【DV360】Google ディスプレイ&ビデオ360バナーの制作〜入稿まで

Googleが提供しているDSPで、DV360というHTML5形式のバナーの作成と入稿規定が全くよく分からなかったので、備忘録として書いておきます。情報が少なく苦労したので、あんまりいないかもしれませんが誰かの役にも立てればと思い。
私が普段使うのはAfter Effectsなので、そちらでの作成手順です。

基本Google Web Designerというツールで作成するようですが、AnimateやAfter Effectsでもできるっぽい?
下記のチュートリアルが参考になりました
https://www.youtube.com/watch?v=UKawUc0cdBY

アニメーションの作成

アニメーションを作成する。画像はなるべく容量を大きくしないよう等倍かアニメーションで拡大する分だけの大きさにしておく。
規定はファイル一式を5MB以下にしないといけないので、でかすぎる画像とかにしてしまうと容量を超えてしまうかも。

書き出し

LottieなどでもおなじみBodyMovinというエクステンションを使う
ダウンロード↓
https://github.com/airbnb/lottie-web/tree/master/build/extension

AEで
ウインドウ→エクステンション→BodyMovin
書き出したいコンポジションを選ぶ
ローカルでのプレビューファイルが欲しい場合はSettingsをクリック

Standardはデフォルトで選択されているので、デモファイルが欲しい場合は「Demo」を選択して保存

レンダリングするとjsonファイルとimageフォルダが生成される
Demoをチェックしておくとdemoファイルも作成される

HTML+JSファイルのテンプレをDLする

下記の概要欄に「HTML+JS files」という項目にリンクがあるのでDL
https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbE91MlVaeGh1TFg3S1JzZVZjZlpDN0EtZjVOd3xBQ3Jtc0ttOXlpX0Y3bkpvd0E0Z0hTYU1wTUVkTEs5MWxhVlRKdUo0QUROelJwOWJDZTNSTmxwaHcwTDJhZkxXYjJGNmpJTzBmMi1OaEF0cl9ET1hBTjB1QnNhNnBidFN0OGVrVG9aT1h1anYtQzNyUVM0WnVKbw&q=https%3A%2F%2Fsatelliteblack.com%2Fs%2FAE-to-HTML5.zip&v=UKawUc0cdBY

DLするとデモファイル一式が入っている。

DLファイル一式

metaタグに

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

とあるのでここを作成サイズに書き換える。さらに

<lottie-player src="data2.json" background="transparent" speed="1" style="width: 300px; height: 250px;" loop autoplay></lottie-player>

bodyタグ内に上記のコードがあるのでサイズなどを必要に応じて書き換える。loopさせたくないときはloopを消す。

AEで書き出したファイルをテンプレに入れる

AEで書き出したjsonファイルをDLしたメモファイルと同じ名前「data2.json」に変更し、DLファイルに上書きする。
デモファイルのimagesの中身を空にして、AEで書き出されたimageファイルを代わりに入れる。

これで入稿用ファイルは完成。
デモファイルも書き出した場合はデモで確認できる。ただしデモファイルのhtmlを開いて、サイズなど書き換える必要がある。CSSの

width:160px;
height:600px;

の箇所と、下の方にあるjsなどを必要に応じて書き換える。

var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: false,
autoplay: true,
animationData: animationData
};

loopを1回にしたければloop: false;にする。繰り返したい場合はtrue
これでデモファイルはローカルでも指定サイズの通り確認できる。

納品ファイルがちゃんと動いているか確認するには、http-serverなどを立てて確認する。

npm install --global http-server

ターミナルでグローバルにインストールし、確認したいフォルダの階層で

http-server

で、開発環境が立ち上がるのでそこで確認できる

入稿チェックで下記のようなバリデーションもあるっぽいけど、画像が重いとひっかかるので(規定では5MB以下にしていても引っかかってしまう..)正式なチェッカーなのか謎..。画像を一旦削除してそれ以外のチェックには使えそう?


この記事が気に入ったらサポートをしてみませんか?