opsassad/claude-code-motion-graphic-video-skill

モーションビデオスタジオ

ここでの動画とは、各フレームが時間の純粋関数 render(t) であるウェブページであり、scripts/record.mjs によって1フレームずつ正確に記録されます。これにより、フレームパーフェクトな動き、本物のフォント、本物の製品UI、そしてコードスピードのイテレーションが実現します。目標は、シニアモーションデザイナーが誇りに思うレベルの作品です。瞬間ごとに明確なアイデアがあり、物理的な重みを持った動きがあり、すべての要素が配置される理由があります。

このスキルは考え方と構築方法を教えるものです。テンプレートではありません。 すべての動画は、その主題に基づいて独自のコンセプトを得ます。以前の動画のシーン、レイアウト、ストーリービートを再利用しないでください。再利用するのは、エンジン、クラフト、そして教訓です。このスキルで作られた2つの動画は、同じ型からではなく、同じスタジオから来たように見えるべきです。

始める前に

• テイストファイルを読んでください。 references/taste.md にはすべての人に適用される教訓が含まれています。次に、その人のテイストを探します。プロジェクトルートの MOTION_TASTE.md、またはプロジェクトを超えて ~/.claude/motion-video-taste.md です。その人のテイストが一般的なデフォルトを上書きします。
• 話す相手に合わせて話し方を変えてください。 動画を依頼する多くの人は開発者ではありません。彼らが見るものを中心に説明してください。ASCIIスケッチやテキストモックアップではなく、レンダリングされたフレームを見せてください。 画像1枚で、説明が5ラウンドかかることを1ラウンドで解決します。

ワークフロー

各段階は、次の段階に時間を費やす前に、実際に見るべきものを生成して終了します。

1. ヒアリング：動画の種類と好み

1ラウンドで、各質問に適切なデフォルト値を用意して質問し、忙しい人が「Go」とだけ言えるようにします (references/intake.md)。

1. 動画の種類：references/kinds/README.md のメニューから選択：
   • ローンチフィルム、ヒーロー広告、解説、ストーリーフィルム、キャラクターフィルム
   • キネティックタイプ、シズルリール、ティーザー、ムードショーケース
   • ウォークスルー、ショーケースリール、データストーリー
2. 公開場所と長さ。
3. 好み： ルック、トーン、サウンド（音楽、声、キャプション）、必ず見せる瞬間、避けるべきこと、参考動画。

次に、その種類のプレイブック (references/kinds/<kind>.md) を読み、そのリストからの質問のみを、素材だけでは答えられない質問に絞って行います。

2. 素材と製品の理解

UIを依頼します：リポジトリ（読み取り専用）、スクリーンショットや録画、ライブサイト。リポジトリを変更したり、シークレットを開いたり、ログインしたり、ライブサービスを呼び出したりしないでください。

references/intake.md に記載されている方法で読み取ります：

• それが何であり、誰のためのものか
• ユーザージャーニー、画面ごとに、製品自身の言葉で
• セールスポイント、順位付け（なぜ誰かが乗り換えるのか）
• ahaモーメント
• ブランド（ロゴ、色、フォント、トーン）
• 現実的なデータ
• 見せるべきでないもの

製品理解ブリーフ を作成し、相手の了承を得ます（または、単独で作業する場合は自分の前提を述べます）。相手が見せたい、探りたい、説明したいと依頼したものはすべて、必ず表示するものとして含めます。

実際の画面からフォント、色、半径、間隔、実際のコピー、実際のデータをメモします。動画は、汎用的なモーションテンプレートではなく、彼らのブランドのように見えるべきです。ルックをでっち上げることは、初回バージョンが却下される最も一般的な理由です。

相手が参考動画を共有した場合、デザインする前にフレームごとに研究します (bash scripts/study-reference.sh ref.mp4 out/)。それが実際に行っていることを書き留めます：

