motion-design

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

適用する場面

以下の場合にこのスキルを使用します。

• UI アニメーション（ボタン、カード、モーダル、ページ遷移）を作成するとき
• マイクロインタラクションやフィードバックアニメーションをデザインするとき
• 読み込み、成功、エラーの状態を構築するとき
• イラストや装飾要素にアニメーションを付けるとき
• スクロール連動型または進捗ベースのアニメーションを計画するとき
• ブランドのモーションアイデンティティを確立するとき
• 複数要素からなるシーケンスを振り付けるとき

判断フロー：

1. 機能的な目的（フィードバック、ガイダンス）がありますか？ → 応答性を高めるタイミングルール
2. ブランドの個性を表現しますか？ → モーションパーソナリティのアーキタイプ
3. ストーリーを伝えたり、注意を誘導したりしますか？ → ディズニーの原則＋振り付け
4. 複数要素からなる複雑なシーンですか？ → 1/3 ルール＋スタガーパターン

---

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

アニメーションを作成する前に、以下を確認します。

1. 感情的な目標は？ — 喜び、落ち着き、緊迫感、優雅さ
2. モーションパーソナリティは？ — 遊び心のある、プレミアム、企業的、エネルギッシュ
3. 主要なプロパティは？ — 位置、スケール、回転、不透明度
4. 継続時間は？ — 下記の継続時間表を参照
5. イージングの種類は？ — 進入＝減速、退出＝加速
6. 主役となる要素は？ — 演出の原則を適用
7. セカンダリ＋アンビエントのレイヤーは？ — 豊かさを加える
8. 1/3 ルールは？ — 移動距離、同時に動く要素

---

3 つの柱（重要）

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

柱	問い	影響するもの
感情的な意図	見る人にどんな感情を抱いてほしいですか？	イージング、タイミング、振幅
視覚的なナラティブ	どのような小さなストーリーですか？	セットアップ → アクション → 解決
モーションの技巧	どうすれば本物らしく見せられますか？	物理、セカンダリモーション、パス

3 つのモーションレイヤー（フラットなアニメーションはレイヤー不足です）：

• プライマリ：見る人が追うメインアクション
• セカンダリ：豊かさを支える要素（影、アイコンの移動）
• アンビエント：背景の動き（グラデーション、微細なパルス）

詳細：director/core-philosophy.md

---

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

プロジェクトごとにアーキタイプを 1 つ選び、一貫して適用します。

アーキタイプ	継続時間	イージング	オーバーシュート	キーワード
遊び心のある	150-300ms	ease-out-back	10-20%	楽しい、気まぐれ、弾む、かわいい
プレミアム	350-600ms	cubic-bezier(0.4,0,0.2,1)	0%	優雅、ミニマル、高級、洗練
企業的	200-400ms	cubic-bezier(0.2,0,0,1)	0-3%	すっきり、プロフェッショナル、ビジネス、ダッシュボード
エネルギッシュ	100-250ms	ease-out-expo	15-30%	ダイナミック、活気、力強い、刺激的

デフォルト：UI には企業的、イラストには遊び心のあるスタイルを使います。

ブランドのモーションアイデンティティ — 次の 3 つの定数を定義します。

1. シグネチャーイージング：アニメーションの 80% に使う 1 つのカーブ
2. 継続時間パレット：3 つの継続時間（速い／標準／遅い）
3. 進入パターン：一貫して使う 1 つの進入スタイル

詳細：director/motion-personality.md

---

プロパティの選択

効果の目標	主要なプロパティ	セカンダリプロパティ
進入／退出	位置	不透明度、スケール
強調／注意喚起	スケール	回転（控えめ）、不透明度のパルス
状態変化	不透明度、色	スケール（押下時のフィードバック）
方向／流れ	位置	回転（パスに沿う）
奥行き／3D 感	スケール＋影	位置（パララックス）
読み込み／進捗	回転（スピナー）	スケール、不透明度のパルス
成功	スケール（ポップ）	色、回転（チェックマークの描画）
エラー／警告	位置（シェイク）	色、回転（揺れ）

シンプルさの基準：必要最小限のプロパティを使います。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

---

イージングの選択

方向に関するルール：

• 表示 → 減速（速く開始し、穏やかに着地）：ease-out 系
• 退出 → 加速（穏やかに開始し、素早く離れる）：ease-in 系
• 画面上での動き → 両端を滑らかにする：ease-in-out 系
• ループする環境演出 → シームレスにする：サイン波ベースの 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)	オーバーシュート、遊び心のある動き

素材ベースのイージング：

素材	継続時間の倍率	オーバーシュート
剛体（金属、石）	1.2x	0%
弾性体（ゴム、ゲル）	0.8x	15-25%
流体（水、絵の具）	1.5x	5%
紙（カード、シート）	1.0x	3-5%
気体（煙、霧）	2.0x	0%
ガラス（もろい）	0.9x	0%

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

---

よくあるパターン

ボタンの押下（遊び心のある動き）

1. 予備動作：0.97 に拡大縮小（50ms、ease-out）
2. 押しつぶし：[1.04, 0.96] に拡大縮小（100ms、ease-in）
3. フォロースルー：1.02 までオーバーシュートし、1.0 に落ち着きます（スプリング、200ms）
4. 副次的な動き：押下中に影が小さくなり、アイコンが2px下に移動します
5. 合計：押下に約150ms＋静止まで200ms

