yyl-remotion-video

YYL Remotion 動画

記事、台本、メモ、または明確なアウトラインから、Remotion 動画プロジェクトを作成します。 このスキルは動画を中心に設計されています。クリック操作で進めるウェブプレーヤー、ウェブの presentation/、このワークフロー内での TTS 合成は使用しません。

コア出力

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

同梱されているスキルのリソース：

themes/       # color / typography systems
templates/    # copyable Remotion TSX starting points
references/   # craft, theme, and template guidance

実行の強度

ファイルを書き始める前に判断します：

強度	使用する場合	動作
クイック	450 文字以下、60 秒以下、テーマのテスト、デモの下書き	1 章、少数のビート、直接実装
標準	1〜4 分、通常の公開向け解説動画	台本＋アウトライン、最初の章を基準にしてから続行
厳格	4 分超、ブランド／商用／高リスクのコンテンツ	より詳細な計画、静止画の確認を増やし、章ごとのレビューをゆっくり行う

次の内容を 1 行で報告します：

I will use <Quick/Standard/Strict> because <length / risk / target>.

ワークフロー

1. 入力の確認

   • ユーザーが原文、台本、メモ、または明確なアウトラインを提供した場合にのみ進めます。
   • トピックだけが提供された場合は、素材を尋ねます。動画全体を創作しないでください。

2. コンテンツファイル

   • 原文が提供された場合は article.md に保存します。
   • 最終的なナレーション文を script.md に保存します。
   • 開発計画を outline.md に保存します。
   • outline.md では、章、ビート、画面上のコンテンツ、情報プール、アセットを計画します。
   • outline.md で、具体的なアニメーション実装方法を指定してはいけません。

3. テーマの選択

   • このスキルに同梱されたテーマのみを使用します：themes/command-film、 themes/studio-white、themes/research-desk。
   • web-video-presentation のテーマを再利用またはインポートしないでください。

4. テンプレートの選択

   • ユーザーが既知のレイアウトやアニメーションの仕組みを求めた場合は、 references/TEMPLATES.md を読みます。
   • 高級感のあるダークなポートフォリオ、3D の遠近感を使った横型カルーセル、またはプレミアムなエージェンシーギャラリーの依頼には、templates/luxury-perspective-gallery を使用します。

5. Remotion プロジェクト

   • 既存の remotion/ がある場合は再利用します。
   • 存在しない場合にのみ作成します：

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • 選択したテンプレートで Tailwind が必要な場合は、Tailwind を有効にしてプロジェクトを作成するか、テンプレートファイルをコピーする前に Tailwind を追加します。
   • remotion/node_modules が存在しない場合、または依存関係がないために Remotion のコマンドが失敗する場合にのみ、依存関係をインストールします。

6. タイミング

   • 音声を合成しないでください。
   • ナレーションと映像の複雑さから長さを見積もります。
   • デフォルトは fps = 30、width = 1920、height = 1080 です。
   • テキストは narrations.ts に保存し、推定した durationFrames は timing.ts に保存します。

7. 実装

   • 各章に取りかかる前に references/REMOTION-CRAFT.md を読みます。
   • useCurrentFrame()、interpolate()、Easing、Sequence を使ってアニメーションを作成します。
   • 主要なアニメーションに CSS transition／CSS animation／GSAP を使用しないでください。
   • Tailwind は静的なレイアウトのスタイリングには使用できますが、Tailwind のアニメーションユーティリティは使用できません。

8. 検証

   • 次を実行します：

     cd remotion
     npm run lint
     

   • 各章につき少なくとも 1 枚、または短い動画全体の場合は 2〜4 枚の静止画をレンダリングします：

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • 静止画に問題がなければ mp4 をレンダリングします：

     npx remotion render <composition-id> out/<name>.mp4
     

9. メモ

   • notes.md を更新し、fps、解像度、合計フレーム数、推定尺、確認済みの静止画、レンダリングした mp4 のパス、音声／字幕はポストプロダクションで追加することを記載します。

テーマの選択

テーマ	最適な用途	雰囲気
command-film	エージェント、ターミナル、自動化、開発者向けツール	暗く、映画のようなコマンドルーム
studio-white	SaaS のデモ、ローンチ、講座、製品チュートリアル	クリーンな白いプロダクトスタジオ
research-desk	エッセイ、レポート、論文、ビジネス分析	落ち着いた分析用デスク

テーマの詳細については、references/THEMES.md を読みます。

テンプレートの選択

テンプレート	最適な用途	雰囲気
luxury-perspective-gallery	高級感のあるポートフォリオ、製品のショーケース、3D 横スクロールカルーセル	ダークでサイバーミニマルなエージェンシー向けスライダー
charity-doodle-poster	非営利団体のポスター、手描きの動物ヒーロー、線が揺れるエディトリアルなウェブエフェクト	レトロな墨筆タッチのストップモーションポスター

各テンプレートの詳細については、references/TEMPLATES.md をお読みください。

Remotion のルール

• Root.tsx では Composition を使用します。
• タイムラインにビートを配置するには Sequence を使用します。
• モーションには useCurrentFrame() + interpolate() を使用します。
• 静的アセットは remotion/public/assets/ に配置し、staticFile() で参照します。
• 最終レンダリングの前に、静止画チェックが必要です。
• ユーザーが後処理で音声を追加しない限り、最終的な mp4 は無音です。