remotion-video

Remotion Video

Remotion を使用して、プロダクショングレードの動画を作成します。Remotion は、動画をコードとして扱う React フレームワークです。 すべてのフレームは React コンポーネントです。アニメーションには、スプリング物理とフレームベースの補間を使用します。

参照ファイル

ファイル	用途
references/rules/fundamentals.md	useCurrentFrame、useVideoConfig、interpolate、spring、コアフック
references/rules/animations.md	イージング、spring の設定、interpolateColors、タイミングパターン
references/rules/compositions.md	Composition、registerRoot、Folder、calculateMetadata
references/rules/media.md	Img、Video、OffthreadVideo、Audio、staticFile、非同期読み込み
references/rules/text-and-fonts.md	Google Fonts、ローカルフォント、テキスト計測、タイポグラフィ
references/rules/tailwind.md	TailwindCSS の統合、Remotion でのユーティリティファーストなスタイル設定
references/rules/audio.md	Audio コンポーネント、音量カーブ、トリミング、フレーム同期オーディオ
references/rules/subtitles.md	キャプションシステム、SRT/VTT の解析、単語単位のタイミング
references/rules/three-d.md	@remotion/three、ThreeCanvas、React Three Fiber の統合
references/rules/charts.md	棒グラフ、円グラフ、折れ線グラフのアニメーションパターン
references/rules/rendering.md	CLI レンダリング、renderMedia API、品質プリセット
references/rules/data-driven.md	データセットのレンダリング、一括生成、パラメトリックなコンポジション
references/templates/explainer.tsx	パラメトリックな技術解説テンプレート
references/templates/product-demo.tsx	製品紹介テンプレート
references/templates/data-viz.tsx	アニメーション付きグラフのコンポジションテンプレート
scripts/scaffold_project.sh	TailwindCSS を使用した新しい Remotion プロジェクトのセットアップ
scripts/render.sh	品質プリセットと形式オプションを備えたレンダリングラッパー

Remotion を選ぶ理由

Remotion は動画を React アプリケーションとして扱います。各フレームは時間の純粋関数です。フレーム N と総フレーム数 F が与えられると、コンポーネントは決定論的にレンダリングされます。つまり、次のことができます。

• コンポーネントの合成：シーンをネストし、コンポーネントを再利用し、CSS を適用できます。
• スプリング物理：spring() を使えば、三次ベジェ曲線を手作業で調整せずに自然な動きを実現できます。
• アセットパイプライン：React でのインポートと同じ方法で、画像、オーディオ、動画をインポートできます。
• 反復的なワークフロー：コードを編集 → ホットリロードでプレビュー → 最終版をレンダリングします。.tsx ファイル自体が編集可能な中間成果物です。
• 大規模なデータ駆動：同じコンポジションに異なる props を渡すことで、パーソナライズされた動画を何千本もレンダリングできます。

ワークフロー

Scaffold → Compose → Preview → Iterate → Render

1. セットアップ：プロジェクトごとに一度、プロジェクトを作成します。
2. 解釈：ユーザーのコンセプトを理解し、適切なテンプレートとルールファイルを選びます。
3. 構成：各シーンの React コンポーネントを作成します。
4. プレビュー：Remotion Studio でプレビューします（npm run dev）。
5. 反復：ユーザーからのフィードバックに基づいて修正します。
6. レンダリング：scripts/render.sh で最終動画をレンダリングします。

ステップ 0：依存関係を確認する

Node.js 18 以降が必要です。セットアップの前に確認してください。

node --version   # Must be >= 18.0.0
npm --version

Node.js が利用できない場合はユーザーに伝えてください。Remotion は Node.js なしでは実行できません。

ステップ 1：プロジェクトを作成する

scripts/scaffold_project.sh を実行して、新しい Remotion プロジェクトを作成します。このスクリプトは冪等性があり、既存のプロジェクトを検出すると、初期化をスキップします。

