Remotion完全ガイド：ReactでプログラマティックにYouTube動画を生成する

Remotionは、Reactを使って動画を「コード」として記述できる革命的なフレームワークです。デザイナーがAfterEffectsで動画を作るように、エンジニアはReactコンポーネントで動画を作ります。

このガイドでは、Remotionの基本概念から実際の動画生成まで、ゼロから解説します。

Remotionとは

Remotionは2021年にJonny Bursteinが公開したオープンソースのフレームワークです。Reactエコシステムの上に構築されており、TypeScript・CSS・SVGなどWeb技術をそのまま動画制作に活用できます。

Remotionの最大の特徴は「動画がコードである」という点です。これにより：

• データを差し込むだけで異なる動画を大量生成できる
• Gitでバージョン管理できる
• APIとして動画生成を呼び出せる
• AIとの連携が容易（ClaudeCodeでコード自動生成）

RemotionとAfterEffectsの違い

特徴	Remotion	AfterEffects
操作方法	コード（React/TypeScript）	GUIタイムライン
量産性	◎ データ差し込みで自動生成	△ テンプレート限定
学習コスト	要Reactの知識	比較的直感的
APIデプロイ	◎ Vercel/AWS Lambda対応	✗
表現力	Web技術の範囲内	◎ プロフェッショナル品質
AI連携	◎ ClaudeCodeで自動コーディング	△ スクリプト経由

環境構築

必要な環境

• Node.js 18以上
• npm または yarn または bun
• （オプション）FFmpeg（ローカルレンダリング時）

インストール

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

これだけでRemotionのプレビューサーバーが起動します。ブラウザで localhost:3000 にアクセスすると、リアルタイムで動画をプレビューできます。

基本的なコンポーネント構造

Remotionの動画は、Reactコンポーネントとして記述します。

import { useCurrentFrame, useVideoConfig, AbsoluteFill } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  const opacity = frame / 30; // 最初の1秒でフェードイン

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2e' }}>
      <div style={{
        opacity,
        color: 'white',
        fontSize: 72,
        fontWeight: 'bold',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
      }}>
        Hello, Remotion!
      </div>
    </AbsoluteFill>
  );
};

主要なフック

• useCurrentFrame()：現在のフレーム番号（0始まり）
• useVideoConfig()：fps・幅・高さ・総フレーム数
• interpolate()：フレーム番号に基づいて値を補間
• spring()：スプリングアニメーション

実践：シンプルなYouTubeオープニングを作る

チャンネル名が中央でフェードインし、ロゴがスライドインするオープニング動画を作ります。

import { useCurrentFrame, interpolate, spring, AbsoluteFill } from 'remotion';

export const YoutubeOpening = ({ channelName }: { channelName: string }) => {
  const frame = useCurrentFrame();

  // タイトルのフェードイン
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // ロゴのスライドイン
  const translateY = spring({
    frame: frame - 15,
    fps: 30,
    config: { damping: 80 },
    from: 100,
    to: 0,
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#ff0000' }}>
      <div style={{ opacity, transform: `translateY(${translateY}px)` }}>
        <h1>{channelName}</h1>
      </div>
    </AbsoluteFill>
  );
};

このコンポーネントは channelName を受け取るので、データを変えるだけで100チャンネル分のオープニングを量産できます。

動画のレンダリング

# ローカルでレンダリング（MP4出力）
npx remotion render MyVideo --output=out/my-video.mp4

# 全シーケンスをまとめてレンダリング
npx remotion render --all

ClaudeCodeとの組み合わせ

RemotionとClaudeCodeを組み合わせることで、「動画の企画→コード生成→レンダリング」のサイクルが劇的に加速します。

「YouTubeチャンネルのオープニングを作って。カラーはred、アニメーションはスライドイン」とClaudeCodeに伝えるだけで、Remotionコンポーネントのコードを生成してくれます。

詳細なワークフローはRemotion × ClaudeCode：AIが動画コードを自動生成する究極ワークフローで解説しています。

Vercelへのデプロイ（動画生成API化）

Remotionはサーバーサイドでのレンダリングにも対応しています。Vercelにデプロイすることで、HTTPリクエストで動画を生成するAPIが完成します。

// pages/api/render.ts
import { renderMediaOnLambda } from '@remotion/lambda';

export default async function handler(req, res) {
  const { channelName } = req.body;
  const result = await renderMediaOnLambda({
    composition: 'YoutubeOpening',
    inputProps: { channelName },
    codec: 'h264',
  });
  res.json({ url: result.outputFile });
}

AfterEffects×Lottieとの使い分け

Remotionは強力ですが、AfterEffectsの表現力には及ばない部分もあります。Turkey-tipsでは両者を使い分けています。

• Remotion：データドリブンな動画・量産型動画・APIとして提供する動画
• AfterEffects×Lottie：高品質なブランドアニメーション・Webに組み込むアニメーション

AfterEffects×Lottieの詳細はAfterEffects×Lottie×Web完全ガイドをご覧ください。

まとめ

Remotionは、エンジニアリングのスキルを動画制作に応用できる強力なツールです。「動画をコードで書く」という発想を身につけることで、データ連動型動画・量産型コンテンツ・動画APIの開発が現実的になります。

AIとの組み合わせにより、その可能性はさらに広がります。まずは公式テンプレートから試してみてください。

---

RemotionやReact動画の開発支援・受託はこちらへお問い合わせください。