スピン抽選ブロック
ゲーム感覚のプロモーションホイールです: タイトル、スピンのジェスチャー、そして設定された単一の特典で構成されます。「このプロモーションをゲーム感覚にしたい」という要望に対するスタジオの軽量な回答です — 賞品プールもなく、当選確率もなく、サーバー側での抽選もなく、すでに自分で管理しているリンクを包む、満足感のある表示演出があるだけです。
仕組み
スピン抽選は、アコーディオンと同じ:checkedのチェックボックスとラベルを使ったCSSのテクニックの上に構築されているブロックの1つです。隠しチェックボックスと<label>がタップ対象として機能し、:checkedに紐づくCSSルールが表示内容を切り替えます — JavaScriptは一切使いません。キネティックCSSに対応している環境では、ホイールの図(🎡)をタップすると隠しチェックボックスがチェックされ、0.9秒のスピンアニメーション(@keyframesによる720度の回転)が発生すると同時に、賞品パネルが表示されます: 設定した賞品URLへのボタン風リンクで、表示の瞬間を演出する「🎉」が先頭に付きます。
このキネティックな層の下では、送信されるHTMLも常に第2のコントロールをレンダリングします: 同じラベルと送り先を持つ、プレーンなボタン風リンクです。投票や評価のフォールバックチップとは異なり、このボタンはキネティックティアの裏にCSSで隠されているわけではありません — 常に表示されています。:checkedに対応しているクライアントではホイールとこのボタンが同時に表示され、Outlookなどこのルールに対応していないクライアントではボタンだけが単独で表示されます。受信者は賞品にたどり着くために何かを「スピン」する必要はなく、どちらをタップしても同じように機能します。
このブロックにはランダム性が一切ありません。スピンした受信者も、プレーンなフォールバックボタンが表示されるクライアントの受信者も、全員が全く同じ設定済みリンクに到達します。「当選」は設計上保証されています — ホイールは、すでに全員に渡すと決めた単一の特典を演出するための表示装置であり、賞品を選び出す仕組みではありません。受信者ごとに異なるオファーを見せたい場合は、それはオーディエンスの区分ごとに別バージョンのメールを作る(または賞品リンク自体にマージタグを使う)という運用の話であり、このブロックの機能ではありません。
スピン抽選はタップされてもMailInAppに何も送り返しません — 投票、送信、表示のいずれのイベントもどこにも記録されません。つまり、回答ダッシュボード、CSVエクスポート、クリックヒートマップ(プレーンなbutton/image/social/汎用のelementリンクのみを追跡し、スピン抽選のボタンはその仕組みには接続されていません)のいずれにも一切表示されません。実際に何人がホイールに関わったかを知りたい場合は、賞品リンクを自分が管理するランディングページに設定し、そこで計測してください。あるいは、ホイールのアニメーションが不要であれば、buttonブロックのクリックヒートマップを代わりに使うこともできます。
設定可能なフィールド:
- タイトル — ホイールの上の見出しテキスト。独自の色とフォントサイズを設定できます。
- ボタンラベル — 常時表示されるフォールバックボタンと、表示された賞品ボタンの両方に使われるテキスト(既定は「運試しをする」)。
- 賞品リンク — ボタン/表示演出の送り先。空欄の場合、送信されるHTMLはリンク切れではなくブロック自身のホスティングされたライブビューのURLにフォールバックします。ライブビュー自体は、これが設定されている場合にのみボタンをレンダリングします(ライブビューにはさらにフォールバックする独自の送り先がありません)。
- カード自体の背景色、パディング、ボーダー、ボーダーの角丸。
- ボタンの文字色とボタンの背景色 — 既定ではプロジェクトの
$accentと$brandのテーマトークンにそれぞれ対応しているため、そのままブランドに合った見た目になります。
ホイールの図自体(コニックグラデーションの円と🎡の絵文字)は設定できません — 周囲のコピー、リンク、カードのスタイルだけが設定可能です。
例
Subject
You've got a spin waiting
フラッシュセールを行う小売業者は、賞品リンクを割引コードのランディングページや事前入力済みのカートに直接向けて、プロモーション送信にスピン抽選ブロックを組み込めます。ごく普通のプロモーションメールのクリック率を、軽いゲーム性で高めるという、より広いパターンについてはエンゲージメントとロイヤルティを参照してください。ロイヤルティプログラムの「会員でいてくれてありがとう」の送信では、プレーンなボタンの代わりに、ワンタップの「特典を受け取る」の瞬間として使うこともできます — スピンのアニメーションは静的なリンクよりも「イベント」らしく感じられるためです。実際のランダム性がないため、異なる受信者が実際には異なるものを受け取っているわけではないのに、ゲーム的な仕組みの楽しさを感じさせたい場面でもうまく機能します — 例えば、全員に使ってほしい単一のサイト全体向け割引コードなどです。
静的フォールバックの見え方
<div id="em-spin-1" style="margin:12px 0;text-align:center;background-color:transparent">
<p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
Spin to win!
</p>
<a href="https://acme.example.com/spin-reward"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
Try your luck
</a>
<!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
CSS-hidden everywhere else once this fallback link is visible -->
</div>
常時表示されるボタンは、設定した賞品リンク(未設定の場合はライブビューのURL)への単純な<a href>です — 何も記録されないため、/actの確認ステップはありません。