Communitygithub.com

apariciojunior/video-editor-skills

クリエイター向け動画のブランドモーショングラフィックス - Remotionコンポーネントキット。ビートシートからクリエイターの言葉に合わせてタイミングを調整し、透明ProResとしてレンダリングしてDaVinci ResolveのV2以降に配置。顔やキャプションと被らないレイアウト。

video-editor-skills とは?

このスキルは、Remotionを使用してクリエイター向け動画にブランドモーショングラフィックス(キーフレーズ、リスト、ローワーサード、旅程、大きな単語など)を追加するためのものです。クリエイターの音声や映像を編集せず、グラフィックをオーバーレイとして追加します。`Beat` という単一のコンポジションで、brand.jsonのトークン(色、フォント、サイズ、パディング、モーションタイミング)を読み取り、一貫したデザインを実現します。ローワーサード、キーフレーズハイライト、リスト表示、比較、カウントアップ、引用、ビッグワード、コメントプロンプト、Vlog用オープナーなど多彩なコンポーネントを備え、クリエイターが好むスムーズなイーズインアウトの動きを提供します。ワークフローは、タイムラインの特定、言葉とフレームのマッピング、ビートの計画と承認、beats.jsonの作成、透明ProRes 4444でのレンダリング、DaVinci ResolveのV2以降の空きトラックへの配置という手順に従います。顔とキャプションの干渉を防ぐため、実際のフレームでチェックする工程が必須で、問題があればキット側で修正します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/appariciojunior/video-editor-skills/tree/HEAD/skills/motion-overlays

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

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

ドキュメント

モーションオーバーレイ(Remotionキット)

クリエイターのカットが承認され、通常はクリエイター自身が再編集します。あなたは上にグラフィックを追加します。クリエイターの映像と音声は一切変更しません。

キット

Remotionプロジェクトで、1つのコンポジション(Beat)を持ち、propsから受け取った任意のコンポーネントをタイムラインのサイズとフレームレートで透明にレンダリングします。各コンポーネントはブランドトークンファイル(brand.json:色、フォント、1080高さ単位のサイズ、パディング、モーションタイミング)から全ての値を読み取るため、一箇所を変更するだけで全体の見た目が変わります。代表的なセットは以下の通りです。

コンポーネント用途
LowerThird名前+役割、初登場時
KeyPhrase要点を伝える文(*単語* = ハイライト)
ListReveal / Flow発言に合わせて出現する項目や手順
Compare / BeforeAfter2つの側面、変化
CountUp発言された数字
Quote / PersonalNote強い一言、意見
BigWord1つのアイデアを全画面で1~2秒表示
CommentPromptコメントを促す質問
VlogOpener, PlaceTime, Journey, TimeJumpVlog用タイトル、場所/日時、移動A→B、「3時間後」など
TitleCard / EndCard / ChapterTag構造用(依頼があった場合のみ)

クリエイターに好まれたモーション:要素ごとに1回のスムーズなイーズインアウト、スライドイン→静止→スライドアウト。ポップやバウンスはなし。大きなサイズではライトまたはレギュラーウェイト、モノスペース大文字ラベル、十分なパディング。

毎回の手順

  1. どのタイムラインか(テンプレートは不可)。
  2. そのタイムライン上で、言葉をフレームにマッピング(V1項目を確認:ソースのインポイント、タイムライン開始 → 保持する各単語のタイムライン時刻)。
  3. ビートを計画し提案する(時刻・コンポーネント・コピー)、承認を待つ。おおよそ30~60秒ごとに1ビート。コピー = クリエイターの言葉、数字はそのまま、名前はWebで確認、創作なし、秘密にしたい内容なし、正しいストーリーの方向性(「~へ旅行」 vs. 「帰ってきた」)。
  4. beats.json:id、component、at_word(またはBロールの場合はat_seconds、単語がない場合)、end_word / seconds、項目のat_wordキューを含むdata。
  5. レンダリング(透明ProRes 4444;全画面コンポーネントは大きく、約16ビートで数GB)、確認、その後V2以降の最初の空きトラックに配置。
  6. オーバーレイSFX:デフォルトではオフ。クリエイターが好む場合のみ(控えめなウィッシュ音程度)。

配置前に実際のフレームで確認(必須)

カメラファイルから各ビートの下のフレームを取得し、オーバーレイ静止画をレンダリング、合成して確認します。さらにキャプションバンドも描画します。これにより以下の問題を発見できます。

  • 顔: 16:9用に設計されたパネル(右3分の1空き)が4:3の自撮りフレームで顔を覆う。キットでの修正:フレームが16:9より狭い場合、サイドパネルを全体として幅の外側約34%、端から80pxにスケールし、全画面タイプは16:9の比率に保ち、あごの下に収まるようにする。
  • 溢れ: 11項目のリストはスケールしないと収まらない。約11項目を超える場合は別のレイアウトが必要。
  • キャプション: 下部に固定された要素(オープナー、ビッグワード、ローワーサード、旅程)が字幕バンドにかぶる。キットでの修正:caption_band_top_at_1080のようなトークンを使用し、すべての下部オフセットを = max(自身の値、バンド上部) とする。
  • 未亡人(Widows): ハイライトされた単語の後に「.」があると、ドットが単独の行に折り返される。キットでの修正:句読点をハイライトの最後の単語に接着(nowrap)し、表示テキストに text-wrap: pretty を使用。

レイアウトの問題はキット内で修正し、動画ごとには決して行わない。これにより将来のすべての動画が修正を継承する。

ビートの置き換え

ビートを変更し、新しいID/ファイル名(-v2)でレンダリングし、あなたの古いクリップを削除して新しいものを配置する。再実行時は、すでに配置されたビートはスキップし、クリエイターが削除したビートを許可なく再追加しないこと。

報告

ビートごとに1行(時刻、コンポーネント、画面コピー)、キットで修正した内容、および問題のある箇所(小さなテキスト、顔の近くなど)。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル