Communitygithub.com

emrecv/motion-graphics-director

高速でクリーンなRemotionモーショングラフィックスとビジュアル説明動画を作成・洗練します。強力な冒頭、抑制の効いたビジュアル、ソース付きアイコンとロゴ、ElevenLabsナレーション、フレームベースの精密アニメーションを活用。コード生成動画向けであり、インタラクティブなWebアニメーションには使用しません。

motion-graphics-director とは?

このスキルは、Remotionを使用してプロ品質のモーショングラフィックス動画を制作するための「モーショングラフィックスディレクター」です。主にコード生成動画を対象とし、Webサイトのインタラクティブアニメーションには対応しません。 スキルの特徴は、開始3秒以内に視聴者を惹きつけるフック、1~3秒の視覚的ビートと8~18フレームの主要動作による高速でクリーンな動き、一つの焦点と広めのネガティブスペース、ElevenLabsによる英語ナレーション主導の説明、そして実際のブランドロゴやアイコンを使用したデザイン資産の活用にあります。背景音楽は使用せず、音声と選択的な効果音に限定します。 制作プロセスでは、まずプロジェクト情報を抽出し、冒頭のビジュアルと最初のセリフを連携させて作成。その後、ボイススクリプトを執筆し、アセットを調達、ElevenLabsでナレーションを生成。冒頭3秒と代表的なトランジションを先行して構築し、動作確認後に全体を拡張します。最終的には、フルフレームレートのプレビューをレンダリングし、指定されたレビューポイントに沿って品質を確認します。 実装上の重要な不変条件として、アニメーションはすべてフレーム番号から派生させ、CSSアニメーションや壁時計タイマー、シードなしのランダム性は排除します。また、実際のフォントとアセットが読み込まれるのを待ち、読み込んだフォントでテキストを測定します。このスキルは、Claude Code、Cursor、CodexなどのAIエージェントと連携して動作するよう設計されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emrecv/motion-graphics-director/tree/HEAD/skills/motion-graphics-director

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

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

ドキュメント

モーション グラフィックス ディレクター

メカニズムやアイデアを即座に興味深く見せましょう。以下のデフォルトのクリエイティブプロファイルは作成者の好みを反映しています。ユーザーの明確なプロジェクトブリーフがある場合はそれが優先されます。技術的な成功だけでは視覚的な成功とは言えません。

クリエイティブデフォルト

  • 最初の3秒以内にフックを仕掛ける。 驚きの視覚的コントラスト、認識可能な問題、変形、具体的なペイオフで開始する。すぐにアクションを開始する。フックの前に導入タイトルカード、ロゴのプリロール、ゆっくりとした説明を入れない。30 fpsの最初の90フレームを単独でテストする。
  • 意図的なイージングを用いた高速でクリーンな動き。 30 fpsで1~3秒の視覚的ビートと8~18フレームの主要動作から始め、ナレーションと理解度に合わせて調整する。これらは必須のカットではなく、開始範囲である。完成したシーンを保持するのではなく、思考を前進させる。因果関係のあるシーケンスを理解可能に保つ。
  • 1つの焦点と広めのネガティブスペース。 白いスペースは、暗い背景も含めて、余白を意味する。控えめなニュートラルまたはミュートカラーを使用し、ネオンやグロー、装飾的な境界線や輪郭線のあるカードは使用しない。控えめなコーナー半径(1080 px幅のミディアムパネルで約12~24 px)を使用し、比例させる。
  • ナレーションが説明を担う。 デフォルトは英語で、ElevenLabsの音声オーバーを使用する。大きな見出し、段落、定型の字幕、ステップカウンター、チャプターラベル、プログレスバー、装飾的なブランドヘッダー、警告/免責事項のオーバーレイを避ける。動いているものを識別するのに役立つ場合に限り、1~4語の短い見出しやラベルを許可する。出典、注意事項、実装メモは配信ドキュメントに残し、フレームを乱雑にせずにナレーションを正確にする。要求があった場合にのみ、別のキャプションを提供する。
  • デザインされたアセットを使用する。 1つの一貫したパックからクリーンでモダンなアイコンを入手し、公式ブランドリソースから実際の関連する製品ロゴを入手する。汎用的なプレースホルダーのSVGアイコンや偽のロゴを考案しない。光学サイズ、ストロークの太さ、スタイルを一致させる。icons-and-logos.md に従う。
  • 背景音楽は使用しない。 音声と選択的な効果音を使用する。効果音は重要なイベントをマークし、音声よりも音量を低く保つ。Bencho は依存関係ではなく、そのアセットは含まれない。

