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をレンダリングします。
公式ドキュメントでも、Reactコンポーネントを動画フレームとして扱い、CLIやNode APIからレンダリングできる点が中核に置かれています。
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]
- 記事を読み、20秒の動画スクリプト（JSON）を抽出する。
socialPostSchemaに適合するかチェックする。- GitHub Actions 上で Remotion を実行し、レンダリングする。
The Takeaway: 1つのソース、多様なアウトプット
これにより、私たちは「動画クリエイター」になる必要がなくなりました。「コードを書くエンジニア」のままで、リッチな動画コンテンツを生み出せるのです。
最終回は、これまでの全シリーズ（Notion自動化、SDD、Skill、Visual）を統合した「マルチモーダル・ブログ戦略」の全体像を語ります。
参考・一次資料
レンダリングパイプラインを自前で組む場合は、Remotion と React の公式ドキュメントで API 契約を確認してください。
- Remotion 公式ドキュメント（remotion.dev） — コンポジション・タイムライン設計の正本
- Remotion: Server-Side Rendering — CI/サーバーでの自動レンダリング手順
- Remotion: renderMedia() API — プログラム的レンダリングの公式 API
- React 公式ドキュメント — コンポーネントモデルの一次情報
References
- マルチモーダル・コンテンツハブの構想
- マルチモーダル・ブログ戦略の全容
- Notion ブログ自動化の教科書（全体像）
- プロンプトからエージェントへ
- SNS投稿のための画像生成デザイン
- Remotion Docs: The fundamentals
- Remotion Docs: Rendering videos
- Zod documentation
FAQ
Q. エンジニアが動画コンテンツに手を出しにくいのはなぜですか？ A. 学習リソースがテキストから動画へシフトしている一方で、Premiere Pro などの動画編集ソフトは習得コストが高く、編集作業も泥臭い手作業の連続になるからです。作る価値は上がっているのに、作る手段の側がエンジニアの流儀と噛み合っていません。
Q. Remotionは動画をどうやって作るのですか？ A. React を使って動画を作成するフレームワークです。div や h1 といった DOM 要素を時間軸に沿って配置し、CSS でアニメーションさせることで mp4 をレンダリングします。React コンポーネントを動画フレームとして扱い、CLI や Node API からレンダリングできる点が中核です。
Q. 自動生成した動画のレイアウト崩れはどう防ぎますか？ A. TypeScript と Zod で入力データのスキーマを定義します。タイトルは 20 文字以内、ポイントは 30 文字以内を 3 つ、といった制約を props スキーマに書いておけば、文字数超過や不正なデータはレンダリング前に弾かれます。編集者の感覚ではなく型定義で整合性を管理する形です。
