グーイ・メタボールメニュー
FABを押すと、子ボタンがぷるんと分裂して飛び出すメタボール演出。SVGフィルタ(ぼかし＋コントラスト)で液体のように繋がって見える。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 遊び心のあるFAB展開
- ブランド演出としてのメニュー
- 単色で構成できる少数のアクション
- 避ける場面
- 業務画面の常用メニュー
- 背景が複雑で filter が乱れる場所
- アクションが4個以上で縦に飛び出しすぎる
- 構成要素
- メインボタン
- 子ボタン
- 液体フィルタ
- 持っている状態
- 通常
- 押下中
- キーボード
Tab でメインボタンへ・Enter／Space で開閉。開くと Tab で子ボタンへ（閉状態では入らない）・Esc で閉じてメインへ戻る
- 支援技術
メインに aria-label=メニューと aria-expanded を同期、子ボタンに aria-label、SVG フィルタは aria-hidden。閉状態の子は visibility:hidden で Tab・読み上げから外す
- 動き
子は 0.4s のオーバーシュート（cubic-bezier(.34,1.56,.64,1)）で飛び出し、＋は 0.3s で135°回転。液体の分裂感。reduced-motion では即時
デザインの要点
- 繋がって見えるのは feGaussianBlur → feColorMatrix（alpha×20−9）の順。ぼかしで滲ませた縁をコントラストで切り直すと、近い円どうしが橋で繋がる
- 子は cubic-bezier(.34,1.56,.64,1) で行き過ぎてから戻す。等速だと「分裂」ではなく「移動」に見える
- フィルタは単色の要素だけに当てる。文字や写真まで滲ませると読めなくなるので、メニューの塊だけを filter の対象にする
- 閉じた子はメインの下に重なって見えないが DOM には残る。visibility:hidden を遅らせて切り、Tab で届かないようにする
実装メモ
繋がって見えるのは SVG の #goo フィルタ(feGaussianBlur→feColorMatrix)の効果です。アイテムは単色だと最もきれいに繋がります。背景に重ねる場合はメニュー側だけ filter を当ててください。
コード（コピーして使えます）
<div class="goo-wrap">
<div class="goo-menu" data-open="false">
<button class="goo-item goo-main" aria-label="メニュー" aria-expanded="false">＋</button>
<button class="goo-item goo-child" style="--i:1" aria-label="お気に入り">★</button>
<button class="goo-item goo-child" style="--i:2" aria-label="いいね">♥</button>
<button class="goo-item goo-child" style="--i:3" aria-label="花を送る">✿</button>
</div>
<svg width="0" height="0" aria-hidden="true">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="b" />
<feColorMatrix in="b" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="g" />
<feBlend in="SourceGraphic" in2="g" />
</filter>
</defs>
</svg>
</div>