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

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

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

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

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

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

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

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

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

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

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

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

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

トレーニングビデオ

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

Visual Experience Composer （2/2）（7:29）

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

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

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