web-video-presentation：記事を録画可能な Web 動画にする Agent Skill

Fri, 15 May 2026 09:02:15 +0800

web-video-presentation は ConardLi/garden-skills に含まれる agent skill だ。目的は明確で、記事やナレーション原稿を、録画して動画にできる Web プレゼンへ変換することだ。

プロジェクト：https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation

これは普通のスライドテンプレートでも React コンポーネント集でもない。AI agent 向けの動画プレゼン制作 workflow であり、内容を script にし、outline に分け、theme を選び、Vite + React + TypeScript で 16:9 のクリック駆動 Web 画面を作る。

スライドではなく動画制作面

README では、生成物を slide deck ではなく “video production surface” と呼んでいる。

各クリックはナレーションのひと区切りを進める。各 step は 1920×1080 の舞台を持ち、画面は語りに合わせて変わる。進捗 UI は通常隠れ、録画画面を邪魔しない。

ブログ記事の動画化、ナレーション稿のビジュアル化、製品 demo、チュートリアル、keynote 風の発表に向く。

価値は動画編集ソフトを置き換えることではなく、ブラウザを制御可能で反復可能な動画キャンバスにすることだ。

設計原則

固定 16:9 ステージを使い、1920×1080 の座標系で設計して viewport に合わせて縮小する。これにより録画時のレイアウトずれを防ぐ。

グローバル step cursor により、クリックやキーボードで (chapter, step) を進め、ローカルに進捗を保存する。

ひとつの step はひとつの考えだけを扱う。bullet を積むのではなく、各 beat が独立した画面になるべきだ。

構造は script のリズムで決まる。script がテンポを決め、outline が章と step を決め、画面が物語に従う。

各 scene には動く視覚的アンカーが必要だ。静的テキストだけなら、まだ動画言語になっていない。

theme は色替えではなく、タイポグラフィ、色、カード、背景、区切り、装飾、雰囲気を semantic token で制御する。

四段階の workflow

第一段階は内容作成。記事が渡されたら script.md に書き換え、outline.md を作る。すでにナレーション稿があれば、それを script.md に保存して outline を作る。

第二段階は Web 開発。Vite / React / TypeScript プロジェクトを作り、章ごとに画面を実装する。第 1 章は必ずメインスレッドで完成させ、ユーザー確認を受ける。これが後続章のスタイル基準になる。

第三段階は任意の音声合成。各章の narrations.ts からナレーション定義を抽出し、音声合成へ渡せる。

第四段階は録画と後処理。Web アプリ自体が録画用の舞台になる。

script、outline、theme、素材計画、開発モード、第 1 章の確認、音声合成の有無にはチェックポイントがある。agent が最初から最後まで勝手に進まないためだ。

outline にアニメーションを書かない理由

outline.md はリズムと情報密度を計画するが、具体的なアニメーションは書かない。章分け、step 数、画面内容、素材、推定時間は書けるが、CSS animation、clip-path、filter の実装は書かない。

outline でアニメーションを固定すると、後の実装が機械的になる。動画らしさは、章の内容関係に応じて実装時に設計する方がよい。

narrations.ts を真実のソースにする

各章には narrations.ts があり、step 数と対応するナレーション文を保存する。章の .tsx で使われる最大 step は narrations.length と一致しなければならない。

これにより、script.md、outline.md、章コード、chapters.ts、音声ファイルのずれを防げる。動画制作では、ナレーション、画面、音声、step 数の同期が非常に重要だ。

Theme は単なるスキンではない

内蔵 theme には paper-press、warm-keynote、midnight-press、blueprint、chalk-garden、terminal-green、bauhaus-bold、sunset-zine、newsroom、monochrome-print がある。

これは単なる色違いではなく、印刷、keynote、設計図、端末、newsroom など異なる視覚言語を表す。

agent は計画段階で内容と語調に合う theme を 2〜3 個提案する。カスタム theme も作れる。

開発モード

第 1 章は必ずメインスレッドで作って確認する。その後は、章ごとに確認する Mode A、順番に実装して最後に確認する Mode B、subagent で並列に進める Mode C がある。

Mode C は速いが、章ごとの表情に差が出る可能性がある。theme token が全体の統一感を支える。

向いている人

記事、脚本、製品紹介、チュートリアル、技術解説など、すでに内容がある人に向いている。単に動画テーマを考えるツールではなく、内容を動画化する制作 workflow だ。

まとめ

web-video-presentation の価値は、美しい React ページではなく、記事、ナレーション、outline、theme、章実装、音声、録画を、確認可能な制作フローとしてつなぐ点にある。

直接使わなくても、「1 step 1 idea」「第 1 章をスタイル基準にする」「narrations.ts を真実のソースにする」「outline で動きを固定しない」という考え方は、自分の AI コンテンツ制作に応用できる。

Vite on KnightLiブログ