video-shotcraft

video-shotcraft：シネマティックな製品動画制作

自己完結型の制作ライブラリです。106 枚のショットレシピカード（デモ実装ソースコードと動くサンプル動画ギャラリー付き）、検収済みの完成版プロモーション動画テンプレート 1 本、再利用可能なコンポーネントと音声素材、6 段階のワークフローを収録しています。現在の主な用途は Web／デスクトップ製品のプロモーション動画ですが、ショットカード自体は汎用的なモーションデザインの語彙です。カードを 1 枚だけ選んで、あらゆる動画の単一ショットに使うこともできます。

このスキルを使う場面

次のような場合に使用します。

• シネマティックな製品プロモーション動画、製品ローンチ動画、デスクトップ／Web アプリのデモ動画を制作する場合。
• Ink Press（墨圧）テンプレートを指定または依頼する場合、あるいはテンプレートのプロモーション効果を再現する場合。
• 特定のモーションデザインショットカード（例：deck-deal-flyin、row-embed、spotlight-hero-card）を実装する場合。
• 2.5D のカメラ移動（PageCam）、Remotion によるビート同期の動画カット、サウンドデザインが必要な場合。

手順

Step 1: テンプレートを紹介して制作ルートを確認する

このスキルを呼び出すたびに、素材収集、絵コンテ作成、実装を始める前に、まず次の内容をユーザーに説明します。

• template/ に、そのまま使用できる**検収済みの 36.2 秒の製品プロモーション動画テンプレート Ink Press（墨圧）**があります。1920×1080、30fps、紙とインクをイメージした琥珀色のスタイルで、完成したショット 10 本、2.5D による実際のページ上でのカメラワーク、タイトルカード、トランジション、設定済みのシネマティックな SFX を含みます。対象製品のスクリーンショット、コピー、ブランド情報を差し替えるだけで適用できます。
• テンプレートの使用が最速で、最も確実に高品質な仕上がりを得られる方法です。ユーザーが新しいビジュアル言語を希望する場合は、自由制作のワークフローに進みます。

次のように明確に確認します。「この動画の制作に、この既成テンプレートを使いますか？」 動くサンプル動画は https://vincentwei1021.github.io/video-shotcraft/ で閲覧できることも伝えます。

• ユーザーが使用を確認した場合：まず template/TEMPLATE.md を最後まで読んでから、テンプレートルートで進めます。
• ユーザーが使用しないと明言した場合：references/pipeline.md のステージ 0 に進み、自由制作または単一ショットのルートで進めます。
• ユーザーがまだ決めていない場合：ここで選択を待ちます。デフォルトでテンプレートを適用したり、制作を始めたりしてはいけません。

例外：

• ユーザーが Ink Press テンプレートを指定した場合（例：「Ink Press テンプレートで自社製品のプロモーション動画を作って」）、テンプレートルートを選択したものとみなし、template/TEMPLATE.md を直接読んで実行します。
• ユーザーが特定のショットカードを指定した場合（例：「deck-deal-flyin と row-embed を使ってこの動画を作って」）、ルートが選択されたものとみなし、該当するショットカードと demos/<カード名>/ の実装ソースコードを直接読んで実行します。

Step 2: 3 つの使い方から 1 つを選ぶ

1. 完成版プロモーション動画（テンプレートルート）：template/TEMPLATE.md を読み、「製品差し替え再現ガイド」に従って素材を差し替え、各ショットに適用します。
2. 完成版プロモーション動画（自由制作）：references/pipeline.md の 6 段階に沿って進めます（ステージ 0 の開始時の 3 つの質問から始めます）。
3. 単一ショット／単一モーション：references/shots/ からカードを選び、カード全文と demos/<カード名>/ の実装ソースコードを読み、対象素材に適用します。

Step 3: どのファイルを読むか

タイミング	読むファイル
プロジェクト開始時	pipeline.md（ステージ 0 の 3 つの質問）
ユーザーが BGM を選択済みの場合	music-beat-sync.md（絵コンテ作成の前に分析）
テンプレートルートを進める場合	template/TEMPLATE.md 全文
絵コンテの設計時	sequences/ のブリッジテンプレート、shots/ の全 frontmatter、選択したカードの全文
ショットごとの実装時	該当するショットカードの全文、demos/<カード名>/ の実装ソースコード全文、assets/lib/ の対応コンポーネント
サウンドデザイン時	sound-design.md と assets/audio/
検収時	aesthetic-rules.md 全文のチェックリストを確認（独立した subagent が実行）

例

例 1：テンプレートルート（Ink Press）

"用 Ink Press 模板给我的 Desktop Product 做一支 30 秒宣传片"
-> 自动选择模板路线，阅读 template/TEMPLATE.md，进行截图采集与素材替换。

例 2：ショットカードを指定

"参考 deck-deal-flyin 和 row-embed 镜头卡制作我的产品 Demo 动效"
-> 自动选择单镜头/组合镜头路线，阅读 references/shots/ 与 demos/ 源码进行定制化实现。

ベストプラクティス

1. 実際のスクリーンショット：既存ページを再現する場合は、必ず実際のスクリーンショットを使用します。最初に dev server を起動し、ヘッドレスブラウザーを使って 2x 解像度のテクスチャと layout.json をキャプチャします。
2. 製品本来のビジュアル言語：製品／Web サイトのデザインシステムからトークン（フォント、フォントサイズ、配色、角丸）を抽出し、無関係なスキンをでっち上げないでください。
3. 1 ショットにつき 1 モーション、適切な間：各ショットで伝えるモーションは 1 つだけにし、ロゴや重要な映像のタイミングを合わせて表示した後、hold ≥1s を確保します。
4. テンポの速い BGM に厳密にビートを合わせる：librosa で実際の BPM／拍子を分析し、beatF(n) でフレーム数を決め、カット点の誤差を ≤3f に抑えます。
5. デモのソースコードを参考にする：ショットカードを使う前に demos/<カード名>/ を読み、調整済みパラメーターの実態と、既知の落とし穴を避けるための記述方法を確認します。
6. 決定論的なレンダリング：Date.now()／Math.random() の使用は禁止し、固定シードの疑似乱数を使用します。

参考資料

• template/TEMPLATE.md — Ink Press テンプレートの構成と製品差し替え再現ガイド
• references/pipeline.md — 6 段階の制作ワークフロー仕様
• references/aesthetic-rules.md — ビジュアルレビューと検収チェックリスト
• references/music-beat-sync.md — 音楽のリズム分析とビート同期タイムラインの計算
• references/sound-design.md — SFX のサウンドパターンと効果音素材の組み合わせガイド
• https://vincentwei1021.github.io/video-shotcraft/ — 動くサンプル動画と 106 枚のショットカードのオンラインギャラリー