95. うねうねアニメーションになってきた！

「粘菌っぽい動き」をWebで表現したいとき、私はまず“何が粘菌らしさを作っているか”を分解して考えました。粘菌の魅力って、①輪郭が一定じゃない（ぷるぷる変形する）、②全体が同じ方向に動かず、部分ごとに遅れて動く、③増殖・融合みたいな“広がり”がある、の3つが大きい気がします。 まず手軽なのはCSSだけで「うねうね」を作る方法です。要素を丸やブロブ（不定形）にして、filter: blur() や backdrop-filter、もしくは疑似要素を重ねて“生っぽさ”を出します。動きは transform で回転させるより、scaleX/scaleY を交互に変えたり、border-radius を複数パターンでアニメーションさせると「粘菌の膜が伸び縮みしてる」雰囲気が出やすいです。ポイントは1個の要素を動かすのではなく、2〜5個くらいの小さい塊を近くに配置して、それぞれアニメーションのdurationを少しずつズラすこと。これだけで“部分ごとに遅れて動く”感じになります。 もう一段リアル寄りにするならSVGがおすすめでした。SVGのパスを1つ作って、CSSでパス自体を直接変形するのは難しいのですが、フィルター（feTurbulence + feDisplacementMap）を使うと、表面がざわざわ揺れる「生物っぽいノイズ」が簡単に乗ります。私は「粘菌＝滑らか＋微細な揺れ」だと思っているので、ノイズは強くしすぎず、ゆっくり動かす方がそれっぽいです。 「増殖っぽさ」を入れたい場合は、同じブロブを複製してopacityを薄くしつつ、少しずつ外側へ移動させる演出が使えました。例えば、中心の塊から“にじむ”ように外へ広がるアニメーションを作ると、細菌や粘菌が広がる印象になります。LPの背景に置くなら、ユーザーの可読性を邪魔しないように彩度を落として、動きも控えめ（10〜20秒で1ループくらい）にすると実用的でした。 最後に軽量化のコツ。blurやフィルターは重くなりやすいので、PCではOKでもスマホでカクつくことがあります。私は「装飾レイヤーを少なめにする」「アニメーション対象を少数にする」「prefers-reduced-motionに対応して動きを止める」の3点をセットにしておくようにしています。粘菌っぽい“うねうね”は、激しく動かさなくても雰囲気が出るので、むしろ控えめの方がきれいに見えました。