SNSやWebサイトの片隅に表示されている、動きのあるアニメーションバナーを見たことはありませんか？
以前はアニメーションバナーといえばFlashやGIFアニメで作成されていました。
しかし現在Googleは動きのあるバナー広告について、さまざまなディスプレイサイズで最適な表示ができるHTML5を利用するように推奨しています。
とはいえ、「HTMLを利用したアニメーションバナー広告の作り方がわからない」という方もいるのではないでしょうか。
そんな方のために、この記事では手軽にアニメーションバナーを作成できる無料ツール『Google Web Designer』をご紹介します。
ぜひ最後までご覧ください。
Google Web Designerは直感的な操作でHTML5広告やバナーを作成できる、Googleが提供している無料のパソコン用アプリです。
バナーは自動的にHTMLで構築されるため、レスポンシブのディスプレイ広告をコーディングすることなく作成できます。
Google Web Designerでは
このようなツールを利用してバナーを作成し、タイムライン機能を使ってアニメーション化します。
直感的に操作しやすく、デザインやコーディングの知識がない方でもアニメーションバナーを作成できるツールです。
Google Web DesignerはGoogle広告の作成に特価しています。
豊富なテンプレートでは広告で利用可能なバナーサイズがあらかじめ設定されており、書き出しの際にはダイレクトにGoogle広告へ入稿可能です。
またGoogle広告で利用可能か検証してくれる『広告検証ツール』では、作成中のバナーをリアルタイムでチェックしています。
例えば「ファイルサイズが150KBを超えています」と改善点が表示されるので、いざ広告を入稿してから登録できずに作り直しというムダを省けるでしょう。
手早く広告を作成して入稿できますので、広告を高回転でテストしたい方・複数バージョンの広告を素早く作成したい方におすすめです。
Google Web Designerの大きな特徴は以下の3つです。
それぞれ詳しくご紹介していきます。
アニメーション作成のタイムライン機能には2つのモードがあります。
【クイックモード】
コマ送りのパラパラ漫画のように静止画を作成し、コマをつなげて滑らかなアニメーションを作成
【詳細モード】
タイムラインでレイヤーごとに要素の大きさや位置を指定し、アニメーションを作成
Google Web Designerではバナー広告を効果的に見せられるアニメーション機能が充実しています。
しかし複雑な動きや演出が必要なクリエイティブの場合、物足りなさを感じるかもしれません。
Google Web Designerは、プラットフォームや端末を問わず動作する形式で自動的に構築されるため、HTML・CSS・JSといった各コードファイルを自由に編集できます。
入力内容を自動で保管してくれるオートコンプリート機能により、コードの入力ミスを防いでくれるので安心です。
バナー制作完了後は、画面右上の『パブリッシュ』からHTML・CSS・JS・画像ファイル一式をダウンロードできます。
Swirlとは、Googleが2019年にベータ版を公開し、2020年より全世界で利用可能になった広告のフォーマットです。
広告内の3D画像を自由に拡大や回転できるため、商品の全体像を確認したり世界観を楽しんだりと、いままでの広告ではできなかったユーザー体験を提供できることから注目が集まっています。
Google Web Designerなら作成済みの3D画像をアップロードして、テキストや背景といった周辺のデザインをカスタマイズするだけで高品質な3D広告を作成可能です。
➡️ Create 3D Immersive Ad Experiences on Display & Video 360
3D広告制作はむずかしいと考えていた方も、無料ツールのGoogle Web Designerなら第一歩を踏み出しやすいのではないでしょうか。
ここではGoogle Web Designerを使ってアニメーションバナーを作る5STEPをご紹介します。
順番に解説していきます。
公式サイトGoogle Web Designer にアクセスし、『Web Designerをダウンロード』をクリックしてください。
表示される規約に同意してダウンロードボタンをクリックすると、お使いのパソコンOSに合わせたアプリがダウンロードされます。
ダウンロードしたものをインストールして、アプリを起動すれば準備完了です。
Google Web Designerではゼロから自由に広告を作成できますが、今回はテンプレートギャラリーから選んで作成していきます。
テンプレート選択画面です。豊富なテンプレートには対応しているプラットフォームやレイアウト、サイズといった必要な設定が揃っています。
自分が作りたい広告に合わせたテンプレートを選んでください。
選んだテンプレートから画像やテキストを変更してカスタマイズしていきましょう。
制作画面を簡単にご紹介します。
①：画面左はペンツール・シェイプ・テキスト・画像・3Dオブジェクト・カラーピッカーが並んだツールバーであり、上部には選択したツールのオプションが表示されます。
②：作成しているバナーが広告として利用できるか、リアルタイムで検証してくれるツールです。テキスト内容や表現内容については判断できませんので注意が必要です。
③：アニメーションのタイムラインエリア。アニメーションの詳細設定もここからできます。
④：カラー設定・要素のレイヤー管理・要素のプロパティ設定エリア。ズームイン・アウトの設定が数値で手軽に変更できます。
画像を変更する際は制作画面にドラッグするだけでOKです。
バナーのデータサイズが大きくなると広告に利用できないことから、データサイズが大きい画像は警告が表示されてアップロードできません。画像サイズを小さくしてからアップロードしてください。
Googleフォントからお好きなフォントを選んでテキストに利用できます。
テンプレートを利用した場合、あらかじめ設定されたアニメーションがタイムラインに表示されています。
動作時間を変更、inやoutの変更といった詳細な動きをクリックしていくだけで設定可能です。
作成したバナーの確認をするときは、画面左上の『プレビュー』をクリックしてブラウザを選択してプレビューしてみましょう。
作成時に自動で選択されたすべてのサイズ・任意の単一サイズでプレビュー表示されます。
広告で必要なサイズにおいて、実際にどのように表示されるのかをチェックしてください。
書き出しの前に、コードをチェックしてみましょう。
画面左上の『コードビュー』をクリックすると、作成したバナーのコードがすべて表示され、編集可能です。
コーディング知識がある方なら、この画面からコードを調整してください。
書き出しは画面左上の『パブリッシュ』をクリックします。
以上の保存方法から選択して、必要な設定にチェックを入れて書き出し完了です。
クリックひとつでGoogleの広告管理システムである『ディスプレイ＆ビデオ360』や『キャンペーン マネージャー 360』との連携が可能で、そのまま広告に手軽に入稿できます。
他のツールにはないGoogle関連ツールとの連携しやすさは、広告のクリエイティブを多く作成する方には大きなメリットになります。
しかしデザインツールをさわったことがない初心者の方の場合、使い方を覚えるためには多くの時間が必要です。
直感で操作できる多機能なツールですが、多機能であるために複雑でわかりにくいといった面があります。
いきなり本番ではなく、練習用のバナーを作成してツールに慣れることをおすすめします。
Google Web Designerを使うことで、非デザイナーの方でもテンプレートを利用して手軽にアニメーションバナー作成できます。
しかし、効果の出やすい広告バナーにはデザインの知識も必要です。
配置や要素のバランス、色や形といったデザインの規則や心理的働きを考えて、クリックしてもらいやすいバナーを作成しましょう。
集客に効果を出したい場合は、やはりデザイン知識のある方が作成することをおすすめします。
＼一流デザイナーのスキルが身に付く／
クリエイティブを作成するツールは有料・無料を問わず数多くあります。
それぞれ特徴や強みがありますので、作成の目的や環境に合わせてツールを選びましょう。
Google Web Designerは便利なテンプレートから広告入稿の導線まで整っており、Google広告に特化しています。
Google広告に利用するアニメーションバナーや3D広告が必要な際には、Google Web Designerを取り入れてみてはいかがでしょうか。
