Google Web DesignerはWindows/Mac OSX用のソフトウェアです。

これまでアニメーションできるバナーと言えばFlashで作られてきました。しかし時代はHTML5/JavaScript/CSS3です。そこでGoogleが開発したのがGoogle Web Designerです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.42.14.1381146458.png)
バナーを作ります。ダブルクリックやAdMobなどに対応したサイズを選んだり、一から自由なサイズで作成もできます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.43.18.1381146463.png)
これがキャンバスです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.44.06.1381146474.png)
文字を追加しました。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.44.49.1381146482.png)
シーンを追加して文字を移動します。これだけでアニメーションが完成です。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.47.04.1381146493.png)
作られたHTML5のコードです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.47.17.1381146502.png)
Webブラウザでプレビューもできます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.47.41.1381146510.png)
3D軸を使えばさらにZ軸での回転もサポートされます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 11.50.26.1381146520.png)
奥行きをもったバナーも作成できます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-01 12.01.44.1381146528.png)
イベントの設定も自在です。

Google Web Designerは主にGoogleの提供する広告配信サービス向けですが、全くの新規でアニメーションするサイトを作成することもできます。CSS3/JavaScriptを使って実現しており、HTML5をサポートしたブラウザであればそのまま動作させられます。

Webバナー、Webアニメーションを作成するためのオーサリングツールとしてかなり使えるのではないでしょうか。Flashのようにタイムラインベースはもちろん、シーンを追加するだけの簡易的アニメーションも作成できます。

もちろん作成したアニメーションはそのまま使うことも、JavaScriptを使ってさらにカスタマイズさせることもできます。既存のWebサイトコンテンツと連携させる形にもできるでしょう。新しいアニメーションの世界が広がりそうです。

Google Web Designer