Communitygithub.com

Motion Edits(モーションエディット)

Remotionエンジンを使用して、高品質なモーショングラフィックス動画、説明動画、ショートフォーム編集(Reels/Shorts/TikTok/YouTube)を任意のアスペクト比でMP4としてレンダリングするスキルです。

Motion Edits(モーションエディット) とは?

このスキルは、82本のプロフェッショナル編集動画のフレームレベル分析に基づくRemotionエンジンを搭載し、高品質なモーショングラフィックス動画を生成します。12のスタイルファミリーから選択・組み合わせが可能で、スタンドアロンのモーショングラフィックスとユーザーのフッテージ編集の2モードに対応。9:16、16:9、1:1など任意のアスペクト比でレンダリングでき、フッテージ分析、カットアウト、マット、字幕、トランジションなどのツールも完備。Claude Code、Cursor、CodexなどのAIエージェントと連携し、設計からレンダリング、レビューまで一貫したワークフローを提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/highontrading/motion-edits-skill/tree/HEAD

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

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

ドキュメント

モーションエディット

このスキルは、完成されたプレミアムなモーションビデオを生成します。以下の4つから構成されます:

  • ルールと数値:82本のリファレンス編集からフレームごとに測定(references/)
  • 12のスタイルファミリー:選択・組み合わせ可能(references/styles/)
  • Remotionエンジン(remotion/):JSON VideoSpec をレンダリング。各節が1シーンに対応、計測されたイージング、勢いを維持したカット、ワード同期タイプ、プロシージャルテクスチャ、フィルム仕上げ
  • ツール:ナレーション、ビート、フッテージ分析、カットアウト、マット、レンダリング、QA(tools/)

1本の動画内で混合可能な2つのモード:

  • スタンドアロンモーショングラフィックス:フッテージ不要。タイポグラフィ、カットアウト、UIモックアップ、チャート、カウンター、パーティクル、テクスチャで構成
  • フッテージ編集:ユーザーのクリップを基盤に。テンポ調整、ズームイン、字幕、キーワードスラム、Bロールカード、被写体の背後にテキスト配置、グレーディング、トランジション追加

任意のアスペクト比:スペックの width/height を設定(デフォルトは9:16 1080×1920、16:9、1:1、4:5なども動作)。

最初に読む

  1. references/playbook.md:ルール。毎回必ず読むこと。
  2. references/engine-spec.md:すべてのスペックフィールド、レイヤー、トランジション、レンダリングコマンド。スペックを書く前に読むこと。
  3. references/styles/README.md:スタイルファミリーを選び、そのファミリーのファイルを読む(同ファイル内のサンプルスペックが良い出発点)。

