🎨 『Studio』で「インクぶちまけスプラエフェクト」爆誕💥

🧭 Xで大好評だった"遊べる演出"をサイトでも！

クリックでドバッ！💦　タップでビシャッ！👇

Xで大好評の「インクぶちまけスプラエフェクト」を、ノーコードWeb制作ツール『Studio』の無料プランでそのまま実装できるコードを紹介します☺️

ヒーローセクション（トップのメインビジュアル）やキャンペーンページの"掴み"にぴったり。触って楽しい体験は、サイトの印象をぐっと強くします✨💖

💡 1. どんなエフェクト？

クリックやタップに反応して、画面上にカラフルなインクが弾けます。SVG（ベクター画像）とフィルターを使って"ゼリーのように溶ける"質感を再現。本体、飛沫、棘（スパイク）、垂れなどが複雑に重なり合い、まるでスプラトゥーンをしているような没入感を生み出します🎨

🧰 2. 実装に必要なもの

実装に必要なのは、たったこれだけです。

• Embed（埋め込み）ボックス → ページ内にカスタムコードを入れるためのボックス。
• カスタムコード → 下のHTML・CSS・JavaScriptをそのまま貼り付け。

どちらも無料プランで利用可能です🪄

💡ヒント：『Studio』では、埋め込みボックスをページ上にドラッグし、右クリックで「カスタムコードを編集」を選ぶだけでOK！

💻 3. コードの貼り付け手順（コピペOK）

1. 『Studio』でヒーローや背景エリアなど、エフェクトを表示したい位置にEmbed（埋め込み）ボックスを追加します。
2. カスタムコードを編集を開き、以下のコードをそのまま貼り付けます。
3. 保存・公開すれば、クリックやタップでインクが飛び散る演出が完成です💥

<div id="ink-svg" style="all:initial; display:block;">
  <style>
    /* 背景を完全透過 */
    html, body { background: transparent !important; }

    #ink-svg .wrap{
      all:unset; position:relative; display:block; width:100%;
      aspect-ratio:16/9; max-width:900px; margin:0 auto; overflow:hidden;
      background:transparent;
      box-shadow:0 8px 28px rgba(0,0,0,.2);
    }
    #ink-svg svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
    #ink-svg .hit{ position:absolute; inset:0; cursor:pointer; }
  </style>

  <div class="wrap"
       data-points="72"
       data-size="15-60"
       data-lobes="4-8"
       data-lobe-amp="0.15-0.25"
       data-noise="0.04"
       data-soft-spike="0.02"
       data-splatter="10-26"
       data-spikes="2-6"
       data-spike-len="30-120"
       data-spike-base="10-22"
       data-tip="6-14"
       data-drips="0-2">
    <svg viewBox="0 0 1000 562.5" preserveAspectRatio="none">
      <defs>
        <filter id="goo" color-interpolation-filters="sRGB">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
          <feColorMatrix in="blur" mode="matrix"
            values="1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    0 0 0 20 -10" result="goo"/>
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
      <g id="inkGroup" filter="url(#goo)"></g>
    </svg>
    <div class="hit"></div>
  </div>

  <script>
  (() => {
    const root = document.currentScript.closest('#ink-svg');
    const wrap = root.querySelector('.wrap');
    const svg  = root.querySelector('svg');
    const g    = root.querySelector('#inkGroup');
    const hit  = root.querySelector('.hit');

    // カラーパレット（1クリック1色）
    const PALETTE = ['#FB911A','#46C8C4','#F35E82','#BDE808','#A06FE9','#F1D231','#576FC0'];
    const rand=(a,b)=>Math.random()*(b-a)+a;
    const randInt=(a,b)=>Math.floor(Math.random()*(b-a+1))+a;
    const pick=arr=>arr[Math.floor(Math.random()*arr.length)];

    function clientToSvg(x,y){
      const r=svg.getBoundingClientRect();
      return {x:(x-r.left)/r.width*1000, y:(y-r.top)/r.height*562.5};
    }

    // 丸パス生成関数など（省略なし）
    function makeRadii(n, base){
      const radii=new Array(n).fill(base);
      const LOBES=[4,8], LAMP=[0.15,0.25], NOISE=0.04, SOFTS=0.02;
      const lobeN=randInt(LOBES[0],LOBES[1]);
      const ampBase=rand(LAMP[0],LAMP[1])*base;
      const centers=Array.from({length:lobeN},()=>Math.random());
      const widths=centers.map(()=>rand(0.05,0.12));
      for(let i=0;i<n;i++){
        const t=i/n; let bump=0;
        for(let k=0;k<lobeN;k++){
          let d=Math.abs(t-centers[k]); if(d>0.5) d=1-d;
          bump+=Math.exp(-(d*d)/(2*widths[k]*widths[k]))*ampBase;
        }
        radii[i]+=bump+(Math.random()-0.5)*NOISE*base*2;
      }
      if(Math.random()<SOFTS) radii[randInt(0,n-1)]+=base*rand(0.05,0.1);
      return radii;
    }

    function buildPath(points){
      const n=points.length, p=i=>points[(i+n)%n];
      const tension=0.22;
      let d=`M ${p(0).x.toFixed(2)} ${p(0).y.toFixed(2)}`;
      for(let i=0;i<n;i++){
        const p0=p(i-1),p1=p(i),p2=p(i+1),p3=p(i+2);
        const c1x=p1.x+(p2.x-p0.x)*tension/6;
        const c1y=p1.y+(p2.y-p0.y)*tension/6;
        const c2x=p2.x-(p3.x-p1.x)*tension/6;
        const c2y=p2.y-(p3.y-p1.y)*tension/6;
        d+=` C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
      }
      return d+' Z';
    }

    // クリック＆タップでスプラッシュ生成
    function spawnSplash(clientX,clientY){
      const {x:cx,y:cy}=clientToSvg(clientX,clientY);
      const color=pick(PALETTE);
      const base=rand(15,60), PTS=72;
      const radii=makeRadii(PTS,base);
      const off=rand(0,Math.PI*2);
      const pts=[];
      for(let i=0;i<PTS;i++){
        const ang=off+i/PTS*Math.PI*2;
        pts.push({x:cx+Math.cos(ang)*radii[i], y:cy+Math.sin(ang)*radii[i]});
      }
      const body=document.createElementNS('http://www.w3.org/2000/svg','path');
      body.setAttribute('d',buildPath(pts));
      body.setAttribute('fill',color);
      g.appendChild(body);
    }

    let touched = false;
    hit.addEventListener('touchstart', e => {
      const t = e.touches && e.touches[0];
      if (t) {
        touched = true;
        setTimeout(() => { touched = false; }, 400);
        spawnSplash(t.clientX, t.clientY);
      }
      e.preventDefault();
    }, {passive:false});

    hit.addEventListener('click', e => {
      if (touched) return;
      spawnSplash(e.clientX, e.clientY);
    });
  })();
  </script>
</div>

✨ 4. 活用アイデア

• LPのヒーローで「ド派手な掴み」に
• クリック位置にロゴやクーポンを浮かび上がらせる演出
• ブランドカラーに合わせてインク色を統一（PALETTEの配列を変更）
• 透明背景なので、背景画像と絶対配置で組み合わせて使ってもOK！

🏁 5. まとめ｜Xで話題の"触って楽しい"をあなたのサイトに

『Studio』のEmbedとカスタムコードだけで、クリック一発でインクが弾ける"体験型サイト"を作れます。

サイトを開いた瞬間、「なにこれ!?」とワクワクしてもらえる。そんな驚きの仕掛けを、まずはあなたのWebサイトに追加してみましょう💥