Swirl コンポーネント

Swirl コンポーネントを使用すると、インタラクティブな 3D モデルを使用したクリエイティブを臨場感のあるディスプレイ フォーマットで作成できます。広告がスクロールして表示されると、ページのスクロールに関連付けられた最初の 3D アニメーションが表示されます。ユーザーはモデルを直接操作し、広告を全画面表示して細部を表示できます。

このコンポーネントはディスプレイ＆ビデオ 360 Swirl クリエイティブでの使用のみを目的としており、Microsoft Edge ではサポートされていません。

プロジェクトに Swirl コンポーネントを追加するには:

1. [コンポーネント] パネルを開き、その中の [グラフィックと効果] フォルダを開きます。
2. Swirlコンポーネントをステージにドラッグします。
3. コンポーネントをダブルクリックして、[Swirl の編集] ダイアログを開きます。
4. [レイヤ] パネルで、3D モデルレイヤを選択します。
5. [プロパティ] パネルの [URL] フィールドで、使用する 3D アセットの GLB ファイルを参照して選択します。他のプロパティを調整することも可能です（以下を参照）。
6. レイヤを追加するには、画像ファイルを、ファイル システムからステージまたは [レイヤ] パネル（Windows または Mac のみ）にドラッグして、[ライブラリ] パネルの下部にあるアセットをインポート ボタン をクリックします。Swirl コンポーネントでは、画像をレイヤとしてのみ追加できます。
7. [開始] タブと [終了] タブを使用して、アニメーションの開始時と終了時に表示するレイヤをそれぞれ配置します。レイヤは任意の場所にドラッグできます。または、[プロパティ] パネル内の [開始位置] および [終了位置] フィールドも使用できます。
8. 必要に応じて、その他の設定オプションを設定します（下記を参照）。
9. コンポーネントの設定（コンポーネントは設定の途中でプレビューできます）が完了したら、[保存] をクリックして、通常の Google Web Designer インターフェースに戻ります。

設定項目

コンポーネントを設定するには、ステージでダブルクリックするか、[プロパティ] パネルでコンポーネントを選択して設定 をクリックします。

中間状態を追加する

Swirl コンポーネントのアニメーションをさらに細かく制御するには、中間状態を追加してレイヤのプロパティを変更します。

1. [開始] タブの右にカーソルを合わせて、 ボタンをクリックします。[中央] タブが表示されます。
2. デフォルトでは、中間状態はアニメーションの開始から終了の間にあります。アニメーションのタイミングは調整できます。
3. この時点で、[中央] タブに切り替えて、レイヤのプロパティを設定します。

中間状態を削除するには、[中央] タブの右にカーソルを合わせて X をクリックします。

アニメーションのタイミングを変更する

Swirl コンポーネントのアニメーションのタイミングは、ページまで、またはページからのスクロール距離によって決まります。デフォルトでは、アニメーションは、コンポーネントの上端がページに表示されると始まり（0%）、下端がページの上部から見えなくなると終了します（100%）。中間状態を追加すると、アニメーションの動作タイミングを調整できます。アニメーションのタイミングを調整する方法には、以下の 2 つがあります。

• [アニメーションのタイミング] パネルで、[開始]、[中央]、[終了] のボックスまたはスライダーを、任意の割合までドラッグします。
• [アニメーションのタイミング] パネルのフィールドに、開始、中央、終了の割合を入力します。

3D モデルの背景を透明にする

1. 3D モデルを選択します。
2. [プロパティ] パネルで、[3D モデルの背景を透明にする] チェックボックスをオンにします。

ジェスチャー キューを追加する

1. 3D モデルを選択します。
2. [プロパティ] パネルで、[アイコン] プルダウンをクリックしてライブラリから画像を選択するか、[参照...] をクリックしてファイル システムから画像を選択します。
3. 任意でテキストを入力すると、テキスト フィールドにアイコンとともに表示されます。

3D モデル上にジェスチャー キューが表示され、ユーザーに操作を促します。

3D モデルを回転させる

1. 3D モデルを選択します。
2. [プロパティ] パネルで、アニメーションの開始、中間、終了のヨーを設定します。

ヨーは垂直軸を中心としたモデルの回転です。

画像レイヤを追加する

レイヤを追加する方法には以下の 2 つがあります。

• ファイルをファイル システムからステージまたは [レイヤ] パネルにドラッグします（Mac または Windows のみ）。
• [ライブラリ] パネルの下部にある「アセットをインポート」ボタン をクリックします。

Swirl コンポーネントの新しいレイヤは、画像である必要があります。3D モデルレイヤは、デフォルトで含まれる 1 つのみ使用できます。

レイヤを移動する

