derrickgong87/demo-video-creation-skill

デモ動画作成スキル

企業URLまたはプロダクトアセットから、洗練されたプロダクトデモ動画を作成します。デフォルトの出力は60〜90秒の1080p以上の動画です。マシン、アセット、配信先が対応している場合は4Kでレンダリングします。

運用基準

• 実際のプロダクト表面（Webサイトページ、アプリ画面、ログイン後のワークフロー、スクリーンショット、ユーザー提供アセット、確認済みの公開デモ）に基づいて動画を作成します。
• URLのみの入力でも開始可能とみなします。サイトからプロダクト、ターゲットオーディエンス、コアワークフロー、ブランドシステムを推測し、不足しているアクセス権や影響の大きい設定のみを質問します。
• 一般的なマーケティングよりも、プロダクトマネージャー視点のストーリーテリングを優先します。ユーザーが抱える問題、プロダクト内での操作、画面上の変化、その結果が重要な理由を示します。
• モーション合成には実用的な場合にRemotionを使用し、検査、エンコード、コンタクトシート作成、オーディオ処理、配信変換にはFFmpegを使用します。
• 主張は防御可能に保ちます。ソースマテリアルから確認できない限り、メトリクス、顧客ロゴ、検出結果、統合、コンプライアンスステータス、価格を捏造しません。
• 以前のクライアントへの過適合を避けます。ワークフロー、品質ゲート、モーションパターンは再利用しますが、クライアント固有のスクリーンショット、コピー、色、価格、ペルソナ、バージョンごとの修正は再利用しません。

入力

ユーザーがWebサイトのURLのみを提供する場合：

1. ブラウザでサイトを開き、ナビゲーション、バリュープロポジション、プロダクトページ、価格、ヘルプドキュメント、表示可能なインタラクティブ状態をマッピングします。
2. プロダクトを最もよく説明できるページとUIサーフェスの高解像度スクリーンショットをキャプチャします。
3. サイトから発見した最も強力なプロダクトループを中心にナラティブを構築します。
4. ログイン後のプロダクト領域が必要な場合、アクセス境界を明示します。

ユーザーがより多くのコンテキストを提供する場合、それを使用して品質を向上させます：

• ターゲットオーディエンス、キャンペーンプラットフォーム、アスペクト比、希望する長さ、CTA、ローンチ目標。
• プロダクトワークフローのステップ、デモアカウントアクセス、サンプル入力、または期待されるbefore/after出力。
• ブランドアセット、スクリーンショット、動画リファレンス、フォント、音楽の方向性、禁止される主張、法的注意事項。

リファレンスルーティング

• ブラウザ調査、ログイン後のキャプチャ、またはスクリーンショット作業の前に references/capture-workflow.md を読んでください。
• スクリプト、ストーリーボード、ショットリスト、またはプロダクトナラティブを書く前に references/storytelling.md を読んでください。
• モーション言語、タイポグラフィ、トランジション、レイアウト、音楽を選択する前に references/visual-system.md を読んでください。
• 動画プロジェクトを実装またはファイルをレンダリングする前に references/remotion-ffmpeg.md を読んでください。
• 動画を完了と呼ぶ前に references/qc-checklist.md を読んでください。

制作ワークフロー

1. 成果物のスコープを定義

   • 可能な場合、ターゲットの長さ、アスペクト比、解像度、言語、配信プラットフォームを確認します。
   • デフォルトは16:9、60〜90秒、30fps、H.264 MP4、1080p最低限とします。
   • リクエストされた場合、または動画がローンチ、投資家向け、カンファレンス、有料広告配信に使用される場合は4Kを使用します。

2. プロダクトを調査

   • Webサイトとプロダクトページを、ホームページの約束だけでなく、コアループを特定できる程度に深く閲覧します。
   • 簡単なフィーチャーマップを作成します：メインユーザー、ペインポイント、主要アクション、可視的なプロダクト出力、証拠、CTA。
   • プロダクトがログインの背後にある場合、ユーザーのアクティブなブラウザセッションを使用するか、ユーザーにログインを依頼し、認証されたUIから続行します。

3. プロダクトの証拠をキャプチャ

   • 可能な場合、デスクトップのスクリーンショットを2倍以上のデバイススケールでキャプチャします。
   • 変革を説明する場合、入力済み状態と空の状態の両方をキャプチャします。
   • アセットにはシーンと状態に応じた名前を付けます（例：dashboard-empty.png、workflow-result.png、pricing.png）。
   • URL、ページタイトル、キャプチャ時間、ビューポート、ファイル名、メモを含むマニフェストを保持します。

