AIに「ふわっと出して」と頼むだけでLottieアニメが完成する時代へ──text-to-lottieが示すWeb制作の次の地殻変動

AI で画像を生成するのは、もう当たり前になりました。コードを書かせるのも普通になり、LP まで AI に作らせる流れが続いています。

そんな中、今度は「Web アニメーション」までが、自然言語で生成され始めています。

きっかけは、海外のエンジニアが投稿したこのポストでした。

Introducing text-to-lottie: an open source skill and harness for generating production ready Lottie animations with codex/claude code.

$ npx skills add diffusionstudio/lottie

Prompts guide and repo in the comments. pic.twitter.com/THUIvddu2D
— konstantinpaulus (@konstipaulus) June 8, 2026

「text-to-lottie」──テキストから Lottie アニメーションを生成する、オープンソースのスキルとハーネスが公開された、という内容です。

自然言語の指示からAIが Lottie アニメを作る例の図。「ボタンをふわっと表示して少し跳ねる」「3つのカードを順番にスライドイン」「チェックアイコンをくるっと回転」「ローディングをループ」の4例と完成イメージ

そもそも Lottie とは何か

Lottie を初めて聞く方のために、簡単に整理しておきます。

JSON ベースで動く軽量アニメーション
SVG ベースなので拡大しても劣化しない
Web、iOS、Android で同じファイルを再生できる
After Effects から書き出すのが定番

最近の SaaS のオンボーディングや、LP のヒーローエリア、ボタンの微妙な動きなど、「ちょっと気持ちいい動き」のほとんどは Lottie で実装されています。気づかないうちに、Web 上のあちこちで動いているはずです。

Lottie が使われている代表的な場面の図。SaaS のオンボーディング画面、LP のヒーローセクション、ボタンのマイクロインタラクション、読み込み・ローディングアニメーションの4例

これまでの Lottie 制作は、地味に面倒だった

ここが Web 制作の現場ではよく分かる話です。

Lottie をひとつ作るのに、だいたいこんな工程を踏んでいました。

After Effects を開く
レイヤーを組む
キーフレームを打つ
イージング（動きの緩急）を調整する
Bodymovin などのプラグインで JSON 化する
ブラウザで再生確認
「もう少し跳ねさせて」「もう少し遅く」と微調整
エンジニアに渡して実装

従来の Lottie 制作フローの図。After Effects を開く→キーフレーム設定→イージング調整→Bodymovin で JSON 書き出し→プレビュー確認→微調整→Web・アプリに実装の7工程

ひとつの動きで、これだけの工程です。動き自体は数秒なのに、制作には半日かかる、ということもざらにあります。しかも、ちょっと方向性を変えたくなった瞬間、また同じ工程を回し直すことになります。

「動きを試す」というシンプルなことの、コストの高さ。これが Lottie 制作の現場感でした。

そこに登場した text-to-lottie

そんな前提のうえで、今回の text-to-lottie を見るとインパクトが分かりやすくなります。

やっていることは、ものすごく単純です。

「フェードインしながら少し跳ねるカード」
「カードが順番に左から並ぶ」
「ボタンが押されたときに、柔らかく弾む」

こうした自然言語の指示を渡すと、Lottie の JSON が返ってきます。あとはそのまま Web に貼り付ければ動く、という流れです。

従来の Lottie 制作とAIでつくる新しい制作の比較図。従来は5工程で1案ずつ作り試せる数が限られる、AIは「ロケットがふわっと上昇」の指示から20案を生成して並べて比較できる

After Effects を開く必要がありません。キーフレームを打つ必要もありません。プラグインで書き出す必要もありません。

「動きを言葉で頼む」だけで、Lottie が手元に届く。これは、Web 制作の現場の前提を地味に書き換えるレベルの変化です。

本当にヤバいのは「量産できること」

AI で動きが作れる、というだけでも面白いんですが、本当のインパクトはその先にあります。

AI 画像生成がここまで広がった理由を思い出してみると、「絵が描けるようになった」だけではありませんでした。「大量に試せるようになった」のがいちばん大きい変化です。

Lottie も同じ構造になります。

動きのパターンを 20 個ずつ試せる
LP の CTA ボタンの動きを 10 種類比較できる
A / B テスト用に微妙に違うバージョンを並べられる
クライアントに「3 案」ではなく「30 案」を見せられる

text-to-lottie による3ステップの制作フロー図。①自然言語プロンプト(ボタンがふわっと出て跳ねる) ②AIが Lottie アニメを生成 ③Lottie JSON を Web で読み込んで再生

「作る」のコストが下がると、「比較する」が当たり前になります。比較が当たり前になると、品質の基準そのものが上がります。AI 画像で起きたことと、同じ流れが Lottie でも起こり始めている、と捉えると分かりやすいです。

でも「気持ちいい動き」は、まだ人間の領域

ここで終わると単なる「AI すごい記事」になってしまうので、現場目線でもう一歩踏み込みます。

text-to-lottie で生成される動きは、確かに「動いている」し、「それっぽい」ものが出てきます。ただ、Web の現場で求められているのは、もう少し繊細なものです。

どこで動かすか（ファーストビューなのか、スクロール後なのか）
どこで動かさないか（情報密度の高い箇所は逆に静かにする）
どのくらい遅らせるか（ブランドの空気感を決める「間」）
どこで止めるか（動きすぎは集中を奪う）

このあたりの判断は、いまの AI にはまだ難しい領域です。Lottie の「動き自体」は作れるようになっても、「どの動きを採用するか」「どこで使うか」は、まだ人間のセンスが強く残ります。

アニメーション制作のAIと人間の役割分担図。AIは指示の理解・多様な動きの生成・バリエーション量産・Lottie 出力、人間は目的に基づく設計・どこで動かし止めるかの判断・感情やブランドを込めること

まとめ

最後に整理します。

自然言語で Lottie アニメーションを生成する「ext-to-lottie」が登場した
After Effects やキーフレームを触らなくても、動きが手元に届く時代に近づいた
本当のインパクトは「1 つ作る」より「大量に比較できる」ことにある
ただし「どこで動かすか」「どこで止めるか」はまだ人間の領域

AI が次に飲み込み始めたのは、Web アニメーション制作の現場でした。画像、コード、LP に続いて、いよいよ「動き」までが言葉で扱える対象になっています。

After Effects を開く時間が短くなったぶんで、何を作るか・何を選ぶか・どう演出するか。ここに時間を使えるかどうかが、これから差を生む場所になりそうです。