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

概要

MoEngageは、オンサイトメッセージング(OSM)キャンペーン向けにノーコードのゲーミフィケーションテンプレートを提供しており、以下を含みます:

これらのテンプレートはコードを書く必要のないエディターで完全にカスタマイズ可能です。ウェブサイト上でユーザーエンゲージメントを高めるために、これらのキャンペーンを作成して開始できます。

スピン・ザ・ホイール

スピン・ザ・ホイールテンプレートは、ユーザーを引き付けて報酬を与えるインタラクティブな賞品ホイールを作成することができます。

Screenshot 2026-01-14 at 4.46.57 PM.png

ユースケース

  • リード獲得:ユーザーにサインアップやメール/電話番号の入力を促してホイールを回してもらいます。
  • クーポン配布:「10%オフ」や「送料無料」など、異なる割引率を賞品として提供します。
  • 日々のエンゲージメント促進:「デイリースピン」キャンペーンを作成して、ユーザーのウェブサイトへの再訪を促します。

テンプレートの設定

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

これらの設定にアクセスするには:

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

Screenshot 2026-01-14 at 4.49.00 PM.png

デフォルトスタイリングの設定

スタイリングタブでデフォルトを選択します。このセクションでは、ユーザーがホイールに触れる前の外観をカスタマイズできます。

Screenshot 2026-01-14 at 4.50.47 PM.png

セクション カスタマイズオプション
ホイール設定
  • ホイールとポインターのサイズ: S(小)、M(中)、またはL(大)を選択します。
  • フォーム使用:ユーザーがホイールを回す前にフォーム(例:メール/電話)を入力する必要がある場合はオンに切り替えます。即時スピンを許可する場合はオフにします。
  • ポインター位置:当選指標の位置を選択します(例:右、上)。
色設定
  • 背景色:ホイールの背後の背景色を設定します。
  • ポインター色:指標矢印の色を設定します。
  • 境界線色:ホイールの境界線の色を設定します。
スピンボタン
  • スピンボタンの色:ボタンの背景色をカスタマイズします。
  • スピンボタンのテキスト:ボタンに表示するテキストを入力します(例:「スピンして当てよう」)。
  • スピンボタンのテキスト色:ボタンテキストの色を設定します。
  • スピンボタンのフォントサイズ:テキストのサイズを調整します。
レイアウト&ボーダー
  • マージン:ホイールコンテナの外側の間隔を調整します。
  • パディング:ホイールコンテナの内側の間隔を調整します。
  • ボーダー幅:コンテナの境界線の太さを設定します。

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

賞品、当選確率、ホイールのセクターの見た目を定義するには、追加可能ウィジェットを設定します。各ウィジェットはホイールの特定のセクターに対応しています。

これらの設定にアクセスするには:

  1. キャンバス上のホイール要素を選択します。
  2. フローティングツールバーでアイテムアイコンをクリックします。右側に追加可能ウィジェットパネルが表示されます。

Screenshot 2026-01-14 at 4.52.55 PM.png

セクション カスタマイズオプション
ウィジェット管理
  • 新しいウィジェットの追加:パネル下部のボタンをクリックしてホイールに新しいセクターを追加します。
  • ウィジェットの削除:ウィジェットカードのゴミ箱アイコンをクリックしてそのセクターを削除します。
  • 展開/折りたたみ:ウィジェットカードの矢印をクリックして詳細を表示または非表示にします。
ウィジェット詳細
  • 当選確率(%)の設定:このセクターに止まる確率を数値で入力します。
  • タイトル:セクターに表示されるテキストを入力します(例:「50%オフ」、「もう一度挑戦」)。
  • クーポンコード:この賞品に関連付けられたクーポンコードを入力します(例:KIWI_100)。
  • ハズレオプション:このセクターが非当選の場合はオンに切り替えます。
スタイリング
  • フォントサイズ:セクター内のテキストサイズを調整します。
  • フォント色:セクターテキストの色を設定します。
  • セクター色:ホイールの特定スライスの背景色を設定します。
  • 画像アップロード:(オプション)テキストの代わりに、またはテキストと一緒に表示するアイコンや画像をアップロードします。

