ReactエンジニアがLMS用動画テンプレを3時間で作った: Remotion × Claude Code の全手順

はじめに

動画を毎回手作りしていた。

LMSのコース紹介動画、SNSのショート動画、商品紹介動画——内容が変わるたびにCapCutを開いて、テロップを打ち直して、書き出して。同じ作業を繰り返していた。

転機は「React で動画を書けるなら、コードで量産できるのでは」という気づきだった。

調べると Remotion というOSSがあった。GitHub 25,300+ Stars、2024年に黒字化済みの企業。3人以下なら商用利用が無料。

さらに Claude Code と組み合わせたら、LMSテンプレートが3時間で3本できた。この記事ではその全手順を公開する。

Remotion とは何か

Remotion = React で動画をコードとして書くフレームワーク。

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <div style={{ opacity: frame / 30 }}>
      こんにちは
    </div>
  );
};

MP4への書き出しは AWS Lambda で行い、1本あたり数セント。ブラウザのプレビューは無料のローカル Studio で確認できる。

競合との比較

| ツール | 月額 | 向き不向き | |---|---|---| | Remotion | $0（3人以下） | React エンジニア向け・カスタマイズ無制限 | | Creatomate | $29〜 | ノーコード寄り・API 連携が容易 | | Shotstack | $59〜 | 大量レンダリング向け・JSON ベース |

React が書けるなら Remotion が最もコスパが良い。

ライセンスの注意点

• 3人以下: 無料・商用利用可
• 4人以上のチーム: 有料ライセンス要
• v5 でライセンス変更予定: 現在 v4.0 系のルール。v5 リリース時に再確認推奨

Claude Code との組み合わせ

Remotion は TypeScript + React なので、Claude Code が Zod schema 設計 → Composition 骨格 → アニメーション実装 の流れを一発でたたき台として出してくれる。

俺が実際に使ったプロンプト例:

Remotion で CourseIntro という Composition を作りたい。
Props は Zod で定義して。
構成: タイトルアニメーション（spring）→ 学習内容リスト（順次フェードイン）→ CTA
尺は body 項目数に応じて calculateMetadata で動的計算。

このプロンプトから出てきたたたき台に、型エラー修正を数ターン繰り返すだけで動作するコードができた。

実装: CourseIntro テンプレート全手順

1. プロジェクト作成

npx create-video@latest
cd my-video
npm install

2. Zod で Props を定義する

// src/compositions/course-intro/schema.ts
import { z } from "zod";
 
export const courseIntroSchema = z.object({
  title: z.string(),
  subtitle: z.string(),
  body: z.array(
    z.object({
      icon: z.string(),
      text: z.string(),
    })
  ),
  cta: z.string(),
  accentColor: z.string().default("#10b981"),
});
 
export type CourseIntroProps = z.infer<typeof courseIntroSchema>;

3. Composition を書く（抜粋）

// src/compositions/course-intro/CourseIntro.tsx
export const CourseIntro: React.FC<CourseIntroProps> = ({
  title, subtitle, body, cta, accentColor
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const titleScale = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 200 },
    from: 0.8,
    to: 1,
  });
 
  const itemOpacity = (index: number) =>
    interpolate(frame, [30 + index * 15, 50 + index * 15], [0, 1], {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    });
 
  return (
    <div style={{ width: "100%", height: "100%", background: "#0f172a" }}>
      <h1 style={{ transform: `scale(${titleScale})`, color: accentColor }}>
        {title}
      </h1>
      {body.map((item, i) => (
        <div key={i} style={{ opacity: itemOpacity(i) }}>
          {item.icon} {item.text}
        </div>
      ))}
    </div>
  );
};

4. Props JSON で内容を切り替える

{
  "title": "Claude Code 完全マスターコース",
  "subtitle": "AI×コードで仕事を自動化する実践講座",
  "body": [
    { "icon": "⚡", "text": "セットアップから実務活用まで全ステップ" },
    { "icon": "🛠️", "text": "hooks / skills / MCP の設計パターン" },
    { "icon": "🚀", "text": "n8n × Claude で自動化ワークフロー構築" }
  ],
  "cta": "今すぐ始める",
  "accentColor": "#10b981"
}

JSON を差し替えるだけで別のコースの動画が出力される。

5. Studio でプレビュー → レンダリング

# プレビュー
npx remotion studio
 
# MP4 出力
npx remotion render CourseIntro --props props/course-intro.json out/course-intro.mp4

Remotion Studio のプレビュー画面はこんな感じ。左がコンポジション一覧、中央がフレームプレビュー、右がタイムライン。

CourseIntro: コース紹介テンプレート（frame=30）

SnsShort: SNSショート動画テンプレート（frame=30）

ProductShowcase: 商品紹介テンプレート（frame=30）

作った3テンプレートの全体像

| テンプレート | 用途 | 尺の目安 | |---|---|---| | CourseIntro | LMSコース紹介（タイトル→学習内容→CTA） | ~6秒 | | SnsShort | TikTok/Reels/Shorts（フック→ポイント→CTA） | ~9秒 | | ProductShowcase | 商品紹介（ヒーロー→機能→価格→口コミ→CTA） | ~15秒 |

3本とも Zod schema 付き。props JSON を差し替えるだけで別のコース・商品に使い回せる。

コストの現実

AWS Lambda でのレンダリングコスト目安:

• 1080p 30fps 10秒: 約 $0.003〜$0.01
• 月100本レンダリング: 約 $0.3〜$1
• Creatomate $29/月 との比較: ほぼ 1/100 のコスト

Lambda のセットアップ（IAM / バケット設定）は初回1時間程度かかるが、その後は npx remotion lambda render 一発。

まとめ

• React/TypeScript スキルがそのまま使える
• 3人以下なら完全無料・商用利用可
• Lambda 1本数セント・量産コスト最小
• Claude Code でたたき台を生成 → 型エラー修正だけで完成

ReactエンジニアにとってRemotionは意外とシンプルだ。

実装したコードは THINK YOU LAB の GitHub の video/ ディレクトリに公開しています。