【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する
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以下にしていても引っかかってしまう..)正式なチェッカーなのか謎..。画像を一旦削除してそれ以外のチェックには使えそう?
この記事が気に入ったらサポートをしてみませんか?