UIの小さな動きは Lottie AI で作る：Claude Codeに「動かすべき場所」を探させ、秒数と速さでプロンプトを書かせる
ローディング・保存完了・404・ボタンの状態などを、動画ではなく軽いベクターアニメ（dotLottie）として作り、コンポーネントに組み込む。
どんな問題を解決するか / いつ使うか
AIで作った画面は、待ち時間・完了表示・空ページなどが「文字1行だけ」で味気なくなりがち。LottieFiles が出した Lottie AI は動画モデルではなく、ベクターアニメのコードを書く。1つのレイヤーだけ選んで1文で直しても他のレイヤーは変わらず、ホバー・クリック・処理中・完了を1ファイルの状態機械に持たせられる。数KB〜数十KBなのでLPやアプリにそのまま載せられる（@MengTo のLPではカード51KB、メニューアイコンは1つ1〜9KB）。
関連: AIに動きを頼むときは、見た目の名前に加えて「描画コスト・対応ブラウザ・reduced-motion」まで指定する、ガイド：CSSで作る動き（アニメーション・インタラクション）
手順
- Claude Code に場所を探させる（Voxyz_ai の依頼文の要旨）
- フロントエンドから次の3種類を探す：①待っているのに画面が動かない場所（読み込み・長い保存）②結果が文字1行だけの場所（「保存しました」「決済に失敗」）③偶然しか来ないページ（404・空のリスト）。無ければ無理に作らない。
- 場所ごとにファイルとコンポーネント名を示し、Lottie AI 用のプロンプトを書く：画面に何があるか、プロジェクトで既に使っている色、各動きの秒数と速さ、ループするか。
- ボタンなどクリックできるものは、ホバー・クリック・処理中・完了の見た目を書き、「dotLottie の状態機械として1ファイルで作る」と添える。文言はプロジェクトに実在するものだけ。役立つ順に並べる。
- プロンプトを見せるまでコードは変えない。
- Lottie AI で作る。プロンプトの型：
- 最初にループの長さ（例：8秒ループ）→ 要素ごとに動詞を1つ（浮かぶ・きらめく・脈打つ）→ 動かさないものを明記 → ホバーが要るなら「通常」と「注目」の2状態を頼む（@MengTo）。
- 動き1つずつに秒数とイージングを書く（例：「8pxを2秒周期で上下、ゆっくりease-in-out」「ホバーで0.3秒以内に10度傾く」「0.35秒で落ちて着地で15%つぶれ、0.6秒で2回弾む」）。
- 一部だけ直すときは「カードをライトモードに」のように1文で。気に入った版は残しておく。
- 組み込みを Claude Code に任せる：書き出した dotLottie を公式プレーヤーでコンポーネントに入れ、速さとループを props にする。後で「少し遅く」「1回だけ再生」と言われたらその props だけ変える。ライト/ダークは dotLottie のテーマで1ファイルのまま切り替え、両方で確認して何を確かめたか報告させる。
注意点
- Lottie AI はサービス側の機能（クレジット制）。投稿はローンチ告知を兼ねている。
- 「場所を探す→プロンプトを書く→選んでから実装」の流れと、「秒数・速さ・状態を書く」指定の仕方は、CSSアニメや他のツールでも使える。
- 動きを減らす設定（prefers-reduced-motion）への対応は別途確認する。