カードの表示（高級感のある動き）

1. 開始位置：目標位置より20px下、透明度0
2. 軌跡：わずかなカーブ（中間点でX方向に10pxずらす）
3. イージング：ease-out-cubic による減速
4. フォロースルー：カードの50ms後に影が表示されます
5. 副次的な動き：カードが着地してから100ms後にコンテンツがフェードインします
6. 演出の配置：ほかのカードの明るさを80%に落とします

成功状態（遊び心のある動き）

1. 主動作：ease-out-back でポップするように拡大縮小
2. 副次的な動き：チェックマークが描画されます
3. 環境演出：控えめなパーティクルのバースト
4. 色：緑の塗りつぶし
5. 合計：300-400ms

エラー時の揺れ（企業向け）

1. 主動作：位置を水平方向に±10-15px、2-3回振動させます
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以下にします。

スタッガーの予算：

パターン	遅延	合計時間の上限	使用例
マイクロカスケード	20-40ms	<200ms	リスト項目、グリッドセル
標準	50-100ms	<400ms	カード、パネル、ナビゲーション
ドラマチック	100-200ms	<600ms	ヒーローセクション
ウェーブ	30-60ms	<500ms	データビジュアライゼーション

重要：スタッガーの合計時間は500ms未満にしてください。

詳細：director/choreography.md

---

感情と動きの対応表

感情	特徴	軌跡	イージング	期間
喜び	弾むような動き、弧を描く	上向きの曲線	ease-out-back	200-400ms
穏やかさ	滑らかで流れるような動き	緩やかな曲線	sine ease-in-out	500-1000ms
緊急性	鋭く、速い	直線	ease-out	100-200ms
悲しみ	ゆっくりと下向き	垂れ下がる曲線	cubic ease-in-out	600-1200ms
驚き	突然、広がる	放射状に外向き	ease-out-expo	150-300ms
優雅さ	ゆっくりと、制御された動き	長い弧	(0.4,0,0.2,1)	400-700ms
遊び心	弾むような、不規則な動き	弧、曲がりくねった線	ease-out-back	200-350ms

軌跡が伝えるもの：角ばった動き＝緊張感。曲線＝親しみやすさ。螺旋＝気まぐれさ。斜め＝目的意識。垂直＝成長／重み。水平＝進行。

詳細：director/emotion-mapping.md

---

重さの分類

重さ	例	期間	オーバーシュート	イージング
重い	モーダル、オーバーレイ	300-500ms	0%	緩やか、高い減衰
中程度	カード、パネル	200-350ms	3-5%	中程度
軽い	ツールチップ、バッジ、アイコン	80-200ms	5-15%	応答性の高い動き

---

品質ルール

重大 — 絶対に破らない

1. 空間的な動きに線形イージングを使わない — 必ずイージング曲線を使います（線形を使うのはスピナーとプログレスバーのみ）
2. 重要な状態変化に不透明度だけを使わない — 位置またはスケールの変化を組み合わせます
3. 中間のキーフレームなしに画面の1/3を超えて移動させない
4. 常に3つの動きのレイヤーを使う — プライマリ＋セカンダリ＋アンビエント

高優先度 — 必ず守る

1. 要素の種類に合わせて期間を設定します（表を参照）
2. 方向性のあるイージングを使います（登場時はease-out、退場時はease-in）
3. ディズニーの原則を適用します（特に予備動作と後追い）
4. シーン全体で一貫した個性を保ちます

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

---

トラブルシューティング早見表

問題	主な原因	対処法
ロボットのように見える	線形イージング、または弧がない	イージング曲線と弧を描く軌跡を加えます
遅すぎると感じる	要素の種類に対して期間が長すぎる	期間の表を確認し、ease-outを使います
安っぽく平板に感じる	セカンダリとアンビエントがない	影の動きと背景の動きを加えます
気が散りすぎる	動く要素が多すぎる	1/3ルールを適用し、振幅を小さくします
個性がない	どこでも同じ汎用的なイージングを使っている	個性のアーキタイプを一貫して適用します

詳細：reference/troubleshooting.md

---

ファイル一覧

理念（director/）:

• core-philosophy.md — 三本柱の詳細
• decision-framework.md — 意思決定プロセス全体
• disney-principles.md — UI向けに応用した12の原則
• motion-personality.md — 4つのアーキタイプ＋ブランドアイデンティティ
• emotion-mapping.md — 感情 → 動き＋色彩心理
• choreography.md — 複数要素の連携
• narrative-structure.md — マイクロストーリーのフレームワーク
• context-adaptation.md — プラットフォーム、アクセシビリティ、パフォーマンス

リファレンス（reference/）:

• timing-easing-tables.md — 時間＋イージングの一覧
• property-selection.md — プロパティの伝達ガイド
• troubleshooting.md — アニメーションの問題点＋修正方法
• quality-checklist.md — 評価基準

パターン（patterns/）:

• entrance-exit.md — 登場／退場のレシピ
• state-feedback.md — 成功、エラー、読み込み、ホバー
• ambient-continuous.md — ループ、呼吸、視差
• multi-element.md — スタガー＋振り付けのレシピ