Swirl クリエイティブを作成する

Swirl コンポーネントを使用して、Swirl クリエイティブを作成できます。Google Web Designer には、そのプロセスが簡単になるテンプレートが用意されています。テンプレートでは独自のアセットを切り替え、ニーズに合わせて既存のデザインを調整できます。

Swirl テンプレートをカスタマイズする

クリエイティブ デザインのヒントを得たい、またはすぐに作成にとりかかりたい場合は、Google Web Designer で既成のレイアウトを使用できます。Swirl テンプレートは、[テンプレート ギャラリー] の [Swirl for Display & Video 360] カテゴリから探せます。以下のレイアウトを利用できます。

• Swirl Standard - 標準的な要素（3D モデル、ロゴ、CTA ボタン、ジェスチャー キュー）を含む 300x600 サイズの Swirl クリエイティブ。

• Swirl Standard Expandable - 標準的な要素を含み、全画面表示に拡張できる 300x250 サイズの Swirl クリエイティブ。

• Swirl Expanding - 標準的な要素、ヘッダー、パララックス画像を含み、全画面表示に拡張できる 300x250 サイズの Swirl クリエイティブ。

• Swirl Color Selector - 標準的な要素（3D モデル、ロゴ、CTA ボタン、ジェスチャー キュー）と 3D モデルの色を変更するためのカラーチップを含む、300x600 サイズの Swirl クリエイティブ。

• Swirl Color Selector Expandable - 標準的な要素（3D モデル、ロゴ、CTA ボタン、ジェスチャー キュー）と 3D モデルの色を変更するためのカラーチップを含み、全画面表示に拡張できる 300x250 サイズの Swirl クリエイティブ。

• Swirl Hotspot - 標準的な要素と 3D モデルに関する追加情報を表示するホットスポットを含む、300x600 サイズの Swirl クリエイティブ。

• Swirl Hotspot Selector Expandable - 標準的な要素と 3D モデルに関する追加情報を表示するホットスポットを含み、全画面表示に拡張できる 300x250 サイズの Swirl クリエイティブ。

Swirl テンプレートをカスタマイズする一般的なワークフローについては、こちらの動画と以下の説明をご覧ください。

Swirl クリエイティブのチュートリアル

独自 3D モデルを使用する

1. Swirl コンポーネントをダブルクリックして、Swirl の編集ダイアログを開きます。
2. [レイヤ] パネルで、[3D モデル] を選択します。
3. [プロパティ] パネルで、[URL] を編集して、使用するモデルの GLB ファイルを選択します。
4. [保存] をクリックします。

独自の画像を使用する

テンプレート内の画像は変更できます。たとえば、テンプレートのロゴ画像を独自の画像に入れ替える場合は、以下の手順を実行します。

1. ロゴ画像を含むステージ上のタップ領域コンポーネントをダブルクリックします。
2. ロゴ画像を右クリックして、[画像を入れ替える...] を選択します。
3. 「アセットをインポート...」ボタン をクリックしてファイル システムから画像を選択し、[OK] をクリックします。

必要に応じて、新しい画像のサイズと位置を変更できます。

独自のパララックス画像を使用する

パララックス画像（スクロール対応画像）では処理が異なり、以下の手順を実行します。

1. Swirl コンポーネントをダブルクリックして、Swirl の編集ダイアログを開きます。
2. 既存のパララックス画像を独自のパララックス画像と入れ替えるか、削除して新しいパララックス画像を追加します。
   • 以下の手順で、パララックス画像を入れ替えます。
     1. 各画像を右クリックして、[画像を入れ替える...] を選択します。
     2. 「アセットをインポート...」ボタン をクリックしてファイル システムから画像を選択し、[OK] をクリックします。
   • パララックス画像を削除して、独自の画像を追加します。
     1. [レイヤ] パネルで、画像レイヤ（3D モデルレイヤを除くすべて）を選択して、削除ボタン をクリックします。
     2. 「画像を追加」ボタン をクリックして、ファイル システムから画像を選択し、[OK] をクリックします。
3. [開始] タブと [終了] タブで、位置と不透明度を調整して、画像のアニメーションを設定します。
4. [保存] をクリックします。

独自のテキストを使用する

行動を促すフレーズなど、テキスト コンテンツを独自のものに置き換えることができます（一部の CTA ボタンでは、代わりに画像を使用します）。

1. 編集したいテキスト要素を選択できることを確認してください。テキスト要素を直接選択するには、親要素をダブルクリックする必要がある場合があります。
2. テキストツール 左側のツールバーから選択します。
3. 周りに破線のアウトラインが表示されるまでテキスト要素にカーソルを合わせ、その後クリックします。
4. テキストを編集します。

exit を設定する

1. [イベント] パネルを開きます。
2. アクション exit を含むイベントをダブルクリックします。
3. exit URL を入力して [OK] をクリックします。
4. アクション exit を含むその他のイベントに対してこの手順を繰り返します。

要素の背景色を変更する

1. 変更する要素を選択します。
2. [プロパティ] パネルを開き、[塗りつぶし] の下にあるカラーチップをクリックします。
3. 新しい背景色を選択します。

カラーチップを編集する

カラーチップを別の色に変更し、ユーザーがそのカラーチップを選択した際に 3D モデルに与える効果を調整できます。

1. カラーチップを別の色に変更するには、上記の手順に沿って要素の背景色を変更します。
2. [イベント] パネルを開き、カラーチップ要素に設定されているイベントをダブルクリックします。
3. [マテリアル名] を 3D モデルのマテリアル名と一致させます。
4. [赤]、[緑]、[青] の値を新しい色に合わせて変更します。

ホットスポットを編集する

ホットスポットは 3D エディタで追加します。その際、ホットスポット座標とホットスポット インジケーターの画像を設定できます。別の 3D モデルビューア コンポーネントを使用して、ホットスポットに加えて、タイトルと説明を含む情報カードを追加できます。追加したら、コードビューに移動してホットスポットのコードをコピーし、次の操作を行います。

1. コードビューに切り替えます。
2. gwd-3d-hotspot-container 要素を検索し、ホットスポットのコードをコピーします。以下で例を確認できます。
3. Swirl コンポーネントの gwd-swirl 要素を探し、その Swirl コンポーネントの gwd-3d-model-viewer 要素内にネストされるように、ホットスポットのコードを貼り付けます。