Communitygithub.com

Uerdong/remotion-explainer-video

Remotion を使用して中国語の解説アニメーション長編を制作するための完全なパイプラインです。トピックの分析、ナレーションの圧縮、TTS 音声合成、SRT 字幕生成、BGM のビート分析とスナップ、画面カットのビートへの吸着、コード合成効果音、TSX プロジェクト構築、静止フレームチェック、レンダリングとデュアルバージョン納品、カバー/説明/タイトルなどの公開用素材作成をカバーします。ユーザーが解説・知識・原理説明アニメーションの制作、Remotion を使った横長 MG 動画、BGM のビートに合わせたカット割り、ナレーションに字幕を付けた完成品、既存の動画のアートスタイル変更(例:白背景フラットからダーク映画風)、または完成品用のカバーと公開用テキストの作成を依頼した場合に使用します。

remotion-explainer-video とは?

このスキルは、Remotion を使用して中国語の解説アニメーション長編を制作するための完全な10ステップパイプラインを提供します。トピックの分析、ナレーションの圧縮、TTS による音声合成、SRT 字幕生成、BGM のビート分析とスナップ、画面カットのビートへの吸着、コード合成効果音、TSX プロジェクト構築、静止フレームチェック、レンダリングとデュアルバージョン(BGMあり/なし)納品、カバー/説明/タイトルなどの公開用素材作成までを網羅します。Claude Code や Cursor などの AI エージェントと連携し、ユーザーの要求に応じて一貫したワークフローを実行します。特に、BPM の実測、すべてのカットポイントのビートへの吸着、決定論的レンダリング、単一のタイムラインソース、3層オーディオ分離など、10の鉄則に従い、高品質で効率的な動画制作を実現します。Windows 環境の制約(例:`--props` はファイルで渡す)にも対応しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Uerdong/remotion-explainer-video/tree/HEAD/remotion-explainer-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

中文科普动画(Remotion 全流程)

順番に10ステップを実行します。各ステップの成果物は次のステップの入力となります。ステップを飛ばして後から戻ることは禁止です。

十条の鉄則

  1. 尺はナレーションで決まり、文案で決まらない。 参考文案は意図を示すものに過ぎません。まず実測の話速(中国語TTSは約3.3文字/秒)で総尺を推定します。目標尺を超える場合は文字数を減らし口語に変更し、その後セグメントごとに合成・実測します。
  2. BPM は必ず実測し、ユーザーや参考資料の数値を鵜呑みにしない。 librosa は104 BPM を51.7(半分)と報告することがよくあります。自己相関や onset パラメータを変えて独立に検証し、聴感と一致する値を採用します。
  3. すべてのカットポイントをビートに吸着させる。 段落境界 = その段落のナレーション終了時刻を最も近いビートに切り上げて吸着。フレーム番号 = round(beat * (60/BPM) * FPS) をコードにハードコードし、実行時計算は行いません。
  4. 決定論的レンダリング。 Date.now()、Math.random() は禁止。すべてのアニメーションは Math.sin(frame) から導出。同じフレームは何度レンダリングしてもピクセル単位で一致しなければなりません。
  5. タイムラインは単一の情報源とする。 段落、フレーム番号、ナレーションオフセット、SFX の固定フレームはただ一つの timeline.ts にのみ存在します。文案の文字数を変更した場合は → 生成スクリプトを再実行 → TS を同期し、決して二箇所を手動で編集してはいけません。
  6. 字幕の改行は句読点で区切ってボックスに詰める。 まず ,;:。 で節に分割してからボックスに詰めます。行幅は固定ピクセルコンテナ(例:width: 1460 + whiteSpace: "pre")を使用し、maxWidth に頼って内容からコンテナサイズを逆算させるのは禁止です。
  7. オーディオは3層に分離: BGM、ボーカル、効果音はそれぞれ独立したレベルとします。ボーカル 0.8、BGM 0.24 を初期値とし、レンダリング後に実測ピークを確認、0.95 を超えるとクリッピングのリスクがあります。
  8. 各ショットは静止フレームレンダリングでチェックする。 npx remotion still を使用してフレームごとに構図を確認します。確認せずに全編をレンダリングするのは手戻りを意味します。
  9. Windows の3つのハード制約: --props はファイルで渡す(--props=props-nobgm.json)。インラインJSON はシェルで引用符が剥がされます。ffmpeg 9 では -vsync ではなく -fps_mode passthrough を使用。TSX 変更後にスタイルが反映されない場合は、まず node_modules\.cache を削除します。
  10. まず納品し、それから評価する。 レンダリング済みの動画と生成済みの画像は、まずそのままユーザーに納品します。問題は記録して説明するのみとし、勝手に再生成してはいけません。

