【HTMLバナー制作に】無料デザインツールGoogle Web Designerとは

Googleの無料ツールは無数にあり、その多くが便利な機能を有しています。

その中でもGoogle Web Designerは、アニメーション付きのバナー広告といったリッチ広告を比較的簡単に作ることが可能であり、そのような機能を全て無料で利用することができます。

非常に便利な機能を備えているツールではありますが、ネットの情報はあまり多くないように見受けられました。

そこで、本記事ではGoogle Web Designerの基本的な情報から、使い方までを解説していきます。

Google Web Designer(以下GWD)は、2013年のベータ版からスタートしたデザインツールです。

GWDで制作される広告データはHTMLやCSS、JavaScriptといった言語で構成されていることが特徴です。

また、従来のバナーにアニメーションをつけた広告や、商品が360°に回転するSwirl広告(スワール広告)まで、インタラクティブな広告を制作することを得意としています。

このような機能が全て、無料です。

画像データのバナーと、HTMLなどの言語で構成されたバナーでは、大きな違いがあります。

1つは、従来のバナーよりもシステマチックに広告を運用できるという点です。

例えば、1枚の画像データで構成されたバナー広告では、その画像に1つのリンクをつけることしかできませんが、HTMLでは1枚の広告の要素を細かく分け、複数のリンクを設置することができます。

これにより、商品を複数表示しているバナーでも、それぞれリンク先を対応させることが可能になります。

また、複数表示している商品をユーザーの属性によって瞬時に切り替え、各項目ごとに「クリックされた回数」などのデータを取得するといったことも可能です。

2点目は、インタラクティブな広告を作ることが可能な点です。

gif画像でも動きのあるバナー自体は作ることができますが、ユーザーのタップやマウスホバーなどに対応して動くなど、インタラクティブな表現はHTMLバナーにしかできません。

また、アンケートのあるバナーを設置して、回答によってリンク先を変えるといったことも可能です。

製作者のアイデア次第で様々な機能を持ったバナーに変化させることができます。

以上のことは、HTMLバナーによって、従来の「アニメーションGIFバナー」、「FLASHバナー」、「動画バナー」の代替が可能であることを意味します。

リッチコンテンツはHTMLバナーでより機能的、かつ効率的になっていくのかもしれません。

ただし、現状のHTMLバナーでは、デザイン性を高めることが難しいとも言われています。

プロのグラフィックデザイナーにデザインされたような、余白のある洗練された広告自体がブランディングになっている企業などは、使い方の工夫が必要になるかと思います。

実際に簡単なアニメーション付きバナーを制作していきます。

まずは公式サイトからファイルをダウンロードします。

ダウンロードが完了してアプリを立ち上げたら、「新しいファイルを作成」を選択します。

その後、ファイル名に好きな名前を付け、ファイルの保存場所を選択します。

「環境」は作成したバナーを出稿する先を選びます。ここでは「Google以外の広告」を選びます。

「ディメンション」は複数から選ぶことができますが、「カスタム」を選択することで自分でサイズを指定することができます。

今回は一般的なバナー広告のサイズの300×250のサイズで作成します。

「アニメーションモード」は「クイック」と「詳細」に分かれていますが、実際の編集画面でもアニメーションモードは1クリックで切り替え可能なので、この時点ではどちらを選んでいただいても支障はありません。

準備が整ったら、編集画面で編集していきます。

使い方を把握するためのデモなので、内容はテキストと画像で構成したシンプルなものにします。

まずは、背景から用意していきます。

左側にあるツールバーの上から5番目の要素ツールをクリックして選択します。

要素ツールでは長方形の範囲を作ることができます。

範囲の色は右側にあるカラーパレットから選択します。

上側にメインの要素の範囲と、下側にクリックを訴求するボタンの範囲を用意しました。

次に、テキストと画像を配置していきます。

同じく左側のツールバーから「T」と書かれている部分がテキストツールなので、そちらをクリックします。

テキストツールを選択したら、画面左上からテキストのスタイルやフォントなどを選択することができます。

