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

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

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

メモ

  • サイトがレスポンシブで、デスクトップページと同じ要素が異なる設定でモバイルページに使用されている場合、モバイルビューポートを使用します。m.mysite.comなど、別の構造を持つ別のモバイルサイトがある場合は、代わりに複数ページアクティビティを使用します。

  • リダイレクトオファーのオーバーレイと重複する場合、モバイルビューポートは利用できません。

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

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

メモ

人気のデバイスのビューポートのサイズは様々な web サイトに表記されています。例えば、https://viewportsizer.com/devices/を参照してください。 最も正確で最新の情報については、デバイスメーカーのWebサイトを参照してください。

デバイス ビューポートサイズ（幅x高さ） デバイスの解像度（幅x高さ）
iPhone 12 390 x 844 1170 x 2532
iPhone 12 Mini 360 x 780 1080 x 2340
iPhone 12 Pro 390 x 844 1170 x 2532
iPhone 12 Pro Max 428 x 926 1248 x 2778
iPhone SE 214 x 379 640 x 1136
iPhone 11 Pro Max 414 x 896 1242 x 2688
iPhone 11 Xs最大 414 x 896 1242 x 2688
iPhone 11 414 x 896 828 x 1792
iPhone 11 Xr 414 x 896 828 x 1792
iPhone 11 Pro 375 x 812 1125 x 2436
iPhone 11 X 375 x 812 1125 x 2436
iPhone 11 Xs 375 x 812 1125 x 2436
iPhone X 375 x 812 1125 x 2436
iPhone 8 Plus 414 x 736 1080 x 1920
iPhone 8 375 x 667 750 x 1334
iPhone 7 Plus 414 x 736 1080 x 1920
iPhone 7 375 x 667 750 x 1334
iPhone 6s Plus 414 x 736 1080 x 1920
iPhone 6s 375 x 667 750 x 1334
iPhone 6 Plus 414 736 倍 1080 x 1920
iPhone 6 375 x 667 750 x 1334
iPad Pro 1024 x 1366 2048 x 2732
iPad 第 3 ＆第 4 世代 768 x 1024 1536 x 2048
iPad Air 1 & 2 768 x 1024 1536 x 2048
iPad Mini 768 x 1024 768 x 1024
iPad Mini 2 & 3 768 x 1024 1536 x 2048
Nexus 6P 411 x 731 1440 x 2560
Nexus 5X 411 x 731 1080 x 1920
Google Pixel 411 x 731 1080 x 1920
Google Pixel XL 411 x 731 1440 x 2560
Google Pixel 2 411 x 731 1080 x 1920
Google Pixel 2 XL 411 x 823 1440 x 2880
Samsung Galaxy Note 5 480 x 853 1440 x 2560
LG G5 360(w) x 640 1440 x 2560
LG G4 360(w) x 640 1440 x 2560
LG G3 360(w) x 640 1440 x 2560
One Plus 3 480 x 853 1080 x 1920
Samsung Galaxy S9 360 x 740 1440 x 2960
Samsung Galaxy S9+ 360 x 740 1440 x 2960
Samsung Galaxy S8 360 x 740 1440 x 2960
Samsung Galaxy S8+ 360 x 740 1440 x 2960
Samsung Galaxy S7 360 x 640 1440 x 2560
Samsung Galaxy S7 Edge 360 x 640 1440 x 2560
Nexus 7 (2013) 600 x 960 1200 x 1920
Nexus 9 768 x 1024 1536 x 2048
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 1280 x 850 2560 x 1700

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

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

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

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

重要

エクスペリエンスは、モバイルビューポート内で編集できます。 ただし、これらの変更は、作業中のビューポートだけでなく、すべてのビューポートとデバイスに適用されます。 同様に、通常のデスクトップビューでのエクスペリエンスの編集は、そのデスクトップビューだけでなく、すべての画面サイズのページを変更します。現在、Targetはビューポート固有のページ変更をサポートしていません。

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

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

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

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

    追加ビューポート

    または

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

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

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

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

    幅は、150 ～ 968ピクセルにすることができます。 高さは、150 ～ 1280ピクセルにすることができます。

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

    オプション：

    • Android
    • iOS
    • Windows
    • Symbian
    • BlackBerry

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

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

メモ

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

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

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

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

  2. Visual Experience Composer (VEC)で、設定​ギアアイコンをクリックし、追加モバイルビューポート​を選択します。

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

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

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

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

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

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

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

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

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

    方向オプション

トレーニングビデオ

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

Visual Experience Composer（2／2）（7：29） 概要バッジ

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

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

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

このビデオでは、4:40から始まるモバイルビューポートの設定に関する情報が説明されています。

このページ