Google Web Designerを使って動くバナーを作成してみよう！

Google Web Designerでできること

Google Web Designer（GWD）は、HTML5ベースの動くバナーやインタラクティブなコンテンツを作成できる無料ツールです。
比較的簡単に編集ができるので、「少し凝った動きをつけたい」というデザイナーやマーケターに最適です。

ツールの詳細、制作事例はこちらの記事でもご紹介しております。

タップやホバーで動く広告？Google Web Designerで作るインタラクティブバナーの制作事例とメリット

Re:ProS メディア

この記事では、実際に手を動かしながらバナーを作成する手順を解説します。

バナーを作成する

土台を選ぶ

• 0から作る場合
  • 「ファイル」→「新しいファイルを作成」を選択。
  • 広告の種類（バナー、動画など）や、ターゲットとなる広告プラットフォーム（Google広告、Display & Video 360など）を指定します。
    

• テンプレートから作る場合
  • あらかじめ動きが組み込まれたサンプルを利用することができます。サイズや色、画像を差し替えるだけで良いのでおすすめです。
  • 「ファイル」→「テンプレートを使用」を選択。
    
  • 使いたいテンプレートを「選択」→ 左のオプションで保存場所やサイズの指定をして「作成」
    

編集する

デザインビューで編集する

PhotoshopやIllustratorのように、キャンバス上で画像を移動させたりテキストを入力します。
マウス操作だけでなく、右側の「プロパティ」から、数値で細かく調整することも可能です。

コードで編集する

画面右上の「コードビュー」に切り替えると、直接HTML/CSS/JavaScriptを記述できます。

基本的にはWebサイトの実装と変わりませんが、広告出稿する場合は、別途適切なタグを利用する必要があります。

Google広告のプラットフォームと連携し、バナーを正しく機能させるための専用タグです。

• 一例
  • <gwd-image>: 画像を最適に表示する
  • <gwd-exit>: バナーをクリックしたときに「どのURLに飛ばすか」を指定する

公式が展開している利用可能タグ一覧は見当たりませんでした。使えるコンポーネント一覧のURLがあるので、デザインビューで設置してみて、タグを取得すると良いかと思います。

コンポーネントについて – Google Web Designer ヘルプ

デザインビューとコードビューの対応

デザインビューとコードビューは同期しているため、どちらで編集しても問題ないです。

機能	コードビュー	デザインビュー
イベントの登録	scriptタグで記載	イベントを登録したいパーツを右クリック→「イベントを追加」 →モーダルに沿って設定を進めることで登録ができます。
イベント一覧	scriptタグで確認	「イベント」にまとまっています。 デフォルトでは左のサイバーに設置されています。
スタイルの修正	styleタグ	「カラー」「プロパティ」から対応可能です。 デフォルトでは右に配置されています。
画像の設置	パスを指定	「ライブラリ」からドラッグアンドドロップで挿入できます。 ライブラリメニューはデフォルトでは右に配置されています。

作成したバナーを確認する

エラーがないかを確認する

デザインビューに切り替えると、「広告検証ツール」でエラーがないかを確認することができます。
エラーが出ていると、広告を入稿できない可能性が高いです。

• 一例
  • パスが間違っている場合
    • ローカルの画像のソースがありません
    • 無効なURLです
  • HTMLのタグや記述が間違っている場合
    • HTMLの形式は適切ではありません

動きを確認する

「プレビュー」で、実際のブラウザで動きを確認することができます。

1. 「プレビュー」ボタンを押す
   • 画面右上のボタンをクリックすると、パソコンにインストールされているブラウザが自動で立ち上がります。
2. 「サイズの表示」で絞り込む
   • レスポンシブ広告を作っている場合、多くのサイズが一度に表示されます。
   • 確認したい特定のサイズ（300×250など）だけに絞ってチェックするのが効率的です。

   

作成したバナーを書き出す

完成したら、最後に書き出し（パブリッシュ）です。
上部メニューの「パブリッシュ」→「ローカル」を選択します。

• サイズを個別にエクスポートする
  • 一つのファイルで複数サイズを制作している場合、必要なサイズだけを個別に保存できます。
• インライン ローカルファイル
  • CSSやJavaScriptを別ファイルにせず、HTML内に一つにまとめて書き出します。
  • ファイル管理が楽になり、読み込みエラーのリスクを減らせます。
• ボーダーを追加
  • バナーに枠線をつけてくれます。必要な場合は色を指定してください。

書き出した時、指定した場所にある index(指定したファイル名).html がベースのファイルとなります！

書き出したバナーを使う

サイトで読み込む

自身のサイトやブログにバナーを表示させるには、index(指定したファイル名).htmlをiframeで呼び出すのが一番簡単です。

書き出されたフォルダ一式をサーバーにアップロードし、iframeタグで呼び出してください。

<iframe
  src="/index.html"
  width="300"
  height="250"
  style="border:none;"
  scrolling="no"
>
</iframe>

まとめ

作成できましたでしょうか？

• イメージしている複雑な動きの作り方がわからない…
• 書き出し後のエラーがどうしても解消できない…
• 複数のサイズ展開を急ぎで用意したい…

など、専門的な知識が必要な場合は、ぜひ株式会社レクトにご相談ください。