> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Web での OSM テンプレートの編集

> MoEngage で Mobile Web 向けの On-site Messaging テンプレートをカスタマイズします。メッセージがデバイス間で正しく表示されるようにし、ユーザーエンゲージメントを向上させます。

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

Mobile Web 向けの On-site メッセージを作成するには、[キャンペーンの作成](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/create-osm-campaign)プロセスでターゲットプラットフォームとして **Mobile Web** を選択します。

<img src="https://mintcdn.com/moengage/t9nft78wsoLTI2Nx/images/moengage_2c1723.png?fit=max&auto=format&n=t9nft78wsoLTI2Nx&q=85&s=da05ae70dd7eb8955353c09d7b3dce6d" width="2692" height="1380" data-path="images/moengage_2c1723.png" />

残りのフィールドを入力し、キャンペーン作成プロセスの次のステップでテンプレートを選択します。

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

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

1. エディターで **Desktop** アイコンをクリックします。

   <img src="https://mintcdn.com/moengage/50ZszvUJB4M_6y_L/images/moengage_e70bcc.png?fit=max&auto=format&n=50ZszvUJB4M_6y_L&q=85&s=eb77f362739f854ca940502895831227" width="2670" height="1294" data-path="images/moengage_e70bcc.png" />
2. デバイスビューのリスト (**Desktop**、**Tablet**、**Mobile**) が表示されます。これらのビューを切り替えて、さまざまなデバイスでテンプレートがどのように表示されるかを確認できます。
3. モバイル向けにテンプレートを編集するには、**Mobile** をクリックしてモバイルビューを開きます。
4. これで、モバイルデバイス向けにテンプレートのスタイル設定を開始できます。

   <img src="https://mintcdn.com/moengage/cFTwc93vQdTanvKi/images/moengage_bead18.png?fit=max&auto=format&n=cFTwc93vQdTanvKi&q=85&s=1efb46de638d8fd01332129a37594e08" width="2700" height="1374" data-path="images/moengage_bead18.png" />

<Info>
  **情報**

  モバイルビューから要素を直接追加することはできませんが、デスクトップビューで要素を追加して表示設定を調整することで、モバイルでのみ表示されるように要素を構成できます。
</Info>

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

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

1. **Desktop** ビューに切り替えます。
2. エディターの左上隅にある **+ アイコン**をクリックして、新しい要素を追加します。

   <img src="https://mintcdn.com/moengage/xaH8HoR16_YVDek5/images/moengage_cc775c.png?fit=max&auto=format&n=xaH8HoR16_YVDek5&q=85&s=eab12dbdde34a9d765e3e283226fa9c3" width="2702" height="1374" data-path="images/moengage_cc775c.png" />
3. 新しく追加した要素をクリックして、編集バーを開きます。編集バーで **Settings** アイコンをクリックし、**Styling** をクリックします。

   <img src="https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6b592c.png?fit=max&auto=format&n=S2vOz7ciYYqlhjCf&q=85&s=588b52422849365e9f8de98e5bb13e28" width="2294" height="1220" data-path="images/moengage_6b592c.png" />
4. **Styling** メニューで **Advanced** をクリックし、**Show on Desktop** トグルをオフにします。

   <img src="https://mintcdn.com/moengage/_eUNBDpGCEXI_sgZ/images/moengage_a5a470.png?fit=max&auto=format&n=_eUNBDpGCEXI_sgZ&q=85&s=eca3a8d5e4085e379e2d7fa7b8cf4a67" width="1434" height="1344" data-path="images/moengage_a5a470.png" />
5. この操作により、要素はデスクトップビューでは非表示になりますが、モバイルビューでは引き続き表示されます。

   <img src="https://mintcdn.com/moengage/cVruC-B7I1TnIZ0h/images/moengage_da7c0f.png?fit=max&auto=format&n=cVruC-B7I1TnIZ0h&q=85&s=ffb91ab725ebad3290ed73b737ef00b1" width="1182" height="1100" data-path="images/moengage_da7c0f.png" />

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

1. モバイルビューで、スタイルを設定する要素をクリックします。スタイルオプションが開きます。

   <img src="https://mintcdn.com/moengage/wIFGWsQFEjsz2j4v/images/moengage_dfe157.png?fit=max&auto=format&n=wIFGWsQFEjsz2j4v&q=85&s=c43e2abefb526ce81a51fcaf73a46b46" width="2096" height="1358" data-path="images/moengage_dfe157.png" />
2. 編集バーには、次の 4 つのクイックカスタマイズオプションがあります。
   * **Hide**: モバイルビューで要素を非表示にします。
   * **Text**: サイズ、タイポグラフィ、太さなどのテキスト編集オプションを開きます。

     <img src="https://mintcdn.com/moengage/BlcsVkkZu61NB-XQ/images/moengage_4a24be.png?fit=max&auto=format&n=BlcsVkkZu61NB-XQ&q=85&s=984ae7c83c20131f8e02befaf5b6f21a" width="820" height="668" data-path="images/moengage_4a24be.png" />
   * **Align**: 要素をテンプレートの右、左、または中央に揃えます。
   * **Settings**: 要素の上下に余白を追加したり、HTML タグを変更したりできます。

     <img src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_3c231f.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=ce99c553cd663f8abb190527024ac08a" width="826" height="710" data-path="images/moengage_3c231f.png" />
3. エディターの右側に **Styling** タブと **Effects** タブが表示されます。Padding と Margin を使用すると、小さなモバイル画面で要素が窮屈に見えないようにし、読みやすさを向上させることができます。
   * **Styling**: **Padding** と **Margin** オプションを使用して、テンプレート上の要素の位置を変更します。

     <img src="https://mintcdn.com/moengage/M3SzEdkQVgGAjJCt/images/moengage_77e23e.png?fit=max&auto=format&n=M3SzEdkQVgGAjJCt&q=85&s=3c415e009884f17524b8c778603354c0" width="600" height="1370" data-path="images/moengage_77e23e.png" />
   * **Effects**: 要素に短いアニメーション効果を適用します。これらの効果の継続時間と遅延を変更することもできます。

     <img src="https://mintcdn.com/moengage/rlD8iAX6JQFx0hql/images/moengage_ba740e.png?fit=max&auto=format&n=rlD8iAX6JQFx0hql&q=85&s=23f2659826129df1041adf506bcb5769" width="598" height="1308" data-path="images/moengage_ba740e.png" />

# 次のステップ

* [OSM キャンペーンを分析する](/docs/ja/user-guide/campaigns-and-channels/on-site-message/analyze/analyze-on-site-messaging-campaigns)