「速さ」がUIの印象を決める

素早くうなずく人と、ゆっくりうなずく人——同じ「うなずき」でも受け取る印象は違います。「速い」は軽快さを、「遅い」は重みを表す。UIのアニメーションも同じです。速さはユーザーの感情に直接作用します。

---

リアルタイムで体感する

スライダーを動かして、duration を 50ms から 1200ms まで変えながらホバーしてみてください。

---

UIの種類別・速さの目安

操作の種類	推奨 duration	理由
ボタンの press（active）	80〜120ms	「押した瞬間」は即時に近い方がリアル
ホバー・フォーカス	200〜250ms	気づかせるが邪魔にならない
トースト・ツールチップ	200〜300ms	唐突に見えず情報を届ける
モーダルの開閉	280〜350ms	空間の移動感を演出する最低限の時間
ドロワー・サイドパネル	320〜400ms	大きい要素は速く動かすと荒っぽく見える
ページ遷移	250〜400ms	速すぎると空間感が消える

---

遅すぎるUIはイライラさせる

3つのフォームで、エラー表示の速さだけが違います。「送信」を押して比べてみてください。

---

コンテンツの大きさと速さ

小さいポップオーバーと大きいドロワー——同じ速さで動かすと、大きい方が「荒っぽく」見えます。

---

速くすればいいわけではない

重要なアクションはあえてゆっくり見せることで「重み」を演出できます。

• 削除の確認ダイアログ — 600〜800ms でゆっくり現れることで「大事な決断」という空気を作る
• 支払い完了画面 — 400〜500ms でていねいに現れることで「確かに完了した」という安心感を強調する
• オンボーディングの初画面 — 400ms で丁寧に現れることで「ちゃんとしたサービス」という第一印象を作る

速さはユーザーの感情のコントロールです。速くすれば軽快、遅くすれば重厚——意図を持って使い分けてください。