モーションデザインスキル

適用するとき

このスキルを使用する場合:

• UI アニメーション (ボタン、カード、モーダル、ページ遷移) を作成するとき
• マイクロインタラクションと フィードバックアニメーションをデザインするとき
• ローディング、成功、またはエラー状態を構築するとき
• イラストや装飾要素をアニメーションするとき
• スクロールトリガーまたはプログレスベースのアニメーションを計画するとき
• ブランドモーションアイデンティティを確立するとき
• マルチ要素シーケンスの振付をするとき

デシジョンツリー:

1. 機能的な目的 (フィードバック、ガイダンス) があるか? → レスポンシブのためのタイミングルール
2. ブランドのパーソナリティを表現しているか? → モーションパーソナリティアーキタイプ
3. ストーリーを語っているか、注意を誘導しているか? → ディズニー原則 + 振付
4. 複雑なマルチ要素シーンか? → 1/3 ルール + スタッガーパターン

---

クイックリファレンス: 8ステップチェックリスト

アニメーション作成前に:

1. 感情的なターゲット? — 喜び、落ち着き、緊迫感、優雅さ
2. モーションパーソナリティ? — Playful、Premium、Corporate、Energetic
3. プライマリプロパティ? — position、scale、rotation、opacity
4. デュレーション? — 以下のデュレーションテーブルを参照
5. イージングファミリー? — 進入=decelerate、退出=accelerate
6. ヒーロー要素? — ステージング原則を適用
7. セカンダリ + アンビエントレイヤー? — 豊かさを追加
8. 1/3 ルール? — モーション距離、同時実行要素

---

3つの柱 (重要)

すべてのアニメーションは、技術的な決定を行う前に 3 つの柱を満たす必要があります:

柱	質問	駆動するもの
感情的インテント	視聴者は何を感じるべきか?	イージング、タイミング、振幅
ビジュアルナラティブ	マイクロストーリーは何か?	セットアップ → アクション → レゾリューション
モーションクラフト	信頼性を持たせるには?	フィジックス、セカンダリモーション、パス

3 つのモーションレイヤー (フラットなアニメーション = レイヤー不足):

• プライマリ: 視聴者が追う主なアクション
• セカンダリ: サポートする豊かさ (シャドウ、アイコンのシフト)
• アンビエント: 背景のライフ (グラデーション、微妙なパルス)

詳細: director/core-philosophy.md

---

モーションパーソナリティ

プロジェクトごとに 1 つのアーキタイプを選択。一貫して適用してください。

アーキタイプ	デュレーション	イージング	オーバーシュート	キーワード
Playful	150-300ms	ease-out-back	10-20%	fun、whimsical、bouncy、cute
Premium	350-600ms	cubic-bezier(0.4,0,0.2,1)	0%	elegant、minimal、luxury、sophisticated
Corporate	200-400ms	cubic-bezier(0.2,0,0,1)	0-3%	clean、professional、business、dashboard
Energetic	100-250ms	ease-out-expo	15-30%	dynamic、energetic、bold、exciting

デフォルト: UI は Corporate、イラストは Playful。

ブランドモーションアイデンティティ — 3 つの定数を定義:

1. シグネチャイージング: アニメーションの 80% に使用する 1 つのカーブ
2. デュレーションパレット: 3 つのデュレーション (quick / standard / slow)
3. エントランスパターン: 1 つの一貫したエントリスタイル

詳細: director/motion-personality.md

---

プロパティ選択

エフェクト目的	プライマリプロパティ	セカンダリプロパティ
進入/退出	position	opacity、scale
強調/注意	scale	rotation (微妙)、opacity pulse
状態変化	opacity、color	scale (プレスフィードバック)
方向/フロー	position	rotation (パスに従う)
深度/3D フィール	scale + shadow	position (parallax)
ローディング/プログレス	rotation (spinner)	scale、opacity pulse
成功	scale (pop)	color、rotation (checkmark draw)
エラー/アラート	position (shake)	color、rotation (wobble)

シンプリシティの閾値: 必要最小限のプロパティを使用してください。1 つ = ダイレクト。2 つ = ポーランド。3 つ以上 = 圧倒的な可能性。

詳細: reference/property-selection.md

---

デュレーションテーブル

