メニューのアニメーションとマイクロインタラクション：心地よさか邪魔か

イスタンブール・ガラタ地区にある18席のカフェ店主が問う：「メニューにアニメーションを入れたら、お客様は長く滞在しますか？」答えはミリ秒に隠れている。UX Movement 2023 の調査は明確：200-300ミリ秒は滑らか、500ミリ秒を超えると重たい。スクロール連動 fade-in を導入後、ページ滞在時間は19%増、離脱は12%減。

最適な時間とイージング

時間は人間の知覚と結びつく。100ミリ秒未満は気づかれない；200-300ミリ秒は自然；500ミリ秒以上は重い。cubic-bezier(0.4, 0, 0.2, 1) は Material 標準で自然な動きを作る。

読み込み時 60ミリ秒の段差は高級感を演出するが、8枚を超えると過剰。モバイルは 200ミリ秒が理想で、それ以上はタッチと衝突する。

効くものと効かないもの

効く：カテゴリータブの下線スライド（250ミリ秒）、カート追加ボタンの 1.05x 拡大とチェックアイコン、お気に入り時のハートパルス、スクロール fade-in。

• Hover scale 1.02x — 触れたくなる感触
• カートバッジのバウンド — 注目を集める
• スケルトンローダー — コンテンツ期待値を設定

やり過ぎとアクセシビリティ

過剰なアニメーションはアクセシビリティ問題。prefers-reduced-motion をサポート — WCAG 2.1 必須。

パララックス、自動再生動画、無限回転アイコンは明確な邪魔。ガラタのカフェはパルスバッジを2秒で停止 — CTR が23%上昇。

FAQ

理想の時間は？ マイクロインタラクションは 200-300ミリ秒、遷移は最大 400ミリ秒。

パフォーマンスを損なうのは？ JS で width/height は reflow を起こす。transform と opacity は GPU で高速。

高齢者向けにオフ？ 自動ではなく、prefers-reduced-motion でユーザー選択に。

お役に立ちましたか?シェアしてください。