Reactで動画を書く：Remotionによる「記事からショート動画」への自動変換パイプライン

TL;DR

• 動画制作を「編集」から「レンダリング」へ。React で動画をコード化
• TypeScript / Zod によるバリデーションでレイアウト崩れを未然に防ぐ
• 記事から動画への「ワンソース・マルチユース」パイプラインの構築

The Pain: 動かないコンテンツは届かない

Z世代以降の学習リソースは「テキスト」から「動画（YouTube/TikTok）」へシフトしています。しかし、動画編集ソフト（Premiere Pro等）の習得コストは高く、編集は泥臭い手作業の連続です。

The Solution: Video as Code (Remotion)

Remotion は、Reactを使って動画を作成できるフレームワークです。 DOM要素（<div>, <h1>）を時間軸に沿って配置し、CSSでアニメーションさせることで、mp4をレンダリングします。

The Implementation: 型安全な動画生成

動画作りで一番怖いのは「文字数が多すぎてはみ出る」「画像サイズが合わない」といったレイアウト崩れです。 ここで、TypeScriptとZodが生きます。

スキル定義 (remotion skill)

.agents/skills/remotion/SKILL.md では、動画の構成をコンポーネントとして定義しています。

// props schema: 動画の入力データを定義
export const socialPostSchema = z.object({
  title: z.string().max(20), // タイトルは20文字以内！
  points: z.array(z.string().max(30)).length(3), // ポイントは3つまで！
  cta: z.string(),
});

export const SocialPost: React.FC<z.infer<typeof socialPostSchema>> = ({
  title,
  points,
}) => {
  // ... React Component (HTML/CSS) ...
};

制作手法の比較

| 項目 | 従来の動画編集 (GUI) | Remotion (Video as Code) | | :--------------- | :------------------- | :------------------------------- | | 修正の容易さ | 素材の再配置が必要 | コード（CSS/Props）の変更のみ | | 自動化 | 不可能（手作業） | API / CLI 経由で完全自動化が可能 | | 整合性 | 編集者の感覚に依存 | 型定義（TypeScript）で厳格に管理 |

The Worklow

graph LR
    A[Article MD] --> B[LLM Agent]
    B -->|Extract JSON| C[Remotion Props]
    C --> D[React Component]
    D --> E[MP4 Render]

1. 記事を読み、20秒の動画スクリプト（JSON）を抽出する。
2. socialPostSchema に適合するかチェックする。
3. GitHub Actions 上で Remotion を実行し、レンダリングする。

The Takeaway: 1つのソース、多様なアウトプット

これにより、私たちは「動画クリエイター」になる必要がなくなりました。「コードを書くエンジニア」のままで、リッチな動画コンテンツを生み出せるのです。

最終回は、これまでの全シリーズ（Notion自動化、SDD、Skill、Visual）を統合した「マルチモーダル・ブログ戦略」の全体像を語ります。

References

• マルチモーダル・コンテンツハブの構想
• マルチモーダル・ブログ戦略の全容
• Notion ブログ自動化の教科書（全体像）
• プロンプトからエージェントエンジニアリングへ
• SNS投稿のための画像生成デザイン