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 アニメーションを生成する、オープンソースのスキルとハーネスが公開された、という内容です。

そもそも Lottie とは何か

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

• JSON ベースで動く軽量アニメーション

• SVG ベースなので拡大しても劣化しない

• Web、iOS、Android で同じファイルを再生できる

• After Effects から書き出すのが定番

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

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

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

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

• After Effects を開く

• レイヤーを組む

• キーフレームを打つ

• イージング（動きの緩急）を調整する

• Bodymovin などのプラグインで JSON 化する

• ブラウザで再生確認

• 「もう少し跳ねさせて」「もう少し遅く」と微調整

• エンジニアに渡して実装

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

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

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

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

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

• 「フェードインしながら少し跳ねるカード」

• 「カードが順番に左から並ぶ」

• 「ボタンが押されたときに、柔らかく弾む」

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

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

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

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

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

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

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

• 動きのパターンを 20 個ずつ試せる

• LP の CTA ボタンの動きを 10 種類比較できる

• A / B テスト用に微妙に違うバージョンを並べられる

• クライアントに「3 案」ではなく「30 案」を見せられる

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

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

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

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

• どこで動かすか（ファーストビューなのか、スクロール後なのか）

• どこで動かさないか（情報密度の高い箇所は逆に静かにする）

• どのくらい遅らせるか（ブランドの空気感を決める「間」）

• どこで止めるか（動きすぎは集中を奪う）

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

まとめ

最後に整理します。

• 自然言語で Lottie アニメーションを生成する「ext-to-lottie」が登場した

• After Effects やキーフレームを触らなくても、動きが手元に届く時代に近づいた

• 本当のインパクトは「1 つ作る」より「大量に比較できる」ことにある

• ただし「どこで動かすか」「どこで止めるか」はまだ人間の領域

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

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