「Google Web Designer」で無料・簡単にアニメーションバナー作成！

STEP2:画像作成

まずは画像から作成しましょう。
今回は、Google AdWords広告のバナーを作成します。

「新しいファイルを作成」をクリックします。

バナーの名前や保存先のファイル、バナーサイズなどを先に設定します。Googleの広告に利用する場合は、「環境」を選択することで、初めから広告サイズに適した設定ができます。

設定できる広告の種類は以下の通りです。

・DoubleClick
・AdMob
・AdWords
・Google以外の広告

「アニメーションモード」は、「クイック」と「詳細」を選択できます。「クイック」はアニメーションのシーンごとに作成でき、「詳細」では画像の素材ごとにアニメーションを作成できます。

デザインの知見がある場合、より高度なバナーを作成したい場合は、「詳細」を選択すると良いでしょう。今回はクイックモードで解説します。

設定が全て完了したら、「OK」をクリックします。

バナーの作成画面が開きます。

基本機能

作成画面では、大きく5つのメニューバーがあります。

1.ツールバー
2.ツールオプションバー
3.タイムライン
4.パネル
5.ビューバー

1.ツールバー

ツールバーでは、作成する画像の切り取り・回転・縮小・拡大などの基本的な操作ができます。

2.ツールオプションバー

ツールオプションバーでは、操作中のツールのオプションメニューが表示されます。

3.タイムライン

タイムラインでは、アニメーションの動作を確認できます。「クイックモード」ではシーン単位、「詳細モード」では要素単位での作成が可能です。

4.パネル

パネルでは、プロパティ、テキストのサイズやフォント、カラーコードやCSSの情報を確認できます。パネル自体はサイズを変えたり、不要なときは閉じたりすることもできます。

5.ビューバー

ビューバーでは、デザインやコードの表示、プレビュー表示ができます。

参考：
Web Designer のインターフェース|Google Web Designer ヘルプ

利用したい画像をドラッグ＆ドロップでGoogle Web Designerに貼り付けます。

上記画像のコマンド「3Dオブジェクト回転ツール」を選択すると、縦軸（赤）、横軸（緑）、回転軸（青）の方向に画像を動かせます。

画像を配置したら、次にテキストを挿入してみましょう。
ツールバーから「テキストツール」（画像赤枠）を選択し、ツールオプションバーでフォントやサイズ、カラーを調整します。

画像とテキストを全て配置しました。それぞれの要素には点線の枠があり、移動・拡大・縮小ができます。

STEP3:アニメーション

次に、アニメーションを追加してみましょう。

タイムラインの「＋」をクリックすると、画像を複製できます。

複製した画像の要素を編集すると、前画像から変化した箇所が自動でアニメーション化します。今回は、文字の拡大・縮小と、ロゴ画像を動かすアニメーションを作成します。

タイムラインの画像の複製を繰り返し、パラパラ漫画のように動きを加えていきます。

途中で仕上がりを確認したい場合は、「プレビュー」を確認できます。

完成したら、「ファイル」をクリックします。

用途に応じたファイル形式で保存しましょう。