要素タイプ	デュレーション	根拠
ツールチップ / マイクロフィードバック	80-120ms	即座に感じる必要がある
ボタンプレス / トグル	120-180ms	レスポンシブフィードバック
アイコン遷移	150-250ms	明確な状態変化
カード進入 / 退出	200-350ms	空間認識
モーダル / ダイアログ	300-400ms	フォーカスシフト
ページ遷移	400-600ms	コンテキストスイッチ
ドラマティックリビール	600-1200ms	シアトリカルビルド

距離がデュレーションをスケール: 100px = ベース。200px = 1.3x。400px = 1.6x。

進入 > 退出: 進入は退出より 30-50% 長い。ユーザーは表示されるものに注意する。

インタラクティブフィードバック:

• ホバー: <100ms
• プレス: <150ms
• リリース/セトル: 200-300ms
• エラーシェイク: 300-400ms (2-3 振動)

詳細: reference/timing-easing-tables.md

---

イージング選択

方向的ルール:

• 進入 → decelerate (高速スタート、穏やかなランディング): ease-out ファミリー
• 退出 → accelerate (穏やかなスタート、高速出発): ease-in ファミリー
• 画面内 → 両端スムーズ: ease-in-out ファミリー
• ループアンビエント → シームレス: sine ベースの ease-in-out

業界標準:

標準	Cubic Bezier	用途
Material Design 3	(0.2, 0, 0, 1)	画面内デフォルト
MD3 Emphasized	(0.05, 0.7, 0.1, 1)	進入、注意
MD3 Accelerate	(0.3, 0, 1, 1)	退出、ディスミッサル
Apple HIG	(0.25, 0.1, 0.25, 1)	標準 iOS
Snappy UI	(0.2, 0, 0, 1)	高速、確定的
Gentle float	(0.4, 0, 0.2, 1)	アンビエント、背景
Bounce settle	(0.175, 0.885, 0.32, 1.275)	オーバーシュート、playful

マテリアルベースのイージング:

マテリアル	デュレーションスケール	オーバーシュート
Rigid (metal、stone)	1.2x	0%
Elastic (rubber、gel)	0.8x	15-25%
Fluid (water、paint)	1.5x	5%
Paper (cards、sheets)	1.0x	3-5%
Gas (smoke、fog)	2.0x	0%
Glass (brittle)	0.9x	0%

詳細: reference/timing-easing-tables.md

---

一般的なパターン

ボタンプレス (Playful)

1. 予期: Scale to 0.97 (50ms、ease-out)
2. スクワッシュ: Scale to [1.04、0.96] (100ms、ease-in)
3. フォロースルー: Overshoots to 1.02、settles to 1.0 (spring、200ms)
4. セカンダリ: プレス時にシャドウが縮小、アイコンが 2px 下にシフト
5. 合計: ~150ms プレス + 200ms セトル

カード進入 (Premium)

1. スタート: ターゲットより 20px 下、opacity 0
2. パス: 微妙なカーブ (中点で 10px X オフセット)
3. イージング: ease-out-cubic deceleration
4. フォロースルー: シャドウはカード着地後 50ms で到着
5. セカンダリ: コンテンツはカード着地後 100ms でフェードイン
6. ステージング: 他のカードは 80% にディム

成功状態 (Playful)

1. プライマリ: ease-out-back を使用した Scale pop
2. セカンダリ: チェックマークの描画
3. アンビエント: 微妙なパーティクルバースト
4. カラー: グリーン フィル
5. 合計: 300-400ms

エラーシェイク (Corporate)

1. プライマリ: Position が 2-3 回振動、±10-15px 水平
2. イージング: ease-in-out で鋭いストップ
3. カラー: 赤いティント
4. 合計: 300-400ms
5. オーバーシュートなし: エラーはしっかりした感じ

さらにパターン: patterns/entrance-exit.md | patterns/state-feedback.md

---

振付エッセンシャル

調整されたエントリ:

• ヒーローをリードで — プライマリ要素が最初に、または最も目立つように進入
• 空間的一貫性 — すべての要素が同じ方向から進入
• カウンターモーション — ヒーロが右に動く → アンビエントが 20-30% スピードで左に動く

1/3 ルール (距離): キーフレーム変更なしで、モーションが画面の 1/3 を超えて移動しない。

1/3 ルール (要素): 3 つ以上の要素がある場合、同時にアクティブに動いている要素は 1/3 以下。

