Adobe TargetでMobile Viewportを利用する
はじめに
Adobe Targetで施策を実施する際にはPCとSPで画面確認が必要なことは多々あるかと思います。
特にレスポンシブデザインのサイト向けであれば、Mobile Viewportが確認の一助になるかと思いますので紹介したいと思います。
Mobile Viewportとは
Adobe TargetのMobile Viewportは、平たく言うと、Visual Experience Composer（以下、VECと呼称します）にて様々な画面サイズで画面表示を試すことができる機能です。
HELP：
https://experienceleague.adobe.com/ja/docs/target/using/experiences/vec/mobile-viewports
※いくつかのデバイスのビューポートサイズも掲載されています
初期状態ではDesktopしかありませんがこれのパターンを増やすことができます。
よって、サイトのガイドラインなどで指定された幅・高さをVEC上で擬似的に再現することで、一次確認などに活用ができます。
例えば、下図はiPhone 14の幅・高さのMobile Viewportを追加した例となります。
（画面上部のComposeタブ近くにiPhone 14と表示されています）
モバイルビューポートの追加
あらかじめ画面幅や高さ、OSを調べておきます。
その上で、管理者メニューのVisual experience composerメニューを開き、Mobile viewport configurationブロックのAddボタンをクリックします。
登録フォームがモーダル表示されます。
名前、幅、高さ、OSを選択してSaveボタンをクリックします。
Mobile viewport configurationブロックに保存した設定が追加されます。
Mobile Viewportの使い方
VECのギアアイコンをクリックしAdd Mobile Viewportsをクリックします。
ヘッダーメニュー下にモバイルアイコンが表示されるためクリックします。
Viewportsパネルが表示されるので追加するViewportをクリックしてONにします。
VECの画面UI部分がONにしたViewport設定の画面幅や高さにUIが変更されます
モバイルアイコン右横をクリックすると横向きの表示も確認できます。
ビューポートは複数ONにできます。
以下はiPhone 12 Pro Maxの画面幅・高さのMobile Viewport設定もONした表示例となります。
帯のViewport名（上図だとiPhone 12やDesktop）をクリックするとそのViewport設定の幅・高さに表示が切り替わります。
以下は上図でDesktopをクリックした後の表示となります。
まとめ
いかがでしょうか？
Mobile Viewportを設定しておくとVEC設定時にちょっとした表示確認が便利になるかと思います。
もちろん、擬似的な再現のため実際の画面で適切に動作するかは事情が異なる場合もあります。
実機やアクティビティQA URLにて実際の画面でも正しく施策が動作することを確認する上での、事前確認などにMobile Viewportを活用いただければと思います。
Implement DigitalではAdobe Analyticsの導入、実装、運用を支援するサービスを提供しています。
ご興味がありましたらお問い合わせください。
