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設定時にちょっとした表示確認が便利になるかと思います。…