「Google Web Designer」は、HTML5を使ったウェブコンテンツを簡単に作成できるオーサリングツールです。Googleが2013年秋にベータ版を無料リリースしました。Googleは、このツールの主な目的は、広告主たちがクロスプラットフォームの広告を簡単に制作できるようにすることだとしています。

従来、アニメーション作成といえばAdobeのFlashが定番でした。しかしスマートフォンの普及につれて、下記の理由から徐々にHTML5への移行が進んでいます。
・iPhone OSがFlash非対応
・AdobeがAndroid向けFlash Playerのサポートを終了

HTML5はいよいよ今年2014年に使用の勧告が予定されており、一層普及につれて動きだすと予想されます。そこでGoogle Web Designerのリリースから約半年、遅ればせながら私も使ってみましたので簡単に使用感をレビューしたいと思います。今回は、このブログのサイドにも表示されている、弊社サービスSynergy!のバナーをHTML5のアニメーションバナーにしてみたいと思います。

※2018年4月、アニメーションバナーを差し替えて内容の見直しを行いました。

このバナーをHTML5で動かしてみます

1.ダウンロード＆インストール

ダウンロードはGoogle Web Designerのサイトから行います。ちなみに、このサイト上にあるアニメーションも実際にGoogle Web Designerを使って作成されているようで、サイト下部に「Animations on this site were created using Google Web Designer」という記述がありました。

こちらのサイトは英語ですが、ヘルプページは日本語版もあります。ヘルプページを一通り読めば、だいたいの機能がわかると思います。インストールについては画面の案内に従って進めば簡単なので割愛します。

2.新規ファイルの作成

起動したら、まずは新規ファイルを作ります。「新しい空のファイルの作成」に表示されるウィンドウで「広告」の「バナー」を選び、サイズを選択。一般的なバナーサイズの他に、オリジナルのサイズでも作成可能です。

下にある「アニメーションモード」では、「クイック」か「詳細」を選択できます。「詳細」を選ぶとキーフレームを使ったタイムラインでのアニメーション作成が可能なので、より細かな動きをつけたい時はこちらを選択してください。

3.背景色変更

右側にある「プロパティ」の「ページ」内にある「塗りつぶし」から色を変更します。プロパティでは作業領域のサイズ変更もできます。
シックなインターフェイスなのはいいですが、フラットデザインすぎて、どこを押せばいいのか迷ってしまう時もありますね。

4.要素を配置-テキスト

ベースの準備が整ったところで、ここからが本題。さっそく要素を配置していきます。
まずはバナーのタイトルを入力。左のメニューバーから「テキストツール」を選択し、文字を入力します。

また、上部にある「フォント名」から好きなフォントに変更できます。ここで「あれ？新ゴとかないけど？」となってしまったのですが、なくて当たり前。なぜならこれはHTMLですから！ついついPhotoshopと同じ感覚に陥りがちなのですが、これはどちらかというとDreamweaverに近いツールなのです。実際、フォントの左に「タグ名」欄があり、ここで要素をh1やdivに変更できます。

元データのバナーとデザインを全く同じに合わせるなら、タイトル部分を画像にして読み込む必要がありますが、今回はあえてテキストのままで進めます。

5.要素を配置-画像

次に画像を配置していきます。画像は書き出したものをあらかじめ用意しておき、それを作業領域にドラッグしていきます。

全部を配置し終わるとこんな感じになりました。それぞれh1、img、pというタグになっているのがわかります。

6.アニメーションの設定

作業も佳境です。ここからアニメーションをつけていきます。
下部のタイムラインで個々の要素にキーフレームを追加していきます。これはFlashを使ったことがある人なら直感的に使えると思います。

個々の要素にIDをつけておくと、どの要素がどのレイヤーなのかわかりやすいのでぜひ設定しておきましょう。IDは右側のプロパティで設定するか、レイヤーの空白部分をダブルクリックすると入力できます。

メニューバーにある「プレビュー」をクリックするとChrome、Firefox、IEから好きなブラウザで確認できるので、随時チェックしながらアニメーションをつけていきます。

7.リンクの設定

アニメーションが完成したら、最後にバナー全体をクリックできるようリンクを設定します。
右側の「コンポーネント」にある「タップ領域」を作業領域へドラッグします。
追加されたタップ領域は「プロパティ」でサイズをバナーサイズと同じにし、ぴったり重なるように位置を調整します。

次に右側の「イベント」ボタンをクリックし、リンク設定を行います。

8.公開

作成が完了したら、タイムラインの上にある「公開」ボタンをクリックしてデータを書き出し、サーバーにアップします。
完成したのがこちら。（アニメーションが始まるまで2、3秒時間がかかります。）

今回は、タイトル部分にあえて画像ではなくテキストを使ったので少しチープな感じがしますが、数時間で動きのあるバナーを作成することができました。このバナーはHTMLなのでテキストを選択することも可能です。

テキストを選択できます

CSSを無効にした状態

Chrome、Firefox、IEではほぼ同じように表示されました。ただ、Retinaディスプレイに対応した画像を使っていないため、iPhoneで見ると画像がぼやけています。

iPhoneで見た場合

ここで1つ注意ですが、一度公開したHTMLファイルはGoogle Web Designerで再編集できません！編集用のHTMLファイルを上書きしないようにしましょう。

まとめ

冒頭に書いた「クロスプラットフォームの広告を簡単に制作」という言葉通り、数時間でスマートフォンでも閲覧可能なアニメーションバナーを作成することができました。まだまだ改善の余地はありそうですが、このような高機能なツールを無料でリリースするあたり、オンライン広告でのHTML5の活性化をねらうGoogleの本気度が感じられますね。正式版がリリースされたら改めてレビューしたいと思います。

※この記事は2014年4月3日公開時点の情報です。掲載情報と最新情報が異なる可能性がありますのでご注意ください。
※2018年4月、アニメーションバナーを差し替えて一部内容の見直しを行いました。