mae616 Animation Principles Skill
参照
- Disney's 12 Principles of Animation（Frank Thomas & Ollie Johnston, 1981）
- Material Design - Motion
- Apple Human Interface Guidelines - Motion
- WCAG 2.1 Success Criterion 2.3.3: Animation from Interactions
発火条件
- アニメーション/モーション/トランジションの設計・レビューで「なぜこの動きなのか」の判断が必要な場合に適用する。
- 特定ツール（GSAP/CSS/Framer Motion等）に依存しない、概念的な判断軸として使う。
creative-coderスキルと併用されることが多い（本スキルが「原則」、creative-coderが「実装制約」を担当）。
このSkillの基本方針
- 原則: アニメーションは「情報を伝える手段」であり、装飾ではない。
- 判断基準: 「この動きを取り除いても情報は伝わるか？」→ Yesなら装飾的、Noなら機能的。
- 自然さ: 物理法則（重力/慣性/摩擦）に基づく動きが人間にとって自然に感じる。
- 余白: ジブリ的「間（ま）」— 動きの前後にタメと余韻を持たせる。
- アクセシビリティ:
prefers-reduced-motionを常に尊重する（WCAG 2.1 SC 2.3.3）。 - 静止の焦点アンカー: 動く要素だけを焦点にしない。静止した焦点物で視線を固定し、動きは周縁に落とす（酔い防止。「動かすなら、留まれる場所も用意する」）。
設計着手時の基本姿勢：アニメーション前提で設計する（motion-first）
「最初からアニメーションありきで設計する」ための着手姿勢。動きを“後から足す装飾”にせず、設計の初手から第一級の入力として扱う。
- なぜ: 静的な見た目を先に固めてから動きを「足す」と、動きは装飾になりやすく、情報伝達・レイアウト・状態と一体化しない。最初から「どう現れ、どう反応し、どう消えるか」を前提に組むと、レイアウト・状態・余白が動きを受け止める形で設計され、結果が自然で「生きている」感覚になる。
- どう効かせるか:
- 静的モック/UI骨格を起こす段階で、各要素に**「登場・反応・退場」を1行で添える**（「動きは後で」にしない）。
- 状態（hover/active/focus/loading/empty/error）は静止画の集合ではなく、状態“間”の遷移込みで見た目と同時に設計する。
- 物理を先に言語化してからイージングを選ぶ: 「ここで何が物理的に起きるか（落ちる/弾む/慣性/タメと余韻）」→ そのあとに duration/easing へ翻訳する（数値・イージング名から入らない）。
- reduced-motion 代替もこの段階で同時に決める（後手にしない。
prefers-reduced-motionは常に尊重）。
- 誤解しないこと（motion-first ≠ 動きを増やす）: 「最初から考える」と「たくさん動かす」は別物。下記の「重要な瞬間だけ動かす（メリハリ）」原則は維持する。
デザインシステムのモーション原則
Material Design の3原則
- Informative（情報的）: 要素間の関係、アクションの可用性、結果を動きで明確化する。
- Focused（集中的）: 本質的な情報を示し、不要な気晴らしを避ける。動きは注意を導くもの。
- Expressive（表現的）: ユーザージャーニーの瞬間を祝福し、ブランドスタイルを表現する。
Apple HIG のモーション原則
- 意図的なアニメーション: ユーザーをオリエンテーションし、フィードバックを提供し、学習を支援する。
- 頻繁な操作に不要な動きを追加しない: 標準UIは既に微細なアニメーションを持つ。
- 一貫性: カスタムアニメーションはiOS/macOSのビルトインアニメーションと同等であるべき。
12原則のUI適用ガイド
1. Squash & Stretch（つぶしと伸ばし）
- UI適用: ボタンのタップフィードバック、モーダルの出現/消失でスケール変化を付ける。
- 注意: 過度な変形は不自然。微細（5-10%）で十分。
2. Anticipation（予備動作）
- UI適用: アクション前の小さな引き（ボタンが微妙に沈む → 確定動作）。
- 目的: ユーザーに「何かが起こる」と予告する。
3. Staging（演出）
- UI適用: 重要な要素を目立たせ、他を抑える。フォーカス管理、視線誘導。
- 目的: 一度に伝える情報を1つに絞る。
4. Straight Ahead / Pose to Pose（逐次描き / 原画間）
- UI適用: 逐次 = パーティクル等のリアルタイム生成。原画間 = キーフレームベースのトランジション。
- 判断: 制御が必要ならPose to Pose、偶然性が欲しいならStraight Ahead。
5. Follow Through / Overlapping Action（残し / 重なり）
- UI適用: メニュー展開時に各項目が少しずつ遅れて追従する（stagger）。
- 目的: 動きに有機的なリズムを作る。
6. Slow In / Slow Out（緩急）
- UI適用: イージング。等速（linear）は機械的。ease-out（減速）が自然な終わり方。
- 原則: 開始と終了を緩やかに、中間を速くする。
7. Arc（弧を描く動き）
- UI適用: 直線移動より弧を描く方が自然。ドラッグ&ドロップ、画面遷移のパス。
- 注意: UIでは微妙な弧で十分。過度な曲線は違和感。
8. Secondary Action（副次動作）
- UI適用: メインアクション（モーダル出現）に添える微細な効果（背景のブラー変化）。
- 原則: 副次はメインを補強する。目立ちすぎてはいけない。
9. Timing（タイミング）
- UI適用: duration（持続時間）の選択。短すぎると見えない、長すぎるとストレス。
- 目安: マイクロインタラクション 100-200ms、画面遷移 200-500ms、アテンション 300-700ms。
10. Exaggeration（誇張）
- UI適用: 重要な状態変化を強調する（エラー時の振動、成功時の弾み）。
- 注意: UIでの誇張は控えめに。10-20%の「ちょっと大げさ」が心地よい。
11. Solid Drawing（立体的表現）
- UI適用: シャドウ、奥行き、Z軸の意識。Material Designの「高さ（elevation）」に相当。
- 目的: 空間関係を明示する。
12. Appeal（魅力）
- UI適用: ブランドトーンに合った「らしさ」。遊び心のある微細なモーション。
- 原則: 機能を犠牲にしない範囲でキャラクターを出す。
ジブリ的アニメーションアプローチ
- 重力表現: 物が落ちる時の加速、跳ねる時の減速を物理的に正しく。
- 自然な動き: 風に揺れる、水が流れるなど、環境要因による微細な動き。
- 間（ま）: 動きの前後に「タメ」と「余韻」を持たせる。即座に始まり即座に終わる動きは機械的。
- 「生きている」感覚: 静止状態でも微細な揺れや呼吸を入れる（idle animation）。
出力フォーマット（必ずこの順）
- 推奨方針（1〜3行）
- 適用する原則（12原則のどれか + ジブリ的要素があれば）
- 理由（なぜこの動きが必要か / 情報伝達における役割）
- 設計案（duration / easing / stagger / 副次動作）
- アクセシビリティ（reduced-motion時の代替）
- 落とし穴（避けるべき）
チェックリスト
- 設計の初手で「登場・反応・退場」と状態遷移を言語化したか（後付けの装飾になっていないか／motion-first）
- この動きは「情報伝達」に寄与しているか（装飾的なだけではないか）
- durationは適切か（マイクロ: 100-200ms、遷移: 200-500ms）
- イージングはlinear以外を選んでいるか（ease-outが自然な終わり方）
-
prefers-reduced-motionで代替表現（dissolve/highlight fade/色変化等）を提供しているか（WCAG 2.3.3） - アニメーションの目的を1文で説明できるか（Informative/Focused/Expressiveのどれか）
- 誇張の度合いは適切か（UIでは控えめが原則）
よくある落とし穴
- 装飾的アニメーションの過剰（動きが多すぎてユーザーが疲れる）
- duration選択のミス（速すぎて認識できない / 遅すぎてストレス）
- linear easingの多用（機械的で不自然に感じる）
prefers-reduced-motionの無視（前庭障害を持つユーザーに苦痛を与える）- 原則の過剰適用（12原則すべてを1つのUIに詰め込む必要はない）
- ジブリ的「間」の過剰（ウェブUIでは長い余韻はストレスになりうる）
- ブランドトーンとの不一致（遊び心がフォーマルなアプリに合わない等）