/da-demo-video で顧客への価値が伝わる動画をつくる

動画 1 本につきシナリオ 1 ファイル（scenario.mjs）を書き、${CLAUDE_SKILL_DIR}/scripts/demo.mjs で作る。 シナリオは「シーンの並び」で、各シーンはナレーション（say）・テロップ（cap）・全画面カード（card）・画面操作（run）を持つ。 各シーンは操作と音声の両方が終わるまで続く。 切り替えの余白も加わるので、音声の合計秒数だけでは完成尺を保証できない。

リリース共有では、視聴後にセールスやCSが「どんな顧客に、どの場面で、何がよくなると伝えるか」を一言で言える状態を目指す。 既定は110〜120秒。短さのために対応内容を落とさない。関連する複数機能は1本の業務の流れにつなぎ、各変更と価値を説明する。 操作説明を依頼された場合は詳細モードとし、この尺制限を適用しない。共有会向け短編と詳細動画は別ファイルにする。

触ってよいもの: 作業ディレクトリ（scratchpad を推奨）と、ユーザーが操作してよいと言った画面の設定だけ。

実行条件

以下は実際に撮影や音声生成を行う時の条件。構成相談や台本の下書きは、URLやログインがなくても進めてよい。 必要な工程だけを止め、不足している条件を報告する。

読むファイル

手順

Step 1. 材料を集める

リリース共有では、チケットや仕様から次を拾い、撮影前に台本とシーンごとの予定秒数を作業ディレクトリへ書く。

• 冒頭カードの「誰の」（20字以内）、「どの業務」（30字以内）、「どんな価値」（30字以内）。ラベルを除く表示本文を数える
• これまでの具体的な困りごとと、今回変わる仕事の進め方
• 対応内容の一覧と、各項目の価値・見せ方。取りこぼしを確認する
• セールスやCSが顧客に伝える一言、提供条件、詳細の参照先

「誰の」は動画の視聴者ではなく、価値を受ける人。セールスやCS自身が受益者なら、その役割を書いてよい。 既定の流れは 冒頭サマリ → 困りごとと変化 → 関連する対応と実画面 → 提案の一言と詳細への誘導。 詳しい型と依頼文は ${CLAUDE_SKILL_DIR}/reference/release-format.md を読む。

詳細モードでは、対象者、できること、操作手順、注意点を集め、必要な手順を一通り示す。

根拠の扱い

資料や画面で確認できた機能と、その結果として説明できる価値を結び付ける。 削減時間や削減率は出典と測定条件がある時だけ使う。未計測なら「転記が不要になる」など、確認できる作業の変化で表す。 提供時期やプラン、権限の条件が未確認なら台本に未確認と記し、公開前に解消する。推測で埋めない。

音声の選択

音声はローカルのVOICEVOXを使う。tts/all は起動済みエンジンへ接続し、各シーンのWAVを生成する。 既定は四国めたん（ノーマル、スタイルID 2）、話速1.05。voicevox.speaker と voicevox.speedScale で変更できる。 導入と設定は ${CLAUDE_SKILL_DIR}/reference/voicevox.md を読む。短い音声を先に生成し、試聴用ファイルをユーザーに渡す。 動画には話者のクレジットを自動表示する。ナレーションは短く書き、尺を超えたら説明を削る。略語の読みは音声用に整え、画面には正式表記を残す。

Step 2. セットアップ（初回だけ）

node ${CLAUDE_SKILL_DIR}/scripts/demo.mjs setup ${CLAUDE_SKILL_DIR}/reference/example-scenario.mjs

依存（playwright・ffmpeg-static）は ~/.cache/da-demo-video（DA_DEMO_VIDEO_HOME で変えられる）に入れる。スキルのディレクトリには入れない。 リンクで配られるスキルの中身はすべて lint の対象で、依存を置くと検査が落ちる。

VOICEVOXを起動してから、動くかは見本で確かめる（ログイン不要の公開ページ）: 見本を作業ディレクトリへ写して all。

Step 3. ログインしてもらう

node ${CLAUDE_SKILL_DIR}/scripts/demo.mjs login <作業ディレクトリ>/scenario.mjs

ブラウザ窓が開くので、ユーザー本人にログインしてもらう。ready の目印が見えたら <作業ディレクトリ>/auth.json に保存して閉じる。 auth.json はログイン状態そのもの。作業ディレクトリの外へ写さない・コミットしない。 期限が切れたら login をやり直してもらう。

