Google Web Designerでテンプレートから広告を作る

[Google Web Designer](https://webdesigner.withgoogle.com/intl/ja_jp)とは、HTML5 ベースのWebサイトや広告などを作れるアプリです。

![948dea49-4c81-57c5-2ad9-b51eb7776110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/08329979-cc43-5d94-2f1f-39fecd6a0b51.png)


※この記事作成時のアプリのバージョンは5.1です
※写真素材元：[MacBookとiPadを駆使する猫エンジニア | 無料の写真素材はフリー素材のぱくたそ](https://www.pakutaso.com/20190959252macbookipad.html)

# ツールの説明

ツールの使い方はググると親切な記事があるので割愛。

# テンプレートから広告を作る


## 起動し、テンプレートを選択
![3cefeddf-f9a3-d30e-3100-1897d831bf47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/648de94a-ab2d-e684-50fc-58b0a6479818.png)


## テンプレートを選択
今回は動的リマケ用HTML5広告、ということで
画像＋テキスト＋ボタン＋レスポンシブな「Dynamic ... Aligned ... CTA Buttons」を選択
![7df9f9f0-ea9d-21f9-d6d9-7cb7af4ab566.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/7b8c6829-f240-9561-5265-968d60d6e7c5.png)



## テンプレートギャラリーから使用するタイプ（※）を選択
（※広告出稿担当者にどれを使用するか要確認）

「レイアウトを使用」をクリック
![ac08002d-821c-882b-e066-ba21f047212d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/be3d3d38-4529-1d03-33e3-9089140c97fe.png)


※クリック後の作成欄は、↓のようにパッと見、他のテンプレートとの違いが分かりづらいので見逃し注意
![24637a2b-3365-fc4b-0c9a-d8a4d1b81c28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/30e85015-eb54-cf6c-5468-598bcc907ac3.png)


## サイズ、ファイル名、保存場所を指定する

入力したら「作成」
![b5500051-bcdc-1cad-d549-342d51bdb472.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/2138fc4b-0a91-52f1-3c40-a2a70c50a271.png)
↓
[e.g.]300x250のレスポンシブなHTML5広告を作る場合
![e63cdcf4-4306-f4ca-00f0-74d6afe3a111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/f547a93d-3499-17e4-81f0-b2a623184fde.png)


## テンプレートからファイル一式ができます

Google Web Designerからの表示
![ae7bfa6c-5c66-0039-10f1-9709b139f47f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/6745e388-c6ae-9040-ed5d-62bb4d2df6f1.png)

生成されるファイル
![7f46a4fb-3d22-ed5e-f261-e61ec32fee61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/c00b7a49-8691-331e-34e8-7595a01965f0.png)


## プレビューでブラウザ確認する

プレビューボタンを押すと、ブラウザが立ち上がり確認できます。
![dcc83861-5e3a-1cdb-1a16-9fd92e3d8710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/98c277fb-ccb9-b75d-b463-f0325290536b.png)


サンプルデータなしとある状態（※）が確認できます。
<img width="712" alt="653e9dd5-4fed-8c89-d454-c781c9a83f3d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/64f85f06-989d-d5e3-7f28-9d2af42cd10e.png">



※ここはjsonのデータを読み込んでいます。
※データはGoogl Web Designer上では以下から確認できます
![1aead6e4-07ee-b68f-5139-68a008d9ae3e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/f1db7024-1b86-46e3-f47e-0330eba8502e.png)


※ファイルで確認する場合は以下から
![5a02a7f3-9697-2fba-c3ea-b0197b7383e8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/b36beeb3-d01d-10a2-74f3-6a740e239c50.png)


参考：[広告や HTML ページのプレビュー](https://support.google.com/webdesigner/answer/3261497?hl=ja&ref_topic=3178447)

## 出稿用にデータを書き出す（パブリッシュ）

制作データはそのままでは出稿用には使用できません。（Googleのいうリソースデータを入稿するな、という話がこれ）
出稿用に書き出しことパブリッシュします。

アイコンからパブリッシュする場合
![519e57bb-7108-d837-4af2-05002c9ef3b3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/c5aa6791-6058-6c28-40b6-40d25fb01fb0.png)


メニューからパブリッシュする場合
![48bcc828-fe98-f77a-e2fe-28c58cb0beab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/86411c6c-967d-9368-9f9f-ea4b3a36172f.png)


### パブリッシュ設定の確認

特に指定がなければデフォルトのまま。
書き出し用の「名前」と「場所」を指定します。
※制作データと同じ場所に書き出すと、一瞬データを見失うかもしれないのでデスクトップ等が無難
![caae8dac-3031-3c39-694a-1ac8fcb43e8d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/80fffcb7-3dd5-04a6-657d-bc7cdda0cc73.png)



設定を確認したら「パブリッシュ」


## パブリッシュしたデータの確認
指定した場所にzipでパブリッシュされます。
<img width="71" alt="04bea3fd-0009-f07f-8039-28962fb58699.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/bc76a9e3-507b-4530-0148-4b68bcc5e4db.png">


中身を確認します。
![32332f61-3725-314f-0040-8a9326a448cf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/907637cc-7e44-8dfa-98e1-e519c9e4fc75.png)


リソースデータ（制作データ）とファイル数が雲泥の差なのがわかります。
間違ってもリソースデータを入稿しないよう注意しましょう。
また出稿担当者が不慣れな際は、パブリッシュデータも作っておくなどのフォローをしましょう。


参考：[完成品をパブリッシュする](https://support.google.com/webdesigner/answer/3250387?hl=ja&ref_topic=3178447)

# テンプレートをカスタムする

テンプレートの色や内容をカスタムします。

[e.g.][モッピーバイト](https://moppy-baito.com/)という求人サイトの場合
![3b03309c-074d-6398-d3aa-b420e3a71947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/526fdd9c-b90c-a6e0-fd1a-5744b9dbefe9.png)


## ロゴ画像を変更する

### 使用する画像をインポートする
画像は「ライブラリ」の中から確認できます
![08f666f1-e85b-f08d-23b2-ad1c56465991.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/de90d21b-cbb2-e9c3-0799-304aadca5d84.png)


ライブラリパネルの下部にある「アセットをインポートします」アイコンをクリックし、用意した画像をインポートします。
![247fbe42-71c1-03ee-e8c7-de0111bb1e94.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/7f2f65e1-8839-dcd8-3fab-d068662314c7.png)


インポートした画像はライブラリから参照できます。
![ec25d50b-b69d-cedc-fd07-0a4710e4ef79.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/6459977b-bd4a-28db-e8e4-458d01da9ff9.png)


リソースデータ内では、assets内に格納されます。
![19bb0ac5-bef5-df97-a8b5-cac174f466bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/5dcbb68c-c2bf-c451-8fd6-bccf6c3d1941.png)



### 画像を入れ替える

「選択ツール」![217cfc25-ea6c-9af9-efa4-354dfc6202c0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/83fec0f1-a520-de4d-53ab-b490fa3b8aef.png)の状態で、
画像を選択し（青い枠が表示）![85dc0ac5-c367-6ba2-189b-c3e1527f4b4b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/7d488794-9640-88b6-6373-0359a67a1fe1.png)
右クリックし「画像を入れ替え…」を選択する
![ef0d29e8-aee7-525a-e03f-ec525c4d09df.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/e775f8c1-8a14-83fd-3568-f55b568eda5d.png)


使用中の画像名はオレンジになっています。
入れ替える画像を選択し「OK」をクリック
![e5cae6ac-34e7-6120-6bb9-3879751f4fac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/28f0a6a8-6636-5b09-aa3a-bf7ce263073a.png)


※画像はここからライブラリ追加してもOKです
![0f50a59c-ff80-52db-876e-6a2e26a60e4f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/bde6fd15-4379-2ae8-26b8-2f25fb3a461e.png)


画像が入れ替わったことを確認します。
**Google Web Designer上**
![cf280422-361b-848c-44de-1ccd77e5539d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/850a7641-73ea-c9b8-30b9-422866e4bb41.png)


**プレビュー上**
<img width="323" alt="14f22f9a-308c-c6bb-b26e-25ab4915c428.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/e0cab3c6-5d2a-8709-1b16-2ddf623a0e12.png">


## 枠の色を変更する

枠を含む１つの広告枠は、ライブラリ内にアイテムとして格納されています。
※ライブラリのプレビューで確認できます
![f2829708-0130-f74c-9554-6558a581eac2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/2914cdc4-5408-c2cf-a44a-524d802dc4ed.png)


編集時は、アイテム名を右クリック「編集」を選択
![45df4a96-a135-724d-4cc2-558915bc5fae.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/f4d9a4bd-d9d4-e74f-b737-6b4139f873a3.png)

アイテム内が表示されます。
![d90ea099-e245-8a05-28cc-a5efd05af703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/d8ecf15d-5dac-32db-cf3b-1bfee5cd35eb.png)


「タイムライン」パネルに個々のオブジェクトがレイヤー分けされて配置されているので、表示・非表示で１つずつ確認すると分かりやすいです。
※選択ツールで確認もOKですが、狙ったものをうまくクリック出来ない場合はレイヤーで探すと便利
![e88f9324-b084-ec91-b19b-bb4a9939b2e3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/24cd6285-d914-1d29-cab8-d57296acec1d.png)


枠の色の設定は「item-border-on」に設定されています。
「カラー」パネルの「ボーダー」に同色が表示され、ここで色設定されていることがわかります。
![bb0a1c2e-e253-d5cd-d282-590756a92e2c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/fbb6f08f-75c3-a3ab-ed30-40cacc39ccac.png)


「ボーダー」をクリックし、カラーコード等から色を指定します。
![82819c0a-7b07-9568-fa13-6b96d1b284a5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/68be0424-12a2-f55c-e111-5c4c4f85a2fb.png)
↓
![fddb4362-f650-ea85-2368-848f53b481c3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/eaa19aba-ee43-dd99-d4ab-394fa34e7c14.png)



## ボタンの背景色を変更する

ボタンはキャプチャの場合「cta」に設定されています。
![f493a72c-40e9-fe7e-4549-86795d72f035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/aa6905a7-df26-ead9-1b4d-5b51624128e4.png)


ですが、カラーパネルに色は出てきません。
アウトライナーパネルを確認すると、ボタンはグループ化されていることがわかります。
![2fe98223-13a2-1a18-a95a-dd964e3c1d7e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/8205b320-298d-9909-7135-12d122799cd0.png)


このアウトライナーから「cta」をWクリックもしくは、
選択ツールで「Buy Now!」ボタンをWクリックすると、ボタンのグループ内が編集できます。
![fcabb327-1316-5103-cd5c-e0ab8b056f3b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/b48ea408-1084-9d7d-a909-a6ca1048f4b8.png)


ここから色を変更します。
![2a7470b8-3512-1f44-0685-42f7825c7c98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/764be3e3-cc23-b5f3-14fa-8dc38a11ce07.png)



マウスオーバー時の色が、Googlw Web Designer上で分かりづらい場合は、プレビューで確認しましょう。
<img width="362" alt="81922fe5-9488-6886-f98e-b9a81091f5b4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/55925e48-2c69-c977-1786-d3523b333342.png">


## ボタンのテキストを変更する

テキストツール![2222b75a-1e30-c29a-5ca8-3e41d55e4bed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/44ba79cc-3b11-e683-6c6b-73c4fec895ca.png)
を選択し、ボタンのテキスト上で１クリックすると、編集状態になります。
![d0f612af-bbea-949c-f8c9-da388f3c7fea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/244a99d4-ff91-4477-06f9-389e544628b8.png)


テキストを入力します。
![3010fc06-3ac6-a615-05e1-1a38922cf083.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/d45ced7c-7df6-3dec-66b8-fcc61eb353d8.png)


選択ツール![f9d88d2c-163f-95ee-cb2f-13ee2576a755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/3aeb130d-43b8-67ad-a36e-18ea6e185b1a.png)
に変更し、編集内容を確定させます。

プレビューで確認。
<img width="357" alt="ba726de8-5328-5cc0-d1e4-c777a53c357d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/71b4cbb4-3e48-6f89-3073-b79556f1aadd.png">


## フォントの設定を変更する
選択ツール![f9d88d2c-163f-95ee-cb2f-13ee2576a755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/3aeb130d-43b8-67ad-a36e-18ea6e185b1a.png)でテキストエリアを選択した状態で、「テキスト」パネルから色やフォントサイズ等を変更出来ます。
![7b11e8ba-035a-c7bb-8f7d-9467d51cc1d6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/eb54d3b0-f901-316c-6d3a-ceefef5f1e9a.png)



# 表示データを編集する（json）

表示するテキストや画像、リンク先はjsonで指定することが出来ます。

## Google Web Designerで編集する

### データスキーマを編集する

Google Web Designer上でデータの項目を編集する場合は、
「ダイナミック」→「バインディング」→（適当なところをWクリックするか）![0afeb7aa-23b3-d84b-748a-04681a2994ba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/9c299e59-e65f-e287-cf18-6515c643df20.png)
をクリックすると確認出来ます。
![1db3e2fa-f524-fd22-4bbf-b46e0444cc1c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/feeeda78-96eb-0a35-98b5-0c2094c6ade9.png)
↓
![0b33020f-b67a-8235-bc1b-1652c9ee6a70.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/d90ac13e-eaa3-2627-b6e4-9513b7d98e5b.png)


「小売」となっている箇所：データスキーマを変更したい場合は、「データスキーマ」タブをクリック、「データスキーマ」のプルダウンから該当するものを選びます。
![9e848485-4577-d22c-ef5e-7b145f78803c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/5eb0acfc-0db0-56b8-9e50-c25fbeb833f5.png)


すでにあるデータを流用する場合は「はい」
新規に設定したい場合は「いいえ」を選択します。
![fb47d879-952a-a58f-8a2d-06482d393ee9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/5b174546-619b-375e-99e4-80192f17abf6.png)


「はい」の場合、サンプルで入っていた設定が流用される。
（※とりあえず要素名や属性を使いまわす感じでいいやって場合は「はい」でOK）
![f0365742-f699-c525-3f3b-53e69230ff8e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/0e3593cc-937c-1f59-a8f3-6a399fa80789.png)


「いいえ」の場合、新規に設定ができます。
![aa354bf1-488d-d8db-959b-16c52ad4cd00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/aee51022-3601-438e-6c1c-3e64b3147f44.png)


設定したら「OK」をクリック。

### データの内容を編集する
Google Web Designer上でデータの内容を編集する場合は、
「ダイナミック」→「サンプルデータ」→「（ファイル名）」→「編集」から確認出来ます。
![993b2968-0ac4-c010-bb93-b636d28c7b8a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/2ee817e9-91e1-d1bf-7d1c-eea45927f1ad.png)
↓
![a6995fe7-43b1-cb84-7986-6dae2d9d33bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/a01c631c-6042-0d60-da16-d6f2a5ae292b.png)


## jsonから編集する

テキストエディタからjsonを編集することが可能です。

**jsonの格納場所**

```
/[設定したフォルダ名]/feeds/five_product_feed.json
```

![67d872e6-d5d4-f132-ac6b-a849d07216bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/951afef8-dfb3-f67e-837b-848cae283ec8.png)


既存流用をする場合、既存のjsonを複製し、リネームし編集します。
![b87b1524-ebe2-9eef-4de6-6c6371311f09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/c2a73f82-79bf-a372-1592-399962922e71.png)


項目とデータがどこに表示されるかは、プレビューやGoogle Web Designerの画面と照らし合わせると分かります。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f35343437382f63616463376462352d353733362d316564642d663232632d3330363134376232633231322e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/451bfbaf-160e-df7e-e1d4-3bcac3c805c9.png)


データを入力します。（それっぽいデータを入れた状態です）
![a080c3cf-f2b7-1d14-bd5c-096767f578c7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/e1b983e6-f613-5ffa-c45f-e0069c6abc0e.png)

```lang:JSON
{
    "Product": [{
        "name": "足立区",
        "subTitle": "北千住駅より徒歩3分",
        "price": "時給1,400円",
        "regularPrice": "",
        "salePrice": "",
        "salePercentDiscount": "",
        "installmentPrice": "",
        "installmentCount": "",
        "imageUrl": "http://○○○.jpg",
        "url": "https://○○○"
    }]
}
```


### jsonをインポートする

「ダイナミック」→「サンプルデータ」→「サンプルデータをインポートします」![b620ab7f-51f3-df5f-7329-5f996e3c7058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/0bf7a565-eace-c1db-c60e-82f45e2e8fc2.png)
から、インポートします。
![57754b8e-73d7-fd4e-7a18-9f36c01d8826.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/6e6b8d5f-6465-67a1-3124-6494669a7974.png)

jsonをインポートします
![afaf66ed-caaa-792f-82b0-b67302a43f80.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/3c105045-9d76-9316-5349-5767deb9fb21.png)


サンプルデータパネルにインポートしたjsonのファイル名が表示されるので選択します。
既存流用した場合は、設定が成功すればそのまま画面に表示されます。
![346c49a2-3f8d-48ab-6956-fb7a308982fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/d37b8356-7bdb-515e-0816-653169bd840f.png)


プレビューで確認します。
<img width="1072" alt="08824edf-ab96-d7a2-ce22-9d1e7a937639.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/bf1febf7-c31d-59ef-3969-17a0cb2dc904.png">



# 完成例
他の箇所も調整してこんな感じになります。
<img width="708" alt="4dab1778-b5bd-a18a-f5b5-ff5a863c13c2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54478/898a2087-79ac-84cb-2bd7-20bee3a3486b.png">



# 参考


- [Google Web Designer ヘルプ](https://support.google.com/webdesigner/?hl=ja#topic=3249465)
      - 目次「広告の作成」→「テンプレートを使用する」
      - [テンプレートを使用する](https://support.google.com/webdesigner/answer/6185261?hl=ja&ref_topic=3243982)