web2clip · Webサイトからナレーション付き動画クリップへ
インタラクティブなWebページを、チャプターごとの短いクリップ集 + 1本の全体動画（縦9:16または横16:9）に変換します。AIナレーター（ElevenLabs音声）が案内し、Web上のハイライト効果（枠線、カーソル、スライダー操作、字幕）がナレーションに完全同期。実際のページを録画するため、データは100%正確です。
サブコマンド（特定のフェーズのみ実行する場合）
| コマンド | フェーズ |
|---|---|
/web2clip-setup | 1–2 · 接続確認、ツール、ネットワーク権限、アカウント |
/web2clip-plan | 3 · Webページを読み込み、アイデア、脚本、ダッシュボードを提案 |
/web2clip-voice | 4–5 · 音声を提案、各クリップの音声を生成、ファイルをダウンロード |
/web2clip-record | 4 · 音声に同期した画面録画、各クリップを出力 |
/web2clip-merge | 6 · 全体動画を結合、命名、ファイル受け渡し、保存 |
/web2clip を実行すると、以下の7フェーズすべてを順番に実行します。承認ステップはスキップできません。
黄金ルール（実案件からの教訓）
- 承認後に課金: 脚本は音声生成（クレジット消費）の前に承認を得ること。
- まず1本パイロット版: 音声とエフェクトのスタイルをユーザーが確認してから、残りを一括生成する。
- ナレーターは語り部であり、画面の文字をそのまま読まない: 役名（例：「◯◯さんのアシスタント、Chip」）を設定し、親しみやすい口調で、質問やシチュエーションで始め、次のパートへの誘いで締める。
- まず短いチャプター別クリップ（1～2分）を作り、後で結合する。 最初から長尺の1本を作らない。
- 映像はナレーションに完全同期: 言及された部分がその瞬間に強調される。同期録画ツール（
scripts/w2c/record.py、内部マーカー使用）を使い、手動推定はしない。 - 毎回の質問は最大1～3問、選択肢を提示する。制限がある場合は正直に伝える。
7フェーズの詳細
1. 接続確認 → /web2clip-setup を参照
python -m w2c.check_env を実行（scripts/ ディレクトリ内）。ツールの有無、接続状況（ElevenLabs、Drive、Canva、ブラウザ）を表で表示。不足があればインストール方法とアカウント作成手順を提案する。
2. MCP / API / 権限の準備
ネットワーク権限が不足している場合 → 必要なドメイン一覧をユーザーに提示（セットアップ内のリストを参照）。ElevenLabs未接続の場合 → 接続を促す。ツール権限の許可画面では 「常に許可」 を選択するよう促す。
3. アイデア出し → /web2clip-plan を参照
Webページを読み込み、チャプター/セクションを列挙し、フレーム、尺、音声、ナレーター、分割クリップ数を提案。「ナレーション · Webエフェクト」の2列脚本を作成。承認用ダッシュボード（w2c.dashboard）を生成し、リンクをユーザーに送信。ユーザーが全体を把握し、各クリップを承認できるようにする。
4. 脚本 → 音声生成 → 録画 → 各クリップの結合
音声: /web2clip-voice。録画: /web2clip-record。各クリップ完了後にダッシュボードを更新。
5. 音声の提案
言語、性別、年齢、地域で音声をフィルタリング。2～3の選択肢と理由を提示。デフォルトは自然な語り口の音声を選ぶ。
6. 全体動画 → /web2clip-merge を参照
順番に結合。ファイル名は <プロジェクト名>_Clip<番号>_<セクション名>.mp4。全体動画は 0. ..._TONG-HOP とし、常にフォルダの先頭に表示されるようにする。
7. ユーザーが100%満足するまで納品
ファイル送信 + ダッシュボード更新。送信前のセルフチェック（各クリップから4～6フレームを抽出）、自己発見した問題点をリスト化。ユーザーが承認するまで修正。脚本、音声、仕様を保存し、迅速な修正に対応。
参考資料
references/loi-thuong-gap.md— 過去の障害とその回避方法（録画前に必読）references/viet-kich-ban.md— 魅力的なナレーションの書き方 + 脚本テンプレートreferences/chon-giong.md— 音声提案方法、クレジット見積もり、ElevenLabsプランexamples/spec_example.json（リポジトリルート） — 脚本ファイルのサンプル