🎬 マイクロインタラクションのタイミングが重要な理由
ボタンを押した時、モーダルが開く時、ページが遷移する時...こうした短いアニメーションをマイクロインタラクションと呼びます。持続時間が短すぎると硬く不自然に感じられ、長すぎると反応が遅いという印象を与えます。多くのデザインシステムは行動の種類によって100msから400msまで細かく区切られたタイミングガイドを提示しています。
このツールはボタンクリック、ホバー、モーダルの開閉、ページ遷移、ツールチップ、アコーディオン、ドロップダウン、ローディング、トースト、ドラッグ&ドロップ、スワイプなど実務でよく使われる12のUI行動を基準に、推奨持続時間とイージングカーブを案内します。頻繁に繰り返されるクリック・ホバーは100〜200msと短く、画面全体が変わるページ遷移は300〜400msと少し余裕を持たせるのが一般的な原則です。
イージングカーブも一緒に確認しましょう。要素が現れる時はease-out（速く始まりゆっくり止まる）、消える時はease-in（ゆっくり始まり速く消える）を使うとより自然な動きになります。ローディングスピナーのように繰り返すアニメーションはlinearを使い一定速度を保つのが適しています。
よくある質問
アニメーションが長すぎるとどうなりますか?
400msを超えるアニメーションは反応が遅く感じられます。ボタンクリックやホバーのように頻繁な操作は150ms以内に短く設定しましょう。
イージングカーブはなぜ重要ですか?
linearは機械的に感じられます。ease-outは自然な減速感があり要素の出現に適し、反対にease-inは要素が消える動きに適しています。
すべてのUIに同じタイミングを使ってもいいですか?
いいえ。行動の頻度と重要度によって変えるべきです。頻繁なホバー・クリックは短く、ページ遷移のような大きな変化は少し余裕を持たせましょう。