スタッガーバジェット:

パターン	遅延	合計バジェット	ユースケース
Micro cascade	20-40ms	<200ms	リストアイテム、グリッドセル
Standard	50-100ms	<400ms	カード、パネル、ナビ
Dramatic	100-200ms	<600ms	ヒーロセクション
Wave	30-60ms	<500ms	データビジュアライゼーション

重要: 合計スタッガーは 500ms 以下に留める必要があります。

詳細: director/choreography.md

---

感情からモーションへのマップ

感情	キャラクター	パス	イージング	デュレーション
Joy	Bouncy、arcs	Curved、upward	ease-out-back	200-400ms
Calm	Smooth、flowing	Gentle curves	sine ease-in-out	500-1000ms
Urgency	Sharp、fast	Straight lines	ease-out	100-200ms
Sadness	Slow、downward	Drooping curves	cubic ease-in-out	600-1200ms
Surprise	Sudden、expanding	Radial outward	ease-out-expo	150-300ms
Elegance	Slow、controlled	Long arcs	(0.4,0,0.2,1)	400-700ms
Playfulness	Bouncy、irregular	Arcs、squiggly	ease-out-back	200-350ms

言語としてのパス: Angular = テンション。Curved = フレンドリー。Spiral = whimsical。Diagonal = 意図的。Vertical = 成長/重み。Horizontal = プログレス。

詳細: director/emotion-mapping.md

---

重みの分類

重さ	例	デュレーション	オーバーシュート	イージング
Heavy	モーダル、オーバーレイ	300-500ms	0%	Gentle、高ダンピング
Medium	カード、パネル	200-350ms	3-5%	Moderate
Light	ツールチップ、バッジ、アイコン	80-200ms	5-15%	レスポンシブ

---

品質ルール

重要 — 絶対に破るな

1. 空間的モーションに linear を使用しない — 常にイージングカーブを使用 (spinner、プログレスバーのみ linear)
2. 重要な状態変化に opacity のみを使用しない — position または scale と組み合わせる
3. 中間キーフレームなしで 1/3 画面を超えない
4. 常に 3 つのモーションレイヤー — primary + secondary + ambient

高 — 強く従う

1. 要素タイプに合わせてデュレーションをマッチさせる (テーブルを参照)
2. 方向的イージングを使用 (ease-out 進入、ease-in 退出)
3. ディズニー原則を適用 (特に anticipation、follow-through)
4. シーン全体でパーソナリティを一貫させる

完全なチェックリスト: reference/quality-checklist.md

---

トラブルシューティング クイックリファレンス

問題	可能な原因	修正
ロボットのように見える	Linear イージングまたはアーク不足	イージングカーブ + アークパスを追加
遅すぎる	要素タイプに対してデュレーションが長い	デュレーションテーブルをチェック、ease-out を使用
安っぽい/フラット	セカンダリ + アンビエント不足	シャドウモーション + 背景のライフを追加
気が散る	動いている要素が多すぎる	1/3 ルールを適用、振幅を減らす
パーソナリティがない	どこでも一般的なイージング	パーソナリティアーキタイプを一貫して適用

詳細: reference/troubleshooting.md

---

ファイルリファレンス

フィロソフィー (director/):

• core-philosophy.md — 3 つの柱の深掘り
• decision-framework.md — 完全なデシジョンパイプライン
• disney-principles.md — 12 原則、UI 適応
• motion-personality.md — 4 つのアーキタイプ + ブランドアイデンティティ
• emotion-mapping.md — 感情 → モーション + カラーサイコロジー
• choreography.md — マルチ要素のコーディネーション
• narrative-structure.md — マイクロストーリーフレームワーク
• context-adaptation.md — プラットフォーム、a11y、パフォーマンス

リファレンス (reference/):

• timing-easing-tables.md — デュレーション + イージングルックアップ
• property-selection.md — プロパティコミュニケーションガイド
• troubleshooting.md — アニメーション スメル + 修正
• quality-checklist.md — 評価基準

パターン (patterns/):

• entrance-exit.md — 進入/退出レシピ
• state-feedback.md — 成功、エラー、ローディング、ホバー
• ambient-continuous.md — ループ、呼吸、parallax
• multi-element.md — スタッガー + 振付レシピ