name: microinteractions
「操作したら即座に反応する」 — ユーザーに安心感を与えるマイクロインタラクション実装ガイド。
Before:
[ボタンを押す] → ... → [何か起きた？]
After:
[ボタンを押す] → [縮む✓] → [影が変わる✓] → [処理中...] → [完了！]
↑ 即座にフィードバック（10-50ms以内）
3つの原則:
7つのUIパターン（ボタン汎用・プライマリ・危険・アイコン、カード、トグル、入力フィールド）の Tailwind CSS実装コードとフロー解説:
→ references/pattern-library.md を参照
全インタラクティブ要素に共通:
transition-all duration-150 ease-out
要素タイプ別:
hover:brightness-105 or hover:shadow-lghover:shadow-smhover:scale-110hover:bg-danger/10ほぼ全要素共通:
active:scale-[0.97] /* または active:scale-[0.995] 控えめ版 */
animate-spin or animate-pulsescale-105 → 戻るanimate-shake（要カスタム）| パラメータ | 推奨値 | 用途 |
|---|---|---|
duration | 150-200ms | 標準操作 |
duration | 300-500ms | 状態変化（トグル等） |
scale active | 0.97 | 通常ボタン |
scale active | 0.995 | カード（控えめ） |
scale active | 0.90 | アイコンボタン |
shadow | sm → md → lg | 浮遊感の3段階 |
// 悪い例: 派手すぎ
active:scale-[0.8] duration-500 animate-bounce
// 悪い例: 反応が鈍い
duration-1000
同じ種類のボタンで異なるフィードバックは混乱を招く
transition-all duration-150 があるactive:scale-[0.97] があるhover:bg-danger/10 があるhover:shadow-sm があるfocus:ring があるui-design-principles — 全体的なUI設計原則craftgarden-design-system — デザイントークン0.97）、カード（0.995）、アイコン（0.90）で適切な値が異なる。カードに 0.97 を使うと全体が大きく動いて違和感があるanimate-pulse の使いすぎ: トグルON状態の強調には効果的だが、複数要素に同時に使うとページ全体がチカチカして視覚的に疲れる。重要な状態インジケーター1つだけに絞るduration が長すぎて反応が鈍く見える: duration-1000 等はマイクロインタラクションには不向き。基本操作は 150-200ms、状態変化は 300-500ms が目安scale 値や duration がバラバラだと一貫性が崩れ、かえって混乱を招く「小さな反応が、大きな安心感を生む」