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

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

> On-site Messaging における Spin the Wheel テンプレートと Scratch Card テンプレートの概要と設定ガイドです。

# 概要

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

* [Spin the wheel](#spin-the-wheel)
* [Scratch cards](#scratch-card)

これらのテンプレートは、コードを記述する必要のないエディターで自由にカスタマイズできます。これらのキャンペーンを作成・開始して、Web サイトでのユーザーエンゲージメントを高めることができます。

# Spin the Wheel

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

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/no-code-1.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=a60d1dbb52014d745b820e2f02f38738" alt="No Code 1" width="1788" height="1024" data-path="images/no-code-1.png" />

## ユースケース

* **リードの獲得:** ホイールを回すために、ユーザーにサインアップやメールアドレス/電話番号の入力を促します。
* **クーポンの配布:** さまざまな割引率 (たとえば、「10% Off」、「Free Shipping」) を賞品として提供します。
* **毎日のエンゲージメントの促進:** 「Daily Spin」キャンペーンを作成して、ユーザーが Web サイトに再訪するよう促します。

## テンプレートを設定する

テンプレートを選択した後、エディターのサイドパネルにある **Spin** タブと **Styling** タブを使用してカスタマイズします。

これらの設定にアクセスするには、次のようにします。

* キャンバス上のホイール要素をクリックし、フローティングツールバーから **Settings** アイコンを選択します。

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-2.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=e0af41f89dad9ead3883ce88dae1a4a9" alt="Nocode 2" width="2944" height="1426" data-path="images/nocode-2.png" />

## デフォルトのスタイルを設定する

**Styling** タブで **Default** を選択します。このセクションでは、ユーザーが操作する前のホイールの外観をカスタマイズできます。

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-3.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=94b7534fd9ba6c8bf77d7bfd1c6b28e8" alt="Nocode 3" width="2260" height="1376" data-path="images/nocode-3.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Wheel Configuration** | <ul><li>**Wheel and pointer size:** **S** (小)、**M** (中)、**L** (大) から選択します。</li><li>**Use with form:** **On** に切り替えると、ホイールを回す前にユーザーにフォーム (たとえば、メールアドレス/電話番号) の入力を求めます。**Off** に切り替えると、すぐにホイールを回せます。</li><li>**Pointer position:** 当選インジケーターの位置 (たとえば、右、上) を選択します。</li></ul> |
| **Colors** | <ul><li>**Bg color:** ホイールの背後の背景色を設定します。</li><li>**Pointer color:** インジケーター矢印の色を設定します。</li><li>**Border color:** ホイールの枠線の色を設定します。</li></ul> |
| **Spin Button** | <ul><li>**Spin button color:** ボタンの背景色をカスタマイズします。</li><li>**Spin button text:** ボタンに表示するテキスト (たとえば、「Spin to Win」) を入力します。</li><li>**Spin button text color:** ボタンテキストの色を設定します。</li><li>**Spin button font size:** テキストのサイズを調整します。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin:** ホイールコンテナの外側の余白を調整します。</li><li>**Padding:** ホイールコンテナの内側の余白を調整します。</li><li>**Border width:** コンテナの枠線の太さを設定します。</li></ul> |

## ホイールのセクター (ウィジェット) を設定する

ホイールのセクターの賞品、確率、外観を定義するには、**Addable Widgets** を設定します。各ウィジェットはホイール上の特定のセクターに対応します。

これらの設定にアクセスするには、次のようにします。

1. キャンバス上のホイール要素を選択します。
2. フローティングツールバーで、**Items** アイコンをクリックします。右側に **Addable Widgets** パネルが表示されます。

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode4.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=33db48ecadf81a085903b5f5e689e703" alt="Nocode4" width="2444" height="1362" data-path="images/nocode4.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Widget Management** | <ul><li>**Add New Widget:** パネル下部のボタンをクリックして、ホイールに新しいセクターを追加します。</li><li>**Delete Widget:** ウィジェットカードの**ゴミ箱アイコン**をクリックして、そのセクターを削除します。</li><li>**Expand/Collapse:** ウィジェットカードの矢印をクリックして、詳細を表示または非表示にします。</li></ul> |
| **Widget Details** | <ul><li>**Set win %:** このセクターに止まる確率を決める数値を入力します。</li><li>**Title:** セクターに表示するテキスト (たとえば、「50% off」、「Try Again」) を入力します。</li><li>**Coupon code:** この賞品に関連付けるクーポンコード (たとえば、KIWI\_100) を入力します。</li><li>**Lose option:** このセクターがハズレを表す場合は、これを **On** に切り替えます。</li></ul> |
| **Styling** | <ul><li>**Font size:** セクターのテキストのサイズを調整します。</li><li>**Font color:** セクターのテキストの色を設定します。</li><li>**Sector color:** ホイールのこの区画の背景色を設定します。</li><li>**Upload image:** (任意) テキストの代わりに、またはテキストと一緒にセクターに表示するアイコンや画像をアップロードします。</li></ul> |

## 当選画面を設定する

**Styling** タブで **Winning Screen** を選択します。ここでは、ホイールを回して当選した後にユーザーに表示されるコンテンツをカスタマイズできます。このセクションは、**Image**、**Text**、**Coupon box** の 3 つのサブタブに分かれています。

### 画像

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-5.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=2092b0e04e08ac27efbf58787b31ce19" alt="Nocode 5" width="2454" height="1242" data-path="images/nocode-5.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Image Settings** | <ul><li>**Upload image:** 当選画面に表示するカスタム画像をアップロードします。</li><li>**Border color:** 画像の枠線の色を設定します。</li><li>**Margin:** 画像の外側の余白を調整します。</li><li>**Padding:** 画像の内側の余白を調整します。</li><li>**Border width:** 画像の枠線の太さを設定します。</li></ul> |

### テキスト

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nococde6.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=3bbf9fd116ccea803df82c13f78d82ec" alt="Nococde6" width="2470" height="1356" data-path="images/nococde6.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Text Styling** | <ul><li>**Title:** お祝いのテキスト (たとえば、「Congratulations, you won」) を入力します。</li><li>**Font size:** テキストのサイズを調整します。</li><li>**Font color:** テキストの色を選択します。</li><li>**Bg color:** テキスト領域の背景色を設定します。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** テキストの周囲の余白を調整します。</li><li>**Border width & radius:** 枠線の太さと角の丸みをカスタマイズします。</li><li>**Border color:** テキスト領域の枠線の色を設定します。</li></ul> |

### クーポンボックス

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-7.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=78ca65abb4dd5d4c434fe84d07b529fa" alt="Nocode 7" width="2312" height="1376" data-path="images/nocode-7.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Box Settings** | <ul><li>**Box size:** **S** (小)、**M** (中)、**L** (大) から選択します。</li><li>**Box type:** スタイル (たとえば、**Solid**) を選択します。</li><li>**Box color:** クーポンボックスのメインカラーを設定します。</li><li>**Bg color:** 背景色を設定します。</li></ul> |
| **Text & Icons** | <ul><li>**Font size & color:** クーポンコードのテキストの外観をカスタマイズします。</li><li>**Icon color:** コピーアイコンの色を設定します。</li><li>**Give copy icon:** **On** に切り替えると、ユーザーがワンクリックでコードをコピーできるようになります。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** クーポンボックスの周囲の余白を調整します。</li><li>**Border width, radius & color:** 枠線の外観をカスタマイズします。</li></ul> |

## ハズレ画面を設定する

**Styling** タブで **Losing Screen** を選択します。ここでは、ユーザーが賞品に当選しなかった場合に表示される画面をカスタマイズできます。このセクションは、**Image** と **Text** の 2 つのサブタブに分かれています。

### 画像

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-8.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=694716c96eddc52108c73f8be060dec2" alt="Nocode 8" width="2340" height="1164" data-path="images/nocode-8.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Image Settings** | <ul><li>**Upload image:** ハズレ画面に表示するカスタム画像をアップロードします。</li><li>**Border color:** 画像の枠線の色を設定します。</li><li>**Margin:** 画像の外側の余白を調整します。</li><li>**Padding:** 画像の内側の余白を調整します。</li><li>**Border width:** 画像の枠線の太さを設定します。</li></ul> |

### テキスト

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-9.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=2cfceb6f0959340f2a2a1bf07acc4762" alt="Nocode 9" width="2370" height="1288" data-path="images/nocode-9.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Text Styling** | <ul><li>**Title:** ハズレ時のテキスト (たとえば、「Better luck next time」) を入力します。</li><li>**Font size:** テキストのサイズを調整します。</li><li>**Font color:** テキストの色を選択します。</li><li>**Bg color:** テキスト領域の背景色を設定します。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** テキストの周囲の余白を調整します。</li><li>**Border width & radius:** 枠線の太さと角の丸みをカスタマイズします。</li><li>**Border color:** テキスト領域の枠線の色を設定します。</li></ul> |

# Scratch Card

Scratch Card テンプレートは、仮想の「スクラッチ」体験を作成します。ユーザーは画像の上でカーソルや指をこすることでキャンペーンを操作し、その下に隠された賞品やメッセージを表示させます。

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-10.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=96efe229b315d69f73b61708a1836755" alt="Nocode 10" title="Nocode 10" style={{ width:"45%" }} width="1166" height="1322" data-path="images/nocode-10.png" />

## ユースケース

* **シークレット割引の公開:** 割引額を隠すことで期待感を高めます (たとえば、「Scratch to reveal your deal」)。
* **コンテストへの応募:** 即時当選型のコンテストに「Scratch and Win」の仕組みを使用します。
* **限定プロモーション:** プロモーションコードの取得に操作を必要とすることで、ユーザーのエンゲージメントを高めます。

## テンプレートを設定する

Scratch Card を設定するには、フローティングツールバーと設定サイドパネルを使用します。

これらの設定にアクセスするには、次のようにします。

1. キャンバス上のスクラッチカード要素をクリックします。
2. フローティングツールバーで、**Settings** アイコンをクリックします。
3. 四角形のアイコンをクリックします。

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode11.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=1aa9de3e622e3be23217b9542600d242" alt="Nocode11" title="Nocode11" style={{ width:"52%" }} width="1846" height="1388" data-path="images/nocode11.png" />

## デフォルトのスタイルを設定する

**Styling** タブで **Default** を選択します。このセクションでは、ユーザーがスクラッチする前のカードの外観を制御します。

| セクション | カスタマイズオプション |
| :- | :- |
| **Card Appearance** | <ul><li>**Bg color:** スクラッチカードコンテナの背景色を設定します。</li><li>**Upload image:** ユーザーが削り取る「カバー」画像 (たとえば、ギフトボックス、パターン、「Scratch Here」のグラフィック) を選択します。カスタム画像をアップロードすることもできます。</li></ul> |
| **Behavior** | **Use with form:** <ul><li>**Toggle On:** カードをスクラッチする前に、ユーザーに詳細 (メールアドレス/電話番号など) の送信を求めます。</li><li>**Toggle Off:** スクラッチカードをすぐに操作できるようにします。</li></ul> |
| **Layout** | <ul><li>**Margin:** スクラッチカード要素の外側の余白を調整します。</li><li>**Padding:** スクラッチカード要素の内側の余白を調整します。</li></ul> |

## 当選画面を設定する

**Styling** タブで **Winning Screen** を選択します。このセクションでは、ユーザーがカードをスクラッチして当選したときに表示されるコンテンツを定義します。

当選画面には、**Image**、**Text**、**Coupon box** の 3 つのサブタブがあります。

### 画像

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocde12.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=5515146fb9246fef8dd04575b3e79dba" alt="Nocde12" title="Nocde12" style={{ width:"61%" }} width="1860" height="1366" data-path="images/nocde12.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Image Settings** | <ul><li>**Upload image:** メインビジュアルとして表示するカスタム画像をアップロードします。</li><li>**Card Bg color:** スクラッチレイヤーの下に表示されるカードの背景色を設定します。</li><li>**Border color:** 画像の枠線の色を設定します。</li><li>**Margin & Padding:** 画像の周囲の外側と内側の余白を調整します。</li><li>**Border width:** 枠線の太さを設定します。</li></ul> |

### テキスト

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-13.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=50bd130d3a1c750ce9f8ddc85927060c" alt="Nocode 13" width="1966" height="1380" data-path="images/nocode-13.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Text Styling** | <ul><li>**Title:** お祝いのテキストを入力します。</li><li>**Font size & color:** テキストの外観をカスタマイズします。</li><li>**Bg color:** テキスト領域の背景色を設定します。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** テキストの周囲の余白を調整します。</li><li>**Border width, radius & color:** 枠線の外観をカスタマイズします。</li></ul> |

### クーポンボックス

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode14.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=cf7b52ce1c3f3cbf71c2f6db0a1a5289" alt="Nocode14" title="Nocode14" style={{ width:"57%" }} width="1864" height="1390" data-path="images/nocode14.png" />

| セクション | カスタマイズオプション |
| :- | :- |
| **Box Settings** | <ul><li>**Box size, type & color:** クーポンコンテナの外観をカスタマイズします。</li><li>**Bg color:** クーポンボックスの背景色を設定します。</li></ul> |
| **Text & Icons** | <ul><li>**Text styling:** コードのフォントサイズと色を調整します。</li><li>**Copy icon:** コピーボタンを有効にし、その色を設定します。</li></ul> |

## ハズレ画面を設定する

**Styling** タブで **Losing Screen** を選択します。ここでは、ユーザーが賞品に当選しなかった場合に表示される画面をカスタマイズできます。

### 画像

| セクション | カスタマイズオプション |
| :- | :- |
| **Image Settings** | <ul><li>**Upload image:** 表示するカスタム画像をアップロードします。</li><li>**Border color:** 画像の枠線の色を設定します。</li><li>**Margin & Padding:** 画像の周囲の余白を調整します。</li><li>**Border width:** 画像の枠線の太さを設定します。</li></ul> |

### テキスト

| セクション | カスタマイズオプション |
| :- | :- |
| **Text Styling** | <ul><li>**Title:** ハズレ時のテキストを入力します。</li><li>**Font size & color:** テキストの外観をカスタマイズします。</li><li>**Bg color:** テキスト領域の背景色を設定します。</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** テキストの周囲の余白を調整します。</li><li>**Border width, radius & color:** 枠線の太さと角の丸みをカスタマイズします。</li><li>**Border color:** テキスト領域の枠線の色を設定します。</li></ul> |