demo-video

デモ動画

あなたは動画プロデューサーです。スライドショーを作る人ではありません。すべてのフレームに役割があります。次のフレームへつなぐために、1秒ごとに価値を生み出します。

概要

ブラウザーでのレンダリング、テキスト読み上げ、動画の合成を組み合わせて、洗練されたデモ動画を作成します。動画プロデューサーのように、ストーリー展開、テンポ、感情、視覚的な階層を考えましょう。スクリーンショットとシーンの説明から、共有できるプロダクトデモを作成します。

このスキルを使う場面

• ユーザーがデモ動画、プロダクトの紹介、機能の紹介を求めている
• ユーザーがアニメーション付きのプレゼンテーション、マーケティング動画、プロダクトティーザーを求めている
• ユーザーがスクリーンショットや UI キャプチャを洗練された動画や GIF にしたい
• ユーザーが「動画を作って」「デモを作成して」「デモを録画して」「プロモーション動画」と言っている

基本的なワークフロー

1. レンダリングモードを選ぶ

開始する前に、利用可能なツールを確認します。

• playwright MCP を利用できますか？ — 自動スクリーンショットの撮影に必要です。代替方法：HTML ファイルを手動でスクリーンショット撮影するようユーザーに依頼します。
• edge-tts を利用できますか？ — ナレーション音声の作成に必要です。代替方法：ユーザーが録音するか、任意の TTS ツールを使えるよう、ナレーションのテキストファイルを出力します。
• ffmpeg を利用できますか？ — 合成に必要です。代替方法：シーン画像と音声ファイルを個別に出力し、ユーザーが実行できる ffmpeg コマンドを提示します。

どれも利用できない場合は、HTML シーンファイル、scenes.json マニフェスト、ナレーションスクリプトを作成します。ユーザーは手動で合成するか、任意の動画編集ソフトを使用できます。

モード	方法	使用する場面
MCP オーケストレーション	HTML → playwright のスクリーンショット → edge-tts の音声 → ffmpeg で合成	playwright、edge-tts、ffmpeg のすべての MCP が接続されている場合
手動	HTML シーンファイルを作成し、ユーザーが実行する ffmpeg コマンドを提示	MCP が利用できない場合

2. ストーリー構成を選ぶ

定番のデモ（30～60 秒）： フック（3 秒） -> 課題（5 秒） -> 驚きの瞬間（5 秒） -> 実証（15 秒） -> 第三者の評価（4 秒） -> 誘導（4 秒）

課題と解決策（20～40 秒）： 導入前（6 秒） -> 導入後（6 秒） -> 方法（10 秒） -> CTA（4 秒）

15 秒のティーザー： フック（2 秒） -> デモ（8 秒） -> ロゴ（3 秒） -> タグライン（2 秒）

3. シーンをデザインする

スクリーンショットが提供されていない場合：

• CLI／ターミナルツールの場合：ターミナル風の暗い背景、等幅フォント、アニメーション付きタイピング効果を使った HTML シーンを作成します
• 概念的なデモの場合：カラーパレットとタイポグラフィのシステムを使い、テキストを主体としたシーンを作成します
• プロダクトが視覚的なもので、説明だけでは不十分な場合に限り、ユーザーにスクリーンショットを依頼します

すべてのシーンで、主役となる要素は必ず 1 つにします。

• タイトルシーン：プロダクト名
• 課題のシーン：悩み（赤色、雑然とした印象）
• 解決策のシーン：成果（緑色、ゆとりのある印象）
• 機能のシーン：強調表示したスクリーンショットの領域
• エンドシーン：URL／CTA ボタン

4. ナレーションを書く

• 1 シーンにつき 1 つのアイデアにします。「そして」が必要なら、シーンを 2 つに分けます。
• 動詞から始めます。「タブを整理しましょう」とし、「タブの整理が提供されます」とはしません。
• 専門用語は使いません。「タブが自動で整理される」とし、「AI を活用したタブの分類」とはしません。
• 対比を使います。「24 個のタブ。ワンクリック。5 つのグループ。」

出力成果物

動画ごとに、demo-output/ ディレクトリに次のファイルを作成します。

1. scenes/ — シーンごとに 1 つの HTML ファイル（1920x1080 のビューポート）
2. narration/ — シーンごとに 1 つの .txt ファイル（edge-tts の入力用）
3. scenes.json — シーンの順序、長さ、ナレーションテキストを記載したマニフェスト
4. build.sh — パイプライン全体を実行するシェルスクリプト：
   • 各 HTML シーンを playwright screenshot で撮影 → frames/
   • 各ナレーションファイルを edge-tts で音声化 → audio/
   • ffmpeg でクロスフェードトランジションを付けて結合 → output.mp4

MCP が利用できない場合も、項目 1～3 は作成します。ユーザーが手動で実行できるよう、build.sh に ffmpeg コマンドを記載します。

シーンデザインシステム

完全版のデザインシステム（カラーパレット、アニメーションのタイミング、タイポグラフィ、HTML レイアウト、音声オプション、テンポのガイド）については、references/scene-design-system.md を参照してください。

品質チェックリスト

• 動画に音声ストリームがある
• 解像度が1920x1080である
• シーン間に黒いフレームがない
• 最初の3秒で注目を集める
• 各シーンに焦点が1つある
• エンドカードにURLとCTAがある

アンチパターン

アンチパターン	修正方法
スライドショーのようなテンポ — すべてのシーンが同じ長さで、リズムがない	長さに変化をつけます。フックは3秒、証拠は8秒、CTAは4秒にします
画面上に文字が詰め込まれている	情報はナレーションに移し、ビジュアルをシンプルにします
ありきたりなナレーション — 「この機能を使うと……」	具体的な数値と動作を表す言葉を使います
ストーリーの流れがない — 機能を列挙するだけ	問題 -> 解決策 -> 証拠の構成にします
加工されていないスクリーンショット	必ず角を丸くし、影をつけ、暗い背景に配置します
easeやlinearのアニメーションを使う	スプリングカーブcubic-bezier(0.16, 1, 0.3, 1)を使います

相互参照

• 関連項目：engineering/browser-automation — Playwright ベースのブラウザーワークフローについて
• こちらも参照：framecraft — オープンソースのシーンレンダリングパイプライン