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

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

  1. AdministrationVisual Experience Composer ​をクリックします。

  2. Mobile viewports configuration」セクションで、「Add」をクリックします。

    ビューポートの追加

    または

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

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

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

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

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

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

    オプション:

    • Android
    • iOS
    • Windows
    • Symbian
    • BlackBerry

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

  6. Save をクリックします。

NOTE
使用中のモバイルビューポートを削除しようとすると、「このビューポートは、現在、1 つ以上のアクティビティに関連付けられています。ビューポートを削除する前に、これらのアクティビティからビューポートを削除する必要があります。」というメッセージが表示されます。

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

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

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

  2. Visual Experience Composer (VEC)で、Settings 歯車アイコンをクリックし、「Add Mobile Viewports」を選択します。

    「モバイルビューポートを追加」オプション

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

    モバイルビューポートを有効にする

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

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

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

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

    iPhone 11 Pro Max のレスポンシブエクスペリエンス

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

    向きオプション

トレーニングビデオ

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

Visual Experience Composer (2/2)(7:29) 概要バッジ

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

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

Adobe Target のアカウント環境設定 概要バッジ

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

前のページVisual Experience Composer で使用される要素セレクター
次のページVisual Experience Composer のベストプラクティスと制限事項

Target