motion-art-direction

モーションディレクション

誰かがフレームをアニメーション化する前に、モーション作品のクリエイティブな判断を行います。ディレクションは判断のレイヤーです。ブリーフとブランドを、繰り返し使える少数のモーションルールへと落とし込みます。イージングの語彙、タイミングの尺度、トランジションの種類をそれぞれ1つに絞ることで、すべてのショットが同じ人の手によるものに感じられます。優れたディレクションは、ほとんどの場合、引き算です。何を動かさないかを決めることです。

使用するタイミング

• あらゆる作品（解説動画、ローンチ映像、UI デモ、データストーリー、ループなど）の制作を始めるときで、ルック＆フィールがまだ決まっていない場合。
• アニメーションが「ごちゃごちゃしている」「安っぽい」「一貫性がない」と感じられ、その原因が技術ではなく判断にある場合。
• 他のスキル（gsap/lottie/shader/three.js）を連携させる場合。ディレクションが、それらの実行するルールを定めます。
• ブランドやブリーフを、チーム（またはエージェント）が従える、明確で文書化された選択に落とし込む場合。

たった1つのルール

まずモーションランゲージを定義し、それに沿ってアニメーションを作ります。 モーションランゲージとは短い仕様です。それぞれ1つずつ選びます。イージングの種類、基本のタイミング単位、トランジションの種類、スタガーのリズム、モーションの強度です。作品内のすべてをこの仕様に従わせます。一貫性は自信として伝わり、バリエーションはノイズとして伝わります。迷ったら、新しく考案するのではなく、再利用しましょう。

ディレクションのワークフロー

ステップ	判断項目	成果物
1. ブリーフ	オーディエンス、伝えるメッセージ1つ、プラットフォーム、尺、ムード（形容詞3つ）	クリエイティブ意図を1行で記述
2. トーンとエネルギー	落ち着き↔躍動感、柔らかさ↔鋭さのどこに位置するか	下のマトリクス上の位置
3. モーションランゲージ	仕様表を確定	モーションランゲージの仕様（記入済み）
4. 階層	動かす対象の順位付け：主役／補助／テクスチャ	モーション階層リスト
5. 抑制の見直し	意味を担わないモーションを削除	静止状態にするもののリスト
6. ショットのディレクション	キーフレームではなく、各ショットの意図を記録	ディレクションノート（テンプレートを参照）
7. 一貫性の確認	仕様に照らして監査	ショットごとの合格／不合格

トーンとエネルギーのマトリクス

作品を2つの軸上に配置します。該当するセルがモーションのデフォルトを決めます。

	ソフト（オーガニック、イージングあり）	シャープ（正確、きびきび）
落ち着き	高級感、ウェルネス、エディトリアル — ゆっくり、長いイージング、ゆとりのある静止時間、スタガーは最小限	プレミアムテック、フィンテック — 意図的でクリーンな、ほぼリニアの動き。引き締まっていながら急かさない
躍動感	遊び心、ライフスタイル、子ども向け — 弾む／オーバーシュート、スプリング感のある動き、ゆるやかなタイミング	スポーツ、ハイプ、ゲーム — 速いカット、鋭いスナップ、ビートに合わせた大胆なオーバーシュート

セルを1つ選び、徹底します。1つの作品内で複数のセルを混ぜることが、「一貫性がない」モーションの最もよくある原因です。

モーションパーソナリティ（名前付きプリセット）

トーンのマトリクスは作品が「どこに」位置するかを示し、モーションパーソナリティはアニメーション担当者に渡す、数値で定義された名前付きプリセットです。プロジェクトごとに1つだけ選び、すべてに適用します。これは共通の語彙です。他のスキル（例：gsap-web、micro-interaction、動画パック）では、「Premium パーソナリティを使用」と伝えるだけで済みます。

パーソナリティ	期間	特徴的なイージング	オーバーシュート	印象
Playful	150–300ms	ease-out-back / cubic-bezier(0.34,1.56,0.64,1)	10–20%	楽しい、弾む、気まぐれ
Premium	350–600ms	cubic-bezier(0.4,0,0.2,1)	0%	エレガント、ミニマル、高級感
Corporate	200–400ms	cubic-bezier(0.2,0,0,1)	0–3%	クリーン、プロフェッショナル、信頼感
Energetic	100–250ms	ease-out-expo	15–30%	大胆、ダイナミック、ハイプ

デフォルト：UI／プロダクトにはCorporate、イラスト／ライフスタイルにはPlayful。マトリクスとの対応は、Premium≈落ち着き・ソフト、Corporate≈落ち着き・シャープ、Playful≈躍動感・ソフト、Energetic≈躍動感・シャープです。パーソナリティによって、下の仕様にある「イージングの種類／基本のタイミング単位／モーションの強度」の項目が埋まります。