当選画面の設定

スタイリングタブで当選画面を選択します。これは、ユーザーが当選した後に表示される内容をカスタマイズするためのものです。このセクションは画像テキストクーポンボックスの3つのサブタブに分かれています。

画像

Screenshot 2026-01-14 at 4.54.16 PM.png

セクション カスタマイズオプション
画像設定
  • 画像アップロード:当選画面に表示するカスタム画像をアップロードします。
  • 境界線色:画像の枠線の色を設定します。
  • マージン:画像の外側の間隔を調整します。
  • パディング:画像の内側の間隔を調整します。
  • 境界線幅:画像の枠線の太さを設定します。

テキスト

Screenshot 2026-01-14 at 4.55.28 PM.png

セクション カスタマイズオプション
テキストスタイリング
  • タイトル:お祝いのテキストを入力します(例:「おめでとうございます、当選しました」)。
  • フォントサイズ:テキストのサイズを調整します。
  • フォント色:テキストの色を選択します。
  • 背景色:テキストエリアの背景色を設定します。
レイアウト&ボーダー
  • マージン&パディング:テキストの周囲の間隔を調整します。
  • ボーダー幅&半径:枠線の太さと丸みをカスタマイズします。
  • ボーダー色:テキストエリアの枠線の色を設定します。

クーポンボックス

Screenshot 2026-01-14 at 4.56.10 PM.png

セクション カスタマイズオプション
ボックス設定
  • ボックスサイズ:S(小)、M(中)、またはL(大)を選択します。
  • ボックスタイプ:スタイルを選択します(例:ソリッド)。
  • ボックス色:クーポンボックスのメインカラーを設定します。
  • 背景色:背景色を設定します。
テキスト&アイコン
  • フォントサイズ&色:クーポンコードのテキストの見た目をカスタマイズします。
  • アイコン色:コピーアイコンの色を設定します。
  • コピーアイコンを付与:ユーザーがワンクリックでコードをコピーできるようにするにはオンに切り替えます。
レイアウト&ボーダー
  • マージン&パディング:クーポンボックスの周囲の間隔を調整します。
  • ボーダー幅、半径&色:枠線の見た目をカスタマイズします。

ハズレ画面の設定

スタイリングタブでハズレ画面を選択します。これは、ユーザーが賞品に当選しなかった場合に表示される画面をカスタマイズするためのものです。このセクションは画像テキストの2つのサブタブに分かれています。

画像

Screenshot 2026-01-14 at 4.57.03 PM.png

セクション カスタマイズオプション
画像設定
  • 画像アップロード:ハズレ画面に表示するカスタム画像をアップロードします。
  • 境界線色:画像の枠線の色を設定します。
  • マージン:画像の外側の間隔を調整します。
  • パディング:画像の内側の間隔を調整します。
  • 境界線幅:画像の枠線の太さを設定します。

テキスト

Screenshot 2026-01-14 at 4.57.41 PM.png

セクション カスタマイズオプション
テキストスタイリング
  • タイトル:ハズレ時のテキストを入力します(例:「次は頑張ってください」)。
  • フォントサイズ:テキストのサイズを調整します。
  • フォント色:テキストの色を選択します。
  • 背景色:テキストエリアの背景色を設定します。
レイアウト&ボーダー
  • マージン&パディング:テキストの周囲の間隔を調整します。
  • ボーダー幅&半径:枠線の太さと丸みをカスタマイズします。
  • ボーダー色:テキストエリアの枠線の色を設定します。

スクラッチカード

スクラッチカードテンプレートは、仮想の「スクラッチオフ」体験を作成します。ユーザーは画像の上をカーソルや指でこすって、隠された賞品やメッセージを明らかにします。

Screenshot 2026-01-14 at 4.59.03 PM.png

