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

# オンボーディングウォークスルーで GIF を使用する

# はじめに

効果的なユーザーオンボーディングは、アプリのエンゲージメントを促進し、長期的なリテンションを確保するために不可欠です。In-app メッセージング機能で GIF を活用すると、アプリケーションとの最初のインタラクションを通じて新規ユーザーをガイドする、視覚的に魅力的でインタラクティブな手段を提供できます。

たとえば、ビューティーアプリをダウンロードした新規ユーザーが、商品の注文、限定割引の利用、最新のビューティーニュースの確認を行うために、アプリの操作方法について明確なガイダンスを必要としている場合を考えてみましょう。

#### オンボーディングウォークスルーで GIF を使用するメリット

* **視覚的なコミュニケーションの強化**: GIF を使用すると、アプリのナビゲーションや機能を視覚的にシンプルに伝えることができ、複雑なプロセスが理解しやすくなります。
* **アクションのデモンストレーション**: GIF を使用すると、アプリ内の主要な機能やアクションをすばやく示すことができ、長い説明文の必要性が減ります。
* **エンゲージメントと楽しさ**: アニメーション要素は静止画像よりも効果的にユーザーの注意を引き、オンボーディングプロセスをより楽しく記憶に残るものにします。
* **コンテキストに応じたコミュニケーション**: GIF は、読み込み中のスピナーや成功のチェックマークを示すなど、テキストに頼らずにコンテキストを効果的に伝えることができます。
* **説明の補助**: GIF はミニチュートリアルとして機能し、学習プロセスをより直感的にして、長い説明文の必要性を減らします。
* **視覚的なフィードバック**: GIF は、ユーザーのアクションに対して即座に視覚的なフィードバックを提供し、アプリとのインタラクションを向上させます。

この記事では、In-app メッセージで GIF を使用して魅力的なオンボーディングウォークスルーを作成するプロセスについて説明します。このユースケースは、次の 2 つのステップで実現します。

