マイクロインタラクション設計 — UXを底上げする小さな動きの作り方

優れたマイクロインタラクションの4要素

1. Trigger（引き金） — クリック、ホバー、フォーカス、データ更新など、何によって発動するか。

2. Rules（ルール） — 何が起こるか。アニメーション・効果音・触覚フィードバックの組み合わせ。

3. Feedback（フィードバック） — 操作の結果をユーザーに伝える。「押した感」「変わった感」を出す。

4. Loops & Modes（ループとモード） — 同じ操作を繰り返したらどうなるか、ロング操作で別動作になるか。

ボタンのマイクロインタラクション

プレス時の凹み演出 — .btn:active { transform: translateY(1px) scale(.98); } でクリック感を出す。

ローディング状態への遷移 — クリック後にボタン内でスピナーを回し、完了したらチェックマークに変える。

Disabled状態の明示 — opacity: .5; cursor: not-allowed; でクリック不可を伝える。

Like Burst（いいね演出）

押下時に、ハート＋パーティクルが放射状に飛び散る人気の演出。SNSやコメント欄で使われる。

実装：Like Burst

8方向にパーティクルを飛ばすことで「やった感」が最大化される。

Toggle Switch（トグルスイッチ）

ON/OFF 切替の滑らかなアニメーション。iOSスタイルの円が左右に滑る演出。

CSSのみで実装可能。チェックボックスをデザイン化する形が王道。

実装：Toggle Switch

数値カウントアップ

実績・統計の表示で「0→XXX」とアニメーションする演出。LP・ダッシュボードで効果的。

実装：Number Count Up

ease-out cubic で「最初は速く、終盤ゆっくり」が自然。