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

# ノーコードのゲーミフィケーションテンプレート

> MoEngage のノーコードのゲーミフィケーションテンプレートを使用して、In-App キャンペーンでスピンホイール、スクラッチカード、カウントダウンタイマーを開始できます。SDK のアップデートは不要です。

# 概要

MoEngage では、In-App Messaging キャンペーン向けに、次のようなノーコードのゲーミフィケーションテンプレートを提供しています。

* [スピンホイール](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#spin-the-wheel-template)
* [スクラッチカード](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#scratch-card-template)
* [カウントダウンタイマー](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#countdown-timer-template)

これらのテンプレートは、コードを書く必要のないエディターで完全にカスタマイズできます。アプリの SDK をアップデートしなくても、これらのキャンペーンを作成して開始できます。

<Info>
  すべてのゲーミフィケーションテンプレートは、既存の MoEngage SDK 統合で動作します。すぐにこれらのキャンペーンの作成と開始を始めることができます。
</Info>

# Spin the Wheel テンプレート

Spin the Wheel テンプレートを使用すると、インタラクティブな賞品ホイールを作成して、ユーザーのエンゲージメントを高め、報酬を提供できます。

<img alt="Screenshot 2025-09-09 at 1.51.21 PM.png" src="https://mintcdn.com/moengage/QVZKszouQuxXOzFr/images/moengage_1c99aa.png?fit=max&auto=format&n=QVZKszouQuxXOzFr&q=85&s=d593b228dd002077df7b358ed82b37eb" style={{ width:"37%" }} width="690" height="1278" data-path="images/moengage_1c99aa.png" />

## ユースケース

* **報酬の配布:** 割引、特別オファー、その他の報酬を獲得できるチャンスを、魅力的な方法でユーザーに提供します。
* **ユーザーエンゲージメントの向上:** アプリに楽しさの要素を加えて、再訪問やセッション時間の延長を促します。
* **リードの獲得:** ホイールを回すための条件としてメールアドレスや電話番号の入力をユーザーに求め、新しいリードを獲得します。

MoEngage では、4 種類の **Spin the wheel** テンプレートを提供しています。

<img src="https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f976c5.png?fit=max&auto=format&n=2CGhjk8ZDWEC5ocb&q=85&s=19619daccf68eca57643b765dd824424" alt="Screenshot 2025-09-09 at 12.31.54 PM.png" width="2542" height="780" data-path="images/moengage_f976c5.png" />

次のセクションでは、これらのテンプレートの設定方法について説明します。

このテンプレートのエディターは、**Spin wheel**、**Winning screen**、**Losing screen** の 3 つのメインタブで構成されています。

<img src="https://mintcdn.com/moengage/CaPmX0z_ys8cr0ms/images/moengage_094a13.png?fit=max&auto=format&n=CaPmX0z_ys8cr0ms&q=85&s=533eaaa07dca09e4ac24df81bc93f15c" alt="Screenshot 2025-07-21 at 11.55.03 AM.png" width="3166" height="1332" data-path="images/moengage_094a13.png" />

## Spin Wheel タブの設定

**Spin wheel** タブでは、ホイール自体の主な外観と動作をカスタマイズできます。

<img src="https://mintcdn.com/moengage/QVZKszouQuxXOzFr/images/moengage_1df9d0.png?s=658b1a2bc07624d762162395af827c7f" alt="2025-09-09_11-52-29 (1).gif" width="1598" height="784" data-path="images/moengage_1df9d0.png" />

| セクション | カスタマイズオプション |
| - | - |
| **Template Settings** | <ul><li>**Allowed device orientation:** **Portrait**、**Landscape**、またはその両方を選択します。目的の向きでテンプレートをプレビューできます。**Preview** セクションで、**Viewportrait and landscape** をクリックします。  <img alt="Screenshot 2025-09-09 at 1.54.00 PM.png" src="https://mintcdn.com/moengage/xaH8HoR16_YVDek5/images/moengage_cdac9e.png?fit=max&auto=format&n=xaH8HoR16_YVDek5&q=85&s=d2509580d4c6ca975657dcca6f4837f7" width="3160" height="1528" data-path="images/moengage_cdac9e.png" /></li><li>**Allowed device types:** **Mobile**、**Tablets**、**TVOS**、またはすべてを選択します。</li><li>**Template background image:** 画像をアップロードするか、画像の URL を指定するか、背景色を選択して背景を設定します。</li><li>**Close button:** 閉じるボタンの表示、種類、配置（Right/Left）を設定します。</li><li>**Border:** テンプレートの枠線の幅、角丸の半径、色を調整します。</li></ul> |
| **Text** | **Heading** と **Subheading** をカスタマイズします。それぞれについて、テキストの内容、フォントサイズ、色、配置、幅、マージン、パディング、枠線を編集できます。アクションを追加することもできます。 |
| **Customize spin wheel** | <ul><li>**Wheel and pointer size:** **Small**、**Medium**、または **Large** を選択します。</li><li>**Pointer position:** ポインターの位置を調整します。</li><li>**Border:** ホイールの枠線の幅と色を設定します。</li></ul> |
| **Wheel sectors** | <ul><li>**Add/Remove Sectors:** 最大 10 個のセクターを設定できます。</li><li>**Sector Configuration:** 各セクターについて、**Title** を設定し、**Coupon code** リストを割り当て、オプションで画像を追加できます。**注**: パーソナライズされたクーポンコードを追加できます。</li><li>そのためには、次の手順に従います。<ol><li>**Coupon code** フィールドに @ を入力します。</li><li>**Coupons** タブに移動し、リストから目的のクーポンを選択します。詳細については、[こちら](/docs/ja/user-guide/content/coupons/use-a-coupon-list-in-a-campaign)を参照してください。  <img alt="Screenshot 2025-09-09 at 12.41.38 PM.png" src="https://mintcdn.com/moengage/eF2J43N9Ckga5Apm/images/moengage_2f45f6.png?fit=max&auto=format&n=eF2J43N9Ckga5Apm&q=85&s=c917435d6a8691d3005d989bb6c9e723" width="1306" height="922" data-path="images/moengage_2f45f6.png" /></li></ol></li><li>**Set win %:** 数値の重みを設定して、各セクターに止まる確率を制御します。当選確率はこれらの重みから自動的に計算されます。</li><li>**Losing option:** セクターをハズレの結果として指定します。</li><li>**Frequency cap:** 特定の報酬を獲得できる回数の上限を設定します。</li></ul> |
| **Lead generation customisation** | <ul><li>ユーザーデータを取得するための入力フィールドを設定します。**Field size** をカスタマイズし、最大 2 つの **Field types**（*Email*、*Text*、*Date*、*Number*、*Telephone*、*DateTime*）を追加し、**Font size**、**Font color**、**Background color**、**Border** を設定します。選択した Field type について、リストから目的の **User attributes** を選択できます。</li><li>**Terms and Conditions** を設定します。利用規約のテキストを追加する必要があります。</li><li>テキスト、フォントサイズ、フォントの色、ボタンの色、角丸の半径を編集して、**Form submit button** をカスタマイズします。</li></ul> |

## Winning Screen タブの設定

**Winning screen** タブでは、ユーザーが賞品を獲得したときに表示される画面をカスタマイズできます。これには、紙吹雪エフェクトなどのお祝いの要素や、獲得したクーポンコードが含まれます。

<img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_2942ef.png?s=c0f36769af790a4e97ce351b86501629" alt="2025-09-09_11-59-38 (1).gif" width="1582" height="778" data-path="images/moengage_2942ef.png" />

| セクション | カスタマイズオプション |
| - | - |
| **Template Settings** | <ul><li>**Allowed device orientation:** **Portrait**、**Landscape**、またはその両方を選択します。</li><li>**Allowed device types:** **Mobile**、**Tablets**、または **TVOS** を選択します。</li><li>**Template background image:** 画像をアップロードするか、画像リンクの URL を指定するか、背景色を選択して背景を設定します。</li><li>**Close button:** 表示をカスタマイズし、ボタンの種類（例: Black thin - high res）を選択して、配置（Right/Left）を設定します。</li><li>**Border:** テンプレートの枠線の幅、角丸の半径、色を調整します。</li></ul> |
| **Image** | <ul><li>**Template background image:** 画像をアップロードするか、画像リンクの URL を指定して背景を設定します。</li><li>**Width, margin and padding:** 画像の幅、マージン（上、右、下、左）、パディング（上、右、下、左）を調整します。</li><li>**Border:** 画像の枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** 画像にアクションを追加します。</li></ul> |
| **Text** | <ul><li>**Heading:** 見出しのテキスト、フォントサイズ、フォントの色、背景色、カスタムフォントのオプションをカスタマイズします。</li><li>**Width, margin and padding:** テキストの幅、マージン（上、右、下、左）、パディング（上、右、下、左）を調整します。</li><li>**Border:** テキストの枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** テキストにアクションを追加します。</li></ul> |
| **Coupon box** | <ul><li>**Coupon box type:** **Filled**、**Outlined**、または **Text** を選択します。</li><li>**Text and styling:** クーポンコードのテキストを入力し、フォントサイズ、フォントの色、背景色をカスタマイズします。カスタムフォントを使用することもできます。</li><li>**Give copy icon:** コピーアイコンの表示を有効または無効にし、アイコンの色を設定します。</li><li>**Width, margin and padding:** クーポンボックスの幅、マージン、パディングを調整します。</li><li>**Border:** 枠線の幅、角丸の半径、色を調整します。</li></ul> |
| **Button** | <ul><li>**Button size:** Small、Medium、Large から選択します。</li><li>**Button type:** Filled、Outlined、Text から選択します。</li><li>**Text and styling:** **Button text**、**Font size**、**Font color**、**Background color** をカスタマイズします。カスタムフォントを使用することもできます。</li><li>**Border:** ボタンの枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** **Navigation**（**Navigate to screen**、**DeepLink**、**Rich landing**）などのカスタムアクションをボタンに設定し、必要に応じてキーと値のペアを追加します。</li></ul> |

## Losing Screen タブの設定

**Losing screen** タブでは、ハズレの場合の画面をカスタマイズできます。表示するカスタム画像と見出しを設定できます。

<img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_21419e.png?s=a33afd35d53e5bc0af984e8174c44fbc" alt="2025-09-09_12-01-39 (1).gif" width="1594" height="788" data-path="images/moengage_21419e.png" />

| セクション | カスタマイズオプション |
| - | - |
| **Template Settings** | <ul><li>**Allowed device orientation:** **Portrait**、**Landscape**、または Both を選択します。</li><li>**Allowed device types:** **Mobile**、**Tablets**、または **TVOS** を選択します。</li><li>**Template background image:** 画像をアップロードするか、画像リンクの URL を指定するか、背景色を選択して背景を設定します。</li><li>**Close button:** 表示をカスタマイズし、ボタンの種類を選択して、配置（Right/Left）を設定します。</li><li>**Border:** テンプレートの枠線の幅、角丸の半径、色を調整します。</li></ul> |
| **Image** | <ul><li>**Template background image:** 画像をアップロードするか、画像リンクの URL を指定して背景を設定します。</li><li>**Width, margin and padding:** 画像の幅、マージン、パディングを調整します。</li><li>**Border:** 画像の枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** 画像にアクションを追加します。</li></ul> |
| **Text** | <ul><li>**Heading:** 見出しのテキスト、フォントサイズ、フォントの色、背景色、カスタムフォントのオプションをカスタマイズします。</li><li>**Width, margin and padding:** テキストの幅、マージン、パディングを調整します。</li><li>**Border:** テキストの枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** テキストにアクションを追加します。</li></ul> |
| **Button** | <ul><li>**Button size:** **Small**、**Medium**、または **Large** を選択します。</li><li>**Button type:** **Filled**、**Outlined**、または **Text** を選択します。</li><li>**Text and styling:** **Button text**、**Font size**、**Font color**、**Background color** をカスタマイズします。カスタムフォントを使用することもできます。</li><li>**Border:** ボタンの枠線の幅、角丸の半径、色を調整します。</li><li>**Actions:** **Navigation**（**Navigate to screen**、**DeepLink**、**Rich landing**）などのカスタムアクションをボタンに設定し、必要に応じてキーと値のペアを追加します。</li></ul> |

## トラッキングと分析

MoEngage は、キャンペーンのパフォーマンスを測定できるように、主要なインタラクションを自動的にトラッキングします。

* `In-app shown`: スピンホイールのポップアップが表示された回数です。
* `In-app clicked`: **Spin** ボタンがクリックされた回数です。
* `Response submitted`: クーポンコードのコピーアイコンがクリックされると `response_submitted` イベントが取得されます。このイベントには、`sector_text`、`coupon_code`、`sector_weight` などのプロパティと、取得されたリード獲得データが含まれます。

キャンペーン分析ページには、セクター別の報酬配布レポートも含まれています。このレポートには、各セクターのパフォーマンスを集計した分析が表示されます。

# Scratch Card テンプレート

Scratch Card テンプレートは、ユーザーが表面を「削って」隠されたメッセージやオファーを表示させる、インタラクティブな体験を提供します。

## ユースケース

* **デイリー報酬:** 毎日新しいスクラッチカードを当選のチャンスとともに提供して、毎日のアプリ起動を促します。
* **期待感の演出:** ユーザーが特別オファーを「発見」できるようにして、製品の発売やセールへの期待感を高めます。
* **インタラクティブなプロモーション:** 静的なポップアップを楽しいスクラッチ体験に置き換えて、インタラクション率を向上させます。

<img alt="Screenshot 2025-09-02 at 6.01.49 PM.png" src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_5a9d05.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=d425c9139001dd509edee7819d8cfe03" style={{ width:"40%" }} width="618" height="1120" data-path="images/moengage_5a9d05.png" />

このテンプレートのエディターには、**Scratch Card**、**Winning Screen**、**Losing Screen** の 3 つのメインタブがあります。

## Scratch Card タブの設定

**Scratch Card** タブでは、スクラッチカード自体の主な外観と動作をカスタマイズできます。

| セクション | カスタマイズオプション |
| - | - |
| **Template Settings** | このセクションのオプションは、Spin the Wheel テンプレートの [Template Settings](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-spin-wheel-tab) と同じです。 |
| **Scratch card Image** | <ul><li>**Template background image:** 画像をアップロードするか、画像リンクの URL を指定して背景を設定します。</li><li>**Width, margin and padding:** スクラッチ可能な画像の幅、マージン、パディングを調整します。</li></ul> |
| **Scratch card coupon** | <ul><li>**Add Reward:** それぞれにクーポンコードを持つ複数の報酬を追加します。**注**: パーソナライズされたクーポンコードを追加できます。そのためには、次の手順に従います。<ol><li>**Coupon code** フィールドに @ を入力します。</li><li>**Coupons** タブに移動し、リストから目的のクーポンを選択します。詳細については、[こちら](/docs/ja/user-guide/content/coupons/use-a-coupon-list-in-a-campaign)を参照してください。  <img alt="Screenshot 2025-09-09 at 12.41.38 PM.png" src="https://mintcdn.com/moengage/eF2J43N9Ckga5Apm/images/moengage_2f45f6.png?fit=max&auto=format&n=eF2J43N9Ckga5Apm&q=85&s=c917435d6a8691d3005d989bb6c9e723" width="1306" height="922" data-path="images/moengage_2f45f6.png" /></li></ol></li><li>**Set win %:** 数値の重みを設定して、特定のクーポンが当たる確率を制御します。</li><li>**Losing option:** クーポンの行をハズレの結果として指定します。</li></ul> |
| **Text** | このセクションのオプションは、Spin the Wheel テンプレートの [Text](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-winning-screen-tab) 設定と同じです。 |

## Winning screen タブの設定

**Winning screen** タブでは、ユーザーがスクラッチして当選賞品が表示された後に表示される画面をカスタマイズできます。このセクションの設定は、Spin the Wheel テンプレートの [Winning screen](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-winning-screen-tab) と同じです。

## Losing Screen タブの設定

**Losing screen** タブでは、ハズレの場合に表示される画面をカスタマイズできます。このセクションの設定は、Spin the Wheel テンプレートの [Losing screen](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-losing-screen-tab) と同じです。

# Countdown Timer テンプレート

Countdown Timer テンプレートは、プロモーションやイベントに対する緊急性を演出するのに役立ちます。

<img alt="Screenshot 2025-09-02 at 5.58.06 PM.png" src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_3b515c.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=b16a2d7bdd745b5b5d637cfe16da3dd3" style={{ width:"44%" }} width="618" height="1100" data-path="images/moengage_3b515c.png" />

## ユースケース

* **フラッシュセール:** 期間限定セールの終了までカウントダウンするタイマーを表示して、即時の購入を促します。
* **イベントのプロモーション:** 開始時刻までカウントダウンして、ウェビナー、製品の発売、アプリ内イベントへの期待感を高めます。
* **ホリデーキャンペーン:** 「クリスマスにお届けするには深夜 0 時までにご注文ください」など、ホリデーショッピングの締め切りに関する緊急性を演出します。

このテンプレートのエディターには、**Timer screen** タブが 1 つだけあります。

## Timer Screen タブの設定

**Timer screen** タブでは、カウントダウンタイマーの外観と動作をカスタマイズできます。

| セクション | カスタマイズオプション |
| - | - |
| **Template Settings** | このセクションのオプションは、前述のテンプレートの [Template Settings](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-spin-wheel-tab) と同じです。 |
| **Customize countdown timer** | <ul><li>**Timer style:** **Digit color**、**Digit background color**、**Separator color**、**Text color**、**Text size** をカスタマイズします。</li><li>**Time settings:** **Start date & time** と **End date & time** を設定します。</li><li>**Display options:** **Show seconds**、**Show days**、**Hide if days reach zero** を選択します。</li><li>**Width, margin and padding:** タイマーウィジェットの幅、マージン、パディングを調整します。</li><li>**Border:** タイマーの枠線の幅、角丸の半径、色を調整します。</li></ul> |
| **Text** | このセクションのオプションは、前述のテンプレートの [Text](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-winning-screen-tab) 設定と同じです。 |
| **Button** | このセクションのオプションは、前述のテンプレートの [Button](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/no-code-gamification-templates#configure-the-winning-screen-tab) 設定と同じです。 |

# よくある質問（FAQ）

<Accordion title="テンプレートに追加したカスタムボタンやリンクのクリックをトラッキングするにはどうすればよいですか？">
  テンプレートエディターでは、カスタムイベントのトラッキングを含め、各ボタンのアクションを定義できます。ボタンのアクションを設定する際に、「Track Event」アクションを追加し、取得したいイベント名とプロパティを指定できます。
</Accordion>

<Accordion title="Spin the Wheel のボタンのテキスト（「SPIN」など）は変更できますか？">
  はい。**Spin Button** コンポーネントは完全にカスタマイズ可能です。HTML を編集することなく、エディターで直接テキスト、フォント、色、サイズを変更できます。
</Accordion>

<Accordion title="ユーザーがどのクーポンを獲得したかをトラッキングするにはどうすればよいですか？">
  ユーザーがクーポンコードのコピーアイコンをクリックしたときにトラッキングされる `response_submitted` イベントには、ユーザーに割り当てられた `coupon_code` が含まれます。キャンペーン分析でこのイベントを分析すると、クーポンの配布状況を確認できます。Scratch Card の場合は、当選をトラッキングするカスタムイベントを設定できます。
</Accordion>

<Accordion title="当選したユーザーに Scratch Card が再度表示されないようにするにはどうすればよいですか？">
  キャンペーンレベルのフリークエンシーキャップとセグメンテーションを組み合わせることができます。ユーザーが当選した後、ユーザー属性（例: "scratch\_card\_winner = true"）を追加します。その後、この属性を持つユーザーをキャンペーンのターゲットセグメントから除外することで、再度表示されないようにできます。
</Accordion>

<Accordion title="Countdown Timer がゼロになるとどうなりますか？">
  タイマーがゼロになると、In-App キャンペーンは自動的に閉じられます。時間切れになる前にユーザーが行動を起こすよう、コールトゥアクションを明確にしてください。
</Accordion>

<Accordion title="当選率が低いにもかかわらず、キャンペーン（Spin the Wheel/Scratch Card）ですべてのクーポンが使い切られてしまいました。なぜですか？">
  In-App キャンペーンでは、ユーザーが当選したかどうかにかかわらず、メッセージがユーザーに表示されるたび（インプレッション）に、リストからクーポンコードが 1 つ「消費」されます。

  MoEngage は、最終的に「Losing」セクターに止まったユーザーであっても、キャンペーンを表示するすべてのユーザーに対してクーポンを事前に取得します。

  **推奨事項:** コードの不足を防ぐため、クーポンリストには、キャンペーンで見込まれる総インプレッション数以上のユニークなコードを用意してください。たとえば、200 人のユーザーのセグメントがあり、配信コントロールでユーザーごとに 3 回メッセージを表示するよう設定している場合、200 個ではなく、少なくとも 600 個（200 \* 3）のユニークなクーポンが必要です。\
  .
</Accordion>