Google+ もご覧ください
ユーザーアイコン

ピックアップ

Google Web Designer - HTML5アニメバナーをビジュアル的に作成

Google Web Designer - HTML5アニメバナーをビジュアル的に作成

Googleから面白いソフトウェアがリリースされました。HTML5ベースのアニメーションをサポートしたWebオーサリングツールGoogle Web Designerです。

DoubleClick、AdMobなどに対応した広告バナーの作成や任意のサイズでのHTML5アニメーションがビジュアル的に作成できます。

インストール

ダウンロードはGoogle Web Designerの公式サイトから行えます。現在、WindowsとMac OSXに対応しています。今回のレビューはMac OSX版について行います。

レビュー

起動画面
起動画面

何はともあれまずは起動してみます。

メインウィンドウ
メインウィンドウ

新規作成
新規作成

新規でファイルを作成した場合、Google広告か空のファイル作成のいずれかが選択できます。基本的には同じですが、Google広告を選択した場合はHTMLテンプレートが使われる仕組みです。

作成画面
作成画面

こちらがメイン画面です。アニメーションモードはクイックにしてあります。この場合、シーンごとの設定を行うだけでHTML5ベースのアニメーションが生成されます。

文字を追加しました
文字を追加しました

シーンを追加して文字を右に移動させます
シーンを追加して文字を右に移動させます

これだけでアニメーションが作成完了です。再生ボタンを押すと、文字が実際に動く様子が確認できます。

生成されたHTML
生成されたHTML

コードモードに切り替えれば生成されたHTMLを確認できます。より細かなカスタマイズも可能です。

ブラウザプレビュー
ブラウザプレビュー

プレビューを押すとChrome/Safari/Firefoxといったブラウザで表示を確認できます。HTML5対応のブラウザであれば問題なく表示できるはずです。

3D軸表示
3D軸表示

さらに3Dの軸を表示して画面を三次元に展開させられます。

ぐるっと回転
ぐるっと回転

Z軸方向のアニメーションも可能
Z軸方向のアニメーションも可能

画面全体のアニメーション作成
画面全体のアニメーション作成

Googleの広告枠ではない形でのアニメーション作成もできます。さらに詳細モードではキーフレームを随時追加してアニメーション化できます。

背景色を変更
背景色を変更

プロパティを変更して背景色をタイムラインに沿って変化させられます。

イベントの追加
イベントの追加

追加したオブジェクトにはイベントの設定ができます。クリックして別なアニメーションを実行と言った処理ができたり、カウンタやタイマー連動もできます。

画像を貼付けてアニメーションの素材にできます
画像を貼付けてアニメーションの素材にできます

それを3Dとして回転させることもできます。Flashバナーレベルのアニメーションであれば十分こなせそうです。

画像の3Dアニメーション
画像の3Dアニメーション

紹介

Google Web DesignerではHTML5ベースのアニメーションが生成されるとあって、デスクトップはもとよりタブレットやスマートフォンでも使えるアニメーションが生成されます。シーンを追加する簡単なモード、キーフレームを追加する詳細なアニメーション作成が行えるモードの二つが用意されています。

3Dアニメーションのサポート、画像やテキスト、イラストレーションツールを用いたドローができるようになっています。さらにHTMLなので出力されるHTMLをさらに修正したり、サードパーティのライブラリと組み合わせたカスタマイズもできます。

HTML5対応ブラウザ向けの広告バナーはもちろん、Webサイト上でアニメーションを実現する際にも便利に使えそうなソフトウェアです。

Google Web Designer

Google web designer

記事をリクエストする

関連記事

コメント