SaaS & 生産性向上アニメーション原則

Disney の 12 原則を適用して、効率的で専門的な体験を作成し、集中力を高め、摩擦を軽減します。

12 原則の適用

1. スクワッシュ＆ストレッチ

• 最小限の使用: 専門的な文脈では抑制が必須
• チェックボックス: タスク完了時の微妙なスクワッシュ
• ボタン: タッチフィードバック用の軽い圧縮

2. 予測動作

• 保存アクション: 確認前の簡潔な準備
• フォーム送信: ボタン状態が処理を暗示
• ドラッグ開始: 移動前にエレメントが浮上

3. ステージング

• アクティブタスク: 現在の作業項目がフォーカスを取得
• サイドバーナビゲーション: メインコンテンツの次位
• 通知: 非侵襲的な配置

4. ストレートアヘッド＆ポーズ・トゥ・ポーズ

• ワークフロー: 明確なステップバイステップなプロセス（ポーズ・トゥ・ポーズ）
• リアルタイムコラボレーション: スムーズなカーソル移動（ストレートアヘッド）
• ダッシュボード更新: 順序立てたデータ読み込み

5. フォロースルー＆オーバーラッピングアクション

• カード移動: シャドウがカーソルで遅延
• リスト並び替え: アイテムが自然に定位
• パネルリサイズ: パネル停止後にコンテンツが調整

6. スローイン＆スローアウト

• 専門的なイージング: スムーズ、バウンスなし
• モーダルトランジション: 自信あるシーク 250-350ms
• 状態変化: 意図的、スナップなし

7. アーク

• ドラッグ＆ドロップ: 自然な曲線パス
• Kanban カード: 列間の弧
• 通知却下: スワイプが曲線に従う

8. セカンダリアクション

• 自動保存インジケーター: 保存中の微妙なパルス
• 同期ステータス: 更新中のバックグラウンド表示
• ローディングスケルトン: データ取得中のシマー

9. タイミング

• 効率的: ほとんどのインタラクションで 150-300ms
• 決してスロー: ユーザーは作業のためにいる
• 即座のフィードバック: 入力検証用 100ms

10. 誇張

• ほぼ使用禁止: 生産性は効率を要求
• マイルストーンのみ: プロジェクト完了、目標達成
• オンボーディング: 参加を促すために若干の遊心

11. ソリッドドローイング

• データ可視化: 明確で正確なチャート
• アイコン一貫性: すべての機能で均一
• タイポグラフィ: あらゆるサイズで読みやすい

12. アピール

• 専門的な洗練: 精緻だが派手でない
• 不可視デザイン: アニメーションは機能し、気を散らさない
• 信頼と信頼性: 一貫性のある予測可能なモーション

業界タイミング標準

アクション	期間	イージング
Button Feedback	100ms	ease-out
Modal Open	250ms	ease-out
Dropdown Menu	200ms	ease-in-out
Page Transition	300ms	ease-in-out
Toast Notification	200ms	ease-out

重要原則

アニメーションは、仕事に集中しているユーザーには見えないはずです。モーションはフィードバックを提供し、空間認識を保つために存在し、楽しませたり遅延させたりするためではありません。