More than 5 years have passed since last update.

株式会社セレス

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

Posted at 2019-10-03

Google Web Designerとは、HTML5 ベースのWebサイトや広告などを作れるアプリです。

※この記事作成時のアプリのバージョンは5.1です
※写真素材元：MacBookとiPadを駆使する猫エンジニア | 無料の写真素材はフリー素材のぱくたそ

ツールの説明

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

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

起動し、テンプレートを選択

テンプレートを選択

今回は動的リマケ用HTML5広告、ということで
画像＋テキスト＋ボタン＋レスポンシブな「Dynamic ... Aligned ... CTA Buttons」を選択

テンプレートギャラリーから使用するタイプ（※）を選択

（※広告出稿担当者にどれを使用するか要確認）

「レイアウトを使用」をクリック

※クリック後の作成欄は、↓のようにパッと見、他のテンプレートとの違いが分かりづらいので見逃し注意

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

入力したら「作成」

↓
[e.g.]300x250のレスポンシブなHTML5広告を作る場合

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

Google Web Designerからの表示

生成されるファイル

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

プレビューボタンを押すと、ブラウザが立ち上がり確認できます。

サンプルデータなしとある状態（※）が確認できます。

※ここはjsonのデータを読み込んでいます。
※データはGoogl Web Designer上では以下から確認できます

※ファイルで確認する場合は以下から

参考：広告や HTML ページのプレビュー

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

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

アイコンからパブリッシュする場合

メニューからパブリッシュする場合

パブリッシュ設定の確認

特に指定がなければデフォルトのまま。
書き出し用の「名前」と「場所」を指定します。
※制作データと同じ場所に書き出すと、一瞬データを見失うかもしれないのでデスクトップ等が無難

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

パブリッシュしたデータの確認

指定した場所にzipでパブリッシュされます。

中身を確認します。

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

参考：完成品をパブリッシュする

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

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

[e.g.]モッピーバイトという求人サイトの場合

ロゴ画像を変更する

使用する画像をインポートする

画像は「ライブラリ」の中から確認できます

ライブラリパネルの下部にある「アセットをインポートします」アイコンをクリックし、用意した画像をインポートします。

インポートした画像はライブラリから参照できます。

リソースデータ内では、assets内に格納されます。

画像を入れ替える

「選択ツール」の状態で、
画像を選択し（青い枠が表示）
右クリックし「画像を入れ替え…」を選択する

使用中の画像名はオレンジになっています。
入れ替える画像を選択し「OK」をクリック

※画像はここからライブラリ追加してもOKです

画像が入れ替わったことを確認します。
Google Web Designer上

プレビュー上

枠の色を変更する

枠を含む１つの広告枠は、ライブラリ内にアイテムとして格納されています。
※ライブラリのプレビューで確認できます

編集時は、アイテム名を右クリック「編集」を選択

アイテム内が表示されます。

「タイムライン」パネルに個々のオブジェクトがレイヤー分けされて配置されているので、表示・非表示で１つずつ確認すると分かりやすいです。
※選択ツールで確認もOKですが、狙ったものをうまくクリック出来ない場合はレイヤーで探すと便利

枠の色の設定は「item-border-on」に設定されています。
「カラー」パネルの「ボーダー」に同色が表示され、ここで色設定されていることがわかります。

「ボーダー」をクリックし、カラーコード等から色を指定します。

↓

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

ボタンはキャプチャの場合「cta」に設定されています。

ですが、カラーパネルに色は出てきません。
アウトライナーパネルを確認すると、ボタンはグループ化されていることがわかります。

このアウトライナーから「cta」をWクリックもしくは、
選択ツールで「Buy Now!」ボタンをWクリックすると、ボタンのグループ内が編集できます。

ここから色を変更します。

マウスオーバー時の色が、Googlw Web Designer上で分かりづらい場合は、プレビューで確認しましょう。

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

テキストツール
を選択し、ボタンのテキスト上で１クリックすると、編集状態になります。

テキストを入力します。

選択ツール
に変更し、編集内容を確定させます。

プレビューで確認。

フォントの設定を変更する

選択ツールでテキストエリアを選択した状態で、「テキスト」パネルから色やフォントサイズ等を変更出来ます。

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

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

Google Web Designerで編集する

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

Google Web Designer上でデータの項目を編集する場合は、
「ダイナミック」→「バインディング」→（適当なところをWクリックするか）
をクリックすると確認出来ます。

↓

「小売」となっている箇所：データスキーマを変更したい場合は、「データスキーマ」タブをクリック、「データスキーマ」のプルダウンから該当するものを選びます。

すでにあるデータを流用する場合は「はい」
新規に設定したい場合は「いいえ」を選択します。

「はい」の場合、サンプルで入っていた設定が流用される。
（※とりあえず要素名や属性を使いまわす感じでいいやって場合は「はい」でOK）

「いいえ」の場合、新規に設定ができます。

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

データの内容を編集する

Google Web Designer上でデータの内容を編集する場合は、
「ダイナミック」→「サンプルデータ」→「（ファイル名）」→「編集」から確認出来ます。

↓

jsonから編集する

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

jsonの格納場所

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

既存流用をする場合、既存のjsonを複製し、リネームし編集します。

項目とデータがどこに表示されるかは、プレビューやGoogle Web Designerの画面と照らし合わせると分かります。

データを入力します。（それっぽいデータを入れた状態です）

JSON

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