xiaoxiao8096/code-motion-video-skill

純コードアニメーション動画制作仕様

映像、動き、トランジション、BGM、効果音、タイポグラフィ、フォントのすべてをコードで生成します。動画生成モデルは使用せず、サンプリングやAIによる音楽生成も行いません。各フェーズの成果物はまず依頼主に確認を取り、承認を得てから次のステップに進みます。

推奨テクノロジースタック：Remotion（React）で映像、Python + NumPy/SciPyでオーディオ合成、FFmpegで最終合成。Motion Canvas、Revideo、Manim、HyperFramesなどに差し替えても構いません。プロセスは変わりません。

1. 要件の明確化

• 主人公（プロダクト、ブランド、個人、イベント）、ターゲットオーディエンス、映像内で使用して良い名前や要素、使用してはいけないものを明確にします。明確でない場合は「不特定多数の視聴者に向けて」制作します。
• 尺（一般的には15～60秒）、アスペクト比（横長1920×1080、縦長1080×1920、または正方形）、フレームレート（本番は60fps推奨）、公開チャネルを決めます。
• 主人公の公式資料（Webサイト、プレスリリース、ドキュメント）を読み込み、原文を引用します：その人物・製品がどのように自分を説明しているか、コアバリュー、語り口調。映像内の事実はこれら資料のみに基づきます。

2. オープンソースリファレンスの調査

各リファレンスは実際に存在することを確認し、URL、ライセンス、参考価値を記録します。存在しないものはリストしません。よく使うカテゴリ：

• 動画フレームワークとサンプルリポジトリ：Remotion、Motion Canvas、Revideo、Manim、HyperFrames、theatre.js、GSAP、Lottie。
• デザインシステムとカラーパレット：Radix Colors、Open Color、Tailwind、Catppuccin、IBM Carbon、Primer、Geist、awesome-design-systems。
• グラデーション・シェーダーバックグラウンド：shadergradient、whatamesh、three.js。
• モーション：Motion、react-spring、anime.js、awesome-creative-coding。
• オーディオ：Tone.js、jsfxr、ZzFX、tonal。
• フォント：商用利用が許可されたライセンスのもののみ（例：SIL OFL）。中国語ではNoto Sans SC、Noto Serif SC、得意黑（斜体のみ、タイトル向き）、霞鶩文楷が一般的。欧文ではInter、Space Grotesk、Unbounded、JetBrains Mono。
• アイコン：Lucide、Tabler、Phosphor。
• コピーライティングスタイルガイド：chinese-copywriting-guidelines、Humanizer-zh、humanizer、stop-slop。
• 指定されたロゴや素材：元ファイルを入手し、ライセンスと商標登録の有無を確認します。未承認の商標図形は内部プレビューのみに使用し、公開前に権利を取得します。

3. 企画案の作成（レンダリングは行わない）

• テーマ文と全体のトーン。
• 統一タイムライン：BPMを決定（例：120 BPM、小節2秒）、各カットポイントは小節線または拍に合わせます。時間はすべて本番フレームレートのフレーム番号で記録し、timeline.jsonに書き込みます。映像と音声はこのデータを共有します。
• 絵コンテ表：各シーンのタイムコードとフレーム範囲、スクリーン上のテキスト、映像、モーション（イージングカーブやスプリングパラメーター）、サウンド。
• トランジション表：各トランジションを個別に設計（オープニングとエンディングを含む）。手法（マスクワイプ、モーフィング、マッチカット、カメラ押し込み貫通、共有要素拡大、カラーブロックワイプ、フリップなど）、フレーム範囲、イージング、次のショットに引き継ぐ要素、対応する効果音とビートを明記します。
• ビジュアルシステム：カラーパレット（hex）、グリッドとマージン、フォント組み合わせ（フォントサイズ、ウェイト）、背景処理。
• BGM：調性、コード進行、セクション構造、各楽器の合成方法、カットポイントとの対応。
• 効果音リスト：各シーンで使用する効果音とその合成方法。
• HTMLとヘッドレスブラウザを使用して4枚程度の静的スタイルフレームをキャプチャし、さらに1～2枚のトランジション分解図（中間状態を1行に並べたもの）を生成します。

