Remotion マニュアル

概要

Remotion は React ベースのプログラマティック動画制作フレームワーク。コードで動画を構築し、ピクセル単位・フレーム単位で精密に制御できる。テロップ、アニメーション、データ駆動動画に最適。

項目	内容
開発元	Remotion (オープンソース)
実行形態	CLI / ローカル (Node.js)
料金	無料（OSS・一部企業向け有料ライセンス）
言語	TypeScript / React

---

できること

✅ 得意なこと

• コードベースの動画制作 — React コンポーネントで動画を構築
• 精密タイミング制御 — フレーム単位でアニメーションを制御
• テロップ・タイトル — テキストオーバーレイ、カスタムフォント
• データ駆動動画 — JSON/API データを動画に反映（動的レポート等）
• テンプレート再利用 — 一度作れば異なるデータで量産可能
• Spring アニメーション — 物理ベースの自然なモーション
• 補間 (interpolate) — キーフレーム間の滑らかな値変化
• 画像・音声・動画素材の合成 — 生成AIで作った素材を組み合わせ
• MP4 / WebM / GIF 出力 — 複数フォーマット対応
• 静止画出力 — PNG/JPEG スチル画像も生成可能

⚠️ Veo 3.1 との使い分け

条件	Remotion	Veo 3.1
テロップ・テキスト入り	✅ 最適	❌ 不向き
実写風映像	❌ 不可	✅ 最適
精密なタイミング制御	✅ フレーム単位	❌ 不可
量産・テンプレート化	✅ 得意	❌ 毎回生成
素材なしでゼロから	❌ デザインスキル要	✅ プロンプトのみ

---

プロジェクト構成

PJ-MultiModal-260226/remotion/
├── package.json       ← scripts: studio / render
├── tsconfig.json
├── node_modules/
└── src/
    ├── index.ts       ← エントリポイント (registerRoot)
    ├── Root.tsx        ← Composition 定義
    └── Composition.tsx ← 実際の動画コンテンツ

---

実行コマンド

cd "C:\ai_work\quartz-site\obsidian valut\06_Projects\01_Active\PJ-MultiModal-260226\remotion"
 
# プレビュー（ブラウザで開く）
npm run studio
 
# MP4にレンダリング
npm run render
 
# カスタムレンダリング
npx remotion render src/index.ts MyComp --output ../outputs/custom.mp4
 
# 特定フレーム範囲のみ
npx remotion render src/index.ts MyComp --frames=0-30
 
# 解像度変更
npx remotion render src/index.ts MyComp --width=3840 --height=2160
 
# 静止画出力
npx remotion still src/index.ts MyComp --frame=75 --output ../outputs/thumbnail.png

---

基本的なコードの書き方

Composition 定義（Root.tsx）

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
 
export const RemotionRoot = () => (
  <Composition
    id="MyVideo"
    component={MyVideo}
    durationInFrames={300}  // 10秒 (30fps × 10)
    fps={30}
    width={1920}
    height={1080}
  />
);

アニメーション基本

import { useCurrentFrame, interpolate, spring } from "remotion";
 
// フレーム番号取得
const frame = useCurrentFrame();
 
// 線形補間: フレーム0→30 で透明→不透明
const opacity = interpolate(frame, [0, 30], [0, 1]);
 
// スプリングアニメーション: 自然な弾む動き
const scale = spring({ frame, fps: 30, config: { damping: 12 } });

---

関連リンク

• 公式ドキュメント
• YouTube チュートリアル
• マルチモーダル運用ルール
• プロジェクト: PJ-MultiModal-260226/remotion/