半信半疑で試しました。以前「TypeScript 7系がRemotionのバンドラーと非互換だった話」という記事を書いたんですが、先日Zennで「Remotionにnpx skills add一発でAI動画編集の専門家になれるAgent Skillsが追加された」という記事を見かけました。正直、こういう「〇〇するだけで神ツールに」系のタイトルは話半分に読む派なんですが、Remotionは実際に自分がハマった実績のあるツールなので、鵜呑みにせず手を動かしてみることにしました。
まず、Agent Skillsって何なのか
ざっくり言うと、Remotionのベストプラクティスをまとめた指示書(Markdownファイル)一式を、Claude CodeなどのAIエージェントに読み込ませる仕組みです。npx remotion skills addを実行すると、プロジェクト内に.agents/skills/というディレクトリができて、そこにremotion-markup(アニメーションの書き方)やremotion-render(レンダリングの作法)といったスキルファイルが並びます。実際にやってみたら12個入りました。思ったより細かく分かれていて、地図アニメーション専用のスキルまであったのはちょっと笑いました。
ブランドカラーでタイトルカードを作ってみた
まずは実践です。Cat’s Handの配色(白背景・黒文字・水色アクセント)で、シンプルなタイトルカード動画を作らせてみました。結果としてちゃんと動くコードが出てきて、静止画とmp4のレンダリングまで一発で通りました。
ただ、正直に書くと「魔法みたいに動画ができた」という感覚はあまりなかったです。Skillの中身を読むと、useCurrentFrame()とinterpolate()をこう使え、CSSのtransitionは効かないから使うな、スタイルはインラインで書け、みたいなかなり具体的なコーディング規約が並んでいて、AIはそれに従ってReactコードを書いているだけでした。つまりAgent Skillsがやっているのは「動画編集の自動化」というより「AIに正しいRemotionの書き方を守らせる仕組み」に近い印象です。とはいえ、この「型」があるおかげでStudio(プレビュー画面)側で後から手直しできる構造になるので、実用上はここが一番効いてるポイントだと思います。
あのTS7バグ、今回は再現しませんでした
本題はここからです。個人的に一番気になっていたのがこれです。前回の記事ではTypeScript 7系にアップグレードした途端、Remotionのバンドラーがエラーを吐いて動かなくなりました。今回は最新のRemotion(4.0.507)のプロジェクトにTypeScript 7.0.2(正式版)を入れ直してtsc --noEmitとレンダリングの両方を試したんですが、普通に通りました。
前回ハマった時点のTS7はまだdevビルドだったはずなので、正式リリースまでの間にRemotion側かTypeScript側、あるいは両方で足並みが揃ったんだと思います。バージョン依存のバグは「直った」と誰かが宣言してくれるわけではないので、こうやって自分の手元で再現させてみるまで本当のところは分からないなと、改めて思いました。
まとめ
過度な期待は禁物でした。記事タイトルほどの劇的さは感じなかったものの、「AIに丸投げできるツール」というより「AIに正しい書き方を強制するレールを敷いたツール」として見ると、Remotionとの相性はかなり良さそうです。せっかく環境も整ったので、次はもう少しちゃんとした自己紹介動画を作って、その過程も記事にしてみようと思います。
この記事が参考になったら、応援クリックをお願いします
