demo-video — URL→Remotionローンチ

デモ動画作成スキル

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

動作基準

• 実際のプロダクト表面（ウェブサイトのページ、アプリ画面、ログイン済みワークフロー、スクリーンショット、ユーザー提供アセット、または検証済み公開デモ）に基づいて動画を作成します。
• 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. プロダクトを調査する

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

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

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

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

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

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

   • ブランドの実際の色とタイポグラフィをベースとし、ヒエラルキーを向上させる場合に限り、1つの控えめなディスプレイフォントまたはアクセント書体を追加します。
   • プロダクトのスクリーンショットをヒーローアセットとして使用します。ブラウザフレーム、カーソルパス、ズーム、マスク、スキャンライン、比較パネル、キネティックタイポグラフィは、ワークフローを明確にする場合にのみ追加します。
   • プロダクトに合ったトランジションを選択します：流動的な変換にはリキッド/リップル、分析にはスキャンワイプ、証拠にはスポットライトリビール、ナビゲーションには空間プッシュ、before/after比較にはスプリット比較。
   • モーションを連続的に保ちます。シーンの変更は、カメラまたはインターフェースが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のメタデータが解像度、再生時間、ビデオコーデック、オーディオの状態を確認している。
• 音楽、フォント、ストックフッテージ、サードパーティページに関するライセンスまたはソースの制限が文書化されている。
• ユーザーが計画やスクリプトだけでなく、具体的な動画ファイルを受け取っている。