> ## 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.

# In-App テンプレート

> ネイティブおよび HTML のオプションを備えた、あらかじめデザインされた MoEngage の In-App キャンペーンテンプレートをご紹介します。組み込みのヘルプガイドとユースケースを活用して、キャンペーンをすばやく作成できます。

# 概要

MoEngage の In-App キャンペーンには、効果的なユースケースのための組み込みガイダンスを備えた、あらかじめデザインされたテンプレートが用意されています。これらのテンプレートを使用すると、キャンペーンをすばやく効率的に作成でき、次のようなメリットがあります。

* 一般的で効果的なユースケースをサポートします。
* 組み込みのヘルプガイドが含まれています。
* 簡単に使用できます。
* キャンペーンをすばやく作成できます。

MoEngage では、In-App キャンペーン向けにネイティブテンプレートと HTML テンプレートの両方を提供しています。

## テンプレートの種類

キャンペーンの要件に応じて、さまざまな種類のテンプレートを使用します。

| テンプレートの種類 | 説明 |
| - | - |
| Popup | **Popup** テンプレートは、透明なオーバーレイの上に画面中央に表示されます。プロモーションや重要なお知らせにユーザーの注意を集中させる場合に使用します。 |
| Full Screen | **Full Screen** テンプレートは画面全体を占有し、アプリをブロックします。必須のアプリアップデートなど、重要な情報を伝える場合に使用します。 |
| Rating | **Rating** テンプレートは、ユーザーがアプリ内で 5 段階の星評価を行える特別なポップアップテンプレートです。リターゲティングを目的としたユーザーフィードバックの収集に使用します。 |
| Nudges | **Nudge** テンプレートは、ユーザーがアプリの操作を継続できる、邪魔にならないメッセージです。Nudge はアプリ内に埋め込まれて表示されるか、画面の上部または下部に表示されます。新しい情報やプロモーションのお知らせを配信する場合に使用します。<br />**前提条件:** Nudge には追加の SDK 統合が必要です。詳細については、[こちら](/docs/ja/developer-guide/ios-sdk/in-app-messages/in-app-nativ)を参照してください。<br />**重要:** Nudge はイベントトリガーでは動作しないため、Nudge の作成時に **On custom event** のトリガー条件を選択しないでください。<br />iOS アプリのインターフェイス内で In-App Nudge が確実に表示されるようにするには、iOS プラットフォーム向けのコンテンツ作成時に、次の画像のように **Template Settings** セクションで **iOS Safe Area** トグルをオンにします。  <img alt="iOS Safe Area の設定を示すスクリーンショット" src="https://mintcdn.com/moengage/-6I69HDJzlzOqYai/images/moengage_99a9ee.png?fit=max&auto=format&n=-6I69HDJzlzOqYai&q=85&s=d4bbcfe0495725097019e491a5837784" width="370" height="127" data-path="images/moengage_99a9ee.png" /> |
| Self Handled | **Self-Handled** テンプレートを使用すると、MoEngage の In-App キャンペーンの配信、セグメンテーション、パーソナライゼーション機能を活用しながら、メッセージコンテンツのレンダリングを自社で行うことができます。このオプションは、複雑なカスタムメッセージのビジュアルを作成する場合に便利です。 |

## ネイティブ In-App テンプレートのカスタマイズ

In-App テンプレートがすべてのデバイスで最適に表示されるように、次のガイドラインに従ってください。

### 画像のカスタマイズ

In-App キャンペーンには高解像度の画像をアップロードしますが、ファイルサイズは 2 MB 未満に抑えてください。In-App メッセージがデバイスに表示される前に、メッセージ内の画像は CDN からダウンロードされてからユーザーに表示されます。画像が大きいと、特にインターネット接続が遅いユーザーの場合、メッセージの表示が遅れる可能性があります。

#### 画像のアスペクト比

MoEngage では、テンプレートの種類ごとに次の画像アスペクト比を推奨しています。