1. 移動するレイヤを選択します。
2. [開始]、[中央]、[終了] タブを選択します。
3. 次のいずれかの方法でレイヤを配置します。
   • レイヤを新しい位置にドラッグします。
   • [プロパティ] パネルで、[開始]、[中央]、[終了] の位置のプロパティを設定します。編集できるのは、現在のタブに該当するプロパティのみです。[開始位置に合わせる]、[中央位置に合わせる]、または [終了位置に合わせる] ボタン を使用して、他の位置をコピーできます。

[開始]、[中央]、[終了] タブを切り替えると、レイヤの他の位置を調整できます。

画像を入れ替える

1. ステージ上で入れ替えたい画像を右クリックし、ポップアップ メニューから [画像を入れ替える] を選択します。
2. ライブラリから画像を選択するか、「ファイルのインポート」ボタン をクリックして、パソコン内の画像ファイルを選択します。

新しい画像が元の画像と入れ替わります。入れ替える前の元の画像サイズを以前に変更していた場合は、新しい画像にも変更されたサイズが適用されます。サイズを変更していない場合、新しい画像はそのままのサイズとなります。

レイヤを並べ替える

[レイヤ] パネルで、リスト内のレイヤをドラッグして位置を変更します。

このレイヤの順序によってレイヤの表示位置が決まります。リストで上位にあるレイヤが、下位のレイヤの上に重ねて表示されます。

画像レイヤの削除

1. 削除するレイヤを選択します。
2. [レイヤ] パネルの下部にある削除ボタン をクリックします。

3D モデルレイヤは、Swirl コンポーネントに必須のため、削除できません。

レイヤのサイズを変更する

1. サイズを変更するレイヤを選択します。
2. 次のいずれかの方法で、レイヤのサイズを変更します。
   • [プロパティ] パネルで、レイヤの幅と高さを設定します。「アスペクト比を固定」ボタン をクリックすると、幅と高さのアスペクト比を固定するかどうかを切り替えられます。
   • ステージ上のレイヤの四隅と端にある、サイズ変更ハンドルのいずれかをドラッグします。

レイヤは、アニメーションの再生期間全体にわたって指定されたサイズに調整されます。

レイヤの不透明度を変更する

1. 変更するレイヤを選択します。
2. [プロパティ] パネルで、不透明度の開始値と終了値を 0～1 の値（0 は透明、1 は不透明）に設定します。

3D モデルレイヤは、アニメーションの最後では、常に不透明です。

レイヤのアニメーションのイージングを変更する

1. 変更するレイヤを選択します。
2. [プロパティ] パネルの [詳細プロパティ] で、[イージング] プルダウンからイージングのタイプを選択します。

カスタム イージングは使用できません。

レイヤの表示と非表示を切り替える

[レイヤ] パネルで、レイヤのサムネイルの横にあるチェックボックス（「レイヤをすべて非表示」ボタン の下）をオンにします。

「レイヤをすべて非表示」ボタン をクリックすると、すべてのレイヤを表示または非表示にできます。

レイヤを非表示にすると、もう一つのレイヤ上の作業が簡単になるうえ、構成プレビューでもレイヤを非表示のままにできます。ただし、ブラウザでのプレビューや公開済みのクリエイティブでは非表示になりません。

ゴーストの表示と非表示を切り替える

1. 画像レイヤを選択します。
2. [プロパティ] パネルの [詳細プロパティ] で [ゴースト表示] チェックボックスをクリックします。

ゴーストとは、現在編集していない位置に表示される半透明のレイヤです。これにより、開始位置、中央位置、終了位置を視覚的に比較できます。ゴーストは参照専用であり、プレビューまたは公開済みのファイルでは表示されません。

プロパティ

Swirl コンポーネントのプロパティ

プロパティ	説明
名前	Swirl コンポーネントの名前。
スクロール率	閲覧者がどこまでスクロールしたかを示す 0～1 の数値。Google Web Designer のステージで表示する場合にのみ使用されます。デフォルトは 0.5 です。

レイヤのプロパティを表示、編集するには、[Swirl の編集] ダイアログでレイヤを選択します。

3D モデルのレイヤ プロパティ

注: Google Web Designer バージョン 11.0.0 より前に作成された Swirl コンポーネントには、3D モデルレイヤ用のさまざまなプロパティがあります。

