Show Menu
トピック×

Mobile Viewports for responsive experiences

Mobile viewports help you preview how your Target activities appear on screens of various sizes.
モバイルビューポートプレビュー機能は、様々なデバイス、ウィンドウ、画面サイズで適切にレンダリングされるレスポンシブサイト用に設計されています。 レスポンシブサイトは、デスクトップ、ラップトップ、タブレット、携帯電話など、あらゆる画面サイズに自動的に調整され、適応します。
  • サイトがレスポンシブで、デスクトップページと同じ要素が異なる設定でモバイルページに使用されている場合、モバイルビューポートを使用します。If you have a separate mobile site with a separate structure, such as m.mysite.com , use a multipage activity instead.
  • リダイレクトオファーのオーバーレイと重複する場合、モバイルビューポートは利用できません。
ビューポートは、画面いっぱいに広げられた Web ページの長方形のサイズで定義されます。ブラウザーウィンドウのサイズからスクロールバーとツールバーを引いたサイズになります。ブラウザーは、「CSS ピクセル」を使用します。Retina ディスプレイを備えたデバイスなど、多くのデバイスでは、ビューポートは、宣伝されているデバイスの解像度より小さくなります。
次に、一般的なデバイスのビューポートと解像度を示します。Remember to use the viewport size in Target. 人気のデバイスのビューポートのサイズは様々な web サイトに表記されています。例えば、https://viewportsizer.com/devices/ を参照するか、デバイスメーカーのWebサイトを参照してください。
デバイス
ビューポートのサイズ
デバイスの解像度
iPhone SE
375(w) x 667(h)
750(w) x 1334(h)
iPhone 11 Pro Max
414(w) x 896(h)
1242(w) x 2688(h)
iPhone 11 Xs最大
414(w) x 896(h)
1242(w) x 2688(h)
iPhone 11
414(w) x 896(h)
828(w) x 1792(h)
iPhone 11 Xr
414(w) x 896(h)
828(w) x 1792(h)
iPhone 11 Pro
375(w) x 812(h)
1125(w) x 2436(h)
iPhone 11 X
375(w) x 812(h)
1125(w) x 2436(h)
iPhone 11 Xs
375(w) x 812(h)
1125(w) x 2436(h)
iPhone X
375(w) x 812(h)
1125(w) x 2436(h)
iPhone 8 Plus
414(w) x 736(h)
1,080(w) x 1,920(h)
iPhone 8
375(w) x 667(h)
750(w) x 1334(h)
iPhone 7 Plus
414(w) x 736(h)
1,080(w) x 1,920(h)
iPhone 7
375(w) x 667(h)
750(w) x 1334(h)
iPhone 6s プラス
414(w) x 736(h)
1,080(w) x 1,920(h)
iPhone 6s
375(w) x 667(h)
750(w) x 1334(h)
iPhone 6 Plus
414(w) x 736(h)
1,080(w) x 1,920(h)
iPhone 6
375(w) x 667(h)
750(w) x 1334(h)
iPad Pro
1024(w) x 1366(h)
2048(w) x 2732(h)
iPad 第 3 &第 4 世代
768(w) x 1,024(h)
1,536(w) x 2,048(h)
iPad Air 1 & 2
768(w) x 1,024(h)
1,536(w) x 2,048(h)
iPad Mini
768(w) x 1,024(h)
768(w) x 1,024(h)
iPad Mini 2 & 3
768(w) x 1,024(h)
1,536(w) x 2,048(h)
Nexus 6P
411(w) x 731(h)
1440(w) x 2560(h)
Nexus 5X
411(w) x 731(h)
1,080(w) x 1,920(h)
Google Pixel
411(w) x 731(h)
1,080(w) x 1,920(h)
Google Pixel XL
411(w) x 731(h)
1440(w) x 2560(h)
Google Pixel 2
411(w) x 731(h)
1,080(w) x 1,920(h)
Google Pixel 2 XL
411(w) x 823(h)
1440(w) x 2880(h)
Samsung Galaxy Note 5
480(w) x 853(h)
1440(w) x 2560(h)
LG G5
480(w) x 853(h)
1440(w) x 2560(h)
One Plus 3
480(w) x 853(h)
1,080(w) x 1,920(h)
Samsung Galaxy S9
360(w) x 740(h)
1440(w) x 2960(h)
Samsung Galaxy S9+
360(w) x 740(h)
1440(w) x 2960(h)
Samsung Galaxy S8
360(w) x 740(h)
1440(w) x 2960(h)
Samsung Galaxy S8+
360(w) x 740(h)
1440(w) x 2960(h)
Samsung Galaxy S7
360(w) x 640h
1440(w) x 2560(h)
Samsung Galaxy S7 Edge
360(w) x 640h
1440(w) x 2560(h)
Nexus 7 (2013)
600(w) x 960(h)
1200(w) x 1,920(h)
Nexus 9
768(w) x 1,024(h)
1,536(w) x 2,048(h)
Samsung Galaxy Tab 10
800(w) x 1280(h)
800(w) x 1280(h)
Chromebook Pixel
1280(w) x 850(h)
2560(w) x 1700(h)
特定のデバイスを使用するユーザーにアクティビティを配信したい場合、アクティビティ図でそのデバイスに最適なオーディエンスを選択します。Mobile Web Composer を使用して、そのデバイスのアクティビティのページを編集します。デジタルエクスペリエンス全体にわたってアクティビティを実行したい場合で、すべてのデバイスで良好な見た目になるようにする場合、ターゲティングを適用せず、モバイルビューポートを使用して各スクリーンサイズでアクティビティをプレビューしてください。
レスポンシブサイトがある場合、通常、サイトは、特定の画面サイズのデバイスでアクセスされると、異なるビューで開くようにデザインされています。新しいビューをトリガーするこれらの画面サイズは、CSS ブレークポイントとも呼ばれます。CSSブレークポイントは、Webサイトのコンテンツが訪問者の幅に応じて応答し、デバイスに対して最適なレイアウトを表示するポイントです。 CSSブレークポイントは、 メディアクエリ
Save your CSS breakpoints in Target so you can preview your experiences for each view you define. Each of these experiences is displayed in a mobile viewport in the Target interface. ディスプレイの上部にあるビューポートをクリックして、各画面サイズのビューを開きます。
サイトがレスポンシブでない場合、アクティビティが特定のデバイスをターゲットにしていれば、引き続き Mobile Web Composer を使用してサイトを表示できます。
エクスペリエンスはモバイルビューポート内で編集できますが、これらの変更は、作業中のビューポートだけでなく、すべてのビューポートとデバイスに適用されます。 同様に、通常のデスクトップビューでのエクスペリエンスの編集は、そのデスクトップビューだけでなく、すべての画面サイズのページを変更します。現在は、ビューポート専用のページの変更はサポートしていません。

