video-to-superprompt

Video To Superprompt

目標

利用可能なあらゆる参考動画を、動画に何が映っているか、どのように動くか、どのように再構築するか、必要なアセットや生成メディアを含む、ビルダーですぐに使えるプロンプトに変換します。ユーザーが記事、アセットパック、実装を求めない限り、デフォルトの出力はそのまま貼り付けられるプロンプト1つです。

ワークフロー

1. ソース動画を特定します。

   • ローカルパス、アップロードされたファイル、URL、ブラウザー上で表示できる動画、記事のアセット、リポジトリ内のメディアを受け付けます。
   • 動画が参照されていてもアクセスできない場合は、詳細を捏造する前に、正確なファイルまたはURLを尋ねます。
   • ユーザーが正確な再現を希望する場合は、プロンプトを作成する前に、動画に関連するソース HTML/CSS/JS やローカルページを調べます。

2. 動画を技術的に調査します。

   • ローカルファイルの場合は、ffprobe を実行して再生時間、寸法、フレームレート、コーデック、ファイルサイズを確認します。
   • 均等な間隔のサムネイルよりも、タイムライン上の見どころを優先して、代表的なフレームを抽出します。
   • 手早く確認する場合の例：

     ffprobe -v error -show_entries format=duration,size:stream=width,height,r_frame_rate -of json "$VIDEO"
     mkdir -p /tmp/video-frames
     ffmpeg -y -i "$VIDEO" -vf fps=1 /tmp/video-frames/frame-%03d.jpg
     

   • 長い動画やスクロール中心の動画では、開始・中間・終了に加え、視認できるトランジションのタイミングでもフレームを抽出します。

3. 複数のレイヤーに分けて分析します。

   • ストーリー：ページ／アプリの目的、感情の流れ、セクションの順序、見どころ間のトランジション。
   • 画面／レイアウト：ビューポートのフレーミング、グリッド、固定領域、カード、メディア、オーバーレイ、余白、ナビゲーション、フッター。
   • 動き：表示のタイミング、イージング、パララックス、マスク、固定セクション、スクロール連動、ホバー／タップ状態、ループする環境アニメーション、カメラの動き。
   • ビジュアルデザイン：タイポグラフィ、カラーパレット、表面、境界線、シャドウ、テクスチャ、アイコン、画像／動画の見せ方。
   • 技術的な再構築：CSS／ネイティブ API、IntersectionObserver、Web Animations API、GSAP ScrollTrigger、Lenis、Framer Motion/Motion One、Three.js/WebGL、canvas、video currentTime のスクラブ再生、カルーセル、その他の領域固有ライブラリ。
   • アクセシビリティ／パフォーマンス：動きを減らす設定、モバイルでの動作、タッチ／キーボードの状態、遅延読み込み、動画の先読み、ピクセル比の上限、静的な代替表示。

4. アセットを計画します。

   • アセットマップを作成します。指定された正確な URL、使用するローカルファイル名、または生成が必要なアセットのプレースホルダー名を記載します。
   • AI アセットが必要な場合は、画像プレート、動画クリップ、WebGL/canvas 要素、ポスター、スプライト、マスク、テクスチャオーバーレイ用に個別のプロンプトを作成します。
   • ユーザーが特定のモデルや API を指定した場合は、プロンプト内でそのまま保持し、画像用プロンプトと動画用プロンプトを分けます。

5. スーパープロンプトを作成します。

   • ユーザーが別の形式を希望しない限り、貼り付けて使えるプロンプトを単一の fenced text ブロックで出力します。
   • 最終的に作るものと参考動画の再現範囲（正確な再現か、着想を得たアレンジか）から始めます。
   • アセットマップ、ブランド／コンテンツ、全体的なデザインの方向性、レイアウトルール、セクションごとの構成、モーションシステム、スクロールシステム、動画の動作、WebGL/Three.js の動作、レスポンシブ要件、アクセシビリティ／パフォーマンス、避けるべきパターンを含めます。
   • 主要な各セクションについて、目的、レイアウト、ビジュアルの詳細、アニメーション、インタラクション、スクロール時の動作、ライブラリ／API の選択、動きを減らす場合の代替表示を指定します。
   • 「美しくする」「似たアニメーションにする」「素敵なトランジションにする」といった曖昧な表現は避け、好みを具体的な実装指示に落とし込みます。

6. 確定する前に検証します。

   • プロンプト内のすべてのアセットパス／URLが存在するか、プレースホルダーとして明確に示されているか確認します。
   • スクリーンショット／フレームを作成した場合は、ファイルが空でなく、代表的な内容になっていることを確認します。
   • 記事やリポジトリの成果物を作成する場合は、ローカルのワークスペース指示に従い、未コミットの変更は必要な範囲に絞ってステージし、必要に応じてコミットします。

出力モード

• プロンプトのみ： そのまま貼り付けられるプロンプトを提示し、必要に応じてその上に簡潔なアセットマップを添えます。
• 記事： content.md に加えて、ローカルのフレーム／動画素材、マニフェスト、プロンプトを作成します。現在のリポジトリの記事規約に従ってください。
• 実装概要： プロンプトの後に、構築計画と QA チェックリストを追加します。
• アセット生成パック： プロンプトを背景画像、動画クリップ、スプライト／WebGL、ポスター、最終ページのプロンプトに分けます。

品質基準

• 元の動画を見なくてもインタラクションを再現できるだけの長さを、プロンプトに持たせてください。
• 動画のシーケンス、テンポ、目立った特徴を維持してください。
• ピン留めセクション、スクラブ可能なタイムライン、video.currentTime、パララックスレイヤー、不透明度のリビール、変形、マスク、シェーダー、パーティクルフィールド、ホバー状態、カルーセルの物理挙動など、具体的な動きの仕組みを明記してください。
• 毎回、モバイルでの動作と動きの低減設定への対応を含めてください。
• 避けるべき要素を明記してください。特に、ありきたりなランディングページのセクション、装飾的なぼかし、テーマに合わないストック素材、スクロール連動のスクラブが必要なのに自動再生の動画だけにすること、テキストの重なりに注意してください。

参考資料

• プロンプトをゼロから作成する場合、またはユーザーが「詳細な完全版プロンプト」を求めた場合は、最終プロンプトを作成する前に references/superprompt-template.md を読んでください。