EdwinJordanHerbas/video-demo-saas

縦型SaaSデモ動画

このタイプの動画は、実際のユースケースを最初から最後まで、実際のプロダクトインターフェースを3Dデバイス上に表示して描きます。すべてが連鎖しています。各要素は前の要素から生まれます。各ステップにラベルが付いているため、音声なしでも理解でき、無駄な無音部分は1秒もありません。

リファレンスの数値（フレーム、音量、時間）は、このスキルの元となった動画から取得されています。32.6秒のナレーション入りバージョンと32.9秒のナレーションなしバージョンがあり、後者にはスマホが回転してコインをばらまくアニメーションが含まれています。ナレーションなしバージョンがassets/codigo/のテンプレートです。Plantilla.tsxは「あなたのブランド」向けに同じストーリーを同じ動きで表現しており、動画ごとに変更する必要があるものはすべてajustes.ts（ブランド名、色、フォント、テキスト、スクリーンショット、音声）に集約されています。新しいナレーションなし動画を作成する場合は、このテンプレートをベースにします。

各ステップのリファレンスは、そのステップに到達したときにのみ参照してください。

ステップ	参照先
幕構成の脚本、timeline.json、ナレーションに連動したアニメーション	references/estructura.md
3DノートPCとスマホ、鮮明な画面、カメラ、フィード表示・回転・コインを伴う傾斜スマホ	references/imagen-3d.md
注意と視線誘導: 一度に1つの焦点、オブジェクトの横にラベル、他社ロゴなしで認識可能なアイコン	references/atencion-ojo.md
プロダクトラベル、マジック（「バン！」）、ニューモーフィズム、連続トランジション、カーソル	references/transiciones-estilo.md
ナレーション: モデル、音声選択、テイク、配置、単語のフレームへの割り当て	references/voz.md
効果音、サウンドパッケージ、BGM、Remotionでのミックス、無音部分	references/sonido.md
レンダリング、計測、コンタクトシート、既知のバグリスト	references/revision.md
教訓の記録と共有（オプション）	references/lecciones.md

譲れないルール