4. プロダクトストーリーを書く

   • ユーザーの問題または望ましい結果を平易な言葉で冒頭に置きます。
   • 次の順序でプロダクトループを進めます：セットアップ、アクション、変革、レビュー/証拠、より広いワークフロー、CTA。
   • 動画に合わせてテキストは短く保ちます。キャプションはアンカーとして使用し、段落として使用しません。
   • オーディエンスに合わせた自然なコピーを使用し、「生産性を解放」のような一般的なAIフレーズは、プロダクトが実際にそう言っている場合を除き避けます。

5. モーションシステムを設計

   • ブランドの実際の色とタイポグラフィをベースにし、階層を改善する場合は、控えめなディスプレイフォントまたはアクセントフェイスを1つ追加します。
   • プロダクトのスクリーンショットをヒーローアセットとして使用します。ブラウザフレーム、カーソルパス、ズーム、マスク、スキャンライン、比較パネル、キネティックタイポグラフィは、ワークフローを明確にする場合にのみ追加します。
   • プロダクトに合ったトランジションを選択します：流動的な変革にはリキッド/リップル、分析にはスキャンワイプ、証拠にはスポットライトリビール、ナビゲーションにはスペーシャルプッシュ、ビフォー/アフターにはスプリット比較。
   • モーションは連続的に保ちます。シーンの変更は、カメラまたはインターフェースが1つのプロダクトストーリーを通じて動いているように感じさせ、個別のスライドのように感じさせないようにします。

6. ビルドとレンダリング

   • プロジェクトスキャフォールドが有用な場合、assets/remotion-starter/ のスターターテンプレートを使用します。
   • 最終動画をレンダリングする前に、レビュー用の静止画またはコンタクトシートをレンダリングします。
   • まずQA用に1080pをレンダリングし、次にリクエストがあれば4K最終版をレンダリングします。
   • FFmpegまたはffprobeを使用して、長さ、解像度、コーデック、フレームレート、オーディオストリームを確認します。

7. 納品前にQA

   • テキストが重なったり、不自然にトリミングされたり、速いカットで読みにくくなったりしていないか確認します。
   • ボタン、カーソル、コールアウト、マスクが基盤のUIと整合しているか確認します。
   • すべてのスクリーンショットが最終スケールで十分に鮮明であるか確認します。
   • 音楽がインストゥルメンタルで、権利上安全であり、ナレーションやSFXの下でバランスが取れているか確認します。
   • 最終MP4と、関連する制作成果物（ストーリーボード、アセットマニフェスト、コンタクトシート、および該当する場合はソースプロジェクト）を提供します。

再利用可能なスクリプト

• scripts/create_demo_brief.py は、URLとオプションのプロダクトコンテキストから構造化されたブリーフを作成します。
• scripts/qc_video.py は、ffprobeで最終動画のメタデータを検査し、解像度、長さ、コーデック、オーディオの問題をフラグします。
• scripts/make_contact_sheet.py は、FFmpegを使用してクイックレビュー用のビジュアルコンタクトシートを作成します。

スクリプトはプロジェクトフォルダから、または絶対パスで実行します。これらは補助ツールであり、視覚的な判断を置き換えるものではありません。

スターターテンプレート

新しい動画を開始するときは、assets/remotion-starter/ を作業プロジェクトにコピーします。src/demoConfig.ts のプレースホルダー設定を置き換え、public/ またはRemotion静的アセットにスクリーンショットを追加し、シーンをプロダクトナラティブに適応させます。

スターターは意図的に汎用的です：

• オープニング、ワークフロー、証拠、CTAシーンを含むプロダクトストーリーコンポジションが含まれています。
• 実際のスクリーンショットスロットを使用しますが、クリーンなUIプレースホルダーにフォールバックします。
• フェード、ズーム、レール移動、カーソル強調、比較パネルのためのモーションプリミティブが含まれています。
• クライアント固有のコピー、色、アセットは避けています。

完了バー

以下の条件が満たされるまで、動画を完了と見なさないでください：

• プロダクトストーリーが実際のプロダクト証拠に基づいていること。
• 最終レンダリングが少なくとも1080pであるか、ユーザーが明示的に低いターゲットを受け入れたこと。
• 動画が静止画、プレビューレンダリング、またはコンタクトシートを通じて視覚的に検査されていること。
• FFmpeg/ffprobeのメタデータが解像度、長さ、ビデオコーデック、オーディオ状態を確認していること。
• 音楽、フォント、ストックフッテージ、またはサードパーティページに関するライセンスまたはソースの境界が文書化されていること。
• ユーザーが計画やスクリプトだけでなく、具体的な動画ファイルを受け取っていること。