programmatic-video

プログラムによる動画制作

Agent Skills™ の一部です。googleadsagent.ai™ 提供

説明

プログラムによる動画制作では、Remotion を使って React ベースの動画レンダリングを行います。各フレームは React コンポーネントであり、すべてのアニメーションをコードで表現します。エージェントはシーケンス、トランジション、スプリングアニメーション、データ駆動型コンテンツを使って動画コンポジションを構築し、動画編集ソフトウェアを使わずにヘッドレス Chromium でレンダリングした MP4／WebM を出力します。

従来の動画編集は手作業で、再現性がなく、テンプレート化もできません。プログラムによる動画制作では、動画をコードとして扱います。コンポジションは git でバージョン管理され、一括レンダリング用にパラメーター化され、スナップショットアサーションでテストされます。入力データを変更するだけで、単一のテンプレートから何千ものパーソナライズされた動画を生成できます。製品デモ、ソーシャルメディア用クリップ、オンボーディングシーケンス、マーケティング動画などを、受け手ごとにカスタマイズできます。

Remotion のアーキテクチャでは、React のコンポーネントモデルを動画に対応させています。各コンポーネントは frame 番号と合計の durationInFrames を受け取り、これらを使ってアニメーション、トランジション、タイミングを計算します。エージェントは再利用可能なコンポーネントからシーンを組み立て、<Sequence> ラッパーでタイミングを調整し、スプリングベースの物理アニメーションを適用して自然な動きを実現します。

使用する場面

• 動画編集ソフトウェアを使わず、コードから動画を作成する場合
• パーソナライズされた動画コンテンツやデータ駆動型の動画コンテンツを大規模に生成する場合
• アニメーション付き解説動画、製品デモ、ソーシャルメディア用クリップを作成する場合
• CI/CD パイプラインで動画制作を自動化する場合
• ユーザーが「programmatic video」、「Remotion」、「video from code」をリクエストした場合
• 数百のバリエーションで一貫したブランディングの動画アセットを制作する場合

仕組み

graph TD
    A[Video Specification] --> B[Define Composition: FPS + Duration]
    B --> C[Build Scene Components]
    C --> D[Arrange with Sequences]
    D --> E[Add Spring Animations]
    E --> F[Inject Dynamic Data]
    F --> G[Preview in Browser]
    G --> H{Approved?}
    H -->|No| C
    H -->|Yes| I[Render: Headless Chromium]
    I --> J[Encode: MP4 / WebM]
    J --> K[Output Video File]

各シーンは、現在のフレーム番号を受け取る React コンポーネントです。コンポジションでは、キャンバスサイズ、フレームレート、合計の長さを定義します。シーケンスによって、シーンを特定の時間オフセットに配置します。レンダリングでは各フレームをスクリーンショットとしてキャプチャし、動画にエンコードします。

実装

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

const TextReveal: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const translateY = spring({ frame, fps, config: { damping: 12, stiffness: 200 } });
  const y = interpolate(translateY, [0, 1], [40, 0]);

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
      <h1 style={{
        fontSize: 72,
        fontWeight: "bold",
        color: "white",
        opacity,
        transform: `translateY(${y}px)`,
      }}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

const DataDrivenSlide: React.FC<{ metric: string; value: number }> = ({ metric, value }) => {
  const frame = useCurrentFrame();
  const displayValue = Math.round(interpolate(frame, [0, 45], [0, value], { extrapolateRight: "clamp" }));

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", background: "#0a0a0a" }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 120, fontWeight: "bold", color: "#3b82f6" }}>
          {displayValue.toLocaleString()}
        </div>
        <div style={{ fontSize: 32, color: "#a1a1aa", marginTop: 16 }}>{metric}</div>
      </div>
    </AbsoluteFill>
  );
};

export const MainComposition: React.FC<{ title: string; metrics: Array<{ name: string; value: number }> }> = ({
  title, metrics
}) => {
  return (
    <AbsoluteFill style={{ background: "#0a0a0a" }}>
      <Sequence durationInFrames={60}>
        <TextReveal text={title} />
      </Sequence>
      {metrics.map((m, i) => (
        <Sequence key={m.name} from={60 + i * 75} durationInFrames={75}>
          <DataDrivenSlide metric={m.name} value={m.value} />
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

export const RemotionRoot: React.FC = () => (
  <Composition
    id="MainVideo"
    component={MainComposition}
    durationInFrames={300}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{
      title: "Q1 Performance",
      metrics: [
        { name: "Page Views", value: 18247 },
        { name: "Conversions", value: 1432 },
        { name: "Revenue", value: 89500 },
      ],
    }}
  />
);

# Preview in browser
npx remotion studio

# Render to MP4
npx remotion render MainVideo output.mp4

# Batch render with different data
npx remotion render MainVideo --props='{"title":"Q2","metrics":[...]}'

ベストプラクティス

• 線形補間ではなく spring() を使い、自然なアニメーションにします
• 値が範囲を超えないよう、すべての interpolate() 呼び出しにクランプを適用します
• 標準コンテンツには 30fps、滑らかな動きには 60fps を使います
• フレームの欠落を防ぐため、レンダリング前にすべてのアセット（画像、フォント）をプリロードします
• フレームに基づく条件分岐ではなく、明示的なタイミングでシーンを整理するために <Sequence> を使います
• プラットフォームとの互換性を確認するため、複数の解像度（1080p、720p、正方形）で動画の出力をテストします

プラットフォーム互換性

プラットフォーム	サポート	備考
Cursor	完全	React + Remotion の開発
VS Code	完全	Remotion 拡張機能を利用可能
Windsurf	完全	React ベースの開発
Claude Code	完全	コンポーネントと設定の生成
Cline	完全	動画パイプラインのセットアップ
aider	部分的	コード生成のみ

関連スキル

• Web アセット生成
• ML モデル統合
• View Transitions
• バッチ処理

キーワード

programmatic-video remotion react-video animation data-driven-video batch-rendering composition spring-animation

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License