4. ビジュアル方向性の選択肢

スタイルが未定か依頼主から異論がある場合、3～4セットの明確に異なる方向性を提示します（例：明るいマガジン風、暖色グラデーション＋すりガラス、カラフルなポップシール、スイスグリッド、ダークテクノロジー）。各セットにはカラーパレット、背景、フォント、インスピレーション元を含め、同じシーンで1枚ずつスタイルフレームをキャプチャし、比較用に1枚のコラージュを作成します。絵コンテとトランジションは変更せず、ビジュアルのみを差し替えます。

5. 制作

• 映像：フォントはローカルファイルを使用し、読み込み完了後にレンダリングします。すべてのアニメーションはフレーム番号で駆動します。ブラウザでリアルタイムに動作するSVG、CSS、JSアニメーションはフレームベースの計算に書き換えないとレンダリング結果が不定になります。
• モーション：活発なスタイルにはオーバーシュートを伴うスプリングとスカッシュ＆ストレッチを、落ち着いたスタイルにはスムーズなイージングを使用します。スプリングのリバウンドによりスケール値が負になる場合があるため、クリップ処理が必要です。
• オーディオ：シンセサイザーを自作します（例：デチューンされたノコギリ波パッド、FMグロッケン、Karplus-Strong弦、スイープ正弦波キック、フィルタリングノイズによるシンバルと拍手、サイドチェインコンプレッション、リバーブ）。効果音はノイズ、スイープ、レゾナンス合成で生成します。ブランドサウンドとして2～3音のモチーフをデザインし、ロゴ出現やエンディングで使用できます。
• WAV書き出し時はビット深度とノーマライゼーションが正しいことを確認します。間違えると音量が数十dB異なることがあります。FFmpegでラウドネスを目標値（ネット配信では一般的に-14 LUFS）に統一し、ピークにはヘッドルームを残します。
• エンコード：H.264 + AAC、faststartを有効にします。
• メモリが逼迫している場合はレンダリングの並列数を減らします。

6. プレビュー

• まず低解像度の完全プレビュー（例：960×540、30fps）を最終ミックスと共にレンダリングし、リズム確認用とします。
• セルフチェック：ffprobeで尺、フレーム数、オーディオトラックを確認。一定間隔でフレームを抽出してコンタクトシートを作成し、要素の重なり、欠損文字、豆腐（フォント未表示）をチェック。ソースコードを検索し、表示すべきでない内容が含まれていないことを確認します。
• 納品プレビュー時には既知のリスクを説明します（例：リズムが速すぎる可能性のあるトランジション、数値チェックのみで聴感確認が未実施のサウンド）。

7. コピーライティングのAI臭除去

• 「～ではなく…」「三連パラレル」「空虚なスローガン」「宣伝口調」「抽象名詞の羅列」を取り除きます。
• 具体的なシーンと数字を書き、口語的なリズムで一文に一つの情報を収め、拍子に収まる長さにします。
• 中国語と英語の間、中国語と数字の間にはスペースを入れます。
• シーンごとに修正前後の比較表を提供します。

8. 本番版

• 内容は承認されたプレビューと同一とし、スペックのみを向上させます。例：1920×1080、60fps、CRF 16–18、yuv420p、AAC 320kbps。
• ffprobeで仕様を確認し、完成品からキーフレームをキャプチャして解像度をチェックし、修正済みの問題を重点的に再確認します。
• ファイルサイズが大きすぎる場合は、圧縮版の共有版を別途作成します。
• 必要に応じて、同じタイムラインを使用して縦長や他のアスペクト比に再レイアウトしてエクスポートします。

ファイル構成

project/
  plan_v*.md        企画案（版ごとに新規保存）
  frames*/          スタイルフレームとHTMLソースファイル
  fonts/  assets/
  timeline.json     映像と音声で共通のタイムライン
  video/            映像プロジェクト
  audio/compose.py  オーディオ合成スクリプト
  out/              プレビュー、本番版、スクリーンショット