bash scripts/scaffold_project.sh my-video-project
cd my-video-project
npm run dev   # Opens Remotion Studio at localhost:3000

ステップ 2：コンセプトを解釈する

最適なアプローチを判断します。詳細なパターンについては、該当するルールファイルを確認してください。

コンテンツの種類	ルールファイル	テンプレート
解説／教育コンテンツ	fundamentals.md	explainer.tsx
製品デモ／マーケティング	animations.md	product-demo.tsx
データの可視化／アニメーション付きグラフ	charts.md	data-viz.tsx
ナレーション／音声解説付き動画	audio.md + subtitles.md	explainer.tsx
ソーシャルメディア向けクリップ（短いループ動画）	animations.md	product-demo.tsx
3D シーン／抽象的なモーショングラフィックス	three-d.md	（カスタム）
パーソナライズ／一括生成	data-driven.md	任意
メディアを埋め込んだ動画	media.md	任意

ステップ 3：コンポーネントを作成する

Remotion コンポーネントを記述する際の基本ルール：

• 動画ごとにコンポジションは 1 つ：registerRoot は 1 つのルートコンポジションを指します。
• タイミングにはシーケンスを使用する：<Sequence from={30} durationInFrames={60}> を使用して、特定のフレームにシーンを配置します。
• レイヤー化には AbsoluteFill を使用する：全画面要素のベースには <AbsoluteFill> を使用します。
• フレームベースの計算のみを使用する：すべてのアニメーション状態は useCurrentFrame() から導出します。Date.now() や setTimeout は使用しないでください。
• イージングよりスプリングを優先する：自然な動きには spring({ frame, fps }) を優先してください。
• 変数はすべて Props にする：ハードコードされた値は Props にします。これにより、データ駆動型のレンダリングが可能になります。

コンポーネント構造のパターン

import {
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
  AbsoluteFill,
  Sequence,
} from "remotion";

type MySceneProps = {
  title: string;
  accentColor: string;
};

export const MyScene: React.FC<MySceneProps> = ({ title, accentColor }) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      <div
        style={{ opacity, transform: `scale(${scale})`, color: accentColor }}
      >
        {title}
      </div>
    </AbsoluteFill>
  );
};

ステップ 4：プレビューする

Remotion Studio ではホットリロード付きのプレビューを利用できます。次のコマンドで起動します。

npm run dev

Studio は http://localhost:3000 で開きます。タイムラインのスクラバーを使うと、任意のフレームを確認できます。

反復作業中にフレーム単位で正確なスクリーンショットを撮るには、<Still> コンポーネントを使用します。

ステップ 5：反復する

リクエスト	操作
「遅く／速く」	<Sequence> の durationInFrames を調整するか、FPS を変更します
「色を変更」	コンポジションに渡す Props を更新します
「セクションを追加」	from オフセットを増やした新しい <Sequence> ブロックを追加します
「フォントを変更」	@remotion/google-fonts 経由で読み込み、CSS の fontFamily として適用します
「BGM を追加」	ルートコンポジションに <Audio src={staticFile('audio.mp3')} /> を追加します
「ループさせる」	durationInFrames を設定し、最初と最後のフレームの状態が一致するようにデザインします
「字幕を追加」	SRT の解析と単語単位のタイミングについては、subtitles.md を参照してください

ステップ 6：レンダリングする

最終動画をレンダリングするには、scripts/render.sh を使用します。

bash scripts/render.sh --composition MyComposition --quality final --format mp4

品質プリセット

プリセット	解像度	FPS	用途
preview	480p	15	レイアウトの迅速な確認
draft	720p	30	クライアントによるドラフトの確認
final	1080p	30	標準的な納品
4k	2160p	60	プレゼンテーション／シネマ

フォーマットのオプション

フォーマット	用途
mp4	標準的な納品（H.264）
webm	Web に最適化
gif	ドキュメントやソーシャルメディアへの埋め込み

