はじめに

私はハッカソンでものを作るのが好きだ。

アイデアを形にする。コードを書く。動くものができる。
その瞬間がたまらなく好き。

でも、そこにはいつも大きな壁があった。

動画制作

作ったものを正しく伝えるには、動画が必要。
でも動画制作には、センスがいる。ツールの習得がいる。時間もかかる。
せっかく作ったプロダクトも、伝え方で損をしてしまう。

「これだけものづくりを生成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がいればかなり頼もしい。

動画制作、もっと気軽にできる時代がやってきたみたい。

参考リンク

いいね・ストックしてもらえると続き書くモチベになります！
好評だったら続編もかこうかな。