motion-designer

モーションデザイナー

魅力的で見応えのある動画を制作するための、モーションデザインの専門的なガイダンスです。このスキルでは、After Effects とモーショングラフィックスに関する数十年分の知識を Remotion の動画仕様に応用します。

哲学

優れたモーションデザインは、次の3つの要素を組み合わせます。

1. ビジュアルストーリーテリング — すべてのフレームが物語に役立ちます
2. リズミカルなタイミング — 動きは自然なリズムや音楽のビートに合わせます
3. 感情への訴求 — デザインの選択によって、意図した感情を呼び起こします

このスキルの仕組み

このスキルを呼び出すと、次の内容を含む詳細な動画仕様の作成を支援します。

• シーンごとの内訳 — すべての視覚要素を網羅した説明
• タイミングとペース配分 — すべてのアニメーションとトランジションの正確なフレームタイミング
• 音声戦略 — 雰囲気とエネルギーレベルを踏まえたバックグラウンドミュージックの推奨
• 効果音の配置 — 正確なタイミングと目的を指定した具体的なSFX
• トランジションデザイン — シーン間のつながりと流れ
• 視覚的階層 — 各時点で視聴者が注目すべきもの

出力されるのは、実装にあたって/remotion-best-practicesとシームレスに連携する、包括的な仕様書です。

基本フレームワーク

アニメーションの12原則（ディズニー）

1. スクワッシュとストレッチ — 重みと柔軟性を表現します
2. 予備動作 — アクションに備えて観客の注意を促します
3. 演出 — 最も重要な要素に視線を誘導します
4. ストレートアヘッドとポーズ・トゥ・ポーズ — 2つのアニメーション手法です
5. フォロースルーとオーバーラッピングアクション — 自然な動きが続きます
6. スローインとスローアウト — イージングによってリアルな動きを生み出します
7. 弧を描く動き — 自然な動きは曲線の軌跡をたどります
8. 二次動作 — 補助的なディテールが生き生きとした表現を加えます
9. タイミング — 動きの速さが個性と雰囲気を生み出します
10. 誇張 — インパクトを高めるために現実を誇張します
11. 立体的な作画 — 立体感のある形を表現します
12. 魅力 — デザインに見応えがあり、心地よさを感じられます

モーションデザインの展開

魅力的な動画には、感情の展開があります。

Hook (0-5s)     → Grab attention immediately
Build (5-30s)   → Establish context and build interest
Peak (30-70s)   → Deliver main message with maximum impact
Resolve (70-90s) → Satisfying conclusion and call-to-action

音声デザインのレイヤー

プロフェッショナルなモーショングラフィックスでは、音声を複数のレイヤーに分けて使います。

1. バックグラウンドミュージック — 雰囲気とエネルギーを設定します（音量40〜60％）
2. 効果音 — アクションやトランジションを強調します（音量60〜80％）
3. 環境音 — 控えめな背景の存在感を加えます（音量20〜30％）
4. ナレーション／会話 — 必要に応じて使用します（音量80〜100％）

タイミング理論

モーショングラフィックスのタイミングは、自然なリズムに合わせます。

• 24〜30 FPS — 標準的な動画のフレームレート
• 2フレームルール — 何かを認識できる最短の長さ
• 0.3秒（9フレーム） — 無理なく読める最短の長さ
• 0.5秒（15フレーム） — UIのマイクロインタラクションに最適な長さ
• 1〜2秒 — 無理のないトランジションの長さ
• 3〜5秒 — 複雑な情報を扱うシーンの長さ
• 8〜12秒 — 変化がない場合に注意を維持できる最大の長さ

動画仕様の形式

動画仕様を作成するときは、次の構成を使用します。

1. 概要

• タイトル — 明確で説明的な名称
• 長さ — 合計の長さ（秒）
• 寸法 — 幅 x 高さ（通常は1920x1080）
• フレームレート — 30 fps（標準）
• スタイル — ビジュアルの美的表現に関する説明
• 雰囲気 — 感情的なトーン

2. 音声戦略

• バックグラウンドミュージック
  • スタイル／ジャンル
  • 雰囲気とエネルギーレベル
  • 同期する重要なタイミング
  • 音量の推移（フェード、ダッキング）
• 効果音
  • 必要なSFXの一覧
  • それぞれのタイミング（秒）
  • 各効果音の目的

3. シーンの内訳

各シーンについて、次の内容を指定します。

## Scene N: [Name] (Xs - Ys, Duration: Zs)

**Visual Description:**
[Detailed description of every element, position, color, size, typography]

**Animation Details:**
- Element 1: [entrance/behavior] from Xs to Ys
- Element 2: [movement/transform] from Xs to Ys
- Element 3: [exit/transition] from Xs to Ys

**Timing:**
- Frame 0-30: [what happens]
- Frame 30-60: [what happens]
- Frame 60-90: [what happens]

**Audio:**
- Background music: [volume level, mood]
- SFX at Xs: [effect description]
- SFX at Ys: [effect description]

**Transitions:**
[How this scene transitions to the next]

**Focus Points:**
[What should draw viewer attention]