エラー処理

エラー	原因	解決方法
node: command not found	Node.js がインストールされていません	nodejs.org から Node.js 18+ をインストールします
Cannot find module 'remotion'	依存関係がインストールされていません	プロジェクトディレクトリで npm install を実行します
Composition not found	Composition ID が正しくありません	registerRoot と <Composition id= が一致しているか確認します
delayRender timed out	非同期アセットの読み込みに 30 秒以上かかっています	delayRender('reason', { timeoutInMilliseconds: 60000 }) でタイムアウトを延長します
OffthreadVideo failed	動画コーデックがサポートされていません	先に ffmpeg で H.264 MP4 に変換します
ENOMEM during render	大規模な Composition でメモリ不足です	--concurrency フラグを小さくするか、解像度を下げます
Port 3000 already in use	別の開発サーバーが実行中です	既存のプロセスを終了するか、--port 3001 を設定します
Spring animation goes past 1.0	{ extrapolateRight: 'clamp' } がありません	interpolate の呼び出しに外挿のクランプを追加します
Fonts not loading in render	レンダリング開始前にフォントが読み込まれていません	フォントフェイスの読み込みに @remotion/google-fonts または delayRender を使います

制限事項

• Node.js が必要です — Remotion は Node.js フレームワークです。Python のみの環境やヘッドレスコンテナー環境では実行できません。
• Chromium への依存 — Remotion は Chromium を使ってレンダリングします。npx remotion render コマンドが自動的にダウンロードしますが、約 300MB のディスク容量が必要です。
• v1 ではサーバーサイドの Lambda は利用できません — @remotion/lambda によるクラウドレンダリングは、今後のスキルバージョンまで延期されています。ローカルレンダリングのみ利用できます。
• 大規模なレンダリングには時間がかかります — 30fps の 60 秒の 1080p 動画では、Chromium で 1800 フレームをレンダリングします。一般的なノート PC では 10～30 分かかることを想定してください。
• GIF のサイズ — フル解像度の GIF は大きくなります。埋め込み可能な GIF は 480p、10 秒未満にしてください。
• プレビューでのオーディオ — Remotion Studio はプレビューでのオーディオ再生をサポートしています。レンダリングされたオーディオには ffmpeg が必要です。

設計原則

• フレームベースで考える：すべての視覚状態は現在のフレーム番号の関数です。タイマーやインターバルは使いません。
• コンポジションを優先する：動画を論理的な <Sequence> ブロックに分割します。各シーンは独立したコンポーネントにします。
• イージングよりスプリング：spring() は物理的に正確な動きを実現します。スプリングが適さない場合に限り、イージング付きの interpolate を使います。
• コンテンツには Props を使う：コンポーネント内に文字列、色、データを直接記述しないでください。再利用できるよう、Props で渡します。
• すべてに型を付ける：すべてのコンポジション Props には、z.infer<typeof schema>（Zod）または明示的なインターフェースで TypeScript の型を適用します。

相互参照

明示的な React／Remotion の指定がない数学アニメーションやアルゴリズムの可視化には、animate（Manim／Python）を使います。Manim は Node.js ではなく、独自の Python、Cairo／Pango、FFmpeg のセットアップを使います。Node.js がない場合でも、React を明示的に指定した依頼を別のエンジンに切り替える理由にはなりません。前提条件が不足していることを伝えてください。

ユーザーが明示的にプレーンな HTML と CSS で作成する動画、または Hyperframes でレンダリングする動画を希望する場合は、代わりに html-video を使います。これは React プロジェクトではありません。明示的なエンジン指定は、汎用的なブランド上またはマーケティング上の希望より優先されます。ユーザーが React または Remotion を指定した場合は、React コンポジション内に HTML または CSS のコンテンツを埋め込む場合も Remotion を使います。動画を出力しない通常の Web ページは、どちらのスキルの対象でもありません。