判断が必要な場合の詳細資料:

  • script-structure.md:ジャンルテンプレート、フック、節→シーン→プロップのルール、実例
  • motion-language.md:イージング、フレームレート、ペーシング、同期数値
  • transitions.md:63種類のトランジション(フレーム数付き)とその構築方法
  • typography-color.md:タイプクラス、組み合わせ、サイズ、セーフゾーン、パレット、仕上げ量
  • sound-design.md:BGM、ダッキング、効果音配置、ビート同期、音楽のみの編集
  • footage-editing.md:統合モード、ズームイン、モンタージュ、字幕、2つの実例フッテージスペック
  • engine-gaps.md:エンジンでまだできないことと回避策
  • breakdowns/vNN.md + breakdowns/_TAXONOMY.md:ショットごとの証拠。タグで検索(grep -l "text-behind-subject" references/breakdowns/*.md)

完全な動作例(スクリプト→仮ナレーション→スペック)は remotion/src/specs/examples/zeigarnik.json(スクリプト:work/zeigarnik.script.txt)にあります。

ワークフロー

0. セットアップ(環境ごとに1回)

cd remotion && npm install
pip install faster-whisper librosa opencv-python-headless "rembg[cpu]" piper-tts pillow numpy

ffmpeg が必要です。librosaがセグメンテーションフォールトでクラッシュする場合は、NUMBA_CACHE_DIR=/tmp/numba_cache を設定してください。

1. ブリーフィング

以下の情報を取得するか、停滞せずに適切なデフォルトを選択:

  • トピックまたはメッセージ
  • プラットフォームとアスペクト比
  • 長さ(ショート:20~45秒)
  • ナレーション:ユーザーのVOファイル、ナレーション用スクリプト、またはなし
  • フッテージまたは写真
  • ブランド(パレット、フォント、ロゴ)
  • トーン
  • バージョン数

ユーザーがトピックのみを指定した場合は、自身でスクリプトを作成します。

2. スクリプト→節シート

script-structure.md を使用。最初の文でフック(8~15単語、最初の3単語で衝撃)→設定→転換→16~40%で名前付き原則→証明→アンチテーゼの教訓→CTA(最後の10~14%、2.5秒以上)。節に分割:1節=1シーン≒6単語≒2~2.8秒。各節について以下を記録:

  • 名詞に対する文字通りのプロップまたは画像
  • キーワード:タイポグラフィになる1~3単語
  • デバイス:バッジ、カウンター、UI、チャート、落書き、スワップ、パーティクル
  • カットイン

3. ナレーションとタイミング

  • ユーザーVO:python3 tools/transcribe.py vo.mp3 remotion/public/<proj>/vo.words.json
  • VO未提供:python3 tools/tts.py script.txt remotion/public/<proj>/vo.wav --speed 1.15 --words remotion/public/<proj>/vo.words.json でオフライン仮ナレーションを生成。ユーザーにはプレースホルダーであることを伝え、後で自身のVOで置き換え可能であることを説明。単語参照は再文字起こし時に自動的に再同期される。
  • 音楽主導またはVOなし:python3 tools/beats.py music.mp3 remotion/public/<proj>/beats.json を実行し、"beats" を設定して {beat|downbeat|onset: n} 参照と snap を使用。
  • シーン開始:各節の最初の単語に {"word": "...", "offset": -0.06} を設定。シーンの単語参照は順に解決されるが、同じ単語が直前にも出現する場合は複数単語参照("why writing")を使用。キーワードには sync または at: {word} を使用。

4. ビジュアル

1つのスタイルファミリーを選択(styles README)。その後、以下を確定:

  • パレット:シーンごとに巡回するフィールドカラーと、固定意味を持つ1~2のアクセント
  • タイプペアリング:太いディスプレイボイスとささやきのような軽いボイス
  • animFps:コラージュ/エディトリアルは15、ラフプリントは12、UI/3D/映画的なものは0
  • 仕上げ:グレイン+ビネット、印刷風にはハーフトーン
  • 1つのシグネチャートランジション(繰り返し使用)と1~3のサポートタイプ

5. アセット

  • フッテージ:
    • python3 tools/analyze_footage.py clips/*.mp4 --out work/footage.json --sheets work/sheets を実行し、シートを確認
    • tools/tighten.py で無音部分を除去
    • tools/matte.py で被写体マットを作成(テキストを被写体の背後に配置するため)
  • 写真: python3 tools/cutout.py photos/* --out remotion/public/<proj>/cutouts --trim を実行し、image として cutout: true で使用。タイポグラフィの z をカットアウトよりも低く設定すると、背後に配置できる。
  • アセットなし: タイポグラフィ、プロシージャル背景、UIモックアップ、チャート、カウンター、シェイプ、パーティクル、embed を使用。リテラルなオブジェクトが不可欠な場合のみ、remotion/src/custom/ にカスタムコンポーネントを作成。
  • ユーザーが提供または権利を持つロゴ、肖像、音楽、効果音のみを使用。テクニックを学ぶことはあっても、クリエイターのブランディング、キャラクター、エンドカード、スクリプトをコピーしてはならない。

6. スペックを書く

work/<proj>.spec.json を {"spec": {...}} として記述。選択したファミリーのサンプルから始める。アセットは remotion/public/<proj>/ に配置。記述中にプレイブックのチェックリストを適用。

7. プレビュー、レンダリング、レビュー、修正

  1. まずスチル:
    cd remotion && npx remotion still src/index.ts MotionVideo /tmp/f.jpg --frame=N --props=../work/<proj>.spec.json --scale=0.4
    
    各シーン1枚(シーン中間フレーム)を取得、タイル表示し、オーバーフロー、コントラスト、煩雑さ、空フレームを確認・修正。
  2. レンダリング:
    python3 tools/render.py work/<proj>.spec.json out/<proj>.mp4
    
    --draft を追加すると半解像度プレビューに。グレインとハーフトーン仕上げはffmpegで適用され、非常に高速。
  3. レビュー:
    python3 tools/review_render.py out/<proj>.mp4 out/review/
    
    コンタクトシートとカットストリップを確認。カットが節の開始位置にあること、0.5秒未満で読めない部分がないこと、1.5秒以上の死の伸びがないこと、壊れた部分(空白レイヤー、黒ギャップ、エッジ露出)がないことをチェック。
  4. 修正して再レンダリング。MP4を短いショットリストとともに納品し、ユーザーが置き換えるべきもの(仮ナレーション、プレースホルダーアセット、音楽)を伝える。

8. バリエーションとシリーズ

  • バリエーション: スクリプトを維持し、スタイルファミリー、パレット、タイプペアリング、シグネチャートランジション、テクスチャ、フックデバイスを変更。それぞれをレンダリング。
  • チャンネルシリーズ: キット(パレット、タイプペアリング、仕上げ、オーバーレイバッジ、CTAカード、2~3のシグネチャートランジション)を固定。remotion/src/specs/kits/<channel>.json に保存し、すべてのエピソードをそこから開始(kits/README.md 参照)。

不確かな場合のデフォルト

  • フォーマット: 1080×1920、30 fps。
  • スタイル: 説明動画には halftone-poster-collage、ビジネス/テックには native-ui-explainer、ツールには dark-product-promo。
  • モーション: animFps 15、settle 1.10(デフォルト)、シーン 1.2~2.8 秒。
  • タイポグラフィ: キーワードは impact/bebas でサイズ18~30、serif-italic または script のささやき単語を併用。stitched バッジを深いアクセントで。
  • カット: シグネチャーは zoom、パンチインには cut、リビールには flash または invert、CTAには circle。
  • 仕上げとオーディオ: grain 0.07、vignette 0.35。音楽は musicVolume 0.3 で duckTo 0.12。

関連スキル