Step 4. 画面の構造を調べる

撮る画面を Playwright で開き、page.locator('body').ariaSnapshot() とスクリーンショットで role と name を拾う。 操作したい部品（ボタン、combobox、ダイアログ）ごとに、確実に 1 つに絞れる locator を決めてから書く。

Step 5. シナリオを書く

example-scenario.mjs を写して直す。run(h) で使える関数:

保存を伴うなら cleanup(page) に撮影で足したものを消す処理を書く。撮影の前後に走り、失敗した時も後始末が走る。 中身で探し直せるように、撮影で入力する値は既存のデータと被らないものにする（例: 出力値に専用の文字列）。

node ${CLAUDE_SKILL_DIR}/scripts/demo.mjs check <作業ディレクトリ>/scenario.mjs   # 形だけ先に検査

Step 6. 作る

node ${CLAUDE_SKILL_DIR}/scripts/demo.mjs all <作業ディレクトリ>/scenario.mjs

all は tts（ナレーション）→ record（撮影）→ compose（書き出し）を順に走らせる。個別にも打てる。ナレーションを変えた時だけ tts をやり直せばよい。

Step 7. 完成尺と画面を確かめる

書き出したmp4の実時間を利用可能なメディア情報ツールで測る。120秒を超えたら待機・重複説明・長い入力を編集する。対応内容を削らず、各変更と価値が残るか確認する。測れない場合は尺が未確認と報告し、完了扱いにしない。 音声生成後にも各音声の実時間を確認し、操作と切り替えの余白を残して撮影する。

<作業ディレクトリ>/stills/sheet*.jpg（各シーンの 35% と 85% の地点）を Read する。見るのは次の 4 点。

• 枠が狙った部品を囲んでいるか（古い位置に残っていないか）
• テロップが画面の内容と合っているか
• 映してはいけないものが映っていないか
• 撮影で変えた設定が、cleanup で元に戻ったか（画面で確かめる）

気になるシーンは、timeline.json のシーン開始時刻から秒を足した位置を ffmpeg で切り出して見る。 音声は聞いて確かめられない。 同期は機械的に合わせているだけなので、報告でそう書き、ユーザーに再生して確かめてもらう。

撮影で踏んだ落とし穴

• 初回表示が 30 秒を超える環境がある。 ready の待ちは 120 秒にしてある
• 撮る側のページの CSS が演出に効く（div { ... } でカードが半透明になった）。演出は Shadow DOM に閉じ込めてある
• CSP で inline script が弾かれる。 コンテキストを bypassCSP: true で開いている
• ページが動くクリックの後、枠が古い位置に残る。 clickAndClear を使う
• スクロールの直後に枠を描くと、位置がずれる。 scrollTo がスクロールの停止を待つのはこのため
• ズーム中はドロップダウンの位置がずれる。 ズームは見せるだけの場面に使い、操作の前に unzoom
• 並べ替えた要素は、locator の index が変わる。 入力した値など、中身で探し直す
• ログイン状態を持続的な場所へ写す操作は、権限の判定で止められる。 auth.json は作業ディレクトリにだけ置き、必要ならもう一度 login してもらう

出力

• <作業ディレクトリ>/<output>（既定 out.mp4）: 1920×1200、30fps、H.264 と AAC。長さは撮影の長さ（最後のカードは音声の後も映る）
• <作業ディレクトリ>/stills/sheet*.jpg: 確認用の静止画一覧
• <作業ディレクトリ>/audio/voicevox.json: 使用した話者、スタイル、話速、クレジット

ユーザーには mp4 をファイルとして渡し、完成尺、冒頭の3要素、顧客へ伝える一言、詳細の参照先（ある場合）、構成（シーンの並び）、撮影で変えて戻したもの、隠したもの、音声が未確認であることを報告する。

完了条件

• リリース共有は冒頭の3要素が文字数内で、対応内容の説明漏れがなく、完成mp4は2分前後（目安110〜120秒）
• 根拠のある価値と、顧客へ伝える一言があり、提供条件の未確認事項が解消している
• 静止画一覧を全シーン分見て、上の 4 点に問題がない
• 撮影で保存した変更が元に戻っている（cleanup のログと画面の両方）
• auth.json が作業ディレクトリの外に出ていない
• VOICEVOXのクレジットが動画に表示され、報告に「音声は未確認」と書いた

次に

直す点を聞き、シナリオを直して record → compose（ナレーションを変えたなら tts も）。