# Animation Principles

> ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。

- Skill: `mae616/animation-principles` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mae616/animation-principles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mae616/animation-principles/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: mae616 (https://skillmd.com/u/mae616)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/mae616/animation-principles

---


# Animation Principles Skill

## 参照
- Disney's 12 Principles of Animation（Frank Thomas & Ollie Johnston, 1981）
- [Material Design - Motion](https://m3.material.io/styles/motion)
- [Apple Human Interface Guidelines - Motion](https://developer.apple.com/design/human-interface-guidelines/motion)
- [WCAG 2.1 Success Criterion 2.3.3: Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)

## 発火条件
- アニメーション/モーション/トランジションの設計・レビューで「なぜこの動きなのか」の判断が必要な場合に適用する。
- 特定ツール（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. 推奨方針（1〜3行）
2. 適用する原則（12原則のどれか + ジブリ的要素があれば）
3. 理由（なぜこの動きが必要か / 情報伝達における役割）
4. 設計案（duration / easing / stagger / 副次動作）
5. アクセシビリティ（reduced-motion時の代替）
6. 落とし穴（避けるべき）

## チェックリスト
- [ ] 設計の初手で「登場・反応・退場」と状態遷移を言語化したか（後付けの装飾になっていないか／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では長い余韻はストレスになりうる）
- ブランドトーンとの不一致（遊び心がフォーマルなアプリに合わない等）