プロジェクトから作業を開始する

既存のソース、アセット、スクリプト、ロックされた依存関係、以前の決定事項を検査する。新しいRemotionプロジェクトの場合、python3 <skill>/scripts/new_project.py <new-directory> を実行し、そのディレクトリで npm ci を実行する。バンドルされたプロジェクトは、テスト済みのレンダリングおよびメディアヘルパーを提供する。その FORM および CDN コンポジションは現在のアートディレクションの例ではなく、レガシーな技術例です。それらのロングショット、見出し、ラベル、色、アイコンの描画を新しい動画にコピーしない。

コンテンツ、ビジュアルトークン、ナレーション、アセット、タイミングは個別に編集可能に保つ。最終レンダリングにはローカルメディアとロードされたフォントを使用する。馴染みのないAPIについては公式Remotionスキルを参照し、サイレントアップグレードではなくインストールされているバージョンに合わせる。

制作

  1. 視聴者、1つのポイント、プラットフォーム、時間、参考資料、アセット、言語、音声を抽出する。デフォルト: 1080 × 1920、30 fps、約20秒。不足している情報のみを尋ねる。
  2. 冒頭のビジュアルと最初の話すセリフを一緒に作成する。長さが可変のビートを持つ短い因果的なショットリストを計画する。art-direction.md を読む。プロセスの説明には technical-explainers.md も読む。技術的な主張を一次ソースに対して検証する。
  3. スタイルが未定の場合、代表的なスタイルフレームを使った2つの真に異なる方向性を示す。ユーザーがすでにルックを選択している場合は、そのまま進める。ルーチン化された承認ゲートを導入しない。
  4. 簡潔な音声スクリプトを作成し、アセットを調達し、audio.md に従う。編集を確定する前に、承認されたElevenLabsナレーションを生成またはインポートする。アクセスまたは音声選択がない場合は、スクリプトとアニマティックを準備する。プレースホルダーのタイミングを明確に特定し、完成したナレーションをでっち上げない。
  5. 冒頭の3秒と1つの代表的なトランジションを構築する。motion-and-remotion.md を使用する。フックと動きが機能したら動画を拡張する。すべてを繰り返しレンダリングするのではなく、影響を受けるシーンを修正する。
  6. review.md でレビューする: 冒頭のフック、ペース、因果関係の明確さ、控えめな構成、スピーチとの一致、選択的な効果音、音楽なし。最終MP4の前にフルフレームレートのプレビューをレンダリングする。

実装の不変条件

アニメーションは、イージングやオーディオエンベロープを含め、フレーム番号から派生させる。自律的なCSSアニメーション、壁時計タイマー、シードなしのランダム性は禁止。独立したフレームレンダリングとスクラブが一致する必要がある。実際のフォントとアセットを待つ。ロードされたフォントでテキストを測定する。長いテキストを無差別に縮小するのではなく、再構成する。

速いことは突然を意味せず、イージングはバウンドを意味しない。制御された加速と落ち着き、調整されたオーバーラップ、直接カットを状況に応じて使用する。静止画やピーク測定のみに基づいてエクスポートを見たり聞いたりしたと主張しない。

納品と改善

再生可能な動画、編集可能なプロジェクト、アセットの出典、実際のチェックの簡潔な記録を納品する。ドキュメントは動画自体に含めない。スキルの変更には evaluation.md を使用する。保証された品質や速度を主張するのではなく、観察された失敗からルールを改善する。

関連スキル