Remotion Motion Director
このスキルは、コード品質と同程度に動画品質が重要である場合に使用します。単なる「動くアニメーション」ではなく、明確なクリエイティブ根拠に基づいた洗練されたモーションワークを生み出すために設計されています。
使用すべきケース
- ユーザーがプレミアムでブランド主導のRemotion動画を求めている場合。
- ユーザーが汎用テンプレートを超えた精密なスタイル制御を必要としている場合。
- プロジェクトにおいて、ストーリーボード優先の実行と反復的な批評ループが必要な場合。
- リクエストにAppleのような洗練感、映画的なモーション、またはハイエンドな広告表現が含まれている場合。
使用すべきでないケース
- デザインの方向性を必要としない、単発の技術的な修正。
- Appleの商標、製品ショット、広告スクリプトをそのままコピーするリクエスト。
必須ワークフロー
- 制約条件を収集する:
references/brand-control-schema.mdを読み込む。- ユーザーが入力を提供しない場合、明示的な仮定で不足入力を補完する。
- クリエイティブディレクションを設定する:
references/motion-direction-principles.mdを読み込む。- 1つのプライマリモーションプロファイルと1つのフォールバックプロファイルを選択する。
- 「インスパイアされていてコピーではない」ガードレールを適用する:
references/apple-inspired-not-copied.mdを読み込む。
- コーディング前に計画する:
- シーンごとのストーリーボードを、タイミングと意図を明記して作成する。
- Remotionで構築する:
references/remotion-implementation-map.mdを読み込む。- シーンを
Composition、Sequence、およびタイミングプリミティブにマッピングする。
- 批評と洗練:
references/production-rubric.mdを読み込む。- 出力をスコアリングし、ギャップをリストアップし、少なくとも1回の改善パスを実行する。
出力契約
常に以下の成果物を返すこと:
- クリエイティブディレクションブリーフ（メッセージ、オーディエンス、ビジュアルプロミス）。
- ブランドおよびモーションコントロールシート（トークンと調整項目）。
- シーンタイミング付きストーリーボード。
- ビルドノート（各シーンを実装するコンポーネント/アニメーション）。
- QAルーブリックスコアと次回パスの差分。
再利用可能テンプレート
カスタムファイルをゼロから生成する前に、これらを使用すること:
assets/storyboard-template.mdassets/motion-tokens-template.tsassets/scene-template.tsxassets/remotion-root-template.tsxassets/qa-scorecard-template.md
スターター例
実行可能なリファレンス実装については、以下を参照:
examples/motion-director-starter/README.md
このスターターは、ストーリーボードとモーショントークンを最小限のRemotionプロジェクト構造に配線する方法を示しています。
品質基準
- 複雑さよりも明確さを優先する。
- モーションは、すべてを装飾するためではなく、階層を明らかにするために使用する。
- ペーシングを意図的に保つ: 過度な編集や絶え間ない動きを避ける。
- スペーシング、タイポグラフィ、タイミングシステムの一貫性を優先する。
- アクセシビリティを尊重する（コントラスト、動作軽減オプション、テキストの可読性）。
- 制約条件が不足している場合は、デフォルトを宣言して続行し、ブロックしない。
関連スキル
remotion-best-practices: 技術的なRemotionの正確性。create-remotion-geist: Vercel/Geistビジュアル言語。remotion-ads: ソーシャルセーフゾーンとキャンペーン制約。elevenlabs-remotion: ナレーション主導の編集のための音声パイプライン。
バージョニング
references/versioning-policy.mdに従いセマンティックバージョニングを行う。- バージョンを上げるには
scripts/bump-version.shを実行する。