4. 技術仕様

Remotion固有のガイダンスを含めます。

• コンポジションの寸法とFPS
• カラーパレット（HEXコード）
• タイポグラフィ（フォント、サイズ、ウェイト）
• アニメーションの種類（spring、interpolate、easing）
• 効果ごとのspring設定
• アセット要件（画像、アイコンなど）

Remotion ベストプラクティスとの連携

このスキルでは、Remotion の実装に直接対応する仕様を作成します。

• シーンの説明 → Remotion の <Sequence> コンポーネント
• タイミングの詳細 → useCurrentFrame() を使用したフレームベースのアニメーション
• アニメーションの詳細 → spring() と interpolate() の設定
• 音声の配置 → タイミングを指定した <Audio> コンポーネント
• トランジション → remotion-best-practices のトランジションパターン

このスキルで仕様を作成したら、/remotion-best-practices を使用して実装してください。

一般的な動画の種類

種類	長さ	構成	主な要素
マイクロインタラクション	1-3秒	単一の動作	素早く、歯切れよく、明確なフィードバック
解説動画のイントロ	5-10秒	フック + 予告	大胆なテキスト、シンプルなコンセプト
製品デモ	15-30秒	問題 → 解決策	説明するのではなく、見せる
機能紹介	30-60秒	展開 → クライマックス → CTA	複数のシーン、トランジション
ブランドストーリー	60-120秒	ストーリー展開	感情を揺さぶる展開
チュートリアル	2-5分	ステップごとの説明	明確な進行、間

効果音のカテゴリー

UI／インタラクション

• Whoosh — トランジション、表示
• Pop — ボタン、チェックマーク、成功
• Click — 選択、インタラクション
• Swoosh — 素早い動き、スワイプ

強調

• Impact — 重要な瞬間、表示
• Boom — 大きな発表、ローンチ
• Ding — 達成、完了
• Chime — 通知、アラート

環境音

• Hum — 背景にテクノロジーの雰囲気を加える
• Texture — さりげない雰囲気
• Riser — 期待感を高める
• Reverb tail — 広がりのある、ドラマチックな響き

アンチパターン

• 一貫性のないイージング — すべてのアニメーションで意図的なタイミングにする必要があります
• 過剰なアニメーション — すべてを跳ねさせる必要はありません
• 不明確な階層 — 視聴者がどこを見ればよいか迷わないようにします
• 音声の不一致 — 音は映像を引き立てる必要があります
• 余白がない — シーンが落ち着くための間を設けます
• 一貫性のないスタイル — ビジュアルの言語に統一感を持たせます
• ストーリー展開を無視する — 抽象的な動画にも流れが必要です

品質チェックリスト

動画仕様を確定する前に、次の点を確認してください。

• すべてのシーンで視覚的な階層が明確になっている
• タイミングが自然なリズムに沿っている
• 音声が映像を支え、引き立てている
• 効果音が重要な瞬間を強調している
• トランジションが滑らかで意図的に感じられる
• ストーリー展開が明確（フック → 展開 → クライマックス → 解決）
• 実装に必要な技術仕様がすべてそろっている
• すべての要素がストーリーに役立っている
• ペース配分がコンテンツの複雑さに合っている
• 最後に満足感のある結末がある

エキスパート向けヒント

タイミング

• 可能であれば、アクションを音楽のビートに合わせます
• タイミングには「三分割の法則」を使います。1/3 を予備動作、1/3 をアクション、1/3 をフォロースルーにします
• リズムを作るためにタイミングを変化させます（機械的な繰り返しは避けます）

ビジュアルデザイン

• コントラスト（色、サイズ、動き）を使って視線を誘導します
• 統一感を保つため、配色は3～5色に抑えます
• タイポグラフィの階層：見出し → 小見出し → 本文
• ホワイトスペースはデザイン要素であり、空白ではありません

音声デザイン

• 効果音の再生中はバックグラウンドミュージックの音量を下げます（-6dB～-12dB）
• 効果音を2～3層重ねて、豊かで厚みのあるサウンドにします
• インパクトを出すために、無音を効果的に使います
• 音楽はフェードイン／フェードアウトさせ、急にカットしないようにします

アニメーション

• スプリングアニメーションは自然に感じられます（damping：滑らかな動きなら200、弾む動きなら20）
• 機械的な UI 要素にはイージングを使います
• アニメーションをグループ化し、流れを生み出すために5～10フレームずつずらします
• 終了アニメーションは開始アニメーションより速くします（比率は3:2）

ルールを参照するタイミング

各項目の詳細なガイダンスについては、以下を参照してください。

• rules/scene-composition.md — 視覚的な階層と演出
• rules/timing-pacing.md — フレームのタイミングとリズム
• rules/audio-design.md — 音楽とオーディオの方針
• rules/sound-effects.md — 効果音の選定と配置
• rules/transitions.md — シーンの切り替えと流れ
• rules/visual-hierarchy.md — 注意の誘導
• rules/storytelling-flow.md — 物語の構成
• rules/camera-movement.md — 仮想カメラのテクニック