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

モバイルビューポートを使用すると、様々なサイズの画面で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 Max	414 x 896	1242 x 2688
iPhone 11	414 x 896	828 x 1792
iPhone 11 Xr	414 x 896	828 x 1792
iPhone 12 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	360w x 640	1440 x 2560
LG G4	360w x 640	1440 x 2560
LG G3	360w 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ブレークポイントは、メディアクエリとも呼ばれます。

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

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

重要

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

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

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

管理 / Visual Experience Composerをクリックします。
モバイルビューポート設定セクションで、追加をクリックします。

または

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

モバイルビューポートに認識しやすい説明的な名前を付けます。名前は、36 文字まで入力できます。
モバイルデバイスの画面サイズの幅と高さを指定します。

幅は150 ～ 968ピクセルにすることができます。高さは、150 ～ 1280ピクセルにすることができます。
（オプション）デバイスのオペレーティングシステムを選択します。

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

メモ

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

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

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

目的のアクティビティを作成します。
Visual Experience Composer (VEC)で、設定歯車アイコンをクリックし、「モバイルビューポートを追加」を選択します。
「デバイス」アイコンをクリックし、モバイルビューポートの設定が必要な各デバイスを有効にします。

モバイルビューポートは、幅が最小のものから最大のものへと順番にリストされます。
必要に応じて、モバイルビューポートを編集します。

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

ビューポート名の上にマウスポインターを置くと、ビューポートのサイズが表示されます。
必要に応じて、目的の向きのアイコンをクリックして縦長モードと横長モードを切り替えます。