はじめに：Remotionとは？

Remotion は、Web開発者にとって馴染み深い「React」を使って動画を制作できるフレームワークです。

通常、動画編集といえばAdobe Premiere ProやAfter EffectsのようなGUIツールを思い浮かべますが、
(ちなみに私はDavinci Resolveを愛用しています。)

Remotionは 「プログラム（コード）で動画を記述する」 という全く新しいアプローチを取ります。

• コンポーネントベース： UIを作るように、動画のパーツを再利用可能なコンポーネントとして管理。
• Web技術の活用： CSSのアニメーションやSVGをそのまま動画に変換。

この時点で既にお気づきの方も多いと思いますが、そうです！現代のバイブコーディングと非常に相性がいいのです！

---

Agent Skills について

最近のアップデートで導入された 「Agent Skills」 については、Claude Code Skillsを使おう で詳しく解説しましたが、簡単に振り返ると、AI（Claude CodeやCursor、Antigravityなど）にRemotionを使う専門知識を授ける機能です。

npx create-video@latest を実行すると標準で、SKILL.mdが導入され、Remotionフレームワークの使い方を理解したAIが動画を作成してくれるようになります。

---

実践：自社サービスの宣伝動画を爆速で作る

実際に、弊社の草野球アプリ「RoB」のサービス紹介動画を作ってみました。

※注記: ここで作成および掲載している動画は、「Remotionが自社の業務に導入可能かどうかの評価・検証」 を目的としています。実際の商用宣伝（広告配信等）には使用しません。

1. プロンプトで一気に形にする

まずはざっくりとした指示出しから始めます。 今回は、アプリのコンセプト、機能の流れ（ユーザーフロー）、テーマカラーといった具体的な情報をAIに与えました。

RoBという草野球のチームマッチングや、対戦ゲーム化するアプリのランクマッチ機能の紹介動画を新しく作成したい。 remotionを活用して動画を作成してください。 長さ: 30秒程度 必要に応じて、ランクマッチ機能がわかるスマホのUIを作成し、動画にしてください。 テーマカラーはBlackとGolden Yellow #FFD200

ランクマッチ機能のユーザーフローは下記を参照してください。
RoB（Rank of Baseball）のランクマッチにおける全体の流れを整理しました。
「勝っても負けても楽しいはもう飽きた。」

⚾️ ランクマッチ全体のフロー

1. 募集作成 (Recruitment)

• 募集タイトル、募集詳細、応募条件、場所、日付、締切などの詳細情報を設定します。
• 「作成」ボタンを押下することで、対戦相手の募集を開始します。

2. 通知と応募 (Notification & Application)

• 対戦を希望するチームから応募が届くと、スマホに通知が届きます。

3. チャットでのやりとり (Chat Interaction)

• アプリ内のチャット機能を使い、日程や詳細について最終的な交渉を行います。

4. マッチング成立 (Matching)

• チャット画面にある「ランクマッチ」ボタンをタップすることで、正式に対戦が決定（マッチング）します。

5. 試合 (Play Ball)

• 決定した日時にグラウンドで実際の試合（真剣勝負）を行います。

6. 試合結果の記録 (Result Entry)

• 試合終了後、アプリの入力画面から「自チーム」と「相手チーム」のスコアを入力します。
• 「勝ち」「負け」「引き分け」のいずれかの結果を選択して報告します。

7. ポイント付与 (Points Awarded)

• 報告された試合結果に基づき、チームにランキングポイント（経験値）が付与されます。
• 獲得ポイントは数値（例：+150 Pt）とゲージの伸びで可視化されます。

8. ランクアップ (Rank Up)

• ポイントが一定量溜まることで、チームランク（ブロンズ、シルバー、ゴールドなど）が昇格します。

これだけの指示で、ベースとなるソースコードと動画が数分で完成します。
AIは提供されたフローを理解し、それをシーンごとに分割して動画を構成してくれました。

2. 驚異的な「部分調整」のしやすさ

実務で最も助かるのが、 部分的な微調整 です。内部のコードを理解していなくてもAIに指示を出すだけで、細かな修正も行なってくれます。全体的なカラーやテキストの大きさの修正など、自力ではめんどくさい作業に関してもAIに指示するだけで行なってくれます。

「全体的なテキストを２倍の大きさにして。」

変更前:

変更後:

「立体的な動きを出して。」

変更前:

変更後:

最終的に完成した動画

3. 向いていない作業（苦手なこと）

今回、アプリの世界観を伝える演出として、ピッチャーの投球シーンやバッターのバッティングシーンの実写素材をアセットとして配置し、それらを組み込んで動画にするよう指示することも試してみました。

しかし、結果としてこれらを自然な動画としてまとめるのは非常に困難でした。

動画編集において、部分的に動画のスピードを変えたり、動画の必要なシーンだけを切り抜いたりすることはあたりまえに行う作業でありますが、、その点は不向きかと思われます。

AI（Agent Skills）はあくまで「コード」を書いているため、「動画ファイルの0秒地点から配置する」といった指示は通りますが、「投手がボールをリリースする一番かっこいい瞬間を使う」といった指示は理解できません。

結論: 画像や動画の視覚的な情報に基づいて、いいシーンを抜き出したり、適切な動画同士を選んで繋げたりすることは、現状、AIに指示して行うのは難しいと感じました。

---

技術的な制約と動画の長さ

Remotionを実務で使う上で気になる「長さ」と「制約」について、公式ドキュメントに基づいて整理しました。

• 動画の長さに制限はあるか： システム上の厳密な制限はありませんが、クラウドレンダリング（Remotion Lambda）を使用する場合、出力ファイルの仕様上、 最大2時間（または5GB） までがサポート範囲となります。 参照: Remotion Lambda Limits
• 実務的な目安： Remotionはブラウザ技術で描画するため、ローカルPCのスペックに大きく依存します。 数分以内の動画 であれば、ある程度どのPCでもスムーズに動くかと思われます。
• 長尺動画の解決策： 長尺や高画質の動画生成には、 「Remotion Lambda」 （AWS上で動画を分割し、並列レンダリングする仕組み）が推奨されます。レンダリング時間を劇的に短縮可能です。 参照: Remotion Lambda Concurrency

---

まとめ：動画編集も「バイブコーディング」する時代へ

RemotionとAgent Skillsの組み合わせにより、動画制作は「AIと対話しながらコードを組む（Vibe Coding）」体験へと変化しました。

動画の構築、細部の調整やデザインの微修正までも、AIへの指示だけで完結します。 そのため、専門的な動画編集スキルやデザイン知識がなくても、スタイリッシュなマーケティング動画やサービス紹介動画を作成することが可能です。

まずは、30秒程度のサービス紹介動画やマーケティング動画をAIに指示して、その手軽さを試してみてはいかがでしょうか。