Blog
Webデザイン

早速、Google Web Designerを試してみた!

2013-10-01 11:20
この記事は約 2 分で読めます。

GoogleからリリースされたばかりのWebデザインツール「Google Web Designer」を簡単に試してみました。 このツールは、テキスト、描画ツール、画像要素、動画要素などのオブジェクトを配置して、タイムラインでアニメーション化することができます。作成したコンテンツはHTML5、CSS3、JavaScriptとして出力します。

サンプル

テキストを配置して、移動や回転など簡単なアニメーションをしてみました。
サンプルページ »
(出力されるhtmlファイルをそのままアップロードしています。)
以下に作成手順を紹介します。

作成手順

新しいファイルの作成

try-google-web-designer01
今回はGoogle広告のバナーを作成してみました。 まずサイズや広告配信先などを選択します。

テキストの入力

try-google-web-designer02
「テキストツール」で文字を入力し配置ます。 フォントの種類、サイズ、色が選択できます。

テキストを移動

try-google-web-designer03
まずは、下方向に移動させてみます。 タイムライン[+]をクリックして、キーフレームを追加します。 追加されたキーフレームのテキストを移動させます。これだけで最初に入力したテキストの位置から移動させた位置までのアニメーションが完成します。

テキストを回転

try-google-web-designer04
キーフレームを追加し「3Dオブジェクト回転ツール」で、X軸方向に180度回転させ、裏返しになるアニメーションを作成します。

テキストを回転&移動

try-google-web-designer05
移動と回転を同時にすることもできます。

公開(書き出し)

try-google-web-designer06
圧縮の有無、プレフィックスの有無(対応ブラウザの選択)などして、htmlファイルを公開できる状態で保存します。

おわりに

いかがでしたでしょうか。「Adobe Edge Animate」の簡易版といったイメージで、Web制作向けというよりも「誰でも簡単に動的なバナーやインタラクティブなページが作成できる」ツールと言ったところでしょうか。

SQUEEZE > Blog > Webデザイン > 早速、Google Web Designerを試してみた!
あわせて読みたい