モーション・ドクトリン(ゲートウェイ)
アニメーションを作成する前に必ずこれを読むこと。すべての継ぎ目(シーム)で何が起こるか、各シーンがどのように動作するかを決定します。テクニックスキルがそれを実装します。これらのルールは、汎用的/上位レベルのモーションガイダンスよりも優先されます。このルールが防ぐ失敗:シーンを個別に作成すると、カットごとに目の勢いが途切れ、シーンは入り口と出口の間でその場で揺れ動くだけになります。
ルートマップ
| 決定(本スキル) | 実装スキル |
|---|---|
| シーム遷移の選択+パラメータ+コード | cut-the-curve §1–5(カタログ) |
| テキスト/要素のエントリーカスケード | cut-the-curve §6(滝エントリー) |
| シーン内グループ位置変更(カットなし) | cut-the-curve §7(ナッジカーブ) |
| カーソル主導のアクション/シーン開始/モーフ点火 | oversized-cursor |
| シームレンダリング機構/白フラッシュガード | seam-craft |
| 製品発表/説明/キャプション作業 | 上位スキルの上に text-beat-economics、brand-faithful、captions-overlay を重ねる |
作成順序:ベクターレジャー(ledger.json)→ そこからマスターシームをスタンプ(scripts/seam-stamp.mjs --ledger ledger.json --write index.html)→ フェーズごとに持続モーションルート → キャリアと原因 → ビルドコンポ → 確認(scripts/seam-gate.mjs)
手作業で作成するのは Tier-A のモーフ/マッチカットのみ。スタンプされたシームは設計上ゲートを通過します。
パート1 — シームの法則
ベクター則
シーンAの出口の動き方が、シーンBの入口の動き方を決定する:同じ軸、同じ方向、一致した速度、両側で動作の途中でカット。
- 軸 — x は x のまま、y は y のまま、Z は Z のまま。カットを跨いで軸を交換してはいけません。
- 方向 — 決して反転させないこと。Z 軸の場合、方向 = スケール変化の符号:拡大 = 押し出し(カメラ前進)、縮小 = 引き(カメラ後退)。後退する出口に小から大きく成長する入口で応えるのは、最も一般的な違反です。なぜなら、小から大きく成長するのはデフォルトの要素の入口だからです。
- 速度 — 入口の初速度 ≈ 出口の最終速度、ミラーリングされたイージングによる(出口
power4.in+ 入口power4.out、同じ距離と持続時間。入力側は想定経路の50%以上から開始)。詳細はcut-the-curveに。 - 位相(フェーズ) — カットは両側で動作の途中に着地する。カット前に静止状態になること、またはカット後に静止状態から開始することは、デッドビートです。
流れ(カレント)
すべてのフィルムは1つの支配的な方向を選びます(ハウスデフォルト:左)。すべての通常のシームはそれを使います。その他のベクターは予約済みです — それを使うことは何かを意味します:
| ベクター | 意味 |
|---|---|
| 流れ(左) | 「次のビート」— 中立的な前進 |
| 上向き | 高揚 — 結論や披露が先行するものよりも上に上がる |
| Z前方(ズームスルー) | 同じ思考の奥深くに押し込む |
| Z後方(逆ズーム) | 到着 — より大きなものが着地する |
| スケールバースト(爆発) | 世界を去る — 表面がカメラを通過して吹き飛ぶ |
- 連続するシームを反対方向に実行してはいけません — ピンポンはエラーとして読み取られます。
- 方向転換には目に見える原因(クリック/バウンス/衝撃)または章の区切りが必要です。
ベクターレジャー
マスタータイムラインを作成する前に書く — プロジェクトルートの ledger.json(スキーマ:references/seam-gate.md)。シームごとに1行:カット時間、出口と入口のベクター(軸+符号付き方向。Z 行はスケール符号を持つ)、セレクタ、テクニック。出口と入口は一致しなければなりません。行が一致しない場合は、イージングではなく計画を修正してください。検証ツールは、ランタイムサンプリングの前に行の整合性を静的にチェックします。
キャリア
目は抽象的なものではなく、オブジェクトを追います。最も強いシームは、一致した位置かつ速度でカットを跨いで具体的なキャリア(中継物)を受け渡します:途中のカーソル、次のレイアウトに縮小/ドッキングするコンテナ、正確なスロットに飛び込むマーク、滝カットの単語グループ。自然なキャリアがない場合、シーンの主役がそれを運びます(部分的な移動+初期フェードアウト、途中から入場)。クロスフェードは決して使わないでください — キャリアがまったくありません。
因果運動
各動作が直前の動作によって目に見えて開始されるように連鎖させます:クリック → 押し潰し → バネ解除 → 飛行 → 衝撃 → 反動 → 表示。
- 効果は原因となるフレーム上で開始 — 同じタイムライン位置。「少し後」ではありません。
- 反応は想定質量に比例:大きな要素はより遅く跳ね返り、小さなものは素早く弾みます。
- 力は方向を変える許可証です。原因のない反転はピンポンです。
シームゲート(ビルドゲート — 検証ツールを実行し、終了コード0でなければシームは完了していない)
node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # 生成
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project . # 検証
スクリプト(使用方法+レジャースキーマ:references/seam-gate.md)は、シームごとに以下を数値的に強制します:レジャー行の整合性、カット時に出口がまだ動いていること、入場が途中から(静止状態からではないこと)、計測方向=レジャー方向、入口/出口の速度一致(警告)、ゼロオーバーラップ(フレームあたり一方の側のみ表示 — カットはディゾルブではない)、Z 符号ルール(d(scale)/dt 両側で同じ符号。入力シーン自身の入場が符号競合についてスキャンされる)、および祖先スケールを含むキャリア矩形の連続性。レジャーを作成する際に各シームの真のキャリアセレクタを見つけるには seam-gate.mjs probe --t <cut> を使用してください。
スクリプトがチェックできないルール — 依然としてあなたの責任:
- 編集はシームを再開する。 シーンの最初/最後の約1秒に変更(新しいVOに合わせた再タイミングを含む)が加えられた場合、その境界の監査は無効になります — 検証ツールを再実行してください。
- オーディオが時計です。 VOの実際の単語タイムスタンプに合わせてシーンを再タイミングしてください。枠に合わせて読みを急がせてはいけません。VO再生成はそのシームを再開します。
- クリップゲートの落とし穴(ゼロオーバーラップ失敗の通常の原因):
data-startがそのエントリートゥイーンより前にあるクリップは、初期不透明度で非表示が解除されます — 初期autoAlpha: 0かつdata-start= カット時間に設定し、それより前にしないでください。
パート2 — パフォーマンス(シーンはパフォーマンスを続ける)
アイドル時の揺れ禁止
アイドル時のサイン波ループ(呼吸、浮遊、ドリフト、グローパルス)は持続モーションとして禁止されています — それらは「動画が待機している」と読まれます。秒単位で時間が余っているシーンは計画のバグです:揺れではなく、ストーリーを追加してください。エントリーとエグジットの間のすべてのフェーズは、以下のルートのいずれかに属します(計画にルート名を明記してください):
| ルート | 説明 |
|---|---|
| 段階的表示 | コンテンツを保留し、ナレーションビートで開示 — フレームは情報を獲得し続ける(2つ以上のコンテンツグループのデフォルト) |
| 意図を持ったカメラ | マッピングされたスケール+パン経路:全体を確立 → 移動 → 被写体に到着 |
| シーケンシャルUIライフ | プロダクトが時間とともに動作:進行状況が進む、ハイライトがステップを示す、カウントが刻む |
| アニメーションシーケンス | 要素がビートを演じる:カードがスタックにファイリングされる、アイテムがドラッグされる、結果が組み立てられる |
| カーソル主導のアクション | 特大カーソルが目をトリガーへ誘導し、そのクリックが次のビートを点火する(oversized-cursor) |
テスト:任意の秒で一時停止 — 何か意味のあるものが途中にあること(着地中の表示、移動中のカメラ、ナレーションが言うことをしているUI)。
クライマックス前の静止
主要なアクションとその結果の間に 0.3~0.75秒のポーズ をスケジュール — 劇的なコンマです。アクションから結果へ直接ジャンプするシーンはそれを失います。
タイミング意図
- 単一エントリー ≤ 約800ms。より長いビルドアップは、1つの遅い要素ではなく、複数要素のスタガー。
- エグジット ≈ エントリーの75%。例外:
cut-the-curveはこれを反転(エントリー ≈ エグジットの127%)。 - 総スタガー ≤ 500ms。8要素以上の場合、要素ごとの遅延を短くするか、最初の数要素のみスタガー。
- 禁止イージング:
bounce.out/elastic.out。エントリーのオーバーシュートback.out(1.4–1.7)は可。 - 類似要素は1つのイージング+持続時間意図を共有 — 要素ごとにユニークなペアは不可。
トランジション語彙
フィルムごとに2~3つのシーン間トランジションのみを使用し、繰り返す。デフォルトの境界は 流れ方向の cut-the-curve。手書きの共有要素モーフ(intent: morph)は予算にカウントされません。
アンチパターン
| してはいけないこと | 代わりにこうする |
|---|---|
| 各シーンの入場を個別に作成する | 最初にベクターレジャーを書く |
| シーン間をクロスフェードする | 流れ方向で cut-the-curve を使用 |
| エグジットが完了してからシーンが変わる | 両側で動作の途中でカット |
| カット後に静止状態から入場が始まる | 想定経路の50%以上から入場 |
| 逆ズームエグジット → 小から大きく成長するエントリー(または押し出し → 特大の引き) | スケール速度の符号を一致させる(シームゲート7) |
| Zシーム受け渡しの下で入力シーン独自のポップインイントロ | その開始フレームを構成して保持するか、符号を一致させる |
| 時間を埋めるためのアイドル揺れ/呼吸/浮遊 | 持続モーションルートを割り当てるか、ストーリーを追加する |
| 原因のない方向反転 | 力を消費するか、流れを維持する |
| 変化のための予約ベクターの使用 | デフォルトで流れを使い、意味があるときに予約ベクターを使う |
| 原因より数フレーム遅れた反応 | 同一フレームで点火 |
| アクションが結果に直接ジャンプ | クライマックス前の静止(0.3~0.75秒)をスケジュール |