Communitygithub.com

kuzeyozel-1/remotion-video-pipeline

スマートフォンやカメラの生映像から、Remotionを使用して短尺プロモーションビデオ(縦9:16リール、横16:9ウェブスポット)を制作します。プロキシ生成、クリップ選択のためのコンタクトシート、ブランドテーマ設定、そして時間を浪費するレンダリングの落とし穴(トルコ語大文字、ffmpeg stdin、HEVC出力、drawtext欠如)をカバーします。ユーザーが「プロモビデオ作って」「この映像からリール」「Remotion」「tanıtım videosu」「kısa video render」などと言った場合、または実映像にコード駆動のテキスト/ブランドをオーバーレイする必要がある場合に使用します。

remotion-video-pipeline とは?

このスキルは、Remotionを使用して実際の映像素材にコードで描画したタイポグラフィを重ね、ブランドに一貫したプロモーションビデオを繰り返し編集可能な形で制作するためのパイプラインです。まず、生のクリップをインベントリし、プロキシ(軽量なH.264コピー)を生成することで、高解像度の4K/HEVCオリジナルを直接扱う際のRemotionのシーク遅延やChromeクラッシュを回避します。次に、コンタクトシートで各クリップの全フレームを1秒ごとにグリッド表示し、目視で最適なカットポイントを決定します。その後、`template/` 内で実際の映像(Footage)、テキスト可読性を高めるグラデーション(Scrim)、アニメーションテキスト(Line)を組み合わせたコンポジションを作成し、`npx remotion render` でH.264 CRF17の高品質MP4にレンダリングします。さらに、トルコ語の大文字変換問題(`text-transform: uppercase` による`i`が`İ`になる問題)、`ffmpeg` のstdin奪取、zshとbashの違い、drawtextの非対応、HTMLベースレンダラーの前景実行必須、HEVC出力の変換、携帯映像の回転処理など、実務で時間を浪費する落とし穴も詳細に解説しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kuzeyozel-1/vinci-skills/tree/main/skills/remotion-video-pipeline

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

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

ドキュメント

Remotion ビデオパイプライン

実映像 + コード描画タイポグラフィ = ブランドに沿った、誤字のない、反復編集可能なビデオ。

パイプライン

  1. インベントリ: 生クリップの一覧を作成: scripts/inventory.sh <raw-dir> > index.tsv (id, パス, 長さ, 解像度)
  2. プロキシ: scripts/make-proxies.sh index.tsv proxy/ で、幅1080、30fps、オールイントラ風H.264 (-g 15)、音声なしのコピーを作成。プロキシに対して編集・レンダリングを行う。4K/HEVCオリジナルはRemotionのシークが遅くなり、Chromeがクラッシュする可能性がある。
  3. 目視で瞬間を選ぶ: scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpg で、1秒間に1フレームをグリッド表示。シートを開き、各カットの開始秒数をメモする。
  4. コンポーズ: template/ をコピーして使用: Footage(トリミング・ズームされたクリップ)、Scrim(テキストを読みやすくするグラデーション)、Line(アニメーションテキスト)。出力ごとに1つのコンポジション(例: Main 30秒、Teaser 9秒、Spot16x9 20秒)
  5. レンダリング: npx remotion render <CompositionId> out/<name>.mp4。設定はすでにH.264、CRF 17、yuv420p。
  6. 検証: 3枚の静止画を抽出 (ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png) して確認。長さと、オーディオポリシー(無音または音楽)がクライアントの期待通りかをチェック。

落とし穴(それぞれ実際に時間を浪費しました)

  • ルート要素に lang="tr"(または適切な言語)を設定する。設定しないとCSSの text-transform: uppercase がトルコ語の i を İ(MAKİNASI、TEKLİF)に変えてしまう。最終的な文字列は大文字小文字を直接入力するのが望ましい。
  • while read ループ内の ffmpeg はstdinを奪う: 必ず -nostdin を渡す。
  • zshはbashと分割方法が異なる: set -- $p や $2:s が壊れる。スクリプトは #!/usr/bin/env bash で書く。
  • 多くのffmpegビルドには drawtextがありません。テキストはRemotionで描画し、ffmpegでは決して描画しない。
  • HTMLベースのレンダラー(例: Hyperframes)はシーン間に「薄暗い」オーバーレイレイヤーを残す場合がある。また、フェードは明示的な不透明度アニメーションで行う。これらのレンダリングは フォアグラウンド で実行する(バックグラウンドの nohup はキャンセルされる)。HEVC出力は ffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4 で変換する。
  • スマートフォン映像の回転: ffprobe で回転タグを確認。横向きコンポジションに縦向きクリップを配置する場合は objectFit: cover と明示的なクロップが必要。
  • 映像に映っているものだけを主張する。オンスクリーンテキストで仕様、容量、価格をでっち上げない。
  • 公開するリポジトリにクライアントファイルを含めない。映像とロゴはクライアントの資産。

配信チェックリストは references/checklist.md を参照。

関連スキル