ユースケース

  • ミステリー割引の公開:割引額を隠して期待感を高めます(例:「こすって割引を見つけよう」)。
  • コンテスト参加:「スクラッチ&ウィン」メカニズムを使った即時当選コンテストに活用します。
  • 限定プロモーション:プロモコードにアクセスするためにユーザーのインタラクションを必要とし、エンゲージメントを促進します。

テンプレートの設定

スクラッチカードの設定は、フローティングツールバーと設定サイドパネルを使って行います。

これらの設定にアクセスするには:

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

Screenshot 2026-01-14 at 5.01.22 PM.png

デフォルトスタイリングの設定

スタイリングタブでデフォルトを選択します。このセクションは、ユーザーがスクラッチする前のカードの外観を制御します。

セクション カスタマイズオプション
カードの外観
  • 背景色:スクラッチカードコンテナの背景色を設定します。
  • 画像アップロード:ユーザーがこすって消す「カバー」画像を選択します(例:ギフトボックス、パターン、または「ここをスクラッチ」グラフィック)。カスタム画像もアップロード可能です。
動作
  • フォーム使用:
    • オンに切り替え:ユーザーがスクラッチする前に詳細(メール/電話など)を送信する必要があります。
    • オフに切り替え:即時にスクラッチカードとインタラクションできます。
レイアウト
  • マージン:スクラッチカード要素の外側の間隔を調整します。
  • パディング:スクラッチカード要素の内側の間隔を調整します。

当選画面の設定

スタイリングタブで当選画面を選択します。このセクションは、ユーザーがカードをスクラッチして当選した際に表示される内容を定義します。

当選画面は画像テキストクーポンボックスの3つのサブタブで構成されています。

画像

Screenshot 2026-01-14 at 5.02.58 PM.png

セクション カスタマイズオプション
画像設定
  • 画像アップロード:メインビジュアルとして表示するカスタム画像をアップロードします。
  • カード背景色:スクラッチ層の下に表示されるカードの背景色を設定します。
  • 境界線色:画像の枠線の色を設定します。
  • マージン&パディング:画像の周囲の外側および内側の間隔を調整します。
  • 境界線幅:画像の枠線の太さを設定します。

テキスト

Screenshot 2026-01-14 at 5.03.42 PM.png

セクション カスタマイズオプション
テキストスタイリング
  • タイトル:お祝いのテキストを入力します。
  • フォントサイズ&色:テキストの見た目をカスタマイズします。
  • 背景色:テキストエリアの背景色を設定します。
レイアウト&ボーダー
  • マージン&パディング:テキストの周囲の間隔を調整します。
  • ボーダー幅、半径&色:枠線の見た目をカスタマイズします。

クーポンボックス

Screenshot 2026-01-14 at 5.04.37 PM.png

セクション カスタマイズオプション
ボックス設定
  • ボックスのサイズ、タイプ、色:クーポンコンテナの見た目をカスタマイズします。
  • 背景色:クーポンボックスの背景色を設定します。
テキスト&アイコン
  • テキストスタイリング:コードのフォントサイズと色を調整します。
  • コピーアイコン:コピー用ボタンを有効にし、そのアイコンの色を設定します。

ハズレ画面の設定

スタイリングタブでハズレ画面を選択します。これは、ユーザーが賞品に当選しなかった場合に表示される画面をカスタマイズするためのものです。

画像

セクション カスタマイズオプション
画像設定
  • 画像アップロード:表示するカスタム画像をアップロードします。
  • 境界線色:画像の枠線の色を設定します。
  • マージン&パディング:画像の周囲の間隔を調整します。
  • 境界線幅:画像の枠線の太さを設定します。

テキスト

セクション カスタマイズオプション
テキストスタイリング
  • タイトル:ハズレ時のテキストを入力します。
  • フォントサイズ&色:テキストの見た目をカスタマイズします。
  • 背景色:テキストエリアの背景色を設定します。
レイアウト&ボーダー
  • マージン&パディング:テキストの周囲の間隔を調整します。
  • ボーダー幅&半径:枠線の太さと丸みをカスタマイズします。
  • ボーダー色:テキストエリアの枠線の色を設定します。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?