ECサイトなどを運営していると急に商品広告のバナーが必要になることなどが頻繁にあります。
そのような時、静止画像のバナーであれば比較的簡単に作成できますが、よりクオリティの高いバナーやアニメーションバナーが必要な時もあります。
今回は無料で簡単にアニメーションバナーを作成できる「Google Web Designer」というツールをご紹介いたします。もくじ
◆Google Web Designerとは
Google Web Designerとは、コーディングが不要でテキストツールや描画ツールを使って広告が作成できる無料のツールです。
簡単にアニメーションを付けることもでき、HTML5・CSS3・JavaScriptのいずれかの形式で出力することができます。
Google広告サービスに対応しているバナーサイズがテンプレートとして登録されていているので簡単にバナーを作成することができます。
カスタム機能もあるのでバナーサイズを自由に変更することも可能です。
◆Flash形式のディスプレイ広告の廃止
これまで「Adobe Flash」で作成することも多かったアニメーション広告ですが、デバイスによっては表示ができないといった問題があり、2017年1月以降にFlash形式のディスプレイ広告が廃止されました。
代わりにFlash形式と同様に動きのある広告にはHTML5の利用が推奨されています。HTML5で入稿すればデバイスが違っても広告が表示されるようになります。
Google Web Designerでは、HTML5広告に対応したアニメーションバナー広告を簡単に作成することができます。
◆Google Web Designerの基本的な使用方法
【Google Web Designer】
https://webdesigner.withgoogle.com/
まず、Google Web Designerを開き「Web Designer ベータ版」をダウンロードします。
新しいファイル＞タイプ＞HTML と選択し、名前をつけて新規ファイルを生成します。新規ファイルを開くと画面が出てきます。
中央の大きな領域ワークスペースで、バナー作成やコード編集を行っていきます。
作成画面には下記のメニューバーがあります。
1.ツールバー
画像の切り取り・回転・縮小・拡大などができます。
2.ツールオプションバー
操作中のツールのオプションメニューが表示されます。
3.タイムライン
アニメーションの動作を確認することができます。
4.パネル
プロパティやテキストのサイズ、フォント、カラーコードの確認、CSSの情報を確認することができます。
5.ビューバー
プレビュー表示やデザインやコードの表示ができます。
基本的な使い方は、利用したい画像を選んでドラッグ＆ドロップでGoogle Web Designerに貼り付けます。
必要に応じてテキストの挿入やカラーの調整などを行います。
アニメーションを追加するときはタイムラインを開きタイムラインの「＋」をクリックします。
「＋」を開くと画像を複製できるので、複製した方の画像の要素を編集すれば、自動でアニメーション化します。
photoshopやillustratorのグラフィックソフトを扱ったことがある人であれば、作業画面が似ているのである程度使い方が簡単にわかるかもしれません。
◆まとめ
Google Web Designerを使えば今までハードルが高いと思われていたアニメーション広告も簡単に作成することができます。
無料で使えるツールなのでぜひ試してみてはいかがでしょうか。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