レスポンシブエクスペリエンスのためのモバイルビューポート

モバイルビューポートを使用すると、様々な画面サイズで Adobe Target のアクティビティをプレビューできます。

モバイルビューポートプレビュー機能は、様々なデバイス、ウィンドウ、画面サイズで適切にレンダリングされるレスポンシブサイト用に設計されています。レスポンシブサイトは、デスクトップ、ノートパソコン、タブレット、携帯電話を含む、あらゆる画面サイズに自動的に調整および適応します。

ビューポートは、画面いっぱいに広げられた web ページの長方形のサイズで定義されます。ビューポートは、ブラウザーウィンドウのサイズからスクロールバーとツールバーを引いたサイズです。ブラウザーは、「CSS ピクセル」を使用します。Retina ディスプレイを備えたデバイスなど、多くのデバイスでは、ビューポートは、宣伝されているデバイスの解像度より小さくなります。

次に、一般的なデバイスのビューポートと解像度を示します。Target では、ビューポートのサイズを使用することを忘れないでください。

特定のデバイスを使用するユーザーにアクティビティを配信するには、アクティビティ図でそのデバイスに最適なオーディエンスを選択します。Mobile Web Composer を使用して、そのデバイスのアクティビティのページを編集します。すべてのデバイスで適切に表示されるように、デジタルエクスペリエンス全体でアクティビティを実行する場合は、ターゲティングを適用しないでください。代わりに、モバイルビューポートを使用して、各画面サイズでアクティビティをプレビューします。

レスポンシブサイトは通常、サイトは、特定の画面サイズのデバイスでアクセスすると、異なるビューで開くようにデザインされています。新しいビューをトリガーするこれらの画面サイズは、CSS ブレークポイントとも呼ばれます。CSS ブレークポイントとは、デバイスの幅に応じて web サイトのコンテンツを訪問者に対して最適なレイアウトで表示するためのポイントを指します。CSS ブレークポイントは、メディアクエリとも呼ばれます。

Target で CSS ブレークポイントを保存して、定義した各ビューでエクスペリエンスをプレビューできます。これらの各エクスペリエンスは、Target インターフェイスのモバイルビューポートに表示されます。ディスプレイの上部にあるビューポートをクリックして、各画面サイズのビューを開きます。

サイトがレスポンシブでない場合、アクティビティが特定のデバイスをターゲットにしていれば、引き続き Mobile Web Composer を使用してサイトを表示します。

モバイルビューポート設定

エクスペリエンスの作成時に使用可能にするモバイルビューポートを設定します。

1. 管理／Visual Experience Composer をクリックします。

2. モバイルビューポート設定​セクションで、「追加」をクリックします。

   

   または

   既存のモバイルビューポートの設定を変更するには、そのビューポートを選択して、編集（鉛筆）アイコンをクリックします。

3. モバイルビューポートの名前を入力します。

   モバイルビューポートに認識しやすい説明的な名前を付けます。名前は、36 文字まで入力できます。

4. モバイルデバイスの画面サイズの幅と高さを入力します。

   幅は、150 ～ 968 ピクセルにする必要があります。高さは 150 ～ 1280 ピクセルにする必要があります。

5. （オプション）デバイスのオペレーティングシステムを選択します。

   オプション：

   • Android
   • iOS
   • Windows
   • Symbian
   • BlackBerry

   拡張 Experience Composer を使用してオペレーティングシステムを選択する場合、Target は、ページを表示する際にデバイスをエミュレートします。例えば、レスポンシブサイトで Android のルックアンドフィールが iOS と異なる場合、Target はその動作を模倣します。

6. 「保存」をクリックします。

レスポンシブエクスペリエンスの作成

Target アクティビティにモバイルビューポートを追加して、モバイル画面用のレスポンシブエクスペリエンスを作成します。

1. 目的のアクティビティを作成します。

2. Visual Experience Composer（VEC）で、「設定」（歯車）アイコンをクリックし、「モバイルビューポートを追加」を選択します。

   

3. 「デバイス」アイコンをクリックし、モバイルビューポートの設定が必要な各デバイスを有効にします。

   

   モバイルビューポートは、幅が最小のものから最大のものへと順番にリストされます。

4. 必要に応じて、モバイルビューポートを編集します。

   エクスペリエンスに加えた変更は、すべてのデバイスのエクスペリエンスに適用されます。例えば、見出しのテキストを変更するとします。

   ビューポート名の上にマウスポインターを置くと、ビューポートのサイズが表示されます。

   

5. 必要に応じて、目的の向きアイコンをクリックして縦長モードと横長モードを切り替えます。

   

トレーニングビデオ

以下のビデオは、この記事で説明した概念についてさらに詳しく説明しています。

Visual Experience Composer（2／2）（7：29）

以下のデモビデオには、Visual Experience Composer を使用したモバイルビューポートとの連携に関する情報が含まれています。

• エクスペリエンスの名前の変更と複製
• リダイレクトエクスペリエンスの作成
• 単一の URL または URL のグループに対するアクティビティのターゲット化
• 複数ページのアクティビティの作成
• レスポンシブ Web サイト用のエクスペリエンスのプレビューおよび構築
• オーバーレイを使用した要素のタイプのハイライト

Adobe Target のアカウント環境設定

このビデオの 4:40 の時点から、モバイルビューポートの設定について説明しています。