Google Web Designer でエキスパンド クリエイティブを作成する

エキスパンド広告の最初のサイズは、配信先の広告スロットと同じサイズです。その後、ユーザーが操作する（たとえば、ボタンをクリックする）と、広告が広告スロットよりも拡大し、より多くのコンテンツが表示されます。エキスパンド広告を Google Web Designer で作成するには、空のファイルから作成するか、あらかじめ作成されているエキスパンド テンプレートを開いてから、独自のコピーや画像などを追加します。

空のファイルから作成する

手順 1: 新しいファイルを作成する

Google Web Designer で、エキスパンド可能な動画クリエイティブを新規作成する方法は次のとおりです。

1. Google Web Designer を開いて [ファイル] > [新しいファイル] をクリックします。[新しい空のファイルの作成] ウィンドウが表示されます。
2. [広告] で [エキスパンド] をクリックします。
3. [環境] として [ディスプレイ＆ビデオ 360] を選択します。
4. 広告の折りたたみ時とエキスパンド時のディメンションを設定します。
5. クリエイティブ名を指定します。これが HTML ファイルの名前になります。
6. [場所] で、Google Web Designer ファイルをパソコン内のどこに保存するかを指定します。その場所までのパスを入力するか、検索アイコンをクリックしてその場所まで移動します。
7. [アニメーション モード] を設定します。
   1. [クイック]: 広告をシーン単位でアニメーション化します。クイックモードでのアニメーションの作成について詳しくは、Google Web Designer ヘルプセンターのクイックモードをご覧ください。
   2. [詳細]: タイムライン上の要素を個別にアニメーション化します。詳細モードでのアニメーションの作成について詳しくは、Google Web Designer ヘルプセンターの詳細モードをご覧ください。
8. [OK] をクリックします。

初期の折りたたみページ（[バナーページ]）とエキスパンド ページ（[展開したページ]）が作成されます。バナーページにはタップ領域が自動的に追加されています。ここをタップすることで広告がエキスパンドし、展開したページを閉じるためのタップ領域をタップすることで広告を折りたたむことができます。広告と広告サーバーの間のやり取りや、トラッキング指標の収集に必要な初期コードも自動的に追加されます。

手順 2: バナーページを設定する

バナーページの折りたたみ広告を設定するには:

1. 画像をステージにドラッグして読み込みます（[アセット ライブラリ] パネルから画像をドラッグすることもできます）。
2. （省略可）アニメーションを作成するか、ページに組み込みコンポーネントまたはカスタム コンポーネントを追加します。
3. バナーの設定が完了したら、タップ領域コンポーネントを選択して [一番上に移動] ボタンをクリックします。
4. 保存します。

マウスのロールオーバーでクリエイティブをエキスパンドするには:

1. マウスオーバー イベントを追加するため、[イベント] パネルを開いて [+] ボタンをクリックします。
2. [ターゲット] として [expand-button] を選択します。
3. [イベント] として [マウス] > [mouseover] を選択します。
4. [操作] として [Google 広告] > [ページに移動] を選択します。
5. [レシーバー] として [gwd-ad] を選択します。

詳しくは、Google Web Designer でのイベントの使用についての記事をご覧ください。

手順 3: エキスパンド ページを設定する

1. ステージの右下にあるページ インジケーターを使用して [展開したページ] に切り替えます。
2. 画像をステージにドラッグして読み込みます（[アセット ライブラリ] パネルから画像をドラッグすることもできます）。
3. （省略可）アニメーションを作成するか、ページに組み込みコンポーネントまたはカスタム コンポーネントを追加します。
4. 保存します。

行動を促すフレーズを追加する

1. 広告に、行動を促すフレーズが含まれていることを確認します。行動を促すフレーズは、ユーザーがクリックまたはタップできるボタンや、はっきりとした視覚的な要素である必要があります。
2. [タップ領域] コンポーネントを、[コンポーネント] パネルの [操作] フォルダからステージにドラッグして行動を促すフレーズに重ねて配置します。
3. [イベント] パネルで。新しいイベントボタン をクリックします。
4. イベント ダイアログで、以下の設定を選択します。

   ターゲット	タップ領域コンポーネント（gwd-taparea_1）
   イベント	[タップ領域] > [タップ / クリック]
   操作	[Google 広告] > [広告を終了] 注: 同様の操作である [広告を終了（URL を上書き）] では、スタジオやキャンペーン マネージャー 360 内など、クリエイティブ外の URL は変更できません。ダイナミック広告でのみ使用します。
   レシーバー	gwd-ad
   設定	指標 ID - レポートをわかりやすくするためのラベル（「CTA」など）。 URL - exit URL。 終了時に元に戻す - エキスパンド広告の場合、この設定をオンにすると、ユーザーが広告を閉じたときに広告が折りたたまれます。 終了時にメディアを一時停止 - オンにすると、ユーザーが広告を閉じたときに動画や音声の再生が停止します。 終了時に折りたたまれたページ - エキスパンド広告の場合に、ユーザーが広告を閉じたときに表示するページ。

   

省略可: 動画を追加する

クリエイティブに動画を追加する場合は、動画コンポーネントか YouTube コンポーネントを使用します。動画を YouTube でホストする場合は YouTube コンポーネントを使用します。それ以外の場合は動画コンポーネントを選択し、互換性のある以下の HTML5 動画形式の動画を使用します。

• .MP4
• .OGG / .OGV
• .WEBM

テンプレートから開始する

テンプレートとは、一般によく使用されるスタイルや機能を使って、一般的なサイズであらかじめ作成された広告のことです。画像などのアセットを置き換えることで、実際に機能する広告を簡単に作成できます。

