saas-productivity

SaaS と生産性向上のためのアニメーション原則

ディズニーの12の原則を適用して、集中力を高め、操作の摩擦を減らす、効率的でプロフェッショナルな体験を実現します。

12の原則の適用

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

• 最小限の使用：プロフェッショナルな場面では控えめにします
• チェックボックス：タスク完了時にさりげなくスクワッシュします
• ボタン：触覚的なフィードバックを得られるよう、わずかに押し込みます

2. 予備動作

• 保存操作：確定の前に短い準備動作を入れます
• フォーム送信：処理中であることをボタンの状態で示します
• ドラッグ開始：移動する前に要素を浮かせます

3. 演出

• 進行中のタスク：現在の作業項目に焦点を当てます
• サイドバーナビゲーション：メインコンテンツより控えめにします
• 通知：邪魔にならない場所に配置します

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

• ワークフロー：明確な手順を順を追って示します（ポーズ・トゥ・ポーズ）
• リアルタイムコラボレーション：カーソルを滑らかに動かします（ストレート・アヘッド）
• ダッシュボードの更新：データを順次読み込みます

5. 後追いとオーバーラッピング・アクション

• カードの移動：カードの後を遅れて影が追います
• リストの並べ替え：項目が自然に落ち着きます
• パネルのサイズ変更：パネルが止まった後にコンテンツを調整します

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

• プロフェッショナルなイージング：滑らかにし、弾む動きは避けます
• モーダルの遷移：自信を感じさせる250〜350msにします
• 状態の変化：意図的に行い、性急にならないようにします

7. アーク

• ドラッグ＆ドロップ：自然な曲線の軌道にします
• カンバンカード：列の間を弧を描いて移動させます
• 通知の非表示：スワイプが曲線を描くようにします

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

• 自動保存インジケーター：保存中にさりげなく脈動させます
• 同期ステータス：更新中にバックグラウンドでインジケーターを表示します
• ローディングスケルトン：データの取得中にシマーを表示します

9. タイミング

• 効率的に：ほとんどの操作を150〜300msにします
• 遅くしない：ユーザーは作業をするためにここにいます
• 即時のフィードバック：入力の検証は100msで行います

10. 誇張

• ほとんど使わない：生産性には効率が求められます
• マイルストーンのみ：プロジェクトの完了、目標の達成
• オンボーディング：ユーザーの関心を引くため、少し遊び心を加えます

11. 立体感のある描画

• データの可視化：明瞭で正確なグラフを使用します
• アイコンの一貫性：すべての機能で統一します
• タイポグラフィ：あらゆるサイズで読みやすくします

12. 魅力

• プロフェッショナルな仕上がり：洗練させ、派手にはしません
• 目立たないデザイン：アニメーションは役に立つものとし、注意をそらさないようにします
• 信頼性と安心感：動きに一貫性を持たせ、予測可能にします

業界標準のタイミング

操作	継続時間	イージング
ボタンのフィードバック	100ms	ease-out
モーダルを開く	250ms	ease-out
ドロップダウンメニュー	200ms	ease-in-out
ページ遷移	300ms	ease-in-out
トースト通知	200ms	ease-out

重要な原則

作業に集中しているユーザーに、アニメーションを意識させてはいけません。動きはフィードバックを提供し、空間認識を維持するために存在します。楽しませたり、遅らせたりするためのものではありません。