On-site Message (OSM) エディターを使用すると、モバイル Web およびデスクトップ Web キャンペーン向けのメッセージを作成・カスタマイズできます。これにより、On-site メッセージがさまざまなデバイスで正しく表示され、最適なパフォーマンスを発揮し、より良いユーザー体験とエンゲージメントの向上につながります。このガイドは、オーディエンスに合わせた Web 体験を提供したいデジタルマーケターやプロダクトマネージャーを対象としています。 Mobile Web 向けの On-site メッセージを作成するには、キャンペーンの作成プロセスでターゲットプラットフォームとして Mobile Web を選択します。 残りのフィールドを入力し、キャンペーン作成プロセスの次のステップでテンプレートを選択します。

​

モバイルビューでテンプレートを編集する

モバイルビューでテンプレートを編集するには、次のようにします。

1. エディターで Desktop アイコンをクリックします。
2. デバイスビューのリスト (Desktop、Tablet、Mobile) が表示されます。これらのビューを切り替えて、さまざまなデバイスでテンプレートがどのように表示されるかを確認できます。
3. モバイル向けにテンプレートを編集するには、Mobile をクリックしてモバイルビューを開きます。
4. これで、モバイルデバイス向けにテンプレートのスタイル設定を開始できます。

​

Mobile Web テンプレートに要素を追加する

Mobile Web テンプレートに新しい要素を追加するには、次のようにします。

1. Desktop ビューに切り替えます。
2. エディターの左上隅にある + アイコンをクリックして、新しい要素を追加します。
3. 新しく追加した要素をクリックして、編集バーを開きます。編集バーで Settings アイコンをクリックし、Styling をクリックします。
4. Styling メニューで Advanced をクリックし、Show on Desktop トグルをオフにします。
5. この操作により、要素はデスクトップビューでは非表示になりますが、モバイルビューでは引き続き表示されます。

​

モバイルビューで要素のスタイルを設定する

1. モバイルビューで、スタイルを設定する要素をクリックします。スタイルオプションが開きます。
2. 編集バーには、次の 4 つのクイックカスタマイズオプションがあります。
   • Hide: モバイルビューで要素を非表示にします。
   • Text: サイズ、タイポグラフィ、太さなどのテキスト編集オプションを開きます。
   • Align: 要素をテンプレートの右、左、または中央に揃えます。
   • Settings: 要素の上下に余白を追加したり、HTML タグを変更したりできます。
3. エディターの右側に Styling タブと Effects タブが表示されます。Padding と Margin を使用すると、小さなモバイル画面で要素が窮屈に見えないようにし、読みやすさを向上させることができます。
   • Styling: Padding と Margin オプションを使用して、テンプレート上の要素の位置を変更します。
   • Effects: 要素に短いアニメーション効果を適用します。これらの効果の継続時間と遅延を変更することもできます。

​

次のステップ

• OSM キャンペーンを分析する