Mobile viewport configuration

エクスペリエンスを作成する際に、使用可能にするモバイルビューポートを設定します。
  1. 管理 / Visual Experience Composer ​をクリックします。
  2. 新しいモバイルビューポートを追加するには、 # セクションでをクリックし ​追加ます。
    To change the configuration of an existing mobile viewport, select that viewport, then click the Edit (pencil) icon.
  3. モバイルビューポートの名前を入力します。
    モバイルビューポートに認識しやすい説明的な名前を付けます。名前は、36 文字まで入力できます。
  4. モバイルデバイスの画面サイズの幅と高さを入力します。
    幅は、150 ~ 968 ピクセルの範囲で指定できます。高さは、150 ~ 1280 ピクセルの範囲で指定できます。
  5. (オプション)デバイスのオペレーティングシステムを選択します。
    オプション:
    • Android
    • iOS
    • Windows
    • Symbian
    • BlackBerry
    拡張 Experience Composer を使用してオペレーティングシステムを選択する場合、 は、ページを表示する際にデバイスをエミュレートします。TargetIf, for example, there is a different look and feel for Android than iOS on your responsive site, Target mimics that behavior.
  6. 保存 」をクリックします。

Create a responsive experience

Add mobile viewports to your Target activities to create responsive experiences for mobile screens.
  1. Visual Experience Composer で、 設定 (歯車)アイコンをクリックし、「 モバイルビューポートを追加 」を選択します。
  2. デバイス 」アイコンをクリックし、モバイルビューポートの設定が必要な各デバイスを有効にします。
    モバイルビューポートは、幅が最小のものから最大のものへと順番にリストされます。
  3. 必要に応じて、モバイルビューポートを編集します。
    エクスペリエンスに加えたすべての変更(例えば、見出しのテキストを変更した場合)は、すべてのデバイスのエクスペリエンスに適用されます。
    ビューポート名の上にマウスポインターを置くと、ビューポートのサイズが表示されます。
  4. 必要に応じて、向きのアイコンをクリックして、縦置きモードと横置きモードを切り替えます。

Use Case: Target two iPhone versions

この使用例は、2つのiPhoneバージョンに対してエクスペリエンスを設定する方法を示します。iPhone 11 Pro MaxおよびiPhone SE。
  1. ターゲットで、「 管理 」をクリックします。
  2. モバイルビューポート設定 」セクションで、iPhone 11 Pro MaxおよびiPhone SE用のモバイルビューポートを作成します。
    各ビューポートで次の設定を使用します。
    名前
    高さ
    オペレーティングシステム
    iPhone 11 Pro Max
    414
    896
    iOS
    iPhone SE
    375
    667
    iOS
  3. ターゲットしたいエクスペリエンスでアクティビティを作成します。
  4. iPhone 11 Pro MaxまたはiPhone SEからサイトにアクセスする訪問者にターゲットするエクスペリエンスを選択します。
  5. ターゲットを選択する際に、「 オーディエンスを作成 」をクリックしてから、次の図のようにオーディエンスを設定します。
    電話を横向きにすることができるので、高さと幅の両方を同時に320より大きくする必要があるので、iPhone Device Modelと組み合わせた場合、iPhone 11 Pro MaxとiPhone SEのみが満たす条件が作成されます。
  6. 保存 」をクリックします。
  7. 通常どおりにアクティビティの設定を続けます。

トレーニングビデオ

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

Visual Experience Composer(2/2)(7:29)

以下のデモビデオには、Visual Experience Composer を使用したモバイルビューポートとの連携に関する情報が含まれています。
  • エクスペリエンスの名前の変更と複製
  • リダイレクトエクスペリエンスの作成
  • 単一の URL または URL のグループに対するアクティビティのターゲット化
  • 複数ページのアクティビティの作成
  • レスポンシブ Web サイト用のエクスペリエンスのプレビューおよび構築
  • オーバーレイを使用した要素のタイプのハイライト

Adobe Target

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