グーグル製HTML5アニメーション作成ツールとして注目を集める「Google Web Designer」。本連載では、全4回にわたってGoogle Web Designerについて紹介します。
4回の連載で、Google Web Designerのインストールや基本操作を学び、最終的には簡単なアニメーションバナーから、より動きのあるバナーの作成を目指します。
※本連載は、Windows環境での作業をベースに説明を進めていきます。
Google Web Designerでできること
Google Web Designerは、HTML5を使った広告やアニメーションを直感的に作成できるオーサリングツールです。2013年9月30日にグーグルが発表し、現在はベータ版（2014年4月25日時点の最新バージョンは1.0.5）がグーグルの公式サイトから無料でダウンロードできます。
 |
|---|
Google Web Designerはどんなツールなのか？グーグルのヘルプページには、以下のような説明があります。
“ HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。”
つまり、Google Web Designerを使えばHTML５やCSS3、JavaScriptなどの専門的な知識とコーディングスキルがない人でも、デザインビューとタイムラインを使ってアニメーションコンテンツを作成できるのです。
Google Web Designerで作成したコンテンツは、クリック1つでHTML５/CSS3、JavaScriptのコードに変換できます。出力されたHTMLファイルは編集が可能で、コードを追加してより複雑な動きをするように、後で調整もできます。
 |
|---|
| Google Web Designerで作れるバナーの例 |
また、Google Web DesignerはAdMobとDoubleClickのHTML5広告に対応しており、作成したバナーはディスプレイ広告としてすぐに入稿できます。
http://ascii.jp/elem/000/000/893/893171/
─情報元：ASCII.jpサイト様─