手順 1: テンプレートから新しいファイルを作成する

1. [ファイル] メニューで [テンプレートから新規作成] を選択します。テンプレート ギャラリーが開きます。
2. 以下の手順を実行して Google マーケティング プラットフォームのバナー テンプレートを検索します。
   1. [検索] をクリックします。
   2. [広告タイプ] 欄を展開して [エキスパンド] を選択します。 
   3. [プラットフォーム] 欄を展開して [ディスプレイ＆ビデオ 360] を選択します。
   4. フィルタパネルを閉じます。互換性のあるレイアウトのリストが表示されます。
3. 希望するレイアウトの [レイアウトを使用] をクリックします。
4. 複数のサイズから選択できる場合は、必要なサイズを選択します。
5. 新しいファイルに名前を付けます（必須）。
6. 必要に応じて、ファイルの保存場所を変更します。その場所までのパスを入力するか、フォルダ アイコン をクリックしてその場所まで移動します。
7. [作成] をクリックします。

手順 2: テンプレート内で画像を追加または置き換える

Google Web Designer のエキスパンド広告テンプレートには、広告が折りたたまれているバナーページと、広告が展開されているエキスパンド ページがあります。デフォルトでは、新しいファイルを作成するとバナーページが表示されます。ステージの右下にあるページ インジケーターを使用して [展開したページ] に切り替えます。

各ページには、各要素についてプレースホルダのアセットと説明的な ID が含まれます。はじめに、汎用のプレースホルダ アセットをそれぞれ、その広告の該当するアセットに置き換えます。テンプレートから作成する広告は自由に修正できます。必要に応じて、アセット、コンポーネント、イベントを追加または削除して、さらにカスタマイズした広告を作成できます。

「画像の入れ替え」機能を使用すると、ライブラリ内の画像またはアップロードした画像に置き換えることができます。この機能は、テンプレートのストック画像を置き換える場合に特に便利です。

テンプレートから作成する広告の画像を置き換えるには:

1. 置き換える画像を右クリックします。
2. ポップアップ メニューから [画像を入れ替え] を選択します。
3. ダイアログで、ライブラリから画像を選択するか、追加アイコン をクリックしてパソコン内の画像を選択します。
4. [OK] をクリックします。

完成したクリエイティブをプレビューする

Google Web Designer から広告をプレビューするには:

1. 画面下部の [プレビュー] ボタン をクリックします。お使いのパソコンでサポートされているブラウザの一覧が表示され、どのブラウザを使用するかを選択できます。
2. プレビューに使用するブラウザを変更したい場合は、[プレビュー] ボタンの右側の矢印をクリックし、表示されたブラウザの一覧から選択します。
3. ページが読み込まれたら、折りたたみ広告の表示を確認します。
4. 行動を促すフレーズをクリックし、広告のエキスパンドを確認します。

省略可: 多方向エキスパンド クリエイティブを設定する

多方向エキスパンド クリエイティブは、サイト上の配置に応じて適切な方向にエキスパンドするクリエイティブです。多方向エキスパンド クリエイティブを作成する手順は次のとおりです。

Google Web Designer の多方向エキスパンド テンプレートから作成すると時間を短縮できます。このテンプレートには、必要なコードや、以降の手順で行う設定の多くが含まれています。

多方向エキスパンドを設定する

手順 1: ステージのサイズを大きくする

1. エキスパンド ページのサイズを大きくして、エキスパンドするそれぞれの方向に十分なスペースを作ります。

   たとえば、折りたたみクリエイティブのサイズが 300x250、エキスパンド クリエイティブのサイズが 600x250 の場合、クリエイティブは左右どちらにもエキスパンドする可能性があるため、展開したページのサイズを 900x250 に設定します。
   
   

2. ページ インジケーターを使って [バナーページ] に戻ります。
3. 広告のエキスパンド ビュー アイコン をクリックします。
4. エキスパンド時の視認可能領域の位置を調整し、折りたたみページが中央になるように配置します。広告エキスパンド ビュー ボタンの使い方について詳しくは、Google Web Designer ヘルプセンターのエキスパンド ページの再配置をご覧ください。
5. ステージの右下にあるページ インジケーターを使用して [展開したページ] に切り替えます。
6. 新しいステージサイズに合わせて、クリエイティブ要素の位置を調整します。

手順 2: 配置コードを追加する

1. [コードを表示] をクリックします。
2. 次に示す行（ID が gwd-init-code のスクリプトタグ）までスクロールします。
   <script type="text/javascript" id="gwd-init-code">
3. 多方向エキスパンドを可能にするコードとイベント処理を追加します。API メソッドと例については Studio HTML5 SDK をご覧ください。

   コード例

   これは左右にのみエキスパンドする例です。詳細については、Studio HTML5 SDK のページをご確認ください。

   Enabler.setIsMultiDirectional(true);
   
   // エキスパンドの方向に基づいて要素の位置を調整します。
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // ここに、右へエキスパンドするときの要素を配置するコードを追加します。
       // 閉じるボタンの ID に一致するよう btnClose を変更し、位置を調整します。
       btnClose.style.left = '875px';
     } else {
       // ここに、左へエキスパンドするときの要素を配置するコードを追加します。
       // 閉じるボタンの ID に一致するよう btnClose を変更し、位置を調整します。
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. エキスパンドを可能にするすべての方向について、各クリエイティブ要素を配置するためのコードを追加します。

クリエイティブが完成すると、スタジオにパブリッシュする準備が整います。