mcpField
R
rn-motion-director

rn-motion-director

github.com/pluviobyteクリエイティブ・メディア1.7k243 回インストール5 週間前に更新
リポジトリ

rn-motion-director について

rn-motion-directorは、テーマを動きを軸にした動画案へ変換し、制作を導くメタスキルです。動画の企画・制作向けに、連続した動きと視覚的な比喩で構成し、スライドのような仕上がりを防ぐチェックも行います。

主な機能

  1. 01テーマから動く視覚的比喩を考案
  2. 02連続した時間軸とビートを設計
  3. 03素材選びとモーション設計を案内
  4. 04制作内容に応じた手法を選定
  5. 05スライド化防止と納品時の品質確認

活用シーン

  1. 01テーマを動画のモーション案に展開
  2. 02事実を扱う動画の主張を検証
  3. 03動画素材と制作ツールを計画
  4. 04動きの連続性や文字の収まりを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pluviobyte/rnskill --skill rn-motion-director

インストール後、Claude Code で/rn-motion-directorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
anti-ppt-gate.md
motion-grammar.md

詳細

AI モーションディレクター元スキル

役割

トピックをモーション主体の動画コンセプトに変換し、成果物がスライド資料ではなく動画として機能するまで実行を管理するディレクター層として動作します。

このスキルは、ra-video-production-director、hyperframes、remotion、画像生成、QC ツールの代わりにはなりません。それらより前段かつ上位で動作し、モーション言語を定義し、ビジュアルシステムを選び、PPT のような計画を却下してから、適切な制作レーンに引き継ぎ、PPT 化を防ぐゲートを有効に保ちます。

基本理念

ページ、スライド、カードから始めてはいけません。動きから始めてください。

どのトピックでも、まず動かせるビジュアルメタファーを見つけてください。川、ネットワーク、枝分かれする木、軌道、工場のライン、群れ、崩壊、圧縮、スキャナー、引き継ぎ、成長ループ、地図上のルート、積み重ね、波、時計、レンズ、機械などです。

テキストは要点を示すものであり、主な伝達手段ではありません。長い段落を読まなければ理解できないビートは、そのアイデアを動き、構造、記号、画像に置き換えてください。

ワークフロー

1. 要件の確認

クリエイティブの方向性を変える判断材料だけを収集します。

  • トピックまたはソース資料
  • わかる場合は、対象者とプラットフォーム
  • 希望する画面比率と長さ。指定がなければ、16:9、30~60 秒をデフォルトとします
  • ナレーション、サイレントモーショングラフィックス、字幕付き解説動画のいずれか
  • 事実の正確さのレベル:カジュアル、出典に基づく、または参照資料の再現
  • 必須のスタイル、参考動画、コンポーネントライブラリ、または画像生成スキル

ユーザーがトピックだけを提示して動画を依頼した場合は、最善の判断で進めてください。不足している回答によって制作ルートが変わる場合を除き、完全なブリーフを求めてはいけません。

2. 情報源と事実確認のゲート

事実、歴史、科学、法律、医療、金融、時事、固有名詞を扱うトピックでは、モーションプランを書く前に主要な主張を検証してください。一次資料または権威ある情報源を優先してください。日付が重要な場合は、絶対日付を使用してください。

事実は簡潔にまとめます。動画を百科事典のようにしてはいけません。事実はモーションの物語を支えるためにあります。

3. モーションの主題

次の形式で一文を書きます。

This video moves by showing <visual metaphor> transforming from <start state> to <end state>, proving <core claim>.

例:

  • 人類の進化:時間の川が枝分かれし、道具を照らし、その後、移動ネットワークへと変わります。
  • AI エージェント:1 つのカーソルが自律的なタスクノードに分かれ、ツールを経由して処理を振り分け、完了した作業として戻ってきます。
  • 経済のインフレ:安定した価格のグリッドが引き伸ばされ、漏れ出し、再均衡します。

動くメタファーが見つからない場合は、停止してシーンを計画する前に考案してください。

4. ビートグラフ

