マイクロインタラクション とは？

たとえばTwitter（X）のいいねボタンを押したときにハートがパッと弾けるアニメーション、iPhoneのスイッチをオンにしたときの色変化と振動、パスワード入力時にリアルタイムで強度が表示されるバーなどだよ。どれも一瞬の出来事だけど、操作が「ちゃんと受け付けられた」と分かる安心感を与えてくれるんだ

トリガーは「きっかけ」で、ボタンを押すとかスクロールするとか。ルールは「何が起きるか」の決まり。フィードバックは色が変わるとかアニメーションが出るといった「反応」。ループ＆モードは「繰り返しや状態変化」で、長押しで別の動作になるとかだよ

人間は操作の結果が0.1秒以内に返ってくると「即座に反応した」と感じて、1秒を超えると「待たされている」と感じるんだ。マイクロインタラクションはこの知覚のギャップを埋めてくれる。ローディング中にプログレスバーがアニメーションするだけで体感待ち時間が短くなるという研究もあるよ

そうだよ。毎回3秒のアニメーションが入ったら作業効率が落ちるし、派手すぎるエフェクトは気が散る。アクセシビリティの観点では、前庭障害のある人にとって過度なアニメーションは吐き気を催すこともある。prefers-reduced-motionメディアクエリでアニメーションを抑制できるようにしておくのがベストプラクティスだね

CSSのtransitionやanimationで十分実現できるものが多いよ。イージング関数をease-out系にすると自然な動きになる。JavaScriptが必要な場合はFramer MotionやGSAPなどのライブラリが便利だね。大事なのは「何のために動かすのか」を明確にすること。目的のないアニメーションは装飾ではなくノイズになるんだよ