AIが作ったアプリの「もたつき」は動きの盛りすぎ。先に消して、残った動きだけを整えさせるプロンプト

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

Claude Code や Codex で作ったアプリが、ショートカットでメニューを開けばスライド、タブを切り替えればフェード、と何をしても動きの終わりを待たされるとき。ひとつひとつは小さくても積み重なって「重い」「AIっぽい」印象になる。公開前やデザイン調整の最後に、動きだけを一括で見直させるのに使う。

やり方（プロンプトの要約）

最初に「プロジェクト内のすべてのアニメーションを見直す。先に削除し、残ったものを調整する。新しい動きは追加しない」と伝え、次の項目を守らせる。

削除するもの

1. キーボード操作で起きる動き（ショートカット、コマンドパレット、矢印キー移動）と、1日に100回以上見る動き（タブ切り替え、サイドバー移動、アプリ内の画面遷移、リスト行のホバー）。
2. 読み込むたびにアニメーションするグラフ・表・数値。値が実際に変わったときだけ動かす。
3. 目的を言えない飾り：全セクションのスクロール時フェードイン、ホバーで拡大するカード、ずっと続くグローやパルス。初回オンボーディングや成功メッセージのような、まれな場面は残す。
4. 1日に何十回も使うホバーやトグルは、色か不透明度の変化だけ・150ms以下にする。

削除の前に確認させること：開始状態が opacity: 0 の要素は、動きと一緒にその指定も消す（消し忘れると要素が二度と見えなくなる）。動きの終了を待つコールバックや、動きの長さに合わせた setTimeout も一緒に直す。

調整するもの

5. 残すメニュー・モーダルは開く250ms、閉じる150ms。閉じるときに遅延を入れない。
6. 出てくるものは 0.96〜0.98 から 1 へ拡大（0からにしない）。スライドは約8px。40pxを超えると鈍く感じる（ドロワーとサイドパネルは例外）。
7. 開閉ともに cubic-bezier(0.22, 1, 0.36, 1)。バウンスはバッジや数値など小さいものが現れるときだけで、閉じるときには使わない。
8. 1件ずつ現れるリストは間隔40ms・合計300ms未満。
9. ツールチップは80ms待ってから出す（カーソルが通り過ぎただけで点滅しないように）。
10. transition: all を、実際に変わるプロパティだけの指定に置き換える。
11. prefers-reduced-motion を入れ、OSの「視差効果を減らす」がオンなら動かさない。

最後の報告：削除したもの・調整したもの・意図して残した動きとその理由を一覧にさせる。アニメーション用ライブラリがどこでも使われなくなったら、アンインストールする前に確認させる。

注意点

• 数値（250ms／150ms、8px、イージング）は投稿者の流儀。DESIGN.md に動きのトークンがあるならそちらを優先させる。
• 「消す→直す」の順を守らせるのが肝。逆にすると、要らない動きまで丁寧に調整されてしまう。
• ライブラリの削除は依存関係を壊しやすいので、プロンプトどおり確認を挟む。

関連

• AIに動きを頼むときは、見た目の名前に加えて「描画コスト・対応ブラウザ・reduced-motion」まで指定する
• AIで作ったサイトをスマホで触ると変になる10か所を、公開前にまとめて直させるプロンプト
• AIっぽいUIを「監査→5行の方向性→1項目ずつの修正パス」で直させるプロンプト（unslop）
• ガイド：CSSで作る動き（アニメーション・インタラクション）

出典

• @Voxyz_ai · 2026-11-02