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

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

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

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

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

Google Web Designerとは

1.jpg
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:ダウンロード

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

3.jpg
Google Web Designerの利用規約を確認し、問題なければ「同意してダウンロード」をクリックします。