プロパティ	説明
名前	3D モデル コンポーネントの名前です。
URL	3D アセットの GLB ソースファイル。 GLB ファイルが有効であることを確認するには、Khronos glTF Validator を使用します。 古い Swirl コンポーネントの場合 3D アセットの URL または ID。 Poly でホストされ、リンクの共有がオンになっているアセットのみがサポートされます。アセット ファイルのサイズは 2 MB 以下にする必要があります。それより大きいアセットは Google Web Designer で読み込めない場合があります。その他の要件については、3D アセットガイドをご覧ください。 URL は、https://poly.google.com/view/ から始まる必要があります。 ID は Poly のビューページ URL の末尾に表示されます（例: https://poly.google.com/view/0CkCZrXqCWW）。 例: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW アセットを更新する - [URL] フィールドでこのボタンをクリックすると、3D アセットを更新できます。変更が適用されない場合は、アセットが処理中である可能性があるため、しばらく待ってからもう一度お試しください。
3D モデルの背景を透明にする	（古い Swirl コンポーネントのみ） 3D モデル コンポーネントの背景を透明にする場合は、このチェックボックスをオンにします。
ジェスチャー キュー
アイコン	3D モデル上にジェスチャー キューのアイコンを表示して、ユーザーにモデルの操作を促すことができます。ジェスチャー キューは、アニメーションの時間制限まで小さく動いてユーザーの注意を引き、ユーザーがモデルを操作し始めると消えます。
テキスト	ジェスチャー キュー アイコンの下に表示するテキスト。ジェスチャー キュー アイコンが指定されている場合にのみ、適用されます。
アニメーションの時間制限を設定	このチェックボックスをオンにすると、ジェスチャー キューのアニメーションの時間制限を秒単位で設定できます。
位置とサイズ
開始	アニメーションの開始時の、Swirl コンポーネントの左端と上端からのレイヤの距離。[開始] タブを選択すると、編集できます。
中央	アニメーションの中間状態の、Swirl コンポーネントの左端と上端からのレイヤの距離。[中央] タブを選択すると、編集できます。
終了	アニメーションの終了時の、Swirl コンポーネントの左端と上端からのレイヤの距離。[終了] タブを選択すると、編集できます。
サイズ	レイヤの幅と高さ。レイヤはアニメーションの再生時間全体にわたって、このサイズに調整されます。
ローテーション
ヨー	縦軸を中心としたモデルの開始、中間、終了時の回転の度数。
スタイル
不透明度	0（透明）～1（不透明）で表される、開始、中間、終了時のレイヤの不透明度。
詳細プロパティ
イージング	レイヤのアニメーションのイージングのタイプ。カスタム イージングは使用できません。

画像レイヤのプロパティ

プロパティ	説明
ソース	画像ファイルのソース（編集不可）。
exit URL	ユーザーが画像をクリックしたときの exit URL。
位置とサイズ
開始	アニメーションの開始時の、コンポーネントの左端と上端からのレイヤの距離。[開始] タブを選択すると、編集できます。
中央	アニメーションの中間状態での、コンポーネントの左端と上端からのレイヤの距離。[中央] タブを選択すると、編集できます。
終了	アニメーションの終了時の、コンポーネントの左端と上端からのレイヤの距離。[終了] タブを選択すると、編集できます。
サイズ	レイヤの幅と高さ。レイヤはアニメーションの再生時間全体にわたって、このサイズに調整されます。
スタイル
不透明度	0（透明）～1（不透明）で表される、開始、中間、終了時のレイヤの不透明度。
詳細プロパティ
イージング	レイヤのアニメーションのイージングのタイプ。カスタム イージングは使用できません。
ゴーストの表示	有効にすると、非アクティブな位置（現在編集していない位置）のレイヤが半透明で表示されます。

イベントと操作

イベント

イベントを使用して、広告内の他の操作をトリガーできます。Swirl コンポーネントは、以下のイベントを送信します。

イベント	説明
Swirl の読み込み	コンポーネントに含まれるすべてのアセットが読み込まれると、送信されます。

[イベント] ダイアログでこのイベントを選択するには、Swirl コンポーネントをターゲットに設定します。

Swirl コンポーネントに含まれている、3D モデルのイベントとアクションも設定できます。

プレビュー

設定中

作業中に Swirl コンポーネントをプレビューできます。

1. コンポーネント編集モードを開始するには、ステージ上のコンポーネントをダブルクリックします。
2. 上部の [プレビュー] タブをクリックします。
3. 上下にスクロールして、サンプルのモバイル デバイス用レイアウトでレイヤの動作を確認します（非表示のレイヤは表示されません）。
4. コンポーネントのプレビュー中は編集できません。[開始]、[中央]、[終了] タブをクリックして必要な変更を加え、[プレビュー] タブを再度クリックして、変更内容を確認します。

ブラウザでのプレビュー

ブラウザでコンポーネントをプレビューするには、コンポーネント編集モードを終了し、Google Web Designer の [プレビュー] ボタンをクリックします。プレビュー ページでは、コンポーネントの上下にスクロールできるほど十分なコンテンツがあるウェブページで、広告がどのように表示されるかがエミュレートされます。

プレビューについては、次のようなモードを選択できます。

• デバイス - モバイル デバイスまたは [カスタム] を選択します。
• デバイスを回転 - 縦向きと横向きを切り替えます。
• ビューポートのサイズ - デバイスで [カスタム] を選択した場合、この項目を編集するか、プレビューのサイズ変更ハンドルをドラッグして、新しいサイズを設定できます。

ブラウザの Swirl 広告では、パララックス プレビュー モードが常に使用されます。