1. 実データであること。 画面、テキスト、価格、フローはすべて実際のプロダクト、そのWebサイト、リポジトリ、またはユーザーから提供された情報に基づきます。架空の数値、偽の推薦文、結果の約束は禁止です。サンプルデータが必要な場合は、「例」と明記します。テキストを作成する前に、プロジェクトの指示（CLAUDE.md、AGENTS.md、または同等のもの）を読み、ブランド、プラットフォーム、または単語に関する禁止事項がないか確認します。
2. ナレーションは補助であり、頼り切りにはしない。なくてもよい。 動画は無音でも理解できる必要があります。各ステップが画面に表示され、ラベル（インク色の行とグレーの行）で説明されます。ナレーションがある場合は、各フレーズにラベルが付きます。
3. 無音部分を作らない。 0.3秒以上の区間で瞬間的なLUFS値が-29を下回ってはいけません。BGMはフレーム0から再生され、レベル調整されています。表示されるすべてのものに音（キー入力、ポップ、打撃音）が付きます。冒頭のナレーションの沈黙は許容されますが、音のない沈黙は決して許されません。
4. すべてが接続されている。 何も無から現れたり、理由なく消えたりしません。メッセージが途切れてブランドが生まれ、ノートPCは閉じた状態で登場して開き、要素はある画面から別の画面へ飛び移り、スマホは次のシーンのサムネイルに変わります。
5. アニメーションは何かに連動する。 ナレーションがある場合、各瞬間は「単語のフレーム + n」です。ナレーションがない場合、各瞬間は前の瞬間に連鎖する脚本の定数（GIRO = ASOMBRO + 8）であり、長さはtimeline.jsonと照合されます。コードに散在する独立した数値は決して使用しません。
6. 決定論的な動き。 すべてはフレームの純粋な関数です。Math.random()、Date、フレーム間の状態を使用しません。
7. 途切れたり、透けたりしない。 3Dオブジェクトは完全な形でフレーム内に入り、その中心を中心に回転します。イメージ全体としてフェードインし、決してピース単位では行いません（内部が見えてしまうため）。各エントリーの最初のフレームは常に確認します。
8. セキュリティ。 ElevenLabsのAPIキーは環境変数ELEVENLABS_API_KEYにのみ格納します。ファイル、チャット、印刷出力には決して含めません。公開、購入、モデルやサウンドライブラリのダウンロードは、事前にユーザーに確認せずに行わず、ユーザーが要求しない限りコミットもしません。公開時には、動画がAIによって作成されたことをプラットフォーム上で明示します。
9. 広告ではなく、プロダクトの見た目。 インターフェース用のサンセリフ体小文字フォントを通常のスタイルで使用し、色付きの下線付き単語は使用しません（あるクライアントが「プロフェッショナルでない」と拒否したため）。アクティブな状態はインク色で表し、ブランドカラーはブランド自体にのみ使用します。感情は動き（傾ける、加速する、回転させる、突然現れる）から伝え、タイポグラフィからは伝えません。
10. 一度に一つの焦点、視線を誘導する。 誰も画面上部のラベルを読みながら、同時に下部のアニメーションを見ることはできません。ラベルはシーンが静止したときに入り、そのオブジェクトに密着して配置され（カメラ内、シーンごとに異なる位置）、シーンはラベルが読まれた後に動作します。新しい要素は、視線が既にある場所に生まれるか、動いているものによって運ばれてきます。脚本の前にreferences/atencion-ojo.mdを読んでください。
11. 他社のロゴを使用しない。 SNSやメールアドレスを認識可能にするには、テキスト表記とユニバーサルアイコンを使用し、ブランドロゴは使用しません。ロゴは許可が必要だったり、推奨しているように見えることを禁止している場合が多いためです。
12. 表示される内容に焦点を当てる。 スマホでは、ネットワーク表示が上部を、下部（名前、投稿テキスト、ボタン）と右側のボタン列を覆い隠します。すべての読み取り可能なコンテンツはセーフゾーン内、x 65-888、y 288-1248（MetaとYouTube共通）に配置し、カメラはフレームの中心ではなく、このセーフゾーンの中心に固定します。納品前にscripts/zonas.pyで確認します。数値とフォントサイズはreferences/atencion-ojo.mdに記載されています。
13. 明確な同意なしに何も共有しない。 最後のステップの教訓はローカルに保存します。ユーザーが送信される内容を正確に確認した後、明示的に同意した場合にのみ共有します。

フロー

1. ソースと脚本。 実際の画面、テキスト、色を収集します。幕構成の脚本とナレーションのフレーズを書きます（references/estructura.mdおよびreferences/voz.md）。構築を始める前に、ユーザーに脚本と幕を見せます。
2. ナレーションを先に行う（ある場合）。 テイクを生成し、選択してtimeline.jsonに配置します。これにより、各単語のフレームが固定されます。ナレーションがない場合は、脚本の定数を固定し、それらのフレームに合わせてBGMを生成します。
3. イメージ。 ゼロから始めるのではなく、テンプレートから着手します。assets/codigo/をプロジェクトにコピーし、ajustes.tsを埋め、画面のプレースホルダーに実際のスクリーンショットを配置します。プロダクトのストーリーが要求する場合にのみ幕を変更します（references/estructura.md）。
4. サウンド。 パッケージの効果音（または同じプロンプトを使用した新しい効果音）、BGMはセクションごとに、ブランド表示で最終的なインパクトを与え、レベル調整し、ナレーションの下に配置します。
5. 計測によるレビュー。 各エントリーと各切り替えの個別フレーム、中解像度のラフドラフト、コンタクトシート、音量と無音部分のチェック（references/revision.md）。修正し、再計測し、迅速に納品します。完璧は次のイテレーションで目指します。
6. 納品。 PNGシーケンスからレンダリングされた最終MP4ファイルに、その音量、ピーク、長さを添えます。何を計測し、何を確認し、何がユーザーの耳や目でのみ判断できるかを説明します。動画のREADMEを更新します。
7. 教訓を記録して締めくくる。 この動画で何か問題が発生し修正された場合は、assets/leccion.mdに教訓をローカルに書き留めます（references/lecciones.mdに場所と方法の説明あり）。その後、共有したいかどうかをユーザーに尋ねます。明示的な同意が得られたら、ghを使用してIssueまたはPRとして公開します。ghがない場合は、フォームのリンクを提供します。同意がなければ、何も送信しません。

