みなさん、ディスプレイ広告を実施するときのクリエイティブの選択肢が、テキスト広告とバナー広告(画像)だけだったりしませんか？自分もつい最近までは、テキスト広告かバナー広告(画像)しか選択肢がなかったのですが、 Google Web Designer というツールを使うと、予想以上に簡単にアニメーションのある広告が作れることが分かりました。
ということで、Google Web Designerを使って、HTML5広告を作るためのチュートリアルを実施します。
このチュートリアルのゴール
このチュートリアルでは、下のアニメーションのように動くHTML5広告を作ることが目的になります（Quick Playerで録画したものをGIFアニメーションに変換している都合上、アニメーションがカクついたりして見えますが、実際にはスムーズに動かせれます）。単純なアニメーションですが、このHTML5広告をサクッと作れるようになれば、少し変わった動きをするHTML5広告も作れるようになると思います。
Google AdWordsでのHTML5広告の制限事項
制限事項・技術要件は、
内の「HTML5広告」のセクションに記載されていますが、重要な点としては
- ファイルサイズは150KB以下にすること
- 必要なファイルは全てZIPファイル内に含める必要がある
の2点になります。ZIPで圧縮するとはいえ、全てのファイルをZIPに圧縮して150KBに収めようとすると、使う画像ファイルは厳選する必要が有ります。また、HTML5広告でJavaScriptが使えるからといって、使い慣れたjQueryを利用しよう、と思うとライブラリを読み込むだけでファイルサイズの大半を使い切ってしまう、ということになりかねません。
幸いなことに、HTML5広告ではCSS3のアニメーションがサポートされていますので、アニメーションを使う場合はできる限り、CSS3のアニメーションを使うのがいいでしょう。
Google Web Designerのダウンロードとインストール、起動
ダウンロードは Google Web Designerの公式サイト から行うことが可能です。
対応OSは, WindowsとMacは当然として, DebianやUbuntu、Fedora、OpenSUSEといった各種Linuxにも対応しているのが特徴でしょうか。Windows XPのサポート終了に合わせて、WindowsからLinux端末に乗り換えた方々でも安心して利用することができそうです。
インストールまで完了したら、早速起動させてみましょう。どうやら、このアプリケーションはインターネットに接続されている状態で使うことを前提としているのか、インターネットの接続環境がない場合は起動できないようです。
素材の準備
バナー作成に必要になる素材を準備しましょう。今回作成するバナーは横300px、縦250pxのものですが、準備する画像は横600px、縦500pxの下のような画像を準備し、A〜Dの各エリアを順番にアニメーションにより表示させることになります。
そして、もう1つ最後に表示させるCTA(Call to Action)用の画像になります。こちらは、アニメーションの最後に、先ほどの画像を縮小させ全体を見せつつ、オーバーレイする形で真ん中にCTAを表示させます。こちらは、背景を透明にしたPNG画像を用います。
準備が面倒な方は下記の2つの画像をローカルにコピーして使ってください。
広告の制作開始
文章で説明しても、分かりにくいことと、画面キャプチャをたくさん利用しても分かりにくいと思いますので、制作手順を動画にまとめたものをYoutubeにアップしています。こちらを見て制作手順をイメージしていただければと思います。
動画は7分ちょっとなので、仕事の合間に見ることも容易かと思います。
プロジェクトの作成
Google Web Designerのメニューから「ファイル＞新しいファイル」を選択すると、新しいプロジェクトを作成できます。ここで、
- 利用環境
- ディメンション（実際には、画像サイズ）
- 名前
- 保存場所
- アニメーションモード
を指定します。設定値は、
| 項目 | 設定値 |
|---|---|
| 利用環境 | AdWords |
| ディメンション | 300x250（作成するファイルサイズに合わせて指定してください） |
| 名前 | 作成するバナーの名前, ここでは「sample」 |
| 保存場所 | ローカルの適切なファイルパスを指定 |
| アニメーションモード | クイック |
でいいかと思います。
アセット(画像)の取り込み
画像をGoogle Web Designerのプロジェクトに取り込みます。取り込むには、ローカルの画像ファイルをそのままドラッグ＆ドロップすれば、取り込みができます。ここでは、2つの画像ファイルを取り込んでいます。
おおまかにアニメーションの動きを設定する
シーンを追加しながら、各シーンで画像の配置を変更しながら、アニメーションの動きをおおまかに設定します。このとき同時に、アニメーションの動かし方であったり、アニメーションにかかる時間なども設定します。この時点では、ピクセルが少しくらいずれてしまっても、あとで微調整を行いますので気にする必要はありません。
作業中は、都度プレビューをしながら、現在のアニメーションの動きを確認しながら行いましょう。
コードを表示してピクセルを微調整する
おおまかなアニメーションの動きが完成したら、次は、ピクセル単位で微調整していきます。微調整には、作成されるHTMLファイルのソースコードを直接編集します。ソースコードを表示すると、
@-webkit-keyframes ... {
0% {
...
}
25% {
...
}
50% {
...
}
75% {
...
}
100% {
...
}
}のようになっている箇所が2箇所ほどあるかと思います。これがセットした2つの画像のアニメーションの設定データになります。
これらの中から、 top と left の行を探し出して、値を調整します。今回の場合、この値の数値を「-300」「-250」「0」「300」「250」のどれかもっとも近い値に設定してみてください。
この状態でプレビューしてみましょう。これでピクセルの表示位置は正しくなったはずです。
最後のシーンで片方の画像をズームアウトさせる
先ほど編集したHTMLのソースコードを再度開きます。編集箇所も先ほどと同じ箇所になります。ただし、今回は2つある画像のうち、片方の画像のみが対象になります。2つのうちどちらが対象かはコードを見れば分かるのですが、あまり詳しくない方はどちらかでやってみて、想定外の動きをしたら、戻してもう1つのほうで試してみる、といったトライアンドエラーでやってみてください。
今度は、「100%」のところに、
width: 300px;
height: 250px;を追加し、「0%」〜「75%」のそれぞれには、
width: 600px;
height: 500px;を追加します。これで、最後の100%の段階で、徐々にズームアウトしていき、画像サイズがちょうどになると思います。
CTAテキストをスライドインではなくフェードインにする
現在、CTAテキストは右からスライドインする形になっていると思います。スライドインでも形としては整っているのでこのままでいいという人は、これで完成ですが、ここでは、CTAテキストをスライドインする形ではなく、フェードインする形に変えてみようと思います(CTAが透明の状態から徐々に色が濃くなっていくアニメーション)。
これもHTMLのソースコード上での操作になります。先ほど編集していないもう一方のアニメーションを操作します。
「100%」のところに、
opacity: 1;を追加し、「0%」〜「75%」のそれぞれには、
opacity: 0;を追加します。これで徐々に透明度が変わっていきます。また、アニメーション開始時にCTAが広告エリアの右側にある状態ですので、「0%」〜「100%」のそれぞれに、
top: 0px;
left: 0px;を追加し、CTAの場所を広告エリアに移動させます。
これで、プレビューをしてみてください。最初に挙げたサンプルのアニメーションと同じ動きをするHTML5広告が作れたと思います。
パブリッシュと入稿
HTML5広告が作成できたら、画面下部のメニューから「パブリッシュ」を選択し、ローカルにパブリッシュしてください。ここで、ZIPファイルが生成されます。この生成されたZIPファイルを、Google AdWordsの管理画面で入稿することでAdWordsで利用可能になります。
アニメーション部分のソースコード
手作業で編集したアニメーション部分のソースコードの最終形は下のようになります。(...の部分は、作成する都度変化するので、コピペするときは注意してください。)
@-webkit-keyframes ... {
0% {
left: 0px;
top: 0px;
opacity: 0;
-webkit-animation-timing-function: ease;
}
25% {
left: 0px;
top: 0px;
opacity: 0;
-webkit-animation-timing-function: ease;
}
50% {
left: 0px;
top: 0px;
opacity: 0;
-webkit-animation-timing-function: ease;
}
75% {
left: 0px;
top: 0px;
opacity: 0;
-webkit-animation-timing-function: ease;
}
100% {
left: 0px;
top: 0px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
...
@-webkit-keyframes ... {
0% {
left: 0px;
top: 0px;
-webkit-animation-timing-function: ease;
}
25% {
left: -300px;
top: 0px;
-webkit-animation-timing-function: ease;
}
50% {
left: 0px;
top: -250px;
-webkit-animation-timing-function: ease;
}
75% {
left: -300px;
top: -250px;
width: 600px;
height: 500px;
-webkit-animation-timing-function: ease;
}
100% {
left: 0px;
top: 0px;
width: 300px;
height: 250px;
-webkit-animation-timing-function: linear;
}
}より簡単にHTML5広告を作るために
今回ここで作成したHTML5広告のプロジェクトをZIPファイルにまとめたものを下記のURLからダウンロードできるように設定いたしました。画像は変更することになると思いますが、このファイル内の画像だけ置き換えてGoogle Web Designerでパブリッシュすれば、同じアニメーションの広告ではありますが、より簡単にHTML5広告を始めることができます。
まとめ
今回紹介したHTML5広告を作れるようになると、いくつか変わったバリエーションのクリエイティブで広告を作ることも可能になります。 Google AdWordsには、テキスト広告とバナー広告だけでなく、今回紹介したHTML5広告であったり、他にもエキスパンド広告といったインタラクティブなクリエイティブ広告が使えます。ユーザーの印象に残りやすい広告を作るためにも、こういったダイナミックな広告の作成を検討してみてはいかがでしょうか？
