🔦『Studio』で"懐中電灯ごっこ"！コピペで作れるスポットライト演出

Webサイトをちょっと楽しくしたいときにおすすめなのが「懐中電灯エフェクト」。ページが暗くなり、マウスや指を動かすと光の円の中だけが見える仕掛けです。

「難しそう…」と思うかもしれませんが、安心してください！『Studio』ならカスタムコードをコピペするだけで、誰でも作れます✨

完成イメージ

• ページを開くと一面が暗い
• マウスや指を動かすと、その部分だけ光が当たって見える
• 隠された文字や画像が"浮かび上がる"ように表示される

🎁 キャンペーンやイベントに仕込むと、ユーザーのワクワク感がアップします！

実装方法（コピペOK！）

1. Studioのエディタを開く
2. エフェクトを表示したいページに「Embed」を追加
3. 下のコードをそのままコピペ！
4. backgroundのURLを好きな画像に変える

<div style="display:block;">
  <style>
    #spotwrap{
      position:relative; display:block; width:100%;
      aspect-ratio: 16/9;
      background: center / cover no-repeat url("https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=1600&auto=format&fit=crop"); /* Studioにアップロードした自分の画像URLへ変更 */
      --x: 50%; --y: 50%;
      --r: 18vmin; /* 光の大きさ */
      --f: 10vmin; /* ぼかし */
    }

    #spotwrap::after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(
          circle at var(--x) var(--y),
          rgba(0,0,0,0) 0 var(--r),
          rgba(0,0,0,1) calc(var(--r) + var(--f))
        );
    }

    #spotwrap::before{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(
          circle at var(--x) var(--y),
          rgba(255,255,255,.45) 0 var(--r),
          rgba(255,255,255,0) calc(var(--r) + var(--f))
        );
      mix-blend-mode: screen;
    }
  </style>

  <div id="spotwrap"></div>

  <script>
  (()=>{
    const el = document.getElementById('spotwrap');
    if(!el) return;

    let mx=50,my=50,cx=50,cy=50;

    const setTarget=(x,y)=>{
      const r=el.getBoundingClientRect();
      mx=((x-r.left)/r.width)*100;
      my=((y-r.top)/r.height)*100;
    };

    // マウス用
    el.addEventListener('mousemove',e=>setTarget(e.clientX,e.clientY));

    // スマホ用
    el.addEventListener('touchmove',e=>{
      const t=e.touches[0]; if(t) setTarget(t.clientX,t.clientY);
    });

    // 光をスムーズに追従
    const tick=()=>{
      requestAnimationFrame(tick);
      cx+=(mx-cx)*0.2;
      cy+=(my-cy)*0.2;
      el.style.setProperty('--x',cx+'%');
      el.style.setProperty('--y',cy+'%');
    };
    tick();
  })();
  </script>
</div>

ポイント

--rを変えると光の大きさを調整できます（例：大きくするなら25vmin）。PCでもスマホでも動作します。

活用アイデア

• 🎁 キャンペーンページで「光を当てると割引コードが出現！」
• 💎 商品写真をライトでなぞると質感が強調される
• 📚 子ども向けのクイズに「ヒントを探すライト」
• 🎃 イベントLPで「ホラー探索ゲーム風」に

まとめ

『Studio』にコピペするだけで、サイトが体験型に変身します。🔦 あなたのサイトでも「懐中電灯ごっこ」を楽しんでください！