削って当たりが出る！？Studioで簡単に導入できるスクラッチ演出でLPを盛り上げよう✨

スクラッチを削って「当たり」が出る🎯　誰もが一度はやったことのある、あのドキドキ体験。

もし自分のキャンペーンページにこの仕掛けを入れられたらどうでしょう？ただの静止画やテキストよりもずっと印象的で、ユーザーがページに夢中になってくれるはずです🔥

実際に『Studio』でスクラッチエフェクトを試してみたところ、クーポン配布やシークレットセールと相性が抜群✨　今回は、その活用方法とコピペで使えるカスタムコードをご紹介します。

1. スクラッチエフェクトってなに？🪄

スクラッチエフェクトは、画面の上に「削れるカバー」を置いて、マウスや指でこすったところだけ透明になり、下の画像やテキストが見える仕組みです。

「削ると当たりが出る！」というシンプルな体験は、ユーザーにちょっとした遊び心とワクワク感を与えます💡

2. キャンペーンLPでの活用シーン 🎁

スクラッチはただ楽しいだけじゃなく、マーケティングとの相性もバッチリです👌

• 🏷️ クーポン配布：「削って出たら10%OFF！」
• 🕵️ シークレットセール：削ると隠しURLやQRコードが登場
• 🎲 抽選・ガチャ感覚：「大当たり／ハズレ／もう一回チャレンジ」などランダム表示
• 💄 ブランド演出：削ると新商品のパッケージやモデル写真が浮かび上がる

どれも「ただ表示する」よりも記憶に残りやすく、SNS映えも◎です。

3. スクラッチエフェクト実装のメリット ✨

• ✅ エンゲージメントUP：ユーザーが「自分の手で削る」ことで滞在時間が伸びる
• ✅ SNSシェアに強い：「削ってみた！」動画やGIFにすると拡散されやすい
• ✅ CVR改善：削った後にクーポンや購入ボタンを仕込めば自然にアクションにつながる

実際にXにデモを投稿したらたくさんの「いいね❤️」や反応をもらえました👏

4. コピペで使えるカスタムコード 💻

以下を『Studio』のEmbedブロックに貼るだけで、あなたのLPに「削って楽しむ仕掛け」が登場します！

<div id="scratch-card" style="all:initial; display:block;">
  <style>
    #scratch-card .wrap{
      all:unset; position:relative; display:block; width:100%;
      aspect-ratio: 16/9; max-width: 860px; margin: 0 auto;
      overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.18);
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
    }
    /* 下層：当たり（差し替えOK） */
    #scratch-card .prize{
      all:unset; position:absolute; inset:0; display:grid; place-items:center;
      background: center / cover no-repeat
        url("https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080");
      color:#fff; text-align:center; padding:20px;
    }
    #scratch-card .prize h3{ all:unset; font-size: clamp(22px, 4vw, 40px); font-weight:800; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
    #scratch-card .prize p{ all:unset; margin-top:10px; font-weight:600; opacity:.95; }

    /* 上層：削るレイヤー */
    #scratch-card canvas{
      position:absolute; inset:0; display:block; width:100%; height:100%;
      touch-action:none; cursor: pointer; background: transparent;
      transform: translateZ(0);
    }
  </style>

  <div class="wrap" data-brush="36">
    <div class="prize" aria-label="削ると表示されるコンテンツ">
      <div>
        <h3>🎁 SECRET SALE 10%OFF</h3>
        <br>
        <p>クーポンコード：FIND10
          <br>（本日23:59まで）</p>
      </div>
    </div>
    <canvas aria-label="スクラッチを削るキャンバス"></canvas>
  </div>

  <script>
  (() => {
    const root = document.currentScript.closest('#scratch-card');
    const wrap = root.querySelector('.wrap');
    const canvas = root.querySelector('canvas');

    const BRUSH  = parseInt(wrap.dataset.brush || '36', 10);

    const dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
    const ctx = canvas.getContext('2d');

    const fit = () => {
      const r = wrap.getBoundingClientRect();
      canvas.width  = Math.ceil(r.width  * dpr);
      canvas.height = Math.ceil(r.height * dpr);
      canvas.style.width  = r.width + 'px';
      canvas.style.height = r.height + 'px';
      drawCover();
    };

    // 🎨 ゴールド風カバー
    const drawCover = () => {
      ctx.save();
      ctx.scale(dpr, dpr);
      const w = canvas.width / dpr, h = canvas.height / dpr;

      const g = ctx.createLinearGradient(0,0,w,h);
      g.addColorStop(0,   '#f9e79f'); // 明るい金
      g.addColorStop(0.5, '#f1c40f'); // 中間の金
      g.addColorStop(1,   '#b7950b'); // 深い金
      ctx.fillStyle = g;
      ctx.fillRect(-1, -1, w+2, h+2);

      ctx.restore();
      ctx.globalCompositeOperation = 'destination-out';
    };

    let isDown = false, lastX = 0, lastY = 0;

    const erase = (x, y) => {
      ctx.save();
      ctx.scale(dpr, dpr);
      ctx.beginPath();
      ctx.arc(x, y, BRUSH, 0, Math.PI*2);
      ctx.fill();
      ctx.restore();
    };

    const pointer = (e) => {
      const rect = canvas.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { x: t.clientX - rect.left, y: t.clientY - rect.top };
    };

    const onDown = (e) => { isDown = true; const p = pointer(e); lastX=p.x; lastY=p.y; erase(p.x, p.y); e.preventDefault?.(); };
    const onMove = (e) => {
      if(!isDown) return;
      const p = pointer(e);
      const dx = p.x - lastX, dy = p.y - lastY;
      const dist = Math.hypot(dx, dy);
      const step = BRUSH * .6;
      for(let i=0; i<=dist; i+=step){
        erase(lastX + dx*(i/dist), lastY + dy*(i/dist));
      }
      lastX=p.x; lastY=p.y;
    };
    const onUp = () => { isDown = false; };

    canvas.addEventListener('mousedown', onDown);
    canvas.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    canvas.addEventListener('touchstart', onDown, {passive:false});
    canvas.addEventListener('touchmove',  onMove, {passive:false});
    window.addEventListener('touchend', onUp);

    new ResizeObserver(fit).observe(wrap);
    fit();
  })();
  </script>
</div>

まとめ 🌟

キャンペーンLPに「削る仕掛け」を入れるだけで…

• 🎯 ユーザーが夢中で触ってくれる
• 📲 SNSで「やってみた！」とシェアされやすい
• 💰 クーポンやセールの利用率が高まる

そんなプラス効果が期待できます。『Studio』ならこのコードをEmbedにコピペするだけで導入できるので、ぜひ試してみてください💡