パララックス コンポーネント

パララックス コンポーネントを使用すると、画像を重ねて奥行きの錯覚を生み出すことができます。モバイル デバイスでページを上下にスクロールしたときに、前景画像と背景画像が異なる速さで動きます。

animation of scrolling to a Parallax ad

このコンポーネントは、ディスプレイ&ビデオ 360 のパララックス クリエイティブでのみ使用できます。

プロジェクトにパララックス コンポーネントを追加する

  1. [コンポーネント] パネル、[操作] フォルダの順に開きます。
  2. パララックス コンポーネント をステージにドラッグします。
  3. コンポーネントをダブルクリックして、コンポーネント編集モードを開始します。
  4. コンポーネントを設定します。
    1. レイヤを追加します。追加するには、画像ファイルをファイル システムからステージまたは [レイヤ] パネルにドラッグする(Windows または Mac のみ)か、[レイヤ] パネルの下部にある「画像を追加」ボタン をクリックします。画像はパララックス コンポーネントのレイヤとしてのみ追加できます。
    2. レイヤを配置します(アニメーションの開始時と終了時にそれぞれ表示する必要があります)。レイヤは任意の場所にドラッグできます。または、[レイヤのプロパティ] パネルにある [開始位置] と [終了位置] を使用します。
    3. 必要に応じて、その他の設定オプションを設定します(下記を参照)。
  5. コンポーネントの設定(コンポーネントは設定の途中でプレビューできます)が完了したら、[保存] をクリックして、通常の Google Web Designer インターフェースに戻ります。

パララックスの概要

設定項目

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

レイヤを追加する

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

  • ファイルをファイル システムからステージまたは [レイヤ] パネルにドラッグします(Mac または Windows のみ)。
  • [レイヤ] パネルの下部にある「画像を追加」ボタン をクリックします。

パララックス コンポーネントのレイヤは画像である必要があります。

レイヤを移動する

  1. 移動するレイヤを選択します。
  2. [開始] または [終了] タブを選択します。
  3. 次のいずれかの方法でレイヤを配置します。
    • レイヤを新しい位置にドラッグします。
    • 矢印キーを使用して、レイヤを 1 ピクセルずつ移動します。Shift キーを押しながら矢印キーを押すと、その矢印の方向にレイヤを 10 ピクセル移動できます。
    • [レイヤのプロパティ] タブで [開始位置] または [終了位置] のプロパティを設定します。編集できるのは、現在のタブに対応するプロパティのみです。「開始位置をコピー」または「終了位置をコピー」のボタン を使用すると、もう一方の位置をコピーできます。

レイヤのもう一方の位置を調整するには、[開始] タブまたは [終了] タブに切り替えます。

画像を入れ替える

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

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

レイヤを並べ替える

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

こうしたレイヤの順序によって、それぞれのレイヤがどのレイヤの前に表示されるかが決まります。リストで上位にあるレイヤが、下位のレイヤの前に表示されます。

レイヤを削除する

  1. 削除するレイヤを選択します。
  2. [レイヤ] パネルの下部にある削除ボタン trash can icon をクリックするか、Delete キーを押します。

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

  1. サイズを変更するレイヤを選択します。
  2. [レイヤのプロパティ] パネルで、レイヤの幅と高さをピクセル単位で設定します。
    • アスペクト比を固定」ボタン をクリックし、幅と高さのアスペクト比を固定するかどうかを切り替えます。

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

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

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

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

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

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

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

  • [レイヤ] パネルで、レイヤのサムネイルの横にあるボックス(「レイヤをすべて非表示」ボタン の下)をクリックします。
  • レイヤをすべて非表示」ボタン をクリックすると、すべてのレイヤを表示または非表示にできます。

特定のレイヤを非表示にすると、別のレイヤの作業がやりやすくなります。また、非表示にしたレイヤは、設定プレビューに表示されなくなりますが、ブラウザでのプレビューや公開済みのクリエイティブでは非表示になりません。

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

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

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

プロパティ

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

コンポーネント プロパティは [プロパティ] パネルに表示されます(コンポーネント編集モードを終了する必要があります)。

プロパティ 説明
名前 パララックス コンポーネントの名前。

画像

パララックス コンポーネントで使用される画像のリスト。この項目をクリックすると、コンポーネント編集モードが開始され、レイヤを設定できるようになります(項目を直接編集することはできません)。動的データにバインドできます。
スクロール率 閲覧者がどこまでスクロールしたかを示す 0~1 の数値。Google Web Designer のステージで表示する場合にのみ使用されます。デフォルトは 0.5 です。

レイヤのプロパティ

コンポーネント編集モードでは、レイヤのプロパティを表示および編集することができます。

プロパティ 説明
名前 レイヤの名前(編集不可)。

開始位置

コンポーネントが最初にビューに入ってくるとき(つまり、コンポーネントの上端がビューポートの下端にあるとき)のコンポーネントの左側と上部からのレイヤの距離。ピクセル単位で計測されます。[開始] タブを選択すると、編集できるようになります。
終了位置 コンポーネントがビューから出るとき(つまり、コンポーネントの下端がビューポートの上端にあるとき)のコンポーネントの左側と上部からのレイヤの距離。ピクセル単位で計測されます。[終了] タブを選択すると、編集できるようになります。
サイズ レイヤの幅と高さ。レイヤはアニメーションの再生時間全体にわたって、このサイズに調整されます。
透明度 レイヤの不透明度の開始値と終了値。0(透明)~1(不透明)の数値で示します。
イージング レイヤのアニメーションのイージングのタイプ。カスタム イージングは使用できません。
ゴーストの表示 有効にすると、非アクティブな位置(現在編集していない位置)のレイヤが半透明で表示されます。

イベント

イベントを使用して広告内の他の操作をトリガーできます。パララックス コンポーネントが送信するイベントは次のとおりです。

イベント 説明
Parallax の読み込み完了 コンポーネントの表示の準備ができたときに送信されます。

プレビュー

設定中

パララックス コンポーネントは設定中にプレビューすることができます。

  1. コンポーネント編集モードを開始するには、ステージ上のコンポーネントをダブルクリックします。
  2. 上部の [プレビュー] タブをクリックします。
  3. 上下にスクロールして、サンプルのモバイル端末のレイアウトでレイヤの動作を確認します(非表示のレイヤは表示されません)。
  4. コンポーネントのプレビュー中は編集できません。[開始] または [終了] タブをクリックして変更を行い、[プレビュー] タブをもう一度クリックして変更内容を確認します。

ブラウザでのプレビュー

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

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

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

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

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。