2013年10月02日

Google Web Designerを使ってみたよ

9/30公開されたGoogle Web Designerを早速使ってみました。
このツールの目的は「広告主がクロスプラットフォームの広告を簡単に制作できるようにすること」だそうですが、HTMLファイルなども作れるのでいろいろと応用が効きそうです。

まずはダウンロード


ダウンロードは特設ページ(http://www.google.com/webdesigner/)からどうぞ。
Windows 7/8、Mac OS X 10.7.x以降に対応しています。
ドキュメントはGoogle Web Designer Helpにあります。

そして使ってみる


Google Web Designer
これを、アニメーションさせて・・・
Google Web Designer
こうなる!

起動時に、バナー広告を作るか、HTMLファイルを作るか選択します。
描画ツールやテキスト、3Dオブジェクトなどを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化することが可能です。
作成したコンテンツはHTML5、CSS3、JavaScriptとして出力できます。
AdobeのEdge Animateとか、あのあたりのツールと酷似していますが、出来上がったソースを見てみたらかなり綺麗でわかりやすくて、一昔前に比べて進歩したなーと思いました。

ちょっと、Youtubeの解説画面と比べるとタイムラインの表示が異なっていて、どこかに隠れているのかと思ったのですが、β版だからかもしれないですね。
ちなみにタイムラインは、一番下のパネルで、+のパネルを押して新しいフレームを追加していきます。

コンポーネント


普通のアニメーション機能と別に特筆すべきは、コンポーネント機能です。
コンポーネントは、右側の機能をまとめたパネル内にあるんですが、HTML作成モードだとグレーアウトしていて、使えません。
バナー作成モードのときに使えるようですが、カルーセルとか地図とかHTMLページ内に埋め込みたいときあるよなーと思うのですが、β版だからかもしれません。
コンポーネントの使い方は、使いたいコンポーネントをステージにドロップし、プロパティを設定すれば終わり、という非常に簡単なものです。
360°ギャラリーとか、スワイプ対応ギャラリーとか、スマホでも使えそうなコンポーネントがあります。
コンポーネントの使い方
カルーセルに鏡面表示のオプションなんかついているのもありがたいです。

その他


細かいところなんですが、これいいなーとおもったのが、オブジェクトのサイズを調整する方法です。
Adobe系のアプリと違って、角にマウスをあてて、ドラッグすればサイズが変わる・・・というものではなく、プロパティからピクセルでサイズを指定しなければならないのですが、このとき、サイズを入力するところからマウスをドラッグすると、それに応じてステージ内のオブジェクトのサイズが変わるようです。
位置、サイズの移動方法
まぁ角を引っ張ってくる方法と、両方使えるとさらに便利なんですが。

まとめ


こういうツールはどれもそうですが、サイトを作るという目的で使うには適していません。
あくまでアニメーションを簡単に作成したい、JSできないけどインパクトがある機能を付けたい、というときにコードを引っ張ってくるというのが最適な使い方かな、と思います。
そういう意味では本来のGoogleWebDesignerが示している「バナーを作る」ツールというポジションは正しいのかなと思います。

・・・というわけで、以上、簡単ではありましたがレビュー報告でした。
タグ:google web designer
posted by BigMoonEz at 11:54 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする