スクラッチブロック

アコーディオンやスピン抽選ブロックと同じ:checkedのCSSテクニックの上に構築された、スクラッチして景品を表示するカードです。隠しチェックボックス、スクラッチ面としてスタイルされたタップ可能なラベル、そしてチェックされた瞬間に表示内容を切り替えるCSSルール — JavaScriptはどこにも使いません。

仕組み

キネティックCSSが有効な環境では、ブロックはスクラッチ面 — 斜めのグレーのストライプ背景と「ここをスクラッチ」という案内でスタイルされた<label> — を景品の上に重ねてレンダリングします。タップすると、紐付けられた隠しチェックボックスがチェックされ、それがCSSルールを発動させてスクラッチ面を隠し、その下にある景品を受信トレイの中でそのまま表示します。ドラッグのジェスチャーや部分的なスクラッチのアニメーションはありません。単発のタップで表示する、シンプルな仕組みです — スピン抽選のホイールやアコーディオンの展開/折りたたみが使っているのと同じインタラクションです。

このブロックを特に取り上げる価値があるのはフォールバックです: スピン抽選やクイズにあるような別の常時表示コントロールの代わりに、スクラッチブロックはスタイル自体の中にある「安全な既定値」に依拠しています。スクラッチ面自身のインラインスタイルはdisplay:noneです。それが表示されるのは、(キネティック対応クライアントに限定された)<style>ルールが明示的にdisplay:blockを強制した場合だけです。Outlookやそのスタイルシートを尊重しないその他のクライアントでは、その面はそもそも一切表示されず、(そのような隠しスタイルを一切持たない)景品の要素が既定で表示されます。そのため、どこにも「スクラッチされていない」行き止まりは存在しません: クライアントはスクラッチのジェスチャーを表示する(タップすると景品が現れる)か、そのジェスチャーを完全にスキップして景品をそのまま表示するかのいずれかです。誰も、スクラッチできないカードを見つめたまま取り残されることはありません。

スピン抽選と同様、スクラッチ面がスクラッチされてもMailInAppには何も送信されません — 表示イベントも、投票も、送信も記録されません。回答ダッシュボード、CSVエクスポート、クリックヒートマップのいずれにも表示されません。ブロックに任意の景品リンクが設定されている場合、表示された景品をタップすると、他の<a href>と同様にそのリンクをそのまま辿るだけです。button/image/socialブロックのリンクのようにMailInAppのクリックトラッキング用リダイレクトを経由しないため、スクラッチブロックの景品クリックはクリックヒートマップにも表示されません。

設定可能なフィールド:

• タイトル — カード上部の見出しで、独自の色とフォントサイズを持ちます。
• 景品テキスト — スクラッチ面の下に表示される内容です(既定は「🎉 次回のご注文が20%オフ!」)。
• 景品リンク(任意) — 設定すると、表示された景品はそのURLへの本物のボタン風リンクとしてレンダリングされます。空欄のままにすると、リンク先が何もないため、代わりに単純な太字テキストとしてレンダリングされます。
• カードの背景色、パディング、ボーダー、ボーダーの角丸。
• 景品テキストの色と景品の背景色 — 他の色の上書きの多くとは異なり、意図的に組み込みの既定値を持ちません。このブロックは視覚的に異なる2種類の景品バリエーション(リンクが設定されているときは色付き背景に白抜き文字のボタン、設定されていないときは背景なしの濃い色のテキスト)をレンダリングするため、1つのハードコードされた既定値では、どちらかのバリエーションが見えなくなってしまうためです。各バリエーションは、フィールドを空欄にした場合にのみ、それぞれに適した既定値にフォールバックします。

例

リテンションメールでは、単発の確実な割引を表示する、スピン抽選より軽量な代替手段としてスクラッチブロックを使えます — この種の軽量なゲーミフィケーションについてはエンゲージメントとロイヤルティを参照してください。誕生日や記念日の送信では、景品テキストとしてパーソナライズされたクーポンコードを表示できます(景品テキスト自体は単なる設定可能な文言なので、マージタグと組み合わせて受信者ごとにコードをパーソナライズしてください)。「当選者を選びました」というキャンペーンの締めのメールでは、これを使って特定の受信者がプレゼントに当選したかどうかを表示し、景品リンクを受け取りページへ向けることができます。

静的フォールバックの見え方

<div id="em-scratch-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">
    Scratch to reveal your prize!
  </p>
  <!-- scratch surface (checkbox + label, display:none by default) omitted:
       only shown where a kinetic-tier <style> rule forces it visible -->
  <div class="sc-prize" style="margin-top:10px">
    <a href="https://acme.example.com/claim"
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      🎉 20% off your next order!
    </a>
  </div>
</div>

景品の<div>自身は隠しスタイルを一切持たないため、キネティックティアのスタイルシートが能動的に隠さない限り、無条件に表示されます — 表示のジェスチャーは、すでに表示されている景品の上に純粋に付加されるだけのものです。

関連ページ

• ブロックリファレンス概要
• スピン抽選ブロック
• フォールバックの仕組み
• インタラクションと分析