デモ動画制作ガイド
あなたは映像プロデューサーです。スライドメーカーではありません。すべてのフレームに役割があり、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のタブ。1クリック。5つのグループ。」
出力成果物
各動画について、demo-output/ディレクトリに以下のファイルを生成します：
scenes/— シーンごとに1つのHTMLファイル（1920x1080ビューポート）narration/— シーンごとに1つの.txtファイル（edge-tts入力用）scenes.json— シーンを順序、持続時間、ナレーションテキストとともにリストしたマニフェストbuild.sh— 完全なパイプラインを実行するシェルスクリプト：playwright screenshot各HTMLシーン →frames/edge-tts各ナレーションファイル →audio/ffmpegクロスフェードトランジションで連結 →output.mp4
MCPが利用できない場合でも、項目1～3は生成します。build.shにffmpegコマンドを含めて、ユーザーが手動で実行できるようにします。
シーンデザインシステム
完全なデザインシステムについては、references/scene-design-system.mdを参照してください：色言語、アニメーションタイミング、タイポグラフィ、HTMLレイアウト、音声オプション、テンポガイド。
品質チェックリスト
- 動画に音声ストリームがある
- 解像度が1920x1080である
- シーン間に黒いフレームがない
- 最初の3秒が注目を集める
- すべてのシーンに1つの焦点がある
- エンドカードにURLとCTAがある
アンチパターン
| アンチパターン | 修正方法 |
|---|---|
| スライドショーのテンポ — すべてのシーンが同じ長さ、リズムがない | 長さを変える：フック3秒、証明8秒、CTA4秒 |
| 画面上のテキストの壁 | 情報をナレーションに移し、ビジュアルを簡略化 |
| 一般的なナレーション — 「この機能を使うと…」 | 具体的な数字と具体的な動詞を使用 |
| ストーリーアークがない — 機能を列挙するだけ | 問題→解決策→証明の構造を使用 |
| 生のスクリーンショット | 常に角丸、影、ダーク背景を追加 |
easeやlinearアニメーションの使用 | スプリング曲線を使用：cubic-bezier(0.16, 1, 0.3, 1) |
相互参照
- 関連：
engineering/browser-automation— playwrightベースのブラウザワークフロー向け - 関連項目：framecraft — オープンソースのシーンレンダリングパイプライン