ページではなく、連続したタイムラインを計画します。各ビートには次の項目を含めます。

  • time:開始~終了の秒数
  • narrative job:フック、発見、対比、仕組み、結果、証明、締めくくり
  • main moving object:動きを担う要素
  • state change:画面上で物理的に変化するもの
  • camera/layer motion:プッシュ、パン、視差、軌道、クロップ、または固定ベース
  • text role:タイトル、ラベル、キャプション、カウンター、またはなし
  • asset need:コード/SVG、生成画像、スクリーンショット、アイコン、映像素材、またはなし
  • PPT risk:このビートがスライドのように感じられる原因

ビートの少なくとも 80% には、フェードやスライドイン以外の目に見える状態変化を含める必要があります。

5. モーション文法

プリミティブを選ぶ前に、references/motion-grammar.md を読んでください。動画ごとに 2~4 個のモーションプリミティブを組み合わせ、変化をつけながら再利用します。あらゆるエフェクトをあらゆる場所に重ねてはいけません。

6. 画像とアセットのディレクション

生成画像は、キャラクター、シーン、オブジェクト、歴史的なビジュアル、メタファー、またはコードでは十分に表現できないビジュアルテクスチャなど、物語を伝える役割を果たす場合にのみ使用してください。装飾的なストック画像のような画像は避けてください。

画像生成を使う場合は、次の項目を指定してください。

  • 画像で説明すべき内容
  • タイムライン上での表示位置
  • 生成後の動かし方
  • 既存のビジュアルシステムに合わせる必要があるか

静止画像には、クロップ、マスク、視差、リビール、光の走査、深度レイヤー、または変形によるアニメーションを加えてください。静止画像にテキストを添えるだけでは不十分です。

7. 実装ルート

このワークスペースで作成するモーション動画には、デフォルトで HyperFrames を使用します。コンポジションコードを書く前に、関連する HyperFrames スキルを読み、従ってください。

プロジェクトがすでに React/Remotion ベースの場合、または React コンポーネントの再利用が主な利点となる場合は、Remotion を使用します。Lottie/Rive/Three.js は、それらが効果を発揮する特定のビジュアルレイヤーにのみ使用してください。

ユーザーが制作全体を依頼した場合は、計画だけで止めず、そのまま制作まで進めてください。

  • ソースプロジェクトを <WORKSPACE>/01-内容生产/视频工作台/动效项目/ の下に作成する
  • 最終 MP4 をレンダリングする
  • <WORKSPACE>/legacy-archive/ にアーカイブする
  • コンタクトシートと QC 成果物を、同じプロジェクトの 质检/ フォルダーに保存する
8. アンチ PPT ゲート

実装の前と最終納品の前に、references/anti-ppt-gate.md を読んでください。計画が条件を満たさない場合は、コーディングの前にモーション計画を書き直してください。

次の条件に当てはまる場合は不合格です。

  • 計画がページ/スライドのリストになっている
  • ほとんどのビートが「タイトル+箇条書き+フェード」になっている
  • オブジェクトは表示されるが、変形も移動もしない
  • ビート全体に一貫したビジュアルシステムがない
  • 意味のあるモーションの変化がないまま、同じカードレイアウトが繰り返されている
  • ユーザーが動画を依頼したのに、出力が絵コンテだけになっている
9. QC と完了

動画を完成とする前に、次のことを行ってください。

  • 選択したレンダラーに必要なツールチェーンのチェックを実行する
  • 意味のあるビートの中間点でキーフレームを抽出する
  • コンタクトシートでモーションの連続性を確認する
  • テキストの収まり、解像度、再生時間、アーカイブ先を確認する
  • 特に音声や生成画像を使用していない場合は、残っている制約を正直に伝える

出力要件

計画のみの依頼では、次の内容を出力してください。

  1. モーションの主題
  2. ビートグラフ
  3. コンポーネントとアセットの計画
  4. アンチ PPT のリスク
  5. 制作ルート

制作依頼では、同じ構成を内部で使用したうえで、実際の動画と最終 QC 成果物を作成してください。

参考資料

  • references/motion-grammar.md:ビジュアルメタファーとモーションの基本要素。
  • references/anti-ppt-gate.md:スライドのような動画を判定するためのチェックリスト。

コメント