スキルに含まれるもの

scripts/
  elevenlabs.py       ナレーション（単語ごとのタイミング付き）、効果音、BGMを生成；キャッシュにより二重支払いを防止
  paquete_efectos.py  レシピに従って効果音を生成、フィルタリング、準備；APIキーが必要
  nivelar_musica.py   BGMのフレームごとの音量カーブを調整し、無音のように聞こえないようにする
  cortar_teclas.py    キーボード打鍵のテイクを8つの個別キーに分割
  medir.py            MP4のLUFS、実際のピーク、長さ、コンタクトシートを計測
  silencios.py        しきい値以下の区間（無音部分）を検出
  zonas.py            縦型広告のセーフゾーンを描画したコンタクトシートを生成
  caja.py             フレームごとに暗いオブジェクトの幅と中心を計測；フレーム端に接触している場合は警告
  huecos.py           破損フレーム（白い背景、3Dオブジェクトの欠落）を検出
  empalme.py          BGMを再生成せずに幕を延長：最も近いタイミングで完全な小節を繰り返す
  claridad.py         音声キャスティング：動画のBGM下で最も聞き取りやすいテイクと、シャープな「ス」音を持つテイクを判定
assets/sonidos/       receta.json：生成すべき27種類のUI効果音（音量はreferences/sonido.mdに記載）
assets/codigo/        テンプレートとその構成要素（LEEME.md参照）
  Plantilla.tsx       ナレーションなしの完全なコンポジション：チャット、ブランド、ノートPC、スマホ、フィード、コインを伴う回転、レビュー、レポート、フォーム
  ajustes.ts          記入が必要な唯一のファイル：ブランド、色、フォント、テキスト、スクリーンショット、音声
  kit-plantilla.tsx   色、フォント、カーブ、p()/mix()
  mundo3d.ts          three.jsによるノートPC、スマホ、コイン；マージン付きキャンバス
  timeline.json       テンプレートの長さとBGMセクション；plan-musica.jsonはElevenLabs用の計画
assets/leccion.md     教訓テンプレート（リポジトリのlecciones/PLANTILLA.mdと同じ）

スクリプトはuv run <script>で実行します。依存関係は各スクリプト内で宣言されています。

新規プロジェクト

• Remotion 4、three（0.18x）を使用。remotion.config.tsでConfig.setChromiumOpenGlRenderer('angle')を設定。Windowsでは、260文字を超えるパスはRemotionで失敗するため、短いパスを使用します。
• scripts/elevenlabs.pyがナレーション、効果音、BGMをカバーします。
• 効果音はuv run scripts/paquete_efectos.py assets/sonidos/receta.json public/<プロジェクト>/sfxで生成し、ajustes.sonido.efectosをそのフォルダに指定します。ElevenLabsのキーがない場合は、同じ名前で独自のサウンドを配置します。

ユーザーとの作業方法

• ユーザーの言語で、直接的かつ実用的に回答し、選択肢を示すのではなく、推奨事項を提示します。
• レンダリングや生成など、時間がかかる処理がある場合は、その旨を1行で伝えます。
• すぐに見られるバージョンを納品し、その後改善を続けます。
• ユーザーが「途切れている」「音が空っぽ」「つながっていない」と述べた場合、何かを変更する前に、まずフレームや計測値で原因を特定します。その後、1文で説明します。