• カメラの距離とアングル
• テキストのサイズと役割
• 色の意味
• ショットの繋ぎ方
• テンポと弧

自分の読み取りを相手に伝え、構築を始める前に確認を得ます。参考動画のスクリーンショット1枚から構築することは絶対にしないでください。

3. コンセプト：まずオリジナルのアイデア、次にスタイル

製品理解ブリーフ（ジャーニー、ランク付けされたセールスポイント、ahaモーメント）から構築します。毎回、一人で作業する場合でも、最初に references/originality.md のオリジナリティ手法を実行します：

1. 人間の真実を見つける
2. 8つの異なる角度から8つのコンセプトを書く
3. スワップテストとクリシェテストで一般的なものを排除する
4. それでも売れる最も大胆な生き残りを選び、拒否した明白なアイデアを書き留める

あらゆるソフトウェア製品に対して最も可能性の高いアイデア（リクエストを入力 → 結果が構築される → トースト → モンタージュ → スローガン → ロゴ）は、骨格として禁止されています。このスキルの他のすべて（デモ、フィールドガイド、レシピ、過去のフィルム）は、コピーすべきショット順序ではなく、メカニズムを示しています。

次にスタイルを選びます： references/styles.md から：

• シネマティックプロダクトフィルム
• クリーンライトプロダクトフィルム
• アトモスフェリックガラス
• ナレーション付き解説
• 日常密着
• キャラクター主導
• ヒーローショット
• シズル
• カードショーケース
• ウォークスルー
• キネティックタイプ
• データストーリー

選択する前に references/patterns.md を読んでください。強力なローンチフィルムが実際に行っていることのフィールドガイドです。

ジャンルは動画の目的を、スタイルはその感触を定義します。ブリーフがオープンな場合は、2つの方向性として2つのスタイルを提案します。

次に、ストーリーを1文で書き、それを運ぶ視覚的メタファーを、主題自身の名詞と動詞から抽出します。シーンをリストします：各シーンに1つのアイデア、それぞれに1つの特徴的な瞬間（そのポイントを証明するアニメーションのビート）があり、これもその主題から取ります。ブリーフがオープンな場合は、2つの方向性を提案し、相手に選んでもらいます。references/craft.md には、深い原則（すべてのスタイルで真実）、方法、モーション語彙、タイミングルールがあります。すべてのコンセプトの前にその原則を読んでください。

4. プロダクションプラン：フィルム全体をフレームごとに

コードの前に、references/plan.md の形式で完全な計画を書きます：

• 1ページのフィルム： コンセプト、拒否された明白なアイデア、ヒーローオブジェクト、感情の弧、セールスポイントがどこに現れるか
• トークンとしてのルック
• すべてのショットをフレームごとに： すべての可視的な変更にタイムスタンプ、カメラ、エフェクト、トランジション（イン・アウト）、テキスト、サウンド、アセット、動き
• 4～8枚のキーフレームを静止画としてレンダリング
• リスク

この段階では期待に制限はありません。フィルムを最高の状態で説明し、それに向けて構築します。すべてのショットはストーリーを前進させなければなりません。そうでなければカットします。 計画とキーフレームを見せ、了承を得てから構築します。一人で作業する場合、品質チェックリストと originality.md に対して計画を確認し、構築前に修正します。タイミングを決定するため、ナレーションはここで書きます。references/voice-and-sound.md は、AI音声ツールが読みやすいスクリプト形式、ペース、発音、サウンドをカバーしています。プロダクトローンチの場合、チェーンを計画します：どの要素が各画面を次の画面に運ぶか (craft.md, 「接続されたスクリーン」)。

5. 構築

assets/engine-starter.html と assets/motion.js をプロジェクトのアセットの隣にコピーし、ショットごとに構築します。最初にムーブライブラリから構築します： (references/moves.md)：

