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

ネットショップを運営していると、商品広告のバナーが急に必要になることがあります。普段はデザイナーやコーダーに依頼しているものの、納期が短いことで負担をかけてしまったり、出来上がりのイメージを上手くすり合わせられなかったりといった課題を感じている方もいるのではないでしょうか。

今では画像加工サービスも多く提供されているため、バナー作成の知識や技術がなくても、画像素材を組み合わせた静止画像のバナーであれば、簡単に作成できるでしょう。

しかし、「よりクオリティの高いバナーを作りたい」「Googleの広告サービスに使うバナーを作りたい」場合は、バナー作成ツール「Google Web Designer」がオススメです。

「Google Web Designer」は、デザインやコーディングの專門知識がなくても、無料で簡単にアニメーションバナーを作成できます。また、Googleの広告サービスを利用する場合は、バナーサイズがテンプレート化されているため手間もかかりません。

今回は、「Google Web Designer」の使い方を解説します。

Google Web Designerとは

Google Web Designer

「Google Web Designer」とは、デザインやコーディングの知識や技術がなくても、無料で簡単に広告やバナーに使える画像を作成できるツールです。アニメーションも作成できることが大きなポイントです。

作成後は、HTML5、CSS3、JavaScriptの形式で出力できます。また、提供元でもあるGoogle社の広告サービスに使えるバナーサイズがテンプレートとして登録されているため、必要な大きさに合わせてすぐに作成できます。

Flash広告からHTML5広告へ

アニメーション広告といえば、これまでは「Adobe Flash」で作成するイメージが強かったかもしれません。

しかし、Flash形式のバナーはデバイスによっては表示できないといった問題がありました。Googleでは2017年1月2日から、Flash形式のディスプレイ広告の掲載ができなくなっています。

その代わりに、デバイスが違っても表示できるHTML5での広告入稿が推奨されています。

参考：
Google display ads go 100% HTML5|Google+

Googleで広告を出稿している方は、HTML5広告の作成方法を覚えておくと良いでしょう。

Google Web Designerでアニメーションバナーを作成しよう

今回は、Google Web Designerを使ったアニメーションバナーの作成方法を、3つのステップに沿って解説します。

STEP1:ダウンロード
STEP2:画像作成
STEP3:アニメーション

STEP1:ダウンロード

「Google Web Designer」にアクセスします。「Web Designer ベータ版をダウンロード」をクリックしてください。

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:アニメーション

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

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

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

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

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

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

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

まとめ

作成のハードルが高い印象のアニメーション広告も、「Google Web Designer」を利用することで、無料で簡単に作成できます。

静止画のバナーはもちろん、画像やテキストを動かしたいサイズや方向にパラパラ漫画のように編集するだけで、なめらかなアニメーションができます。

始めは「クイックモード」で練習し、慣れてきたら「詳細モード」でより自由度の高い作成に挑戦してみてもいいでしょう。HTMLとCSSを使えば、より高度な編集も可能です。

手軽なバナー作成ツールを探している方は、一度試してみてはいかがでしょうか。