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. 推奨方針（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では長い余韻はストレスになりうる）
• ブランドトーンとの不一致（遊び心がフォーマルなアプリに合わない等）