はじめに
私はハッカソンでものを作るのが好きだ。
アイデアを形にする。コードを書く。動くものができる。
その瞬間がたまらなく好き。
でも、そこにはいつも大きな壁があった。
動画制作
作ったものを正しく伝えるには、動画が必要。
でも動画制作には、センスがいる。ツールの習得がいる。時間もかかる。
せっかく作ったプロダクトも、伝え方で損をしてしまう。
「これだけものづくりを生成AIに頼れる時代なのに、動画だけは自分でやらなきゃいけないのか...」
そんな時、出会ったのが Remotion だった。
Reactで動画を作るフレームワーク。
そして Claude Code というAIエージェント。
この2つが組み合わさった時、動画制作が私の中で最高に楽しくなった。
私: 「ハッカソン発表用の動画テンプレート作って」
AI: 「作りました」
私: 「もっとサイバーパンクっぽくして」
AI: 「こんな感じでどうですか？」
これだけで動画ができる。
というわけで、この記事ではRemotionとAIエージェントを組み合わせた新しい動画制作ワークフローを紹介する。
実際に作った動画を見てほしい
まずはこの記事のために作った動画を見てほしい。Reactのコードだけ で作っている。
全部CSSとReactで実現。
これ、AIに「作って」と言っただけ。
Remotionとは
Remotionは、Reactで動画を作るOSSフレームワーク。
(個人の利用はフリーですが、４人以上のチームで使用する場合は有償ライセンスが必要)
https://www.remotion.dev/docs/license
export const MyVideo: React.FC = () => {
const frame = useCurrentFrame(); // 現在のフレーム番号
const opacity = interpolate(frame, [0, 30], [0, 1]); // 0→30フレームで透明→不透明
return (
<div style={{ opacity }}>
Hello, Remotion!
</div>
);
};
- フレーム = 動画の1コマ（30fpsなら1秒=30フレーム）
- コンポーネント = 動画のシーン
- props = 動画のパラメータ
Reactが書ければ、動画が作れる。
なぜRemotionなのか
1. AIエージェントとの相性が最高
これが一番の理由。
従来の動画編集ソフトを「AIに操作させる」のは難しい。でもRemotionは ただのReactコード だから、AIが直接書ける。
実際のやりとり:
私: 「チュートリアル動画のテンプレート作って。
ステップバイステップで、コード表示もできるようにして」
Claude Code: 「TutorialSceneを作成しました。
- ステップ管理機能
- コードハイライト表示
- プログレスバー
- キャラクター表示
を実装しています」
私: 「背景が暗いのばっかりだけど、明るいテーマも欲しい」
Claude Code: 「テーマシステムを追加しました。
dark / light / ocean / sunset / forest から選べます」
会話するだけで動画テンプレートが進化していく。
2. コードだから再利用・テンプレート化が簡単
一度作ったシーンは何度でも使い回せる:
// ハッカソン発表テンプレート
<HackathonScene
projectName="SmartScheduler"
teamName="CodeCrafters"
tagline="AIがあなたの予定を最適化"
timeLimitSeconds={180}
showTimer={true}
phases={[...]}
techStack={[...]}
members={[...]}
/>
プロジェクト名とメンバーを変えるだけで、新しい発表動画が完成。
3. Git管理できる
git diff
# - title="Old Project"
# + title="New Project"
git commit -m "プロジェクト名を更新"
動画の変更履歴が残る。チームでのコラボレーションも可能。
毎月のレポート動画、毎週の振り返り...全部自動化できる。
実際のプロジェクト構成
remotion-project/
├── src/
│ ├── scenes/ # シーンテンプレート
│ │ ├── TutorialScene.tsx # チュートリアル動画用
│ │ ├── HackathonScene.tsx # ハッカソン発表用
│ │ └── PremiumScene.tsx # プレミアムデザイン
│ └── components/ # 共通コンポーネント
│ ├── CodeBlock.tsx # コード表示
│ ├── Timer.tsx # タイマー
│ └── Character.tsx # キャラクター
├── project-configs/ # プロジェクト別設定
│ ├── tutorial-demo/
│ └── hackathon-demo/
└── public/ # 静的アセット
AIエージェントはこの構造を理解して、適切な場所にコードを追加してくれる。
どんな動画が作れる？
| 用途 | 説明 | AIとの相性 |
|---|---|---|
| チュートリアル動画 | コード解説、ステップバイステップ | ◎ コード生成が得意 |
| プレゼン動画 | ハッカソン、LT発表 | ◎ 構造化された内容 |
| レポート動画 | 週報、月報、KPI報告 | ◎ データ駆動で自動化 |
| SNSショート動画 | TikTok、Reels、Shorts | ○ テンプレ活用 |
| 製品紹介動画 | 機能説明、デモ | ○ 繰り返し更新に強い |
こんな人におすすめ
✅ Reactが書ける（または書きたい）
✅ AIエージェント（Claude Code等）を使っている
✅ 同じような動画を繰り返し作る必要がある
✅ 動画制作ツールの学習コストを抑えたい
✅ コードで管理したい派
こんな人には向かないかも
❌ 1本限りの超凝った動画
❌ 実写編集がメイン
❌ プログラミングに抵抗がある
Claude Codeで今すぐ試してみる
興味が湧いたら、Claude Codeと一緒に試してみよう。
コードは全部AIに書いてもらって、自分はコマンドを実行するだけ。
Step 1: プロジェクト作成
まず、ターミナルで以下を実行：
npx create-video@latest my-video
いくつか質問される：
- Choose a template → 「Blank」を選択
- Add TailwindCSS? → お好みで（Noでも問題なし）
- Open in VS Code? → Yで開くと便利
macOSで権限エラーが出る場合
EACCES: permission denied エラーが出たら、TMPDIRを指定して実行：
mkdir -p ~/tmp
TMPDIR=~/tmp npx create-video@latest my-video
プロジェクトができたら依存関係をインストール：
cd my-video
npm i
Step 2: Claude Codeを起動
プロジェクトフォルダでClaude Codeを起動：
claude
Step 3: AIに動画を作ってもらう
Claude Codeに話しかけるだけ：
私: 「シンプルなタイトル動画を作って。
背景は黒で、中央に白文字で"Hello Remotion"って表示して、
フェードインするアニメーションつけて」
Claude Codeがコードを生成してくれる。
Step 4: プレビュー確認
コードを確認したら、サーバーを起動：
npm run dev
ブラウザで http://localhost:3000 を開くと、動画のプレビューが見れる。
Step 5: 調整を依頼
気に入らない部分があれば、また話しかける：
私: 「フォントサイズをもっと大きくして」
私: 「背景をグラデーションにして」
私: 「サブタイトルも追加して」
会話しながら動画が完成していく。
Step 6: 動画を書き出し
満足したら、レンダリング：
npx remotion render
out/ フォルダにMP4ファイルが生成される。
ポイント: コードを書くのはAI、実行するのは自分。
この分担が、AIエージェント時代の新しい動画制作スタイル。
まとめ
Remotion + AIエージェント = 動画制作の民主化
- 「動画作って」って指示を一言出すだけで簡単に動画ができる
- コードだから再利用・自動化・バージョン管理が簡単
- Reactの知識があればそれがそのまま活きる
- なくても生成AIがいればかなり頼もしい。
動画制作、もっと気軽にできる時代がやってきたみたい。
参考リンク
いいね・ストックしてもらえると続き書くモチベになります！
好評だったら続編もかこうかな。