マイクロインタラクション アニメーション

ディズニーの12の基本原則を、小さなUI フィードバック モーメントとインターフェース詳細に適用します。

クイックリファレンス

原則	マイクロインタラクション実装
Squash & Stretch (スクワッシュ＆ストレッチ)	ボタン押下の圧縮、トグルバウンス
Anticipation (予期)	ホバー状態のヒント、クリック前フィードバック
Staging (ステージング)	アクティブ要素への注目を集中
Straight Ahead / Pose to Pose (ストレートアヘッド / ポーズトゥーポーズ)	プログレス vs 状態変化
Follow Through / Overlapping (フォロースルー / オーバーラップ)	リップル効果、沈下モーション
Slow In / Slow Out (スローイン / スローアウト)	スナッピーだがスムーズなトランジション
Arc (アーク)	トグルスイッチ、サーキュラーメニュー
Secondary Action (二次アクション)	アイコンが親の状態に応答
Timing (タイミング)	ほとんどのインタラクションで100-300ms
Exaggeration (誇張)	クリアだが気を散らさない
Solid Drawing (堅実なドローイング)	一貫したトランスフォーム動作
Appeal (アピール)	喜びに満ちた、目的のあるフィードバック

原則の適用

Squash & Stretch: ボタンは押下時に軽く圧縮されます (scaleY: 0.95)。トグルのサムはバウンダリに到達時に圧縮します。通知バッジは更新時にバウンスします。微妙に保つ—これはUIであり、漫画ではありません。

Anticipation: ホバー状態はクリックに備えます。ボタンは押下アニメーション前にわずかに上昇/拡大します。ドラッグ可能なアイテムはつかみ始時に上昇します。読み込みスピナーは回転前にウインドアップします。

Staging: アクティブなフォームフィールドが明確に区別されます。エラー状態は注目を要求します。成功確認は明白です。一度に1つのインタラクション フィードバック。

Straight Ahead vs Pose to Pose: プログレスインジケーターは連続的にアニメーション化します (ストレートアヘッド)。チェックボックスは状態間でスナップします (ポーズトゥーポーズ)。組み合わせ: 読み込みインジケーターは状態変化スナップで終了します。

Follow Through & Overlapping: リップル効果はタップポイントを超えて拡大します。トグルスイッチはオーバーシュートしてから落ち着きます。チェックマークはボックスが満たされた後わずかな遅延で描画されます。メニューアイテムはずらされて現れます。

Slow In / Slow Out: レスポンシブな感覚のためのクイック イーズアウト。ease-out付き100msは瞬時に感じます。リニアを避ける—壊れているように見えます。スナッピーな開始、やさしい沈下。

Arc: トグルスイッチは軽い弧を描いて移動します。サーキュラー アクションボタンは放射状に拡大します。ドロップダウンのキャレットはスムーズに回転します。メニューアイテムは曲線経路に従うことができます。

Secondary Action: アイコンはボタン状態の変化に応じて色が変わります。バッジカウントは親の通知で更新されます。ヘルパーテキストはインプットフォーカス時に現れます。シャドウは上昇に応答します。

Timing: 即座フィードバック: 50-100ms。標準トランジション: 100-200ms。複雑なマイクロインタラクション: 200-300ms。これより長いと小さいUIでは鈍く感じます。

Exaggeration: 気付く十分なものだが、気を散らすほどではありません。エラーシェイク: 3-5px、20pxではなく。成功スケール: 1.05-1.1、1.5ではなく。微妙だが明白。

Solid Drawing: トランスフォーム オリジンが重要です—ボタンは中心からスケール、ツールチップはポインターから。同様の要素間での一貫した動作。アニメーション中のビジュアル整合性を維持します。

Appeal: マイクロインタラクションは圧倒せずにパーソナリティを追加します。ユーザーはインターフェースがレスポンシブで生きているように感じるべきです。小さな喜びが全体的な経験品質に組み込まれます。

コンポーネント パターン

ボタン状態

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

トグルスイッチ

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

チェックボックス

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

タイミング リファレンス

インタラクション	継続時間	イージング
ホバー	100ms	ease-out
クリック/タップ	100ms	ease-out
トグル	150-200ms	spring/elastic
チェックボックス	150ms	ease-out
フォーカスリング	100ms	ease-out
ツールチップ表示	150ms	ease-out
ツールチップ非表示	100ms	ease-in
バッジ更新	200ms	elastic
フォーム エラー	200ms	ease-out

ベストプラクティス

1. すべてのインタラクティブ要素にはフィードバックが必要
2. 無効状態: アニメーションなし、低減不透明度
3. 関連フィードバックをグループ化
4. すべての変化でアニメーションしない—不要な更新をフィルタリング
5. アニメーションなしでテスト—機能はそれに依存してはいけません
6. prefers-reduced-motion を尊重