Webのアニメーションは「撮って→作って→同じ条件で撮って比べる」で再現させる（reanimateスキル）

どんな問題を解決するか / いつ使うか

参考サイトのホバーやスクロール演出をエージェントに真似させると、静止画から一度推測して終わりがち。動きは時間の情報なので、比較も動画で行う必要がある。reanimate は Claude Code 用の無料スキルで、この比較ループを自動で回す。

関連: アプリを「速く感じさせる」4つの動きのルール：ease-out・300ms以内・独自イージング・スピナーを速く、AIが作ったアプリの「もたつき」は動きの盛りすぎ。先に消して、残った動きだけを整えさせるプロンプト

手順

1. インストール: npx skills add NiazMorshed2007/reanimate -g
2. 入力に使えるもの: 公開中のサイトURL、画面録画、mp4／gif、Lottieファイル。
3. スキルが元の動きを録画 → プロジェクトで使っている技術（CSS、Framer Motion、GSAP、three.js）で作り直す → 複製を同じ方法で録画 → タイミング・イージング・ピクセルを比較、を繰り返す。
4. 作者の説明では修正は2〜5回程度。最後まで一致しなかった箇所はレポートに一覧で出る。

注意点

• 他社サイトの動きを丸ごと複製して公開するのは権利面に注意。参考・学習用か、自社の既存動きの移植に使うのが安全。
• 数値が一致しても、ページ全体のトーンに合うかは人が見て判断する。
• 投稿時点の紹介に基づく。導入前にリポジトリの説明・ライセンスを確認する。

出典

• @dr_cintas · 2026-11-09