# モバイルIn-Appメッセージを作成する

Engage StudioでモバイルIn-Appメッセージを作成すると、ユーザーがトラッキング対象の画面や操作に到達したときに、ターゲットに合わせたエクスペリエンスを配信できます。このページではModalとBannerのキャンペーン作成フローを説明します。URLベースのフルスクリーン体験については、専用の[Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)ガイドを参照してください。

Beta
モバイルIn-Appメッセージングは現在Betaです。利用できるメッセージタイプ、エディター設定、配信動作は一般提供前に変更される場合があります。

## 作成前の準備

メッセージを作成する前に、[モバイルIn-Appメッセージングのセットアップ](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/setup-and-prerequisites)を完了してください。Parent Segment、Realtime Personalizationエントリー、Personalization Section、返されたメッセージを取得・表示できるネイティブEngage Mobile SDKが必要です。

## ステップ1 — Target Audienceを設定する

Audience Studioで、メッセージを受け取るユーザーを決定するオブジェクトを設定します。

- **Parent Segment** — 対象となる顧客集団を定義します。
- **Realtime Personalization** — リアルタイム配信設定を定義します。
- **Personalization Section** — アプリに返すメッセージペイロードを格納します。


Engage Studioは、モバイルアプリ向けにメッセージペイロードを公開するときに、これらのオブジェクトを使用します。

Parent Segment、Personalization、Personalization Sectionを設定するモバイルIn-AppメッセージのTarget Audience画面
## ステップ2 — メッセージの詳細を入力する

Engage Studioで**IN-PRODUCT EXPERIENCES > In-App Messages**を開き、**+ Create in-app message**を選択します。

作成ダイアログで名前を入力し、ドラッグアンドドロップエディターまたはホストページを選択します。

ドラッグアンドドロップエディターとホストページを選択できるCreate In-App Messageダイアログ
メッセージを作成すると、Message ContentステップにMessage ID、名前、説明、プレビュー領域が表示されます。

メッセージの詳細と空のプレビューを表示するモバイルIn-AppメッセージのMessage Content画面
メッセージの詳細を入力します。

- **Message ID** — システムが自動生成する一意の識別子。
- **Name** — In-Appメッセージ一覧に表示するキャンペーン名。
- **Description** — 任意の社内向けメモ。


## ステップ3 — メッセージの作成方法を選択する

作成ダイアログには2つの方法があります。配信したいコンテンツに合う方法を選択してください。

| UIの選択肢 | 作成されるエクスペリエンス | 選択する場面 |
|  --- | --- | --- |
| **Design with Drag and Drop Editor** | ModalまたはBanner | Engage StudioでHTMLコンテンツを作成し、表示設定を細かく制御したい場合。 |
| **Show a Hosted Page** | Hosted Pages | ページをすでにホストしており、モバイルSDKでURLをアプリ内にフルスクリーン表示したい場合。 |


**Show a Hosted Page**は**Hosted Pages**を作成するためのUI上の選択肢です。URL、ホスティング、SDKコンテキスト、セキュリティ、計測の要件については、[Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)を参照してください。

## ステップ4 — メッセージコンテンツを設定する

**Design with Drag and Drop Editor**はModalまたはBannerに使用します。**Show a Hosted Page**はHosted Pagesに使用し、[Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)のガイドに進みます。エディターでは、プレビュー契約の範囲でHTML、CSS、JavaScriptを使用できます。

ModalとBannerでは、ドラッグアンドドロップエディターを使用して次を設定します。

- テキストと画像。
- ボタンとアクションリンク。
- 行とコンテンツブロックのレイアウト。
- 背景やPaddingなどの全体設定。


エディターのPreview modeでコンテンツを確認してから、メッセージ設定に戻ります。

モバイルプレビューとAppearance Settingsパネルを表示するIn-App Message Content Editor
## ステップ5 — 表示設定を構成する

選択したModalまたはBannerの表示設定を構成します。設定項目には次が含まれます。

- 閉じるボタンの動作。
- 背景色、Padding、Border radius。
- Overlayの色と背景タップ時の動作。
- 背景とのインタラクション。


すべての設定については、[メッセージタイプと表示設定](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/message-types-and-appearance)を参照してください。

Modal、Overlay、Dismiss、Background & Styleを設定するモバイルIn-AppメッセージのAppearance Settingsパネル
## ステップ6 — プレビューしてテストする

起動前に、次を確認してください。

電話フレームとAppearance at a Glanceの概要を表示するモバイルIn-Appメッセージのプレビュー
- メッセージコンテンツが対象モバイル画面に収まる。
- 閉じるボタンと背景タップ時の動作がキャンペーンの意図と一致する。
- リンクが想定したアプリ画面またはWeb遷移先を開く。
- メッセージが意図せずアプリ操作をブロックしない。
- Engage Mobile SDKがレスポンスを表示できる。
- 対象条件に一致しないユーザーにはメッセージが表示されない。


キャンペーンが対象とするiOS / Androidデバイスでテストしてください。プレビューSDKのテストには、iOS SDK連携とAndroid SDK連携の各ページにある最小連携チェックリストを使用してください。

## ステップ7 — メッセージをLaunchする

**Launch**をクリックすると、連携するPersonalization Sectionへメッセージペイロードが公開されます。Personalization設定がEngage Mobile SDKへ伝播すると、メッセージを利用できるようになります。

Launch済みのメッセージを編集するには、先にPauseしてください。

## メッセージをPauseまたは編集する

配信を停止するには**Pause**をクリックします。Pause後にコンテンツや設定を編集し、準備ができたら再度Launchします。

ライフサイクルは次のとおりです。

```text
DRAFT ── Launch ──> LIVE ── Pause ──> PAUSED ── Launch ──> LIVE
```

トラブルシューティングについては、[モバイルIn-Appのトラブルシューティング](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/troubleshooting)を参照してください。

## 次のステップ

- [メッセージタイプと表示設定](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/message-types-and-appearance)
- [Hosted Pages](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/rich-landing)
- [iOS SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-ios)
- [Android SDK連携](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/developer-guide-android)
- [モバイルIn-Appのイベントとフィールド](/ja/products/marketing-cloud/engage-studio/channels/mobile-inapp/supported-events-and-fields)