remotion-build — Remotion ビデオ生成
DESIGN.md（remotion-consult の成果物）に従い、React コードで MP4 を生成します。字幕が唯一のタイムラインであり、モーションエフェクトは総合ライブラリからインポートし、アセットはクロスハーネスルーティングを使用します。
ワークフロー
Step 0 — モード選択（4択から必須、決定してから着手）
- カテゴリテンプレート：ユーザーが所定のスタイルを希望、または
remotion-shared/categories/の4カテゴリ（ナレーション字幕/データ可視化/プロダクトデモ/ブランドアニメーション）から選択 → 該当カテゴリのDESIGN.template.md+motion-list.mdを読み、コンテンツと字幕のみを差し替えてデザインシステムを継承。 - リファレンス流用：ユーザーが参考ビデオを提示（最優先）、または
remotion-shared/video-real-library.mdから選択 → 字幕スタイル/トランジション/リズムを分解し、総合モーションライブラリのコンポーネントで再現。 - 自由設計：参考もテンプレートもなし →
video-anti-slop.mdの逆プロンプトのみを回避。 - 既存の DESIGN（consult 成果物）に従う：consult で DESIGN とスタイルサンプルが確定済み → DESIGN tokens/§8 を厳密に実行し、スタイルの方向性を再度問わない（Step 0.5 では検収基準の調整のみ、Phase 1 の明確化は繰り返さない）。 判断に迷う場合は、選択肢をユーザーに提示。
レンダリングエンジンの2択（第5の次元、DESIGN に記載）： 上記4つのモードに加え、レンダリングバックエンドを決定します（本スキルのデフォルトは Remotion エンジン。DESIGN に指定がある場合、またはユーザーが明示した場合のみ HyperFrames エンジンを使用）。
- Remotion エンジン（デフォルト）：React の複雑なモーションエフェクト / shotcraft ショットカード /
src/の階層化 +Sequence+useCurrentFrame。最高のモーション自由度を求める場合に使用。 - HyperFrames エンジン（HeyGen 製のオープンソース HTML→MP4、オプション）：
index.htmlデータ属性 + GSAP タイムライン（npx hyperframes init/render、ローカルで無料）→ より Web 制作の感覚に近く、npm run check（lint+コントラスト+モーション）が標準装備。アセット/BGM/字幕/検収はすべて共通で、レンダリングの書き方のみが異なります。ルールはreferences/hyperframes-guide.mdを参照。 - 判断基準：複雑なショットカード（フリップ/パーティクル/3D）や既存の Remotion プロジェクト → Remotion。純粋な HTML/GSAP アニメーション、Web 制作の感覚、標準 lint が必要 → HyperFrames。同一プロジェクトで両エンジンを混在させないこと。
Step 0.5 — 要件調整 + 検収基準（grill-me、必須、最大10ラウンド）
grill-me スキルを実行し調整：一言要件、画面サイズ/尺/プラットフォーム、字幕ソース（.srt/.vtt/ナレーション原稿/ゼロから）、モード、スタイルの方向性。以下の4カテゴリの検収基準を必ず作成すること：
- 構造：カテゴリ/画面サイズ/尺/fps
- ビジュアル：字幕フォント/配色/構図 が DESIGN.md または参考と一致（自由モードでは「AI臭くない」こと）
- コンテンツ：字幕の全文章が揃っている、誤字なし、タイムスタンプが全編をカバー、文案が事実に基づく
- 技術：字幕のフーム位置合わせ（文頭・文末フレームに字幕が存在）、スチルフレーム抽出通過、MP4 レンダリング成功
10ラウンドで調整が完了しない場合 → 未解決項目を記録し、未解決のまま構築に進む。
Step 1 — 字幕駆動フロー（コア）
references/captions-guide.md に従う：
- ソースルーティング：既存の .srt/.vtt → そのまま使用。ナレーション原稿.md がある → 下書き .srt を作成。ゼロから → まずナレーション原稿の下書きを作成し、それを元に .srt を作成。
parseSrt({input})→Caption[]、空のセグメント/タイムスタンプの重複/範囲外をチェック。- フレーム位置合わせ：
startFrame = Math.round((startMs/1000)*fps)、endFrame = Math.round((endMs/1000)*fps)、各文を<Sequence from={startFrame} durationInFrames={endFrame-startFrame}>でラップ。 - 単語レベル/文レベルのハイライト：
createTikTokStyleCaptions→CaptionLayerコンポーネント。中国語は文章全体が1トークン → 文レベルにフォールバック（DESIGN.md の highlightMode で判断）。 - 画面のリズムは字幕の文頭 startMs にバインド。全編の
durationInFrames = round(max(endMs)/1000*fps) + trailing。 - 単語変更後は
serializeSrtで書き戻し。
Step 1.5 — 音声駆動による srt 再構築（タイミングは TTS 実測値がトリガー、音声生成後にフレーム抽出）
ナレーションビデオでは音声生成は必須のフロー（ユーザーに確認不要）：TTS 生成 → ffprobe 実測 → srt 再構築によるタイムライン確定。タイミングは TTS 実測値に基づく（DESIGN §4 タイミングは TTS 実測値がトリガー）。音声生成後にフレーム抽出——Step 1 で srt を位置合わせした後、音声生成で再構築され、これまでの作業が無駄になるのを防ぐ。
python scripts/media/tts_gen.py --provider edge-tts --lines lines.txt --save-dir public/audio/ --voice <voice>（デフォルトは Key 不要でフォールバック。MiniMax が利用可能な場合は明示的に--provider minimaxに変更。国内クラウド向け TTS はmmx-media-pipeline.md§二を参照）。- ffprobe で各文の実測時間を計測（
ffprobe -show_entries format=duration）、文間は 0.8 秒の呼吸間隔。 - srt を再構築（
rebuild_srt.py）：各文の start/end = 実測時間の累積 + 呼吸間隔。public/captions.srt に書き込み。 - ルート
SHOTSのフレーム範囲を新しい srt に基づき更新（round(ms/1000*fps)）、各 Sequence に<Audio src={staticFile("audio/s{n}.mp3")}>を追加。 - BGM：AI 楽曲生成が不要な場合は、プロジェクトのライセンス済みアセットライブラリから取得。プロンプトに基づく楽曲生成が必要な場合は、デフォルトで ACE-Step をローカルで使用し、クラウド上の音楽バックエンドはオプションの代替手段として利用。取得後は全長に合わせてカット（ffmpeg
-tで動画の秒数分）、音量はナレーションを妨げないように低めに設定（0.22-0.3）。 - シーン毎のフレーム予算 + タイミング事前チェック（「キーアニメーションが表示されない」を防止、実践で3回遭遇）：rebuild_srt が出力する各文の
to-fromがそのシーンのフレーム予算です。ショットカードやデータアニメーションを書く前に必ず確認すること：カード内部の最後のキーフレーム ≤ シーン予算であること。超える場合はカードのタイミングを圧縮する（検収で発覚するのを防ぐ）——- 短文（2-3秒 ≈ 60-90f）：スタンプ/スキャンサークル/周期的なハイライトなどの末尾アニメーションが予算を超えやすい（S2 の赤いスタンプは 70-88f が 68f の文を超過 → 55-65f に圧縮。S6 の周期的なハイライトは 46-70f が 70f を超過 → 46-64f に圧縮。S9 の5周スキャンは 136f が 128f の文を超過 → 108f に圧縮）。
- ルール：
カードの最終キーフレーム = 開始位置 + カスケード合計長 + 末尾静止フレーム、これは必ず ≤ 文予算であること。超えた場合は stagger 時間/単一回の持続時間を比率で圧縮。末尾静止は ≥4f を維持。
Step 2 — 参考を探す
ユーザーが参考を提示した場合が最優先 → video-real-library.md → 自由設計。参考がある場合は「分解アニメーション法」を使用（参考 → 総合モーションライブラリのコンポーネントを組み合わせ。詳細は motion-patterns-video.md を参照）。
Step 3 — 逆プロンプト（動画版の要約、唯一のハード制約）
- 全編を通じて同じ字幕のリズムにしない（各文が同じ長さ、単語レベルのハイライトが無差別に画面を埋め尽くす）
- すべてのシーンで中央に同じ構図、全編フェードのみ、または全編ハードカットのみにしない
- 均等に画面をカットしない（N 秒ごとにカット＝呼吸感がない）
- デフォルトの紫/藍のグラデーション背景にしない、ありきたりな AI フォントを使わない
- 空虚なナレーション字幕にしない（「ご覧ください」「始めましょう」など）
- アニメーションは必ず実装する：各シーンに少なくとも登場アニメーション + シーン間のトランジション
- 以上。
Step 4 — 構築（技術的な最低ライン）
references/remotion-build-guide.md に従う：
- プロジェクト初期化：
_dev/remotion-tutorialからスケルトンをコピー +npm i @remotion/captions@<バージョン>@align+ Chrome パスを保持。 - 総合モーションライブラリからコンポーネントをインポート（
工作台/视频/_动效库/）またはsrc/components/にコピー。 - ショットカードはオプションで組み込み可能：DESIGN §8.2 でカードを選択した場合のみ、
remotion-shared/video-shots-spec.mdの「ショットカード組み込み手順」に従って実行（[copy]/[借思路]の意図マークを含む）。中国語作品ではデフォルトで「借思路（アイデアを借用）」を使用。 - src の階層化：Root.tsx / theme.ts / captions.ts / components/。
- 決定論的アニメーション（
useCurrentFrame/interpolate/spring、Math.randomやブラウザタイマーは禁止）。 - DESIGN.md がある場合は、tokens に厳密に従う。
- アセットは
references/video-image-spec.mdに従い、クロスハーネスルーティングを使用（Codex image_gen / GPT プロンプト往復 / ユーザー提供画像）。 - アセット生成後にアウトラインを再検証（必須）：アセット生成完了後、DESIGN §8 のアウトラインを文ごとにチェック——①画像が文の意味/レイアウトに適合しているか（vision で適合度を評価、7未満なら再生成またはプロンプト調整）②大きなキーワードがシーン画像と調和し、遮蔽していないか③階層の z 順序がアウトライン設計に従っているか。不適合 → キーワードを調整するかアセットを再生成。「生成してそのまま使う」を禁止。各画面要素は複数の候補から最適なものを選択。
Step 5 — 検収クロージャ（grill-me ノードテーブル）
| ノード | トリガー | ラウンド上限 | 終了条件 |
|---|---|---|---|
| 開始 | Step 0.5 | 10 ラウンド | 検収基準確定 |
| 修正 | ユーザーが修正依頼 | 5 ラウンド/回 | 何を修正するか明確。各ラウンドで検収基準と照らし合わせる |
| 最終 | 納品前 | 4 ラウンド | 検収基準を項目ごとに確認 |
ハードな検収アクション（長時間レンダリングの無駄を防ぐため、フレーム抽出後にレンダリング）： 階層別定量評価（4階層。DESIGN §8.2 で、時刻決定的キーフレームが文頭/中盤/0.82 最終状態にあることを証明）：
- 層1 背景画像（シーン画像そのもの）：
python scripts/media/layout_calc.py <シーン画像>——構図/余白/推奨テキスト領域（画像の余白構造に基づき空き領域を探す。上部がクリーンであることを強制しない。上部に侵入がある場合 → テキストをtext_zoneの推奨領域に移動、またはよりクリーンな画像を再生成）； - 層2 背景画像+文字（テキストを含むスチル）：layout_calc のテキスト配置 + frame_judge
--subtitle-hexで実際の WCAG コントラスト（大きな文字 ≥3.0/本文 ≥4.5）； - 層3 +アニメーション（連続フレーム）：フレーム差分/連続フレームを vision で判定し、アニメーションが実際に発生していること + アニメーションとシーンが重なっていないこと（カードが完全な画面である場合はシーン画像の重ね合わせとしない。ビジュアルモードは §8.2 を参照）；
- 層4 全体（完成品）：frame_judge で全編 +
audio_sync_check.pyで音声同期 + 遮蔽チェック + 4スキルによる採点 + 動作証明。
npx remotion compositionsで実際の ID を確認。- スチルフレームを 3-5 枚抽出（文頭/文末/トランジションフレーム）——「最終状態のフレーム」を抽出し、アニメーション途中のフレームは抽出しない（実践教訓 2026-08-17）：フレーム抽出は動作完了後のフレーム（0.82 最終状態 / 末尾静止後）を選択。アニメーション進行中のフレームは抽出しない。進行中のフレームは vision/人間の目に「欠落/静止/黒枠」と誤判定されるため（S2 フリップ途中で赤いスタンプなし、S6 走行距離計スクロール中に周期点なし、S7 タイムライン途中で人物カードなし。これらはすべて抽帧のタイミングが間違っており、最終状態のフレームを抽出するのが正しい）。字幕が存在し位置が合っていること、構図が崩れていないこと。
- 字幕位置合わせ検証：文頭フレームに字幕がすでに表示されていること、文末フレームで字幕が早く消えていないこと。
- 自動化ハード指標判定：フレーム抽出後、
python scripts/media/frame_judge.py preview/*.png --subtitle-hex <DESIGN 字幕色、例: E8833A> --subtitle-threshold 3.0 --text-bg-hex <テキストカプセル背景色、例: F2F0EB>を実行（--text-region テキストが隅にある場合、実際の位置 tl/tr/bl/br/center を指定し、下部の誤検出を防止。--text-bg-hex 既知のカプセル背景色がある場合は、直接字幕と背景の実際のコントラストを計算し、最頻値はスキップ。最頻値はシーン色を取得するため、テキストがシーンに重なる場合は不正確。大きな文字シーンのしきい値は 3.0 / 本文は 4.5。いずれかが FAIL の場合は修正をトリガー）。オプションでpip install iqa-pytorch後、NIMA 美観スコアを追加（>6.5 は参考レベルとして記録）。指標のしきい値はreferences/video-quality-metrics.mdを参照。暗色デザインの輝度 FAIL はブロックしない（メトリクスの暗色デザイン説明を参照。コントラストを優先）。 - 各抽出フレームをチェックリストで確認（弱点 <3 で修正トリガー）：
- 構図：≥2 の視覚要素。すべてのシーンで中央配置ではない。階層 z 順序が正しい（bg/mid/fg）
- 字幕：存在し位置が合っている。可読性がある（コントラスト ≥3:1）。破損文字なし
- トランジション：文間にトランジション/登場アニメーションがある。単なるカットや静止ではない
- アセット：AI による文字化けなし。階層が §8.1 に従っている。透明オーバーレイがクリーン
- アニメーション：少なくとも2種類のアニメーションがその場にある（アセットの登場/退場 + フォント + 背景から2つ選択）。背景にアニメーションがある
- AI 臭くない：
video-anti-slop.mdの逆プロンプトと照らし合わせる
- 遮蔽チェック + ビジュアルモード確認（
paper-collage-videoの spatial-contract を参考に、2026-08-16 拡張）：フレーム抽出後、文ごとに確認——①大きな文字カプセルが予約領域（上部余白）にある ②主要被写体が大きな文字/字幕領域を圧迫していない ③前景が中景/後景の主要被写体を遮蔽していない ④カードアニメーションとシーン画像が重なっていない：完全な画面カード（走行距離計/メーターパネル/パーティクルカラム/スポットライト暗所）は、絶対にシーン画像の重ね合わせとしない（ビジュアルモード3択、DESIGN §8.2 を参照）。⑤アニメーションの意味が文の意味と呼応している（vision でパーティクルカラム/スキャンライト/デジタルスクロールがそのシーンで何を表現しているか、ナレーションの意味と一致しているかを判定。意味不明の場合は修正トリガー）。遮蔽/意味不明 → ビジュアルモードを変更するか、不要なカードを削除。 - 4スキル審査のハードゲート（いずれかのゲートを通過できない場合は修正。参考ではない）：サブエージェントで独立して実行（hallmark/taste は独立したエージェントが実行。メインモデルが自己審査・自己通過しない）——
taste-skillPre-Flight（40 項目以上のテイストチェック）hallmark audit（57 ゲートによる AI slop 対策）ui-ux-pro-max（UX ガイドライン：可読性/階層/一貫性）open-design/anti-ai-slop（「7つの大罪」テンプレート排除） スチルフレーム/完成品に対して審査。通過項目数をスコア化して通過判断（審査者が補足。自己審査・自己通過を防ぐ）：hallmark 57 ゲートを ≥90%（≥51 項目）通過で通過、taste 40 項目以上を ≥85% 通過で通過、ui-ux-pro-max / open-design の重要項目はすべて通過。未通過項目をリスト化し修正をトリガー。すべてのゲートを通過してからレンダリングして納品。
npx remotion render <id> out/final.mp4。- 動作証明の瞬間（
paper-collage-videoの proof moments を参考）：DESIGN §8.2 に従い、各文の証明瞬間（文頭/中盤/0.82 最終状態）のフレームを抽出 + 動作タイプが実際に発生していることを検証（登場が発生済み/継続して動作中/最終状態で静止）。ffmpeg -vf "fps=4"で連続フレームを抽出 → vision で動作が DESIGN 通りに発生しているか判定——平行移動の1フレーム静止 = 動作証明ではない（パーティクル/スポットライト/デジタルは連続フレームで確認が必要）。トランジションがスムーズ/登場・退場にジャンプなし（video-quality-metrics §四.6）。 - 音声同期確認（ナレーションビデオの主軸、審査者が補足）：完成品で
python scripts/media/audio_sync_check.py out/final.mp4 public/captions.srtを実行——各文の srt 文頭 ±0.15 秒に音声があること（RMS ≥0.01）。文頭が無音 = 音声の位置ずれ/欠落/文末の途切れ → 修正。 - 検収基準を項目ごとに確認 → STATUS PASS/FAIL/BLOCKED、NEXT_OWNER。
レッドライン
- 字幕駆動はハード制約：captions.srt が存在する場合、それがタイムラインの唯一のソースであり、尺はそこから導出される。
- フレーム抽出後にレンダリング：スチルフレームが合格しなければ全編をレンダリングしない。
- ショットカードの流用は必須ではない：DESIGN §8 でカードを選択した場合のみ組み込む（
shotcraft/demos/{class}/{card}をコピーして適合）。カードが選択されていない場合、または中国語作品で「借思路（アイデアを借用）」を使用する場合は、欠落とはみなさない。カードが組み込まれていなくても BLOCKED にはならない。 - アセットは実際の画像生成を使用し、SVG は生成しない：主要な被写体アセットは、Codex または既設定の画像バックエンドを優先。透過が必要な場合は
--transparent/remove_white_bg.pyを使用。 - プログラムによるデータカードは、shotcraft の完全版を実際にコピーすることを優先し、手書きの簡略化 SVG は使用しない（実践教訓 2026-08-17）：自作のデータカード（メーターフェイス/リング/走行距離計/チャート）を手書きの簡略化 SVG（生の circle/line/path、目盛り/赤色領域/ハブ/グローの詳細なし）で作成すると粗くなる（S9 リングの手書き版は mmx vision 3.5/10、実際に shotcraft NeedleSweepSelftest の完全な詳細をコピーした後は 8.5/10）。データカードは、すべて shotcraft demos/data、typography から完全版を実際にコピーする（目盛り/主従/グロー/メーターハブ/針の先端など、すべての詳細を含む）。その後、配色を変更する。単純な装飾（背景の光の斑点/下部レール）のみ、プログラムで描画する。
- 音声駆動による srt 再構築は必須（Step 1.5、音声生成後にフレーム抽出）：ナレーションビデオでは、Step 1.5 で必ず TTS → ffprobe → srt 再構築によるタイムライン確定を行う（タイミングは TTS 実測値に基づく。DESIGN §4）。フレーム抽出と検収は、音声再構築後の srt に基づいて行う。ユーザーに確認しない。
- 設計の方向性を変更しない：DESIGN.md で決定したら、それに従う。方向性の変更が必要な場合は、remotion-consult に戻る。
- 捏造の禁止：字幕/データを偽造しない。
参考ファイル
| ファイル | いつ読むか |
|---|---|
references/captions-guide.md | Step 1 字幕タイムスタンプの位置合わせ（コア） |
references/remotion-build-guide.md | Step 4 エンジニアリング規範 |
references/motion-patterns-video.md | Step 2/5 モーションエフェクトの実装 |
references/video-image-spec.md | Step 4 アセットルーティング |
references/codex-imagegen.md | Step 4 アセットを Codex で生成する場合 |
references/mmx-media-pipeline.md | Step 4 メディアバックエンド（MiniMax オプション + TTS/BGM フォールバックチェーン + 既知の問題点） |
references/video-quality-metrics.md | Step 5 自動化判定指標（frame_judge.py + VMAF/NIMA/ASL しきい値） |
references/hyperframes-guide.md | Step 0 レンダリングエンジン = HyperFrames の場合：HTML データ属性/GSAP/check ルール + CLI |
references/hyperframes-blocks.md | HyperFrames レンダリングエンジン時にアニメーションブロックを選択：registry blocks 154 個をカテゴリ別にクイック検索（shotcraft と同等） |
.claude/skills/remotion-shared/video-anti-slop.md | Step 3 逆プロンプトベースライン |
.claude/skills/remotion-shared/video-tokens-spec.md | theme.ts を書くとき |
.claude/skills/remotion-shared/categories/{カテゴリ}/motion-list.md | アニメーションの組み合わせを選択 |
.claude/skills/remotion-shared/video-shots-spec.md | ショットレシピカード体系 + 信頼できるテクニック（build 時のショットカード選択：demos/{class}/{card} をプロジェクトにコピー） |
.claude/skills/remotion-shared/aesthetic-judgment/ | Step 5 検収：撮影/編集/フロントエンドレイアウトの6軸判定（<3 で修正トリガー） |
.claude/skills/ui-ux-pro-max/SKILL.md | デザインルールエンジン：Step 4 構築時に UX ガイドライン + 優先順位を確認 |
.claude/skills/taste-skill/SKILL.md | Step 5 最終チェック：Pre-Flight 40 項目以上（納品前の自己チェック） |
.claude/skills/hallmark/SKILL.md | Step 5 デザインレビュー：57 ゲート / hallmark audit（検収前） |
资料库/AI工具/design-skills/open-design/craft/anti-ai-slop.md | Step 3 テンプレート排除ルール（「7つの大罪」）+ 151 デザインシステム代替案 |
.claude/skills/design-shared/review-panel.md | レビューパネル：agency-agents の視点 + デザインシステムライブラリ/美的リファレンスライブラリの判断基準（Step 5 検収スコアリング） |
出力とクロージャ
STATUS: PASS | FAIL | BLOCKED
成果物: out/final.mp4 パス + preview/ フレーム抽出パス
検収基準: 項目ごと 達成 / 未達成 / 未解決
NEXT_OWNER: user（効果確認）| remotion-consult（方向性変更）
未確認事項: 未解決事項