10ステップパイプライン

#ステップ主要なアクション成果物
1トピック分析知識チェーン、目標尺、アスペクト比、対象視聴者向けトーンを決定一行トピック + 尺/アスペクト比の合意
2ナレーション文案「フック→モデル→推論→結論→示唆」に沿って目標文字数に圧縮、口語に変更セグメント化された文案(約6セグメント、各50–70文字)
3音声合成セグメントごとに独立して合成、同一音色・同一パラメータ。各セグメントの実測尺と f0 を計測s1..sn.wav + セグメント尺テーブル
4字幕セグメント尺から SRT を生成、画面カットと同期subtitles.srt
5BGM楽曲選定または自作、BPM とビートテーブル実測。不適切な場合は変更bgm.wav + bgm.json(beats_sec)
6タイムライン再構成段落境界をビートに吸着、総フレーム数を計算timeline.json + timeline.ts
7効果音主要なアクションごとにサウンドを割り当て、コードで合成、ビートに固定sfx/*.wav + 固定フレームテーブル
8画面エンジンtheme / components / timeline + セグメントごとのシーンコンポーネントRemotion プロジェクト
9セルフチェックレンダリングセグメントごとの静止フレーム → 全編 → 実測ピークout/*.mp4、QA 静止フレーム
10公開用素材カバー(コードレンダリングまたはデザインツール)、タイトル、説明、ハッシュタグカバー画像 + 发布文案.md

コンフリクト解決の判断

コンフリクト対応
文案の文字数と目標尺の不一致文案を圧縮し、尺は変更しない。 圧縮率が1.3を超える場合は口語の短い文に変更し、すべての知識ポイントは保持する
ユーザー指定の BPM/尺と実測値の不一致実測値を採用し、差異を積極的に伝える(例:「仕様書では110 BPM / 58s、実測では104 BPM / 53.65s」)。さらに「仕様に合わせて再構成するか」の選択肢を提示する
ユーザー指定の楽曲スタイルが合わないまずその楽曲の BPM / スペクトル / ピークを実測してデータを示し、その後代替を自作する。納品時に逸脱理由を開示する
参考ビジュアル仕様とカバーやプラットフォームのスタイルの衝突二つは分けて扱う:本文はユーザーのビジュアル仕様に従い、カバーはカバープラットフォームの伝播ロジックに従って制作し、そのトレードオフを説明する

納品物リスト

  • 完成動画デュアルバージョン:BGMあり / BGMなし(プラットフォームが楽曲ライブラリを提供する場合は後者を使用)。同一フレーム数、同一尺
  • 字幕 SRT(外部ファイルとしても、画面内蔵としても一致)
  • 納品説明書:完成動画テーブル、BPM とビート情報、段落境界テーブル、ビート吸着ポイントテーブル、文案、効果音テーブル、ミキシングレベル、プロジェクト構成、実行コマンド
  • カバー(横長 + 対象プラットフォームの縦長)、タイトル複数案、説明複数バージョン、ハッシュタグ

参考ファイル

関連スキル