1. [主要なオンボーディングステップを特定して GIF を作成する](/docs/ja/use-cases/in-app-message/use-gifs-in-an-onboarding-walkthrough#step-1-identify-the-key-onboarding-steps-and-create-gifs)
2. [In-app Messaging キャンペーンを作成する](/docs/ja/use-cases/in-app-message/use-gifs-in-an-onboarding-walkthrough#step-2-create-an-in-app-messaging-campaign)

# 期待される結果

ユーザーはスムーズで魅力的なオンボーディングを体験し、アプリの主要機能をすばやく理解できるため、ユーザー満足度とリテンション率が向上します。また、ユーザーはアプリを簡単に操作して初回購入、割引の適用、ビューティー記事の閲覧を行えるようになり、アプリの利用頻度が高まります。

<img src="https://mintcdn.com/moengage/OQ0V9ibjQLpsyCSD/images/moengage_10deaf.png?s=8da1f8e1affea8b617338b36cc31ac08" alt="ScreenRecording2024-07-26at6.24.45PM-ezgif.com-video-to-gif-converter.gif" style={{ width:"53%" }} width="600" height="1044" data-path="images/moengage_10deaf.png" />

<Tip>
  ユーザーがアプリをインストールまたはサインアップするアクションと、各イベントのプラットフォーム、ソース、アプリバージョンなどの関連情報を追跡するイベントが MoEngage で利用可能である必要があります。この例では、イベント *User Installs the App* を使用します。イベントの追跡方法については、[Developer Guide](/docs/ja/developer-guide/introduction) を参照してください。
</Tip>

# ステップ 1: 主要なオンボーディングステップを特定して GIF を作成する

1. **主要なオンボーディングの瞬間を特定する**: 新規ユーザーがアプリとの最初のインタラクションで理解すべき重要なステップと機能を特定します。この例では、新規ユーザーが簡単に商品を注文し、割引を見つけて適用し、最新のビューティーニュースにアクセスできるようにすることを目指します。
2. **わかりやすい GIF を作成する**: 各主要機能やアクションを効果的に示す、短いループ GIF のシリーズを作成します。GIF は視覚的に魅力的で理解しやすいものにしてください。たとえば、前に特定した重要なステップを含む GIF を用意します。例として、新規ユーザーに商品を紹介し、割引コードの適用方法を説明し、ビューティーニュースセクションへ案内します。以下はサンプル GIF です。 <img src="https://mintcdn.com/moengage/fUSb9kG75-iJ0JuL/images/moengage_e62be6.png?s=9fc736afe32df2bc8a778f68bbf079d7" alt="onboarding-walkthrough.gif" width="800" height="600" data-path="images/moengage_e62be6.png" />

# ステップ 2: In-App Messaging キャンペーンを作成する

このセクションでは、新規ユーザーまたは最近アプリをインストールしたユーザーをターゲットにした In-app Messaging キャンペーンを作成します。先ほど作成した GIF を組み込んで、ユーザーのオンボーディングを強化します。

## ステップ 2.1: ユーザーをターゲットにする

1. MoEngage ダッシュボードの左側のナビゲーションメニューで **Engage** をクリックし、**Campaigns** をクリックします。
2. All campaigns ページで **+ Create campaign** をクリックします。
3. **Inbound** で **In-app** をクリックします。 <img src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_5a40c1.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=b07bd3c33f36d20fc10a516b010b2d6f" alt="Screenshot 2025-05-12 at 10.27.15 AM.png" width="1066" height="1660" data-path="images/moengage_5a40c1.png" /> キャンペーン定義の最初のステップである **Target users** に移動します。
4. キャンペーンの名前とタグを定義します。
5. **Target Platforms** セクションで、**Android** と **iOS** を選択します。
   <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_208696.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=b4326d0ac99f13778d7c1fbd59e57613" alt="target platforms.png" style={{ width:"48%" }} width="556" height="198" data-path="images/moengage_208696.png" />
6. **Trigger Criteria** セクションで、**On app open** カードをクリックします。これにより、オンボーディング中にアプリが開かれたときに In-app メッセージがユーザーに表示されます。 <img src="https://mintcdn.com/moengage/SBG7um9Fqotw1CFo/images/moengage_b697e9.png?fit=max&auto=format&n=SBG7um9Fqotw1CFo&q=85&s=8c2dc45dfb30e2a7cd077a45b4a88eb0" alt="trigger criteria.png" width="1604" height="536" data-path="images/moengage_b697e9.png" />
7. **Select trigger time** セクションで **After Delay** を選択し、アプリを開いてから 2 秒後に In-app メッセージが表示されるようにトリガー時間を設定します。
   <img src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_594ec3.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=10c076ae0e1cf6d75e87f09ff87dc9fe" alt="trigger time.png" style={{ width:"51%" }} width="496" height="242" data-path="images/moengage_594ec3.png" />
8. **Target audience** セクションで、次の操作を行います。
   1. **Filter users by** オプションを選択します。
   2. **User behaviour** タブで、過去 3 日間に新しくアプリをインストールしたユーザーのみをターゲットにするようにオーディエンスをセグメント化します。 <img src="https://mintcdn.com/moengage/tNrQQROY8O0h4yWe/images/moengage_182c3e.png?fit=max&auto=format&n=tNrQQROY8O0h4yWe&q=85&s=6830edbadef93898f4312227da430690" alt="target audience.png" width="2562" height="1150" data-path="images/moengage_182c3e.png" />
9. **Next** をクリックして 2 番目のステップ **Content** に進み、キャンペーンのコンテンツを定義します。

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

1. **Prebuilt and saved templates** タブで、検索ボックスにキーワード *nudge* を入力して Nudge テンプレートを検索します。
2. **Nudge - Image, text & button** テンプレートを選択します。 <img src="https://mintcdn.com/moengage/431DqtwGIOyvyx6H/images/moengage_863c06.png?fit=max&auto=format&n=431DqtwGIOyvyx6H&q=85&s=b916da47683fe9a565017d20e3189e26" alt="Screenshot 2025-03-17 at 12.02.32 PM.png" width="3150" height="1572" data-path="images/moengage_863c06.png" />
3. 作成した GIF をテンプレートの **Image** セクションにアップロードします。 <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_294540.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=323616255fa79bf66dde676f87e97b29" alt="Screenshot 2025-03-17 at 12.06.08 PM.png" width="3116" height="1450" data-path="images/moengage_294540.png" />
4. GIF に対して、簡潔で明確な Call to action (CTA) テキストを追加します。
5. ユーザーがボタンをクリックしたときに情報ページにリダイレクトされるよう、ボタンにナビゲーションを追加します。 <img src="https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_658166.png?s=9e7fd18721835c46c3d00c752e748142" alt="2025-03-17_12-09-50 (1).gif" width="1596" height="762" data-path="images/moengage_658166.png" />
6. 必要に応じてテンプレートのデザインを変更します。以下の動画に従って、テンプレートのデザインを編集してください。
   <iframe src="https://www.youtube.com/embed/xxJbATdh3gI" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
7. キャンペーンを公開する前に、**Preview in-app section** で In-app メッセージをテストします。これにより、さまざまなデバイスや画面サイズで GIF とテキストが正しく表示されることを確認できます。 <img src="https://mintcdn.com/moengage/SBG7um9Fqotw1CFo/images/moengage_b78b2b.png?fit=max&auto=format&n=SBG7um9Fqotw1CFo&q=85&s=7e6b70018634de2a48d9d2204cb86e3d" alt="testing.png" width="1242" height="268" data-path="images/moengage_b78b2b.png" />

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

1. **Send campaign** セクションで、In-app Messaging キャンペーンの開始日時と終了日時を定義します。 <img alt="image-20240121-054649.png" src="https://mintcdn.com/moengage/epqsPEpMsGQCYy1r/images/moengage_5bfa66.png?fit=max&auto=format&n=epqsPEpMsGQCYy1r&q=85&s=39ed1d6a1863ebf1ab23412ad884cffc" width="2742" height="996" data-path="images/moengage_5bfa66.png" />
2. **Conversion goals** セクションで、追跡したいコンバージョン目標を追加します。
3. **Campaign priority** セクションで、このキャンペーンに優先度を割り当てます。たとえば、**Critical** を選択すると、ユーザーが対象となる他のキャンペーンがある場合でも、このキャンペーンが常に表示されます。詳細については、[Create In-App Campaign](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign) を参照してください。
4. **Delivery controls** セクションで、要件に基づいてコントロールを定義します。詳細については、[Create In-App Campaign](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign) を参照してください。  <img alt="image-20240121-054810.png" src="https://mintcdn.com/moengage/Deli0Qwc2s7oDHRm/images/moengage_94b46f.png?fit=max&auto=format&n=Deli0Qwc2s7oDHRm&q=85&s=fbc5bb2f4072f5ec18ba377d9b376e34" width="2744" height="636" data-path="images/moengage_94b46f.png" />
5. **Publish** をクリックします。

In-app キャンペーンを公開した後、キャンペーン分析ページでパフォーマンスを監視できます。詳細については、[Analyze In-App Campaigns](/docs/ja/user-guide/campaigns-and-channels/in-app-message/analyze/analyze-in-app-campaigns) を参照してください。

# 分析と最適化

* キャンペーン分析ページを使用して、In-app メッセージに対するユーザーのインタラクションを追跡します。
* フィードバックを収集し、離脱ポイントを特定します。
* ユーザーの行動とフィードバックに基づいて、GIF やメッセージコンテンツに必要な調整を加えます。

詳細については、[Analyze In-app Campaigns](/docs/ja/user-guide/campaigns-and-channels/in-app-message/analyze/analyze-in-app-campaigns) を参照してください。

# まとめ

In-app メッセージングで GIF を使用したオンボーディングウォークスルーを実装すると、ユーザーエクスペリエンスが大幅に向上し、オンボーディングプロセスがより魅力的で効果的なものになります。このユースケースで説明した手順に従うことで、新規ユーザーがアプリの価値をすばやく理解して実感できるようになり、エンゲージメントとリテンション率の向上につながります。