テキストのスタイルは、メインになる見出しには「h1」や「h2」などのhタグを使います。

標準のテキストであれば「p」タグを使います。

その他「SALE!!」などの細かい装飾的なテキストには「span」タグを使うイメージです。

それから文字のフォント、太さ、大きさ、色などを選択し、先ほどの要素の上に配置していきます。

続いて、画像を用意します。

今回は、アニメーションで動かすイメージがしやすい「指差し」の画像を用意しました。

自身のPCフォルダから、使用する画像を編集画面にドラッグすれば画像の追加ができます。

ここまでで、アニメーションで動かす前までの下地が完成です。

ここからアニメーションを作っていきます。

編集画面の下側がアニメーションを管理する場所になっています。

上のキャプチャー画面右側の赤枠で囲っている部分で「クイックモード」と「詳細モード」に切り替えることができますが、現状ではキャプチャー画面のようなクイックモードで作業を進めていきます。

まずは、キャプチャー左側の赤枠で囲っている「＋」ボタンを押して、タイムラインを追加していきます。

すると、全く同じ画面がコピーされます。

このコピーされた画面の要素を動かして、また画面をコピーして、要素を動かしていく、ということを続けると、パラパラ漫画のような感じで簡単にアニメーションを作成することができます。

アニメーションのコマの長さは下のキャプチャの赤枠部分の時間を調整することによって変更することができます。

編集画面右上にある「プレビュー」で確認をしながら、内容が問題なければループ処理をして、書き出しをします。

書き出しに向けて、ループ処理をします。

まずはアニメーションを「詳細モード」に変更します。

変更すると、上のような画面になります。

最初にキャプチャ右側にある赤枠のタイムラインを表しているバーを一番左まで持ってきます。

それからキャプチャ左の赤枠の右にある三角の「ラベル」のアイコンをクリックします。

すると、画面にタイムラインに同じようなラベルマークが追加されます。

次に追加されたタイムライン上のラベルを右クリックし、ラベル名を「loop1」と変更しておきます。

次の操作は、タイムラインのバーを一番最後に移動させます。

バーの移動を終えたら、赤枠ラベルアイコンの横にある「イベント」のアイコンをクリックします。

先ほどと同じようにタイムライン上にイベントのアイコンが追加されます。

同じくタイムラインのイベントアイコンを右クリックし、「マーカーにイベントを追加」→「タイムライン」→「gotoAndPlay」→「page1」→「OK」と選択していきます。

以上でループ処理が完了しましたので、プレビューで確認してみます。

最後にデータの書き出しをします。

GWDでは書き出しはパブリッシュという名称になっているので、画面一番右上のパブリッシュをクリックします。

パブリッシュボタンの右の小さな三角をクリックすると、パブリッシュする場所を選択できますが、自身のPCにデータを書き出す前提で進めていきますので、今回は「ローカル」を選択します。

あとは、パブリッシュ画面で「パブリッシュ」を選択するだけで書き出しができます。

パブリッシュをする際、「読み込みの遅延をスキップ」という部分を選択しておかないと、書き出されたデータが非常に重たくなるので、注意が必要です。

実際に「読み込みの遅延をスキップ」を押さずパブリッシュをすると、HTMLファイルを読み込んでからコンテンツが表示されるまで2、3秒のラグが生じましたので、ユーザーとしては遅く感じてしまうと思います。

※2021年6月30日追記
新しいファイルを作る際に「Google以外の広告」を選択していると、表示されない場合があるそうです。
表示がなければ、そのままパブリッシュします。

下のHTMLバナーが、GWDで制作したバナーです。

GWDはHTMLやCSS、JavaScriptが書ける人であればカスタマイズの可能性が広がります。

また、広告に限らず動きのあるWebページを作成することも可能です。

実際の動きを確認しながらコードを確認できるので、言語の勉強にも向いているツールかもしれません。

有料のデザインツールより気軽に始められるので、これからWebを学んでいく人にもおすすめのツールです。