Remotion でアプリの紹介動画をエージェントに作らせる: 画面録画せず UI を作り直し、静止画で1コマずつ確かめる

どんな時に使う？

• リリースや LP 用に短い紹介動画がほしいが、画面録画と編集が面倒
• エージェントに Remotion を書かせると、アニメーションのタイミングや重なりが崩れる
• 文言や画面が変わるたびに動画を撮り直している

手順

1. アプリを動画用の部品として作り直す: 本物の画面を録るのではなく、ボタン・一覧・入力欄などをモックのコンポーネントにする。表示する内容や状態は props で渡す
2. 時間はフレームで決める: 動きは useCurrentFrame() から計算し、CSS アニメーションは使わない。秒とフレームの変換は sec() のような小さな関数にまとめる
3. シーンの長さは props から計算する: 文章の長さなどから尺を決めれば、内容を変えても尺が合う
4. 崩れにくい書き方を決めておく: 配置は絶対座標、フォントはモジュールの最上位で読み込む、TransitionSeries の各シーンは退場の動きをシーンの最後に入れる
5. 静止画で確認するループ: npx remotion still <Comp> /tmp/frame.png --frame=N で気になるフレームを画像にし、エージェント自身に見せて確認させる。崩れた所だけ直して再確認し、問題がなくなってから最終レンダリングする
6. この手順をスキル（作者のものは remotion-promo-video-factory）にまとめ、Remotion 公式のスキルと一緒に使う

注意点

• 全体を毎回レンダリングすると時間がかかるので、確認は静止画で済ませるのがこの方法の要点
• モックは本物の画面と見た目がずれていく。UI を大きく変えたら作り直す
• 画像を読めるモデル・エージェントが前提（静止画をエージェント自身が見て判断する）
• Remotion は会社の規模によって有料ライセンスが必要になる。商用で使う前に条件を確認する

出典

• @gyakuse · 2026-03-05
• 記事: nyosegawa.github.io