• typing close-up (macroType)
• countUp
• wall dive (wall)
• buildIn、cascade、montage、growToWord
• cursor と clickZoom
• morphRect
• 被写界深度 (twin)
• shots カット用、start プレビューと録画用

assets/moves-demo.html は、各ムーブの呼び出し方を示しています。メカニズムのためだけに読んでください。そのショット順序は禁止されたデフォルトであり、決してテンプレートではありません。コンセプトが必要とする場合にのみムーブを使用してください。フィルムはそれらを一切使用しない場合もあります。ライブラリがカバーしていないものだけを手作業で構築し、新しいムーブが実績を積んだら、同じ形状でライブラリに追加します。

すべての持続時間とカーブは references/motion-tokens.md から取得し、推測しないでください。references/engine.md の契約と落とし穴に従ってください。これらは実際のバグに基づいています。

約20秒を超える場合は、最初に簡単なラフタイミングパスを行います。実際のカメラムーブとタイミング、いくつかのスチルを使用したグレーボックスで。リズムを正しく調整し、タイミングを変更せずに実際のアートに置き換えます。

6. ゲート：コンタクトシート

node scripts/record.mjs page.html stills/ --stills 1,3.5,... で8～16のキーモーメントをレンダリングし、次に bash scripts/contact-sheet.sh stills/ sheet.jpg を実行します。最初に自分で、 以下のチェックリストとテイストファイルに照らしてレビューし、修正して再レンダリングします。その後でのみ相手に見せます。スチルが正しくなるまで、完全な動画を録画しないでください。

7. 録画、音声、フィット、ミックス

レビュー用にドラフト (--scale 1 --fps 30) を録画し、最終版は --scale 2 --blur 4 で録画します：スーパーサンプリングしてからスケールダウンし、本物のフィルムスタイルのモーションブラーをかけます。音声テイクが到着したら、node scripts/voice-segments.mjs voice.wav を実行して話された各行を見つけます。タイムワープテーブルを使用して、音声に合わせてアニメーションをストレッチします。音声をカットしたりスピードアップしたりしないでください。node scripts/mix.mjs mix.json を使用してラインと音楽を配置します。

8. 納品

チャンネルごとにエクスポートし、サムネイルと投稿コピーも含めます (references/delivery.md)。最終ファイルを検証します：mp4自体からフレームを抽出し（フレームごとに1回のffmpeg呼び出し）、持続時間とラウドネスを確認します。

9. 学習

相手が反応したとき、彼らが気に入った点や拒否した点、そしてその理由を、彼らのテイストファイルに書き込みます（MOTION_TASTE.md を作成するか、それがプロジェクトのテイストではなくその人のテイストである場合は ~/.claude/motion-video-taste.md に作成します）。教訓が他の人の役に立つ場合は、references/taste.md に追加することを提案します。これにより、各動画が前回のものを超えていきます。

品質チェックリスト（すべてのコンタクトシートで実行）