| **テンプレート名** | **推奨アスペクト比（幅:高さ）** |
| - | - |
| **Popup - Image, Text & 3 Buttons** | 画像は自動的にリサイズされます。最適な表示のために、1:1 のアスペクト比で 50x50 ピクセル以上の画像を使用してください。 |
| **Popup - Image, Text & Button** | 画像は自動的にリサイズされます。歪みを防ぐため、最適な表示には 1:2、2:3、3:2、2:1 などのアスペクト比で、最小 450x450 ピクセルの画像を使用してください。 |
| **Popup - Image, Header, Text & Button** | 画像は自動的にリサイズされます。歪みを防ぐため、最適な表示には 1:2、2:3、3:2、2:1 などのアスペクト比で、最小 450x450 ピクセルの画像を使用してください。 |
| **Popup - Image & 2 Buttons** | 画像は自動的にリサイズされます。歪みを防ぐため、最適な表示には 1:2、2:3、3:2、2:1 などのアスペクト比で、最小 450x450 ピクセルの画像を使用してください。 |
| **Popup - Rating with Image** | 画像は自動的にリサイズされます。最適な表示のために、1:1 のアスペクト比で 50x50 ピクセル以上の画像を使用してください。 |
| **Popup - Image** | 高解像度の画像を推奨します。最大 1200x2000 ピクセル、最小 450x450 ピクセルです。 |
| **Popup - Image & Button** | 高解像度の画像を推奨します。最大 1200x2000 ピクセル、最小 600x600 ピクセルです。 |
| **Full Screen - Image, Text & Button** | 大型デバイスでの歪みを防ぐため、アスペクト比 3:4 または 3:5 で、450x600 ピクセル以上の画像を使用してください。 |
| **Full Screen - Image** | 大型デバイスでの歪みを防ぐため、アスペクト比 3:4 または 3:5 で、450x600 ピクセル以上の画像を使用してください。 |
| **Nudge - Image** | アスペクト比がおよそ 5:1 または 6:1 の横長の画像を使用してください。 |
| [**SMS Sign-up**](#sms-sign-up-templates) | ユーザーが SMS 通知の受信に登録し、同意できるようにするには、このテンプレートを使用します。**Fullscreen - SMS Sign-up with image** と **Popup - SMS Sign-up without image** の 2 種類があります。 |

#### 使用可能な画像形式

すべての In-App ネイティブテンプレートで、.png、.jpeg、.gif の画像をアップロードできます。

Android の In-App ネイティブテンプレートで GIF を使用するには、[Android In-App NATIV SDK ドキュメント](/docs/ja/developer-guide/android-sdk/in-app-messages/in-app-nativ)に記載されている必要な統合手順を完了してください。iOS プラットフォームはデフォルトで GIF をサポートしています。

#### 画像の品質とサイズ

大画面での歪みを防ぐため、In-App ネイティブテンプレートには高解像度の画像を使用してください。画像ファイルが大きいと、インターネット接続が不安定なデバイスではダウンロードに失敗する可能性があります。画像の品質とダウンロード時間のバランスを取るため、画像は 2MB 未満に抑えてください。

#### デバイスに応じた画像のスケーリング

In-App メッセージは、さまざまな画面サイズと DPI のデバイスに表示されます。そのため、アップロードした画像は、異なるデバイスのサイズに合わせて拡大または縮小されます。たとえば、Popup - Image テンプレートに 600 x 1000 ピクセルの画像をアップロードし、幅 320 ピクセルのデバイスでメッセージが 400 ピクセルを占める場合、画像の幅は 300 ピクセルに縮小されます。高さは元のアスペクト比（3:5）に基づいて計算され、300 x 500 ピクセルの画像になります。この処理により、画像の比率が維持され、歪みが生じません。

#### 背景画像

In-App メッセージの背景画像を設定するには、次の手順に従います。

1. キャンペーン作成の **Step 2**（**Content**）で、**Template Settings** をクリックします。
2. **Template background image** で、次のいずれかのオプションを選択します。
   * **Image URL** をクリックし、画像の URL を入力または貼り付けます。
   * **Upload Image** をクリックし、画像をドラッグ＆ドロップするか、**Upload from Computer** をクリックして画像を選択します。

<img src="https://mintcdn.com/moengage/xeb_76Bworf1GG6P/images/moengage_9594e4.png?fit=max&auto=format&n=xeb_76Bworf1GG6P&q=85&s=0750230a61223ba43d4b3755c3257662" alt="テンプレートの背景画像を設定するオプションを示すスクリーンショット。" width="1687" height="826" data-path="images/moengage_9594e4.png" />

<Warning>
  背景画像は、他の In-App コンテンツ画像のようにはスケーリングされません。代わりに、背景画像は内部ウィジェットによって計算されたメッセージの幅と高さに合わせて調整されます。そのため、画像が引き伸ばされる場合があります。
</Warning>

#### 背景色

In-App メッセージの背景色を設定したり、背景色を削除してメッセージを透明にしたりできます。

1. キャンペーン作成の **Step 2**（**Content**）で、**Template Settings** をクリックします。
2. **Background color** で色を選択します。
3. **Phone background color** で色を選択します。

<img src="https://mintcdn.com/moengage/UX7SFw6G5JwoHWFq/images/moengage_5fc819.png?fit=max&auto=format&n=UX7SFw6G5JwoHWFq&q=85&s=7d35d378d598dbb92111114ce0e5376c" alt="テンプレートの背景色を設定するオプションを示すスクリーンショット。" width="1687" height="826" data-path="images/moengage_5fc819.png" />

## Nudge テンプレートを使用した In-App キャンペーンの作成

Nudge テンプレートを使用すると、ユーザー体験を向上させ、効果的なパーソナライゼーションによって投資収益率（ROI）を高める、邪魔にならない In-App メッセージを作成できます。MoEngage では、次の Nudge テンプレートを提供しています。

| テンプレート名 | 説明 |
| - | - |
| **Popup - GIF & button** | 背景画像、GIF、ボタンを含むテンプレートです。お知らせに使用します。 |
| **Nudge - Rating** | 背景画像、テキスト、評価、ボタンを含むテンプレートです。評価テキストはカスタマイズできます。ユーザーフィードバックの収集に使用します。 |
| **Nudge - Text & button** | 背景画像、テキスト、ボタンを含むテンプレートです。新しいオファー、プロモーションメッセージ、ヒントに使用します。 |
| **Nudge - Image & text** | 背景画像、テキスト、画像を含むテンプレートです。新しいオファー、プロモーションメッセージ、お知らせに使用します。 |
| **Nudge - GIF** | 背景画像と GIF を含むテンプレートです。お知らせに使用します。 |
| **Nudge - Video** | 背景画像と動画を含むテンプレートです。お知らせに使用します。 |
| **Popup - Video & button** | 背景画像、動画、ボタンを含むテンプレートです。お知らせに使用します。 |
| **Nudge - Image only** | 背景画像と画像を含むテンプレートです。新しいオファーやプロモーションメッセージに使用します。 |
| **Nudge - Text only** | 背景画像とテキストを含むテンプレートです。新しいオファー、プロモーションメッセージ、ヒントの表示に使用します。 |
| **Nudge - Image, text & button** | 背景画像、テキスト、画像、ボタンを含むテンプレートです。新しいオファー、プロモーションメッセージ、ヒントの表示に使用します。 |

<Info>
  Nudge は InApp iOS SDK バージョン 4.15.00 および InApp Android SDK バージョン 7.0.0 以降でサポートされています。詳細については、[In-App Nativ Nudges](https://www.moengage.com/docs/developer-guide/android-sdk/in-app-messages/in-app-nativ#display-inapp) を参照してください。
</Info>

Nudge テンプレートを使用して In-App キャンペーンを作成するには、次の手順に従います。

1. In-App キャンペーン作成の **Step 2** で、**Search templates** ボックスに「Nudges」と入力するか、左側の **Filter By Type** メニューから **Nudges** を選択します。テンプレートセレクターにすべての Nudge テンプレートが表示されます。
2. 目的の Nudge テンプレートにカーソルを合わせ、**Select** をクリックします。カーソルを合わせるとテンプレートのプレビューが表示されます。テンプレートを選択すると、テンプレートエディターが表示されます。
3. テンプレートエディターで次のフィールドに入力して、Nudge を作成します。変更を加えると、テンプレートのプレビューが表示されます。
   * **Template Settings**

     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Placement and Background** | **Nudge Placement** | 画面上での Nudge の配置方法を選択します。<ul><li>**Fixed**: Nudge は固定位置に表示されます。**Bottom left** または **Bottom right** を選択します。</li><li>**Floating**: ユーザーは Nudge をドラッグして画面上で移動できます。開始位置として **Bottom left** または **Bottom right** を選択します。</li></ul> |

     <Note>
       **Floating** 配置（Movable Nudges）は、In-App Android SDK バージョン 11.0.0 および In-App iOS SDK バージョン 10.14.0 以降で利用できます。
     </Note>

     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Placement and Background** | **Default Display Size** | このドロップダウンリストから Nudge の表示サイズを選択します: **Minimised** または **Fullscreen**。 |
     | | **Minimised Container Width** | Nudge コンテナーの幅を選択します。このオプションは、最小化表示の場合にのみ使用できます。 |
     | | **Nudge Background** | Nudge に背景を追加するには、次のいずれかを選択します:  - **Upload Image**: コンピューターから画像をアップロードします。 - **Image URL**: 背景画像を取得する URL を追加します。 - **Background Color**: Nudge に背景色を追加します。 |
     | **Animation** | **Entry Animation** | ドロップダウンリストから、Nudge の表示開始時（Nudge がユーザーに初めて表示されるとき）のアニメーションを選択します。 |
     | | **Exit Animation** | ドロップダウンリストから、Nudge の終了時（Nudge が閉じられるか削除されるとき）のアニメーションを選択します。 |
     | **Close Button** | **Display** | **Display** を切り替えて、Nudge の閉じるボタンの表示/非表示を設定します。 |
     | | **Type** | ドロップダウンリストからボタンの種類を選択します。一部のオプションは Android のみ、または iOS のみで利用でき、括弧内のプラットフォーム名で示されます（例: `<ButtonName>`(Android)）。 |
     | | **Close Button Placement** | このドロップダウンリストで閉じるボタンの位置を指定します: **Right** または **Left**。 |
     | **Margin** | **Margin** | Nudge コンテナーのマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | Nudge コンテナーの上、下、右、左のマージンを指定します。 |
     | **Border** | **Width** | スケールを使用して、枠線の幅をピクセル単位で指定します。 |
     | | **Radius** | スケールを使用して、枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、枠線の色を選択します。 |
   * **GIF**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Image Source** | **Upload GIF** | Nudge に表示する GIF をコンピューターから選択します。 |
     | | **GIF URL** | GIF を取得する URL を追加します。 |
     | **Margin** | **Margin** | GIF のマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | GIF の上、下、右、左のマージンを指定します。 |
     | **Padding** | **Padding** | スケールを使用して、GIF のパディング幅をピクセル単位で指定します。 |
     | | **Top, Bottom, Right, and Left** | GIF の上、下、右、左のパディングを指定します。 |
     | | **Radius** | スケールを使用して、GIF のパディングの角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、GIF のパディングの枠線の色を選択します。 |
     | **Border** | **Width** | スケールを使用して、Nudge コンテナー内の GIF の枠線の幅をピクセル単位で指定します。 |
     | | **Radius** | スケールを使用して、Nudge コンテナー内の GIF の枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、Nudge コンテナー内の GIF の枠線の色を選択します。 |
     | プレビュー内の GIF をクリックしてカスタマイズすることもできます。 | | |
   * **Buttons**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Button Appearance** | **Button Type** | ボタンの種類を指定します: **Filled**、**Outlined**、または **Text**。 |
     | | **Button Text** | ボタンに表示するテキストを指定します。 |
     | | **Font Size** | ボタンテキストのフォントサイズを指定します。 |
     | | **Font Color** | ボタンテキストのフォントの色を指定します。 |
     | | **Custom Font** | ボタンテキストに使用するカスタムフォントの名前（アプリバンドルで利用可能なもの）を指定します。 |
     | | **Button Color** | テキストボックスをクリックしてカラーグラデーションを選択し、ボタンの色を指定します。 |
     | **Focused State** | **Font Size** | ユーザーがリモコンを使用してボタンに移動したときのテキストサイズを指定します。 |
     | | **Font Color** | ユーザーがリモコンを使用してボタンに移動したときのテキストの色を指定します。 |
     | | **Button Color** | ユーザーがリモコンを使用してボタンに移動したときのボタンの色を指定します。 |
     | **Actions** | **Default** | ボタンのデフォルトアクションは **Dismiss**（クリックすると Nudge が閉じます）です。**Default** ドロップダウンの横にある **Delete** アイコンをクリックすると、このデフォルトアクションを削除できます。 |
     | | **+ Actions** | **+Action** をクリックしてカスタムアクションを追加します。**Custom** ドロップダウンリストからアクションを選択します。デフォルトアクションは Nudge を閉じます。詳細については、[Custom Actions](https://moengage.com/docs/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign) を参照してください。 |
     | **Width, Margin & Padding** | **Width** | ボタンの幅を指定します。 |
     | | **Margin** | ボタンのマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | ボタンの上、下、右、左のマージンを指定します。 |
     | | **Padding** | スケールを使用して、ボタンのパディング幅をピクセル単位で指定します。 |
     | | **Top, Bottom, Right, and Left** | ボタンの上、下、右、左のパディングを指定します。 |
     | **Border** | **Width** | スケールを使用して、Nudge コンテナー内のボタンの枠線の幅をピクセル単位で指定します。 |
     | | **Radius** | スケールを使用して、Nudge コンテナー内のボタンの枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、Nudge コンテナー内のボタンの枠線の色を選択します。 |
     | プレビュー内のボタンをクリックしてカスタマイズすることもできます。 | | |
     | <img src="https://mintcdn.com/moengage/xGyg9rXr6djolSrt/images/moengage_dcac37.png?s=00b6161aca2d11e5ed4129d8548b7388" alt="Nudge テンプレートの要素のカスタマイズを示す GIF。" width="1440" height="688" data-path="images/moengage_dcac37.png" /> | | |
4. テンプレートをプレビューします。
5. キャンペーンをテストします。詳細については、[In-App キャンペーンのテスト](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/preview-in-app-template-in-your-phone)を参照してください。
6. **Step 3** でキャンペーンをスケジュールし、公開します。

## TV テンプレート

TV テンプレートを使用すると、TV プラットフォームで魅力的でパーソナライズされた In-App 体験を提供できます。これらのテンプレートは、ユーザーとのインタラクションを強化し、投資収益率（ROI）を向上させます。MoEngage では、ニーズに合わせてさまざまな TV テンプレートを提供しています。

| テンプレート名 | 説明 |
| - | - |
| **TV Banner: Text and Image with 2 Buttons** | 背景画像とテキストを含み、最大 2 つのボタンを追加できるテンプレートです。バナーの作成に使用します。 |
| **TV Pop-up: 3 Text with 3 Buttons** | 背景画像を含み、最大 3 つのテキストフィールドと 3 つのボタンを追加できるテンプレートです。ポップアップの作成に使用します。 |
| **TV Pop-up: 3 Text with 1 Button** | 背景画像を含み、最大 3 つのテキストフィールドと 1 つのボタンを追加できるテンプレートです。ポップアップの作成に使用します。 |
| **TV Pop-up: 3 Text with 2 Buttons** | 背景画像を含み、最大 3 つのテキストフィールドと 2 つのボタンを追加できるテンプレートです。ポップアップの作成に使用します。 |
| **TV Banner: Text with 1 Button** | 背景画像、テキスト、ボタンを含むテンプレートです。バナーの作成に使用します。 |
| **TV Banner: Text with 2 Buttons** | 背景画像、テキスト、2 つのボタンを含むテンプレートです。バナーの作成に使用します。 |
| **TV Banner: Text and Image with 1 Button** | 背景画像、テキスト、画像、1 つのボタンを含むテンプレートです。バナーの作成に使用します。 |
| **TV Pop-up: 3 Text with No Buttons** | 背景画像を含み、最大 3 つのテキストフィールドを追加できるテンプレートです。ポップアップの作成に使用します。 |

TV テンプレートを使用して In-App キャンペーンを作成するには、次の手順に従います。

1. In-App キャンペーン作成の **Step 1** で、**Target Platforms** セクションの **TV** を選択します。キャンペーン作成の次のステップで、テンプレートセレクターにすべての TV テンプレートが表示されます。
2. 目的の TV テンプレートにカーソルを合わせ、**Select Template** をクリックします。カーソルを合わせるとテンプレートのプレビューが表示されます。テンプレートを選択すると、テンプレートエディターが表示されます。
3. テンプレートエディターで次のフィールドに入力して、キャンペーンを作成します。変更を加えると、テンプレートのプレビューが表示されます。
   * **Template Settings**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Placement and Background** | **Nudge Placement** | Nudge は画面の下部に表示されます。**Bottom-left** または **Bottom-right** を選択します。 |
     | | **Phone Background Color** | テキストの背景色を指定します。この色は、アプリ画面の上、In-App メッセージの背後に表示されます。 |
     | | **Template Background Image** | Nudge に背景を追加するには、次のいずれかを選択します。<ul><li>**Upload Image**: コンピューターから画像をアップロードします。</li><li>**Image URL**: 背景画像を取得する URL を追加します。</li><li>**Background Color**: 背景色を追加します。</li></ul> |
     | **Animation** | **Entry Animation** | ドロップダウンリストから、Nudge の表示開始時（Nudge がユーザーに初めて表示されるとき）のアニメーションを選択します。 |
     | | **Exit Animation** | ドロップダウンリストから、Nudge の終了時（Nudge が閉じられるか削除されるとき）のアニメーションを選択します。 |
     | **Width and Margin** | **Width** | TV コンテナーの幅を指定します。 |
     | | **Margin** | TV コンテナーのマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | TV コンテナーの上、下、右、左のマージンを指定します。 |
     | **Border** | **Width** | スケールを使用して、枠線の幅をピクセル単位で指定します。 |
     | | **Radius** | スケールを使用して、枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、枠線の色を選択します。 |
   * **Image**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Image Source** | **Upload Image** | テンプレートに表示する画像をコンピューターから選択します。 |
     | | **Image URL** | 画像を取得する URL を追加します。 |
     | **Margin & Padding** | **Margin** | 画像のマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | テキストの上、下、右、左のマージンを指定します。 |
     | | **Padding** | テキストのパディングを指定します。 |
     | | **Top, Bottom, Right, and Left** | テキストの上、下、右、左のパディングを指定します。 |
     | **Border** | **Width** | 画像の枠線の幅を指定します。 |
     | | **Radius** | 画像の枠線の角丸の半径を指定します。 |
     | | **Border Color** | テキストボックスをクリックして、TV コンテナーに含まれる画像の枠線の色を選択します。 |
     | | **Image Container Width (15% Max)** | 画像コンテナーの幅を指定します。 |
   * **Text**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Text Content** | **Heading** | テキストに表示する見出しを指定します。 |
     | | **Font Size** | テキストのフォントサイズを指定します。 |
     | | **Font Color** | テキストのフォントの色を指定します。 |
     | | **Custom Font** | テキストに使用するカスタムフォントの名前（アプリバンドルで利用可能なもの）を指定します。 |
     | | **Background Color** | テキストの背景色を指定します。 |
     | **Width, Margin & Padding** | **Width** | テキストの幅を指定します。 |
     | | **Margin** | テキストのマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | テキストの上、下、右、左のマージンを指定します。 |
     | | **Padding** | テキストのパディングを指定します。 |
     | | **Top, Bottom, Right, and Left** | テキストの上、下、右、左のパディングを指定します。 |
     | **Border** | **Width** | 枠線の幅を指定します。 |
     | | **Radius** | スケールを使用して、TV コンテナー内のテキストの枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、TV コンテナー内のテキストの枠線の色を選択します。 |
   * **Buttons**
     | セクション | フィールド | 説明 |
     | - | - | - |
     | **Button Appearance** | **Button Type** | ボタンの種類を指定します: **Filled**、**Outlined**、または **Text**。 |
     | | **Button Text** | ボタンに表示するテキストを指定します。 |
     | | **Font Size** | ボタンテキストのフォントサイズを指定します。 |
     | | **Font Color** | ボタンテキストのフォントの色を指定します。 |
     | | **Custom Font** | ボタンテキストに使用するカスタムフォントの名前（アプリバンドルで利用可能なもの）を指定します。 |
     | | **Button Color** | テキストボックスをクリックしてカラーグラデーションを選択し、ボタンの色を指定します。 |
     | **Focused State** | **Font Size** | ユーザーがリモコンを使用してボタンに移動したときのテキストサイズを指定します。 |
     | | **Font Color** | ユーザーがリモコンを使用してボタンに移動したときのテキストの色を指定します。 |
     | | **Button Color** | ユーザーがリモコンを使用してボタンに移動したときのボタンの色を指定します。 |
     | **Actions** | **Default** | ボタンのデフォルトアクションは **Dismiss**（クリックするとテンプレートが閉じます）です。**Default** ドロップダウンの横にある **Delete** アイコンをクリックすると、このデフォルトアクションを削除できます。 |
     | | **+ Actions** | **+Action** をクリックしてカスタムアクションを追加します。**Custom** ドロップダウンリストからアクションを選択します。 |
     | **Width, Margin & Padding** | **Width** | ボタンの幅を指定します。 |
     | | **Margin** | ボタンのマージンを指定します。 |
     | | **Top, Bottom, Right, and Left** | ボタンの上、下、右、左のマージンを指定します。 |
     | | **Padding** | ボタンのパディングを指定します。 |
     | | **Top, Bottom, Right, and Left** | ボタンの上、下、右、左のパディングを指定します。 |
     | **Border** | **Width** | スケールを使用して、TV コンテナー内のボタンの枠線の幅をピクセル単位で指定します。 |
     | | **Radius** | スケールを使用して、TV コンテナー内のボタンの枠線の角丸の半径をピクセル単位で指定します。 |
     | | **Border Color** | テキストボックスをクリックして、TV コンテナー内のボタンの枠線の色を選択します。 |
4. テンプレートをプレビューします。
5. キャンペーンをテストします。詳細については、[In-App キャンペーンのテスト](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/test-your-in-app-campaign)を参照してください。
6. **Step 3** でキャンペーンをスケジュールし、公開します。

## SMS Sign-Up テンプレート

<Warning>
  この機能は現在、北米リージョンでのみ有効です。さらにサポートが必要な場合は、MoEngage のカスタマーサクセスマネージャー（CSM）またはサポートチームにお問い合わせください。
</Warning>

SMS Sign-Up テンプレートを使用すると、ユーザーに SMS 通知の受信への同意を求めることができます。北米リージョンのコンプライアンスの詳細については、[北米リージョンの SMS](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/sms-for-north-america-region/subscription-management-and-keywords) を参照してください。

MoEngage では、2 つの SMS Sign-Up テンプレートを提供しています。

* **Fullscreen - SMS Sign-Up with Image**
* **Popup - SMS Sign-Up without Image**

<img src="https://mintcdn.com/moengage/Vec55CKt-wYQ1h5L/images/moengage_44c043.png?fit=max&auto=format&n=Vec55CKt-wYQ1h5L&q=85&s=4a8b20c222f65c23f505c8e5f4f5fb83" alt="SMS Sign-Up テンプレートのオプションを示すスクリーンショット。" width="1483" height="801" data-path="images/moengage_44c043.png" />

### Fullscreen - SMS Sign-Up with Image

画像付きの SMS Sign-Up テンプレートを作成する場合は、必要に応じて画像とテキストを変更してから、次の手順に従います。

1. MoEngage が提供するデフォルトの法的文言を確認します。
   "By signing up for text messages, you agree to receive recurring automated promotional and personalized text messages (cart reminders) at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel."
2. 必要に応じて **Terms of Service** を設定します。
3. 必要に応じて **Privacy Policy** を設定します。
4. 同意を受け取るボタンを設定します。
   <img src="https://mintcdn.com/moengage/B1ZqBU-ISgaoSx_O/images/moengage_5620bb.png?fit=max&auto=format&n=B1ZqBU-ISgaoSx_O&q=85&s=96954519cd21c3ccfd77528d3fe44d64" alt="画像付きの SMS Sign-Up テンプレートを示すスクリーンショット。" width="1652" height="809" data-path="images/moengage_5620bb.png" />

| フィールド | 説明 |
| - | - |
| **Mobile Number** | 同意を受け取り、通知を購読するために使用する携帯電話番号を指定します。 |
| **Message** | オプトインキーワードを追加します。キーワードの詳細については、[サブスクリプションとキーワードの設定](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/other-settings/configure-subscription-and-keywords)を参照してください。 |

### Popup - SMS Sign-Up without Image

画像なしの SMS Sign-Up テンプレートを作成する場合は、必要に応じてテキストを変更してから、次の手順に従います。

1. MoEngage が提供するデフォルトの法的文言を確認します。
   "By signing up for text messages, you agree to receive recurring automated promotional and personalized text messages (cart reminders) at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel."
2. 必要に応じて **Terms of Service** を設定します。
3. 必要に応じて **Privacy Policy** を設定します。
4. 同意を受け取るボタンを設定します。
   <img src="https://mintcdn.com/moengage/8EX_gHAg3q4zA1kw/images/moengage_27ee0e.png?fit=max&auto=format&n=8EX_gHAg3q4zA1kw&q=85&s=8bea960291a710abc001a876a1972a85" alt="画像なしの SMS Sign-Up テンプレートを示すスクリーンショット。" width="1650" height="815" data-path="images/moengage_27ee0e.png" />

| フィールド | 説明 |
| - | - |
| **Mobile Number** | 同意を受け取り、通知を購読するために使用する携帯電話番号を指定します。 |
| **Message** | オプトインキーワードを追加します。キーワードの詳細については、[サブスクリプションとキーワードの設定](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/other-settings/configure-subscription-and-keywords)を参照してください。 |

## パーソナライゼーション

さまざまなデータソースを使用して、キャンペーンコンテンツをパーソナライズできます。詳細については、以下を参照してください。

* [MoEngage テンプレート言語（Jinja）](/docs/ja/user-guide/campaigns-and-channels/getting-started/message-personalization/jinja-templating-language)
* [派生イベントと属性](/docs/ja/user-guide/data/event-data/derived-events-and-attributes)
* [Product Sets](/docs/ja/user-guide/content/recommendations/getting-started/catalogs)
* [Content APIs](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/content-apis)
* [Content Blocks](/docs/ja/user-guide/content/content-blocks/content-blocks)

<img src="https://mintcdn.com/moengage/prFQLkdcYp4xSt9t/images/moengage_68d946.png?s=71c1e4e0168746bd22354706117e0ab5" alt="@ 記号を使用してコンテンツをパーソナライズする方法を示す GIF。" width="1440" height="622" data-path="images/moengage_68d946.png" />

コンテンツをパーソナライズするには、次の手順に従います。

1. コンテンツエディターで **@** を入力して、パーソナライゼーションのオプションを開きます。
2. **Data Personalization** または **Content Block** のいずれかを選択します。
3. **Data Personalization** を選択した場合は、次のいずれかのオプションを選択します。
   1. **User Attributes**
   2. パーソナライゼーションが機能しない場合の代替（フォールバック）として、次のいずれかのオプションを選択します。
      * **No Fallback**: パーソナライゼーションが失敗した場合、代替コンテンツは表示されません。
      * **Do Not Send In-App**: パーソナライゼーションが失敗した場合、In-App メッセージは送信されません。
      * **Replace Text**: パーソナライゼーションが失敗した場合に表示するテキストを指定します。
   3. **Product Sets**
   4. **Content API**: Content API のパラメーターの値を変更します。
4. **Content Block** を選択した場合:
   1. 挿入するコンテンツブロックを選択します。
   2. **Insert Only the Content of the Content Block** をクリックします。
      <Info>
        * ブロックのコンテンツのみが挿入されます。
        * 挿入されたコンテンツは、元のコンテンツブロックとの接続が解除されます。
        * 元のコンテンツブロックに今後加えられた更新は、挿入されたコンテンツには反映されません。
      </Info>
5. **Done** をクリックします。

## In-App メッセージのアクセシビリティの設定

MoEngage で In-App メッセージのアクセシビリティ機能を設定して、すべてのユーザーがメッセージを利用できるようにします。アクセシビリティの原則を包括的に理解するには、[MoEngage のアクセシブルなキャンペーン](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。

### ビジュアルへの代替テキスト（Alt Text）の追加

代替テキストは画像や GIF をテキストで説明するもので、スクリーンリーダーを利用するユーザーにも内容が理解できるようにします。

* **ドラッグ＆ドロップエディターを使用する場合:** In-App キャンペーンに **Image** または **GIF** 要素を追加するときは、**Alt Text** ボックスに明確で簡潔な説明を入力します。
  <img src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_39cd65.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=2bbaf430103247345788cdf63b6ceee6" alt="ドラッグ＆ドロップエディターでの画像の Alt Text ボックスを示すスクリーンショット。" width="3180" height="1600" data-path="images/moengage_39cd65.png" />
* **ネイティブ In-App テンプレートの場合:** **Popup—Image, Text, and Button** などのネイティブテンプレートでは、**Accessibility Text** ボックスに画像の代替テキストを入力します。
  <img src="https://mintcdn.com/moengage/S5VM4C7aiU6sct6c/images/moengage_01563f.png?fit=max&auto=format&n=S5VM4C7aiU6sct6c&q=85&s=acbcf3ad03b341b7fb3bcbae087ad735" alt="ネイティブテンプレートでの画像の Accessibility Text ボックスを示すスクリーンショット。" width="3146" height="1580" data-path="images/moengage_01563f.png" />
* **カスタム HTML In-App メッセージの場合:** カスタム HTML を使用して In-App メッセージを作成する場合は、コード内のすべての `__PROTECTED_14__` タグに、意味のある説明を含む `alt` 属性を直接追加する必要があります。
  例: `__PROTECTED_15__`

#### 代替テキストに関する考慮事項:

* **画像を説明する:** 代替テキストが画像の内容と目的を正確に説明していることを確認してください。画像に重要なテキストが含まれている場合は、それを代替テキストに含めます。効果的な代替テキストを書くためのヒントについては、[MoEngage のアクセシブルなキャンペーン](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。
* **代替テキストでパーソナライゼーションを使用する:** MoEngage の代替テキストボックスは、ユーザー属性やイベントデータに基づく動的な説明をサポートしています。
* **静的なユーザーインターフェイス要素:** MoEngage は、**Close** ボタン（X）などの標準的なユーザーインターフェイス要素に、デフォルトの代替テキストを自動的に含めます。これらを手動で設定する必要はありません。

### 動画コンテンツのアクセシビリティ

In-App メッセージに動画コンテンツが含まれる場合は、アクセシビリティのために次の点を考慮してください。

* **字幕とトランスクリプトを追加する:** 外部のツールやサービスを使用して、動画コンテンツの字幕とトランスクリプトを作成します。
* **トランスクリプトをリンクまたは埋め込む:** In-App メッセージに動画コンテンツを追加する場合（埋め込みかリンクかにかかわらず）、ユーザーがトランスクリプトにアクセスする手段も必ず提供してください。たとえば、動画の近くにトランスクリプトへのリンクを含めます。MoEngage はトランスクリプトを自動生成しません。
* **動画コントロール:** **Play**、**Pause**、**Mute**、**Unmute** ボタンなどの動画コントロールに **Accessibility Text** を追加します。これにより、支援技術を使用するユーザーを含むすべてのユーザーが、コントロールを簡単に理解できるようになります。
  <img src="https://mintcdn.com/moengage/-uVFLyK4XoHTd5WE/images/moengage_1805e7.png?fit=max&auto=format&n=-uVFLyK4XoHTd5WE&q=85&s=9ee046ea1eae027be419e807335c6b72" alt="動画コントロールの Accessibility Text フィールドを示すスクリーンショット。" width="3122" height="1488" data-path="images/moengage_1805e7.png" />

### Rating テンプレートのアクセシビリティ

**Nudge - Rating** テンプレートでは、スクリーンリーダーが選択された評価を自動的に読み上げ、続いて関連するテキストを読み上げます。例: 「4 out of 5 stars, Beyond Expectations.」

### フォントサイズとレイアウトの適応性の確保

MoEngage の In-App メッセージは、ユーザーの設定に適応するように設計されています。

* **フォントの自動スケーリング:** In-App メッセージ内のテキストは、通常、ユーザーが Android または iOS デバイスで選択したフォントサイズ設定に従います。通常、これを手動で設定する必要はありません。ただし、非常に大きなテキストがレイアウトにどのような影響を与えるかを考慮してください。
* **コンテンツのスクロール:**
  * **Full Screen In-App** メッセージの場合: ユーザーの大きなフォント設定によってコンテンツがはみ出す場合、スクロールが自動的に有効になります。
  * **Nudges**（邪魔にならない In-App メッセージ）の場合: 必要に応じて Nudge 内のコンテンツがスクロール可能になり、Nudge 自体の位置は維持されます。

### キーボードナビゲーションとフォーカス管理

MoEngage SDK は、優れたユーザー体験を確保するために、キーボードナビゲーションとフォーカスを管理します。

* **フォーカスの処理:** In-App メッセージが表示されると、フォーカスは自動的にメッセージに移動し、侵入型のメッセージでは適切にトラップされます。メッセージが閉じると、通常、フォーカスは前の要素に戻ります。
* **アクセシブルな Close ボタン:** In-App メッセージの標準の **Close** ボタン（X）には、デフォルトでアクセシブルなラベルが含まれています。カスタムの **Close** ボタンを作成する場合（たとえば HTML In-App メッセージで）、キーボードでアクセス可能で、適切なアクセシブルな名前が付いていることを確認してください。

### タッチターゲットサイズの設定

* **ネイティブテンプレート:** MoEngage のネイティブ In-App テンプレートは、アクセシビリティガイドラインを満たすことを目指したタッチターゲットサイズで設計されています。
* **カスタム HTML In-App メッセージ:** カスタム HTML を使用して In-App メッセージをデザインする場合は、すべてのインタラクティブ要素（ボタン、リンク）が簡単にタップできる十分な大きさであることを確認してください。タッチターゲットサイズに関する一般的なガイドラインについては、[MoEngage のアクセシブルなキャンペーン](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。

### TV In-App に関する考慮事項への対応

TV プラットフォーム専用に In-App メッセージをデザインする場合:

* **プラットフォームのガイドライン:** 対象となる TV プラットフォーム固有のアクセシビリティ要件とナビゲーションパターン（リモコンによる操作など）に注意してください。コンテンツ、特にカスタムのインタラクティブ要素に互換性があることを確認してください。

In-App キャンペーンでこれらの要素を設定することで、アクセシビリティを大幅に向上させることができます。優れたユーザー体験を確保するため、常にさまざまなデバイスで In-App メッセージをテストし、可能であればアクセシビリティツールを使用してください。

## よくある質問

1. **In-App メッセージがデバイスの高さを超えるとどうなりますか？**\
   In-App メッセージの高さがデバイスの表示高さを超える場合、メッセージはレンダリングされません。
2. **In-App テンプレートに画像は必須ですか？**\
   画像が必須となるのは、画像を含むように設計された In-App テンプレートのみです。これらのテンプレートに画像を指定しない場合、ユーザーのデバイスには表示されません。
3. **テキストは異なるデバイスサイズに合わせてスケーリングされますか？**\
   現在、テキストは異なるデバイスサイズに合わせて自動的にスケーリングされません。メッセージの作成時に指定したフォントサイズがすべてのデバイスで使用されます。
4. **In-App メッセージから画像を削除できますか？**\
   現在、画像コンポーネントを含む In-App メッセージをエンドユーザーのデバイスに表示するには、画像が必須です。
5. **In-App メッセージから背景色を削除できますか？**\
   はい。不透明度を 0 に設定することで、In-App メッセージから背景色を削除できます。
6. **アプリが横向きモードの場合、In-App メッセージはどうなりますか？**\
   現在、事前構築済みの In-App メッセージは、アプリが横向きモードの場合には表示されません。ただし、HTML In-App メッセージは、作成時に横向きが許可されていれば表示されます。
7. **In-App メッセージはタブレットでサポートされていますか？**\
   いいえ。事前構築済みの In-App メッセージは現在タブレットではサポートされていません。ただし、HTML In-App メッセージはサポートされています。