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

# HTMLアプリ内メッセージで横向き表示用のポップアップを作成する方法

# はじめに

画面の向きへの対応により、さまざまなデバイスの画面で一貫したユーザーエクスペリエンスを実現できます。魅力的なユーザーインタラクションのためには、縦向きモードと横向きモードにシームレスに適応するUIコンポーネントをデザインすることが重要です。

この記事では、デザインアプリの新機能 *Brand Kit* を紹介するアプリ内HTMLポップアップを作成します。このポップアップは横向きと縦向きに自動的に調整され、ユーザーがデバイスをどのように持っていても視覚的に魅力的な体験を提供します。

# 期待される結果

ユーザーには、横向きと縦向きの両方で美しくデザインされたポップアップが表示され、関連情報やプロモーションコンテンツが提供されることで、プロモーション対象の機能の認知度と利用率が向上します。

![Screenshot 2024-08-05 at 2.43.56 AM.png](https://mintcdn.com/moengage/cFTwc93vQdTanvKi/images/moengage_bede70.png?fit=max\&auto=format\&n=cFTwc93vQdTanvKi\&q=85\&s=40d8ce1968145cf475b1cd7f8186470b)

> [!TIP]
>
> MoEngage Android SDKまたはiOS SDKをアプリに統合していること。詳細については、[Developer Guide](/docs/ja/developer-guide/introduction)を参照してください。

# アプリ内キャンペーンを作成する

このセクションでは、横向きと縦向きに自動的に調整されるアプリ内HTMLポップアップを作成します。

## ステップ1: ターゲットユーザー

1. 左側のサイドバーで **Engage** > **Campaigns** に移動して **+ Create campaign** をクリックするか、**+ Create new**> **Campaign** をクリックします。
2. **Inbound** で **In-app** をクリックします。 ![In-app.png](https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f89375.png?fit=max\&auto=format\&n=2CGhjk8ZDWEC5ocb\&q=85\&s=8cd26f3e9e5a8ac841c26ec33d5902a5) キャンペーン定義の最初のステップ「Target users」に移動します。
3. 次の詳細を入力します。
   * **Campaign name**: キャンペーン名を入力します。例:「HTML In-app campaign」
   * **Campaign tags**: 関連するキャンペーンタグを選択します。
4. **Target Platforms** セクションで **iOS** を選択します。
5. **Trigger Criteria** セクションで **On app open** を選択します。 ![image-20240121-050504.png](https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_5ae947.png?fit=max\&auto=format\&n=N1a7P_mcSpm-5bMa\&q=85\&s=4a01891de92ffc128913a924fc8b4324)
6. **Select trigger time** セクションで **Immediately** を選択してメッセージを送信します。
7. **Target audience** セクションで **Filter users by** を選択し、新機能をまだ使用していないユーザーのみを対象とし、デバイスでプッシュ通知をオプトアウトしたユーザーや、すでに新機能を利用しているユーザーを除外します。
8. **Next** をクリックして2番目のステップ「Content」に移動し、キャンペーンに含めるコンテンツを定義します。

## ステップ2: コンテンツ

MoEngageのアプリ内キャンペーンには、あらゆるユースケースに対応するさまざまなテンプレートが用意されています。また、ゼロから作成するオプションもあります。

1. ユーザーに表示するテンプレートを選択します。ポップアップのデザインには任意のHTMLアプリ内メッセージテンプレートを選択できます。このユースケースでは **Popup—Promotional** テンプレートを選択します。**Template Settings** ページでカスタマイズできます。

![Screenshot 2024-08-05 at 2.20.35 AM.png](https://mintcdn.com/moengage/MBpE2Km0jgeTJl4Q/images/moengage_0187bd.png?fit=max\&auto=format\&n=MBpE2Km0jgeTJl4Q\&q=85\&s=d03ef8e5d7ca9cbf98423048c0e614d5)

2. 次の手順を実行して、ポップアップメッセージをデザインします。
   * **タイトルを更新する**: "Introducing Brand Kit!"
     * **スタイル**: 注目を集めるために、太字で魅力的なフォントを使用します。 ![Screenshot 2024-08-05 at 2.28.45 AM.png](https://mintcdn.com/moengage/M3SzEdkQVgGAjJCt/images/moengage_728def.png?fit=max\&auto=format\&n=M3SzEdkQVgGAjJCt\&q=85\&s=4fcebc155b54c8804518982c4be5fef0)
   * **説明を含める**: 機能の概要と、ユーザーにとってのメリットを簡潔に説明します。
     * **テキスト**: "Our new Brand Kit helps you store and manage your brand assets like logos, fonts, and color palettes all in one place. Try it now and streamline your design process!"
     * **スタイル**: テキストが簡潔で読みやすいことを確認します。 ![Screenshot 2024-08-05 at 2.29.48 AM.png](https://mintcdn.com/moengage/MBpE2Km0jgeTJl4Q/images/moengage_000fc5.png?fit=max\&auto=format\&n=MBpE2Km0jgeTJl4Q\&q=85\&s=6b13cd326e7632903fd74c518415cf0c)
   * **ビジュアル要素を追加する**: 機能を視覚的に説明する関連画像、アイコン、アニメーションを含めます。
     * 例: ロゴ、フォント、カラーパレットを含むBrand Kitを表示したアプリインターフェースの画像を使用します。
     * 以下の動画に示すように、ファイルをアップロードしてから、HTMLコード内で相対パスを使用します。
   * **コールトゥアクション(CTA)ボタンを含める**: "Get started"
     * リンク: ボタンのリンク先を、機能にアクセスできるアプリ内のセクションまたはチュートリアルに設定します。
     * スタイル: 鮮やかな色と明瞭なフォントでボタンを目立たせます。\\

       [YouTube video player](https://www.youtube.com/embed/kSWHmlAo0NQ)
   * **横向きと縦向きの両方のモードでテンプレートを確認する**: **View portrait and landscape** をクリックして、横向き表示でポップアップを確認します。 ![Screenshot 2024-08-05 at 2.47.25 AM.png](https://mintcdn.com/moengage/tNrQQROY8O0h4yWe/images/moengage_18c1c2.png?fit=max\&auto=format\&n=tNrQQROY8O0h4yWe\&q=85\&s=f3ac784bbd56cd0505fb67bc90d6235b)
3. **Next** をクリックして3番目のステップ「Schedule and goals」に移動し、キャンペーンのスケジュールと目標を定義します。

## ステップ3: スケジュールと目標

ここでは、キャンペーンのスケジュールの選択、コンバージョンゴールの追加、キャンペーンの優先度の選択、カスタム配信コントロールの定義を行えます。

1. **Send campaign** セクションで、アプリ内メッセージの開始日時と終了日時を、頻度と制限とともに定義します。 ![image-20240121-054649.png](https://mintcdn.com/moengage/OQ0V9ibjQLpsyCSD/images/moengage_0db0ee.png?fit=max\&auto=format\&n=OQ0V9ibjQLpsyCSD\&q=85\&s=c34dab39a4ea5c87167c282ec6af2c7a)
2. **Conversion Goals** セクションで、トラッキングしたいコンバージョンゴールを追加します。
3. **Campaign priority** セクションで、このキャンペーンに優先度を割り当てます。優先度を割り当てることで、ユーザーが特定の時点で複数のメッセージの対象となる場合に、どのアプリ内メッセージを表示するかを決定できます。たとえば、**Critical** を選択すると、ユーザーが対象となる他のキャンペーンがある場合でも、常にこのメッセージが表示されます。
4. **Delivery Controls** セクションで、要件に基づいてコントロールを定義します。詳細については、[Create In-app Campaign](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign)を参照してください。  ![image-20240121-054810.png](https://mintcdn.com/moengage/t9nft78wsoLTI2Nx/images/moengage_28c47b.png?fit=max\&auto=format\&n=t9nft78wsoLTI2Nx\&q=85\&s=864a569bd7aaa6141a7aa62195d93225)
5. **Publish** をクリックします。

# まとめ

このユースケースでは、さまざまなデバイスの画面で一貫したユーザーエクスペリエンスを実現するアプリ内キャンペーンを作成しました。

この自動化されたキャンペーンは、画面の向きへの対応と、縦向きモードと横向きモードにシームレスに適応する優れたUIコンポーネントを活用して、ユーザーエクスペリエンスを向上させるのに役立ちます。

キャンペーンを公開したら、CTRとコンバージョン(定義した場合)をトラッキングして、パフォーマンスを把握できます。詳細については、[In-App Campaign Analytics](/docs/ja/user-guide/campaigns-and-channels/in-app-message/analyze/analyze-in-app-campaigns)を参照してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.