• 実際のブランド/製品のように見える： 同じフォント、色、半径、コンポーネント。でっち上げたものは何もない。
• 画面ごとに1つのアイデア。 目が同時に2つのものを読まなければならない場合、1つをカットする。
• 切り取られたり、重なったり、窮屈だったりしない： テキストはきれいに折り返され、ロゴは光学的に中央に配置され、カードは全体が表示され、安全マージンが維持されている。
• 色は忠実： 色あせたフィルターや灰色のベールがない。テキストにはコントラストがある。
• 動きに重みがある： イーズイン・アウト、スプリングの落ち着き、リニアは時計とプログレスバーにのみ使用。
• トランジションには動機がある（カメラムーブ、オブジェクトのハンドオフ、プッシュ）、そして実行中もシーンは読み取れるままである。
• 画面と音声が一致している： 言われていることが、その瞬間に画面に表示されているものである。
• 事実は現実的で公開しても安全である（delivery.md参照）。
• エンディング： ブランドマークと1つのリンクまたは1つのアクション。相手が望んでいない余分な要求はない。
• スマートフォンで読み取り可能： 重要なテキストはステージ上で40px以上、またはカメラがそうなるまでズームインする。シートを約375px幅に縮小して確認する。
• すべてのショットが落ち着く： 各ムーブの後には、読み取るのに十分な長さの静止した瞬間がある（0.5秒 + 単語あたり0.3秒）。
• スタイルが保持されている： 繋ぎ、色、テキスト、カメラが選択したスタイルのレシピに従っている。
• アクション、スクリーンではない： すべてのショットは誰かが何かをしているところ、またはその結果を示している。
• スケールとテンポが少なくとも1回変化する（クローズ↔ワイド、スロー↔ファスト）。
• アクセントカラーには1つの意味がある。
• すべての画像は目視で確認： ラベルに適切な製品、適切なロゴ、切り取られたり引き伸ばされたりしていない。各画像を開いて確認する。ファイル名を信頼しない。
• 数字は意味をなす： 合計と増加する金額のみがカウントアップされる。価格と固定値は単に表示される。
• クリーンなトランジション： テキストは何かがその上を通過する前に消える（白地に白の飲み込みなし）、ショット間に空のフレームがない。
• 具体的で、一般的ではない： 少なくとも1つの瞬間はこの主題にしかあり得ないもの。ライブラリムーブは主題がそのアクションを持っている場合にのみ使用。
• オリジナル： スワップテストに合格し、禁止された骨格を使用せず (originality.md)、デモやこのスキルで作られた最後のフィルムとショット順序を共有していない。

相手に何かを見せる前に、ブランド一致度、ストーリーの明確さ、モーション品質、読みやすさ、トランジション、サウンド/音声同期、仕上がりの各項目を10点満点で採点します。最初に8未満のものを修正します。

ファイル

• references/genres.md：構造、長さ、フォーマットのデフォールトを含む動画タイプ。
• references/intake.md：ヒアリング質問（デフォルト値付き）、ユーザージャーニーとセールスポイントのためのリポジトリの読み方、製品理解ブリーフ。
• references/kinds/：動画の種類ごとのプレイブック（ローンチフィルム、ヒーロー広告、解説、ストーリーフィルム、キャラクターフィルム、キネティックタイプ、シズル、ティーザー、ムードショーケース、ウォークスルー、ショーケースリール、データストーリー）：質問すべきこと、取り得る形状、世界観、動き、例、落とし穴。kinds/README.md がメニューです。
• references/plan.md：プロダクションプランのフォーマット：1ページのフィルム、ルックトークン、すべてのショットをフレームごとに、キーフレーム、リスク。
• references/originality.md：最初に読むこと。 毎回オリジナルのコンセプトを生み出すための方法：人間の真実、8つの角度、排除テスト、禁止されたクリシェ。スキル内のすべての例を上書きします。
• references/patterns.md：15の強力なローンチフィルムのフレームごとの研究からのフィールドガイド：ほとんどすべてが行うこと、キネティックタイプ、トランジション、製品の動作表示、アングルが機能する場合、構造、プロの詳細。コンセプト段階で読んでください。
• references/styles.md：12の個別のスタイル（シネマティックプロダクトフィルム、ナレーション付き解説、カードショーケース、ウォークスルー、キネティックタイプ、データストーリー、クリーンライトプロダクトフィルム、アトモスフェリックガラス、日常密着、キャラクター主導、ヒーローショット、シズル）、それぞれ完全なレシピ：カメラ、テキスト、色、繋ぎ、テンポ、弧、落とし穴。
• references/craft.md：深い原則、コンセプト方法、構図、モーション語彙（マクロタイピング、結果の壁、接続されたスクリーン、クリックズーム、カメラ）、タイミング。
• references/motion-tokens.md：数値：カーブ、持続時間、スプリング、スタガー、読み取りホールド、スマートフォンのテキストサイズ、ビート...