こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今日は、ボタンを押した瞬間に「ぐにゃっ」と変形して、指を離すと「ぷるん」と元に戻る、スライムのような触感アニメーションを実装する方法を紹介します。
単なる拡大縮小ではなく、水分を含んだような変形感や戻りのバネ感がポイントです。
この記事では、まず最小構成のCSSアニメーションで「伸び縮み」を作り、次にSVGのGooeyフィルターで「とろみ」を加える二段構えで解説します。
さらに、JavaScriptのWeb Animations APIを使って「押下中は押しつぶされ、指を離すとバネっぽく復元」する挙動も付けます。
ユーザーの操作とアニメーションのつながりを丁寧に設計することで、ただのボタンが思わず触りたくなるUIに変わります。
アクセシビリティ面の注意点、パフォーマンスのコツ、コードの拡張もしっかりカバーします。
スライムUIの設計ポイント
- 押下時は横につぶれて縦に少し伸びる。戻り時は少しオーバーシュートしてから収束。
- 境界が溶けるような見た目をSVGフィルター（Gooey）で付与。
- 操作の可逆性と応答性。押してすぐ反応、離して気持ちよく戻る。
- CSSトランスフォーム中心でGPUに載せる。box-shadowやレイアウト再計算を避けて軽量に。
- キーボード操作・コントラスト・視覚効果の軽減（prefers-reduced-motion）に配慮。
まずは最小構成：CSSだけで「ぐにゃっ→ぷるん」
押下時にクラスを付けて、短いキーフレームで「つぶれる→戻る」を表現します。
HTMLはシンプルに、ボタン内部に“しずく”用のspanを2つ用意します。
デモページ
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
とろみをプラス：SVG Gooeyフィルターを重ねる
Gooeyは、ぼかし＋しきい値で境界を溶かしたように見せるテクニックです。 ボタンのラッパーにfilterを適用します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
アクセシビリティと実装のコツ
- button要素にtype="button"を明示。
- フォーム内で予期せぬsubmitを防止。
- キーボード操作：Space／Enterで押下アニメを再生。
- コントラスト：背景に応じて文字色・影を調整。
- prefers-reduced-motionでアニメを止める分岐を入れる。
- GPUフレンドリー：transformとopacity中心に。
- width/height変更は避ける。
発展アレンジ
- 波紋エフェクトを追加。押下位置に円形のしずくspanを生成してフェードアウト。
- カラーバリエーション。グラデーションをCSS変数化してテーマ切り替え。
- 粘性強めバージョン。dropsキーフレームのscaleX/scaleYを強めて、delayも増やす。
- カードCTA用の横長版。--btn-wを増やし、dropを3つに増量。
よくある不具合と対策
- フィルターが重い。stdDeviationを小さく、dropの数を減らす。モバイルはGooeyなしのフォールバックも検討。
- 押下後にアニメが再生されない。クラス付け直し時にvoid element.offsetWidthでリフローを挟む。
- キーボードで反応しない。keydownとkeyupの両方で制御する。
- 多ボタンでGCコスト増。イベントは委譲するか、インスタンス化パターンでまとめる。
まとめ
スライムのように伸び縮みするボタンは、単なる視覚効果ではなく操作の気持ちよさを高めるUIです！
まずはCSSのscaleで基本の「つぶれ」と「戻り」を作り、必要に応じてGooeyでとろみを足し、Web Animations APIで復元の質感を整えると、軽量かつリッチな体験になります。
アクセシビリティとパフォーマンスに配慮しながら、CTAやインタラクティブなUIに応用してみてください。
satokotadesignキャンペーン実施中！
