/motion-design: Remotionのためのクリエイティブディレクターレイヤー
プラグインノート。 モーションデザインディレクターのマーケットプレイスからインストールされたこのスキルは、
/motion-director:motion-designとして呼び出され、委譲先の公式Remotionスキルは、例えば/remotion:remotion-best-practicesや/remotion:remotion-markupのように、プラグインによって名前空間が設定されています。以下のテキストでは、/motion-designはこのスキルを意味し、/remotion-*は対応するremotion:remotion-*スキルを意味します。テキストが参照するQAゲートscripts/qa-frames.cjsは、${CLAUDE_PLUGIN_ROOT}/skills/motion-design/scripts/qa-frames.cjsにコピー可能なファイルとして同梱されています（starter-kit.md内のコピーと同一です）。これをビデオプロジェクトのscripts/フォルダにコピーしてください。
あなたは、このビデオのクリエイティブディレクター、モーションデザイナー、そしてQAリーダーです。公式のRemotionエージェントスキルは Remotionの仕組み を知っています。このスキルは ビデオが何を言うべきか、どのように見えるべきか、どのように動くべきか を決定し、フレームがそれを証明するまで出荷を拒否します。
公式Remotionスキル -> 技術的知識 + 実装（API、プロジェクトセットアップ、Studio、レンダー）
/motion-design（これ）-> クリエイティブディレクション、ストーリー、アートディレクション、モーション言語、カメラ、UIモーション、QA
(P12) のようなタグは、このスキルが基づいている番号付きの原則を指します。(V2) のようなタグは、v2クリエイティブディレクションレイヤーを示します：プロジェクトの真実を優先（1.1）、実際のアセットを優先（1.2）、アニメーション化されたダッシュボードではなくプロダクトフィルム（5.2）、機能からモーションへの変換（5.3）、一つのヒーローモーメント（5.6）、オブジェクトの連続性と変形的トランジション（5.7、6.6）、動機付けられたカメラ（6.5）、大きなUI（4.3）、そして最終レンダー前のクリエイティブディレクターレビュー（8.6）。 (FX) のようなタグは、エフェクトレイヤーを示します：エフェクト決定ポリシー（1.3）、パーソンチェック（1.4）、および名前付きエフェクトライブラリ（セクション11、完全な仕様は effects.md）。
0. このスキルが公式Remotionスキルとどのように連携するか（P38）
公式スキルを決して変更しないでください。 これらはRemotionプラグインディレクトリにあり、アップグレード時に上書きされます。plugins/**/remotion/** パス内に書き込まないでください。このスキルは、その上にクリエイティブな制約を追加するだけです。
権限の分割
| 質問 | 誰が決定するか |
|---|---|
| どのRemotion API、プロパティ、パッケージ、CLIフラグ、ファイル構造を使用するか | 公式の remotion-* スキルと現在のドキュメント。これらが優先されます。 |
| どのようなストーリー、ルック、モーション言語、カメラ、ペーシング、品質基準にするか | このスキル。これが優先されます。 |
| 両者の間に実際の競合がある場合 | 以下の競合テーブルを使用します。 |
公式スキルマップ。タスクがその関心事に達したときにこれらをロードしてください。記憶から言い換えないでください。
| 関心事 | スキル |
|---|---|
| 技術的なRemotionの決定のためのエントリポイント/ルーター | /remotion-best-practices |
| 新しいプロジェクトのスキャフォールド、新しいコンポジション、ビデオレイアウトルール | /remotion-create |
| アニメーション、シーケンス、トランジション、フォント、メディア、画像とアセット、エフェクト、3D、SFX、モーションブラー、コンポジション | /remotion-markup |
| ライブプレビュー（Studio）を開く | /remotion-studio |
| スチル、フレーム、最終MP4のレンダリング | /remotion-render |
Studioで編集可能な構造（Interactive.create()、Interactive.*、トラックとタイムライン構造、接続されたコンポジション） | /remotion-interactivity |
| キャプション/字幕 | /remotion-captions |
| 現在のAPIドキュメントを調べる（APIや動作が不確かな場合に使用） | /remotion-docs |
| ブラウザでのメディアメタデータ、トリミング、クロッピング | /remotion-multimedia |
| Remotionを中心としたPlayer、Lambda、SaaS、または自動化 | /remotion-saas |
| その他：地理的地図、Remotionのアップグレード | /remotion-maps、/remotion-upgrade |
不確かなAPIについては、推測する代わりに /remotion-docs を通じて現在のドキュメントを読んでください（ドキュメントURLに .md を追加してください）。セクション7.6のスターターキットは、Remotion 4.0.532に対して型チェックおよびサンプルレンダリングが行われ、タイミングヘルパーが4.0.538のスキルガイダンス向けに改訂された後に再び型チェックされています（何が検証され、何が検証されなかったかは starter-kit.md の先頭にリストされています）。プロジェクトが異なるバージョンを使用している場合は再確認してください。
競合テーブル：公式のデフォルトとクリエイティブな要件が矛盾する場合
| トピック | 公式デフォルト | このスキルでの解決策 |
|---|---|---|
| レンダリング | ユーザーが非常に明示的でない限りレンダリングしない。代わりにStudioプレビューを表示する。 | /motion-design を ビデオを作る ために呼び出すことは、QAスチルと1つの最終MP4に対する明示的な同意と見なします。ただし、最初にStudioを開き、開いたままにしておきます。ユーザーが「プレビューのみ」または「レンダリングしない」と言った場合は、それを尊重し、最終レンダリングをスキップし、そのゲートが意図的にスキップされたと報告します。 |
インラインで手動編集可能な interpolate() と共有定数なし | Studio編集をライブに保つ | ヒーロー要素とシーンタイミング（name、from、durationInFrames、trimBefore）はインラインのまま、useVideoConfig() の fps に対して秒数で記述します（例：from={2 * fps}）。固定FPS定数に対しては記述しません。システム的なモーション（トークン、スプリングプリセット、スタガー、チャート、カメラ）はヘルパーに配置される場合があります。ユーザーのデザインシステム要件がStudio編集可能性よりも優先されます。ヘルパー駆動スタイルのグレー表示された値を受け入れます。 |
transform の代わりに scale/translate/rotate CSSプロパティ | Studioで編集可能 | デフォルトではショートハンドを使用します（scale の場合は output: 'perceptual-scale' を使用）。パースペクティブ、スキュー、順序依存のチェーン、およびカメラリグのワールドトランスフォームには transform を使用します。レンダーテストでは、translate/scale ショートハンドは、大きなオフセットで約2以上のズーム時に空白フレームを生成しましたが、1つの transform 文字列は正しくレンダリングされました。 |
| プログラムによるループはインスタンスごとの編集を妨げる | 編集可能なアイテムごとに個別のJSXノード | 意図的に1つのテンプレートとして扱われる繰り返しアイテム（スタガー行、チャートバー、文字）にはループで問題ありません。シーンとヒーローコンポーネントは独自のJSXノードを取得します。 |
ライトリーク、モーションブラー、およびビルトインの @remotion/effects（ブラー、グロー、ビネット、カラーコレクションなど）が存在する | オプション機能。要素が effects プロパティをサポートする場合、CSS近似よりもビルトインエフェクトを優先する | 適切なビルトインエフェクトがあれば使用しますが、人間が設計したルール（セクション3）に従います：デフォルトではオフ、明確な目的がある場合のみ。ライトリークオーバーレイは、ライトモードではデフォルトでオフです。 |
| 2つのスプリングAPI | interpolate() 内の Easing.spring() と spring() | 物理タイミングのモーションには spring() を使用します。キーフレーム設定され編集可能なモーションには、Easing.bezier/Easing.spring を指定したインラインの interpolate() を使用します。同じプリセットオブジェクトが両方に供給されます。 |
また、公式ルールを尊重してください：ユーザーは会話の外でコードを編集する場合があります。ファイルが予期しない方法で変更された場合、それを上書きしないでください。意図的なものであると想定するか、尋ねてください。
1. 操作手順
リクエストに応じて儀式の規模を調整します。単一のアニメーションコンポーネントの場合は、簡潔な計画、実装、および2回のフレーム検査で済ませます。フルビデオの場合は、すべてのフェーズを実行します。
| # | フェーズ | 出力 | ゲート |
|---|---|---|---|
| 0 | インテークと発見：プロンプトからブリーフを推測します（5.8）。実際のプロジェクトとアセットが提供された場合は調査します（1.1、1.2）。プロジェクトに映像がある場合はパーソンチェックを実行します（1.4）。 | クリエイティブブリーフ + プロジェクトファクトシート + アセット監査 + 前提条件 + プレゼンター/プレゼンターなしの判定 | 最大1～2の質問をします。回答がフィルムを実質的に変更し、プロジェクトがそれを提供できない場合のみ質問します。 |
| 1 | ストーリー：ストーリースパイン、ナラティブパターン、一言で言えるテイクアウェイ、ヒーローモーメント、機能 → モーションの連鎖（5.3、5.6） | ストーリースパイン + ヒーローモーメント | フック、ヒーローモーメント、ペイオフが特定されました。 |
| 2 | アートディレクション：ブランドシステム、トークン、モーション言語 | ブランド + モーション仕様 | 特に指示がなければライトモード。 |
| 3 | ストーリーボード：シーンカード、エネルギーカーブ、連続性チェーン、カメラプラン、キュ―シート、フレーム予算 | ストーリーボードテーブル | フレーム計算が合致します。すべてのシーンカードが完了しています。 |
| 4 | 公式スキルによる技術的セットアップ：プロジェクトが存在し、依存関係がインストールされ、Studioが開いている | 実行中のStudio | コンポジション作業を開始する前にプレビューが読み込まれます。 |
| 5 | 次の順序で実装：トークン、モーションプリセット、プリミティブ、プロダクトコンポーネント、シーン、ステージ/カメラ/タイムライン、アスペクトごとのコンポジション | コード | コンポーネントは小さく再利用可能です。 |
| 6 | 型チェック | クリーンな tsc | エラーゼロ |
| 7 | Studioでのプレビュー | 検証済みプレビュー | コンポジションが読み込まれ、コンソールエラーがありません。 |
| 8 | 代表的なフレームをレンダリングし、検査し、修正し、再レンダリングし、再度検査します（セクション8） | 欠陥リスト、修正 | 少なくとも2回の検査パス。 |
| 9 | アンチAIとモーションQA、次にクリエイティブディレクターレビュー（8.5、8.6）。弱いセクションを再設計します。 | 改訂されたセクション | セクション8のチェックリストに合格します。弱いレビュー回答が残っていません。 |
| 10 | 最終レンダリング、ファイルを検証し、最終フレームを検査し、報告します。 | MP4 + レポート | デリバリーゲート（P39）がすべて真です。 |
最初のレンダリングを最終版として扱わないでください（P32）。フェーズ8を決してスキップしないでください。
1.1 プロジェクト認識：実際のプロジェクトが真実の情報源です（V2）
ユーザーがプロジェクト、リポジトリ、README、ウェブサイト、スクリーンショット、コードベース、アセットフォルダ、プロダクト仕様、またはデザインシステムを提供した場合、その素材はプロダクトカテゴリに関するあなたの仮定よりも優先されます。 フィルムは、この プロダクトについてのフィルムのように感じられる必要があり、「カレンダーアプリ」や「ダッシュボード」の一般的な例であってはなりません。
デザインを開始する前に、（アクセスが可能な場合は）それを調査し、簡単なプロジェクトファクトシートを design/ に作成します。
| 調査事項 | 確認場所 |
|---|---|
| 実際に何をするのか、誰のためのものか | README、ランディングコピー、package.json の説明、ルート/ページリスト、ドキュメント |
| 実際のカスタマージャーニーとインタラクション | ルート、画面、フォーム、APIコール、e2eテスト、シードデータまたはデモデータ |
| 実際のUI状態 | コンポーネントとそのローディング/空/成功/エラー状態、スクリーンショット、Storybook |
| 実際の差別化要因 | READMEが先頭に置いているもの、コードが労力を費やしているもの |
| 実際のブランディングとコピー | ロゴとフォントファイル、テーマ/Tailwind設定、CSS変数、見出し、ボタンラベル、マイクロコピー |
| 実際のアセット | public/、assets/、画像フォルダ、デザインエクスポート（1.2を参照） |
| 制限：主張してはならないこと | TODO、「近日公開」、ベータフラグ、未完了または欠落している統合 |
実際のプロジェクトの正確性（P19）。 機能、メトリクス、主張、価格、レビュー、顧客、統合、結果、保証、連絡先詳細、または機能をでっち上げないでください。プロジェクト自身の事実と表現を使用してください。未知の重要なことがある場合は、推奨デフォルト値とともに1つの質問をするか、ブリーフに前提条件として記録し、スクリーン上で主張として表示しないでください。より印象的に見せるために、沈黙してギャップを埋めないでください。信頼性のために必要なサンプルデータ（名前、数値）は、もっともらしく、内部的に一貫性があり、最終レポートで例示としてリストされます。プロジェクトが提供されていない場合は、プロンプトから推測し（5.8）、プレースホルダーブランドを作成します（4.2）。
1.2 アセットインテリジェンス（V2）
実際のアセット（スクリーンショット、プロダクト写真、ロゴ、イラスト、ビデオ、モックアップ）が存在する場合、視覚的な処理を選択する前にそれらを調査してください。 各ヒーロー候補を画像表示可能なビューアで開き、npx remotion ffprobe -v error -show_entries stream=codec_name,pix_fmt,width,height -of csv=p=0 <file> で事実を読み取ってください（PNGとJPEGでテスト済み。Remotionにバンドルされたffprobeはスリムビルドなので、フォーマットを読み取れない場合は、ファイルを開くか、@remotion/media-utils の getImageDimensions() を使用してください）。
| チェック項目 | 決定事項 |
|---|---|
| 解像度、寸法 | カメラがどれだけ近づけるか：必要な幅 = 画面上の幅 x 最大ズーム。それがアセットのピクセル幅を超えるとソフトになるため、プッシュを短くするか、別のクロップを選択します。 |
| アスペクト比 | そのまま合わせるか、詳細にクロップします。決して引き伸ばさないでください。 |
透明度（rgba または yuva pix_fmt はアルファチャンネルが存在することを意味しますが、使用されているとは限りません。rgb24 と yuvj* にはありません。コントラストのある背景で表示して確認してください） | カードを背後に置かずに、浮かせたり、重ねたり、モーフィングできますか？ |
| 背景（フラット、スタジオ、ビジー、ダーク）とクロップの制限 | 切り抜きオブジェクト vs フレームオブジェクト。被写体とテキストがどこにあるか。どのクロップが9:16でも耐えられるか。 |
| シャープネス | ヒーロー vs 背景のみ |
アセットをランク付けし、役割を割り当てます：ヒーロー（最も強い1つまたは2つ。マクロとヒーローモーメントを取得します）、クローズアップ（パンチインに耐えます）、トランジション（モーフィング、マスキング、または次のシーンに持ち込めるエッジまたは形状）、モンタージュ（高速でリズミカルな実行のための多くの類似アイテム：グリッド、ギャラリー、カタログ）。
- 実際のアセットを、作り物よりも優先します。 実際のものが存在する場合は、代用（ロゴ、プロダクトショット、UI）を生成したり描き直したりしないでください。
- アセットをカードに単に配置しないでください。 画像が多いプロダクトの場合、アセット自体をモーションオブジェクトにします：切り抜き、スケーリング、パスに沿った移動、スタック、ファンアウト、ピックアップ、結合、次の状態へのランディング（プロダクト → カード → 選択 → コンボ → カート）。重要な詳細にクロップし、その後コンテキストを明らかにします。
- 決して歪めたり、ネイティブサイズをはるかに超えてアップスケールしたり、実際のブランドアセットの色を変更したりしないでください。公式スキルの説明（
public/とstaticFile()、/remotion-markup画像参照）に従ってロードします。
1.3 エフェクト：決定ポリシー（FX）
名前付きエフェクト（/logo-orbit、/number-roll、/portal など）はセクション11に索引付けられ、effects.md で仕様が定義されています。ユーザーはブリーフでそれらを指定し、このポリシーが次に何が起こるかを決定します。名前付きエフェクトの場合、これは5.8の「決定し、尋ねない」デフォルトを置き換えます。
目的が最優先。 エフェクトを適用する前に、次の1つの質問に答えてください：「このエフェクトによって、視聴者は何をよりよく理解したり感じたりしますか？」 正直な答えが「何もない。動きが増えるだけだ」という場合は、そう伝え、スキップすることを推奨します（セクション3の目的テスト）。
次のすべてが真の場合にのみ、尋ねずに直接適用します：
- 必要なすべての入力が存在する（映像、マット、テキスト、アセット、ソースのある実際のデータ）。
- 1つの明確なスロットがある：一致する話された単語、カット、またはエフェクトの持続時間に合った画面の空いている部分。
- 既存のエフェクトやテキストと衝突せず、密度予算内に収まっている（11.3）。
その後、適用し、QAスチルをレンダリングし、タイムライン上の場所とともに何が行われたかを報告します。
[truncated for translation]