モーション言語の仕様

中核となる成果物です。すべての項目で選択肢を1つ選び、どこでも同じものを使用します。

プロパティ	選択する内容	例（落ち着きのあるシャープさ／プレミアムなテック）
イージングの種類	動きの約90％に使うシグネチャーカーブ	cubic-bezier(0.22, 1, 0.36, 1)（減速し、柔らかく着地）
基本の時間単位	他の時間をその倍数として組み立てる基本の長さ	0.4s（登場は0.4s、大きな動きは0.8s、微細な動きは0.2s）
トランジションの種類	ショット同士のつなぎ方	マッチカット＋クロスフェードのみ。ワイプ／スピンは使用しない
スタガーのリズム	グループ化した要素間の遅延	60msずつ、上から下へ連続
モーションの強度	移動距離／スケール／オーバーシュートの上限	移動距離 ≤ 24px、スケール 0.96→1.0、オーバーシュート ≤ 2%
ホールドのルール	動きと動きの間に設ける最低の静止時間	各ビートの後に ≥ 0.3s 静止させる

イージングは最大2種類です。1つは「イン」（退出）、もう1つは「アウト」（登場／着地）です。3つ目のカーブを使う場合は、その必要性を説明できなければなりません。

モーションの階層

すべての要素に動きをつける必要はありません。各要素に優先順位をつけ、上から順にアニメーションを設定して、早めに切り上げます。この3つの階層が共通の3つのモーションレイヤーです（animation-principles を参照）：ヒーロー＝プライマリー、サポート＝セカンダリー、テクスチャ＝アンビエント。

階層	内容	動き方
ヒーロー	ショットの中心となる唯一の要素	最も大胆で、最もゆっくりとした、最もイージングの効いた動きをつけ、ビートに合わせて着地させます
サポート	ヒーローの着地を助けるコンテキスト	小さく、素早く、イージングしながら脇へ移動させます。決して競合させません
テクスチャ	背景、粒子、アンビエントなドリフト	目立たない動きだけにします。ゆっくりしたループ、低コントラスト、ハードカットなしです

1つのフレーム内で2つの要素が視線を奪い合うなら、演出の方向性に問題があります。一方をサポートに格下げしてください。

抑制 — アニメーションをつけないもの

熟練者の判断です。各要素について、この動きには意味があるか？ と問いかけてください。なければ、静止させておきます。

• フレーム全体を一度にアニメーションさせないでください。スタガーを使うか、視線を落ち着かせるために1つの要素を静止させてください。
• トランジション自体にトランジションを重ねないでください（アニメーション付きのワイプとスピンとフェードを同時に使わない）。
• 視聴者がまだ読んでいるテキストをループアニメーションさせないでください。
• 深刻な内容や金融関連のコンテンツにオーバーシュートを加えないでください。おもちゃのような印象になります。
• 作品ごとに「驚き」の演出は1回までです。2回目を入れると、最初の効果が打ち消されます。

ペースとリズム

ペースは編集の鼓動です。意図的に変化をつけましょう。緊張（より速く、よりタイトに）→解放（ホールド）。個々の動きのタイミングを決める前に、タイムライン全体のエネルギーを割り当てます。多くの作品では、エネルギーを抑えたオープニング、盛り上がり、ピーク、そして落ち着いたエンドカードが適しています。重要な瞬間は音声に合わせてカットし、着地させてください（ビート同期については launch-video を参照）。無音と静止はペースを作る手段であり、埋めるべき隙間ではありません。

一貫性の確認

最終承認の前に、すべてのショットを仕様表と照らし合わせて確認します。

• 同じような動きに同じイージングの種類を使っていますか？（場違いな linear や ease がありませんか？）
• すべての長さが基本の時間単位の倍数になっていますか？
• ショット間で選択した種類のトランジションだけを使っていますか？
• グループ化した要素を順に表示する際、スタガーのリズムは統一されていますか？
• ホールドのルールを守っていますか？（休止を挟まずに動きを重ねていませんか？）
• 各フレームのヒーローは厳密に1つですか？

どれか1つでも「いいえ」であれば、それは演出の方向性の不備であり、技術的な好みの問題ではありません。磨き込む前に修正してください。

参考ファイル

• references/direction-playbook.md — 5つのトーンセルにおけるモーション言語仕様の実例、ブリーフ全体のテンプレート、ショットごとの演出メモ用テンプレートと記入例、ブランドからモーションへの変換表、イージング用語のチートシート、レンダリング前の演出チェックリスト一式