アニメーション

UX を高める機能的なアニメーションの考え方とインタラクションの規約を定める

アニメーションは、見た目を飾るためではなく、利用者の操作を助けるために使う。手応えを返し、変化のつながりを示し、視線を導く。目的を持たない動きは、注意をそらし、待ち時間を生むため避ける。ここでは、いつ・なぜ動かすかという考え方と、本チームで守る具体規約を正本として定める。

hover や focus をいつ出すかはアフォーダンスが正本である。本ページではそれを再掲せず、動きそのものに絞る。

前提知識

規約を述べる前に、アニメーションを支える基本概念を最小限おさえる。

UI のアニメーションには、目的を持つ機能的なものと、目を引くための装飾的なものがある。本チームで使うのは前者だけである。機能的アニメーションは、次のいずれかを果たす。

これらに当てはまらない動きは、装飾的アニメーションとして避ける。利用者が動きそのものを意識して気づくほど目立つなら、過剰である。

マイクロインタラクションとは、ボタンを押す・トグルを切り替えるといった小さな操作に対する、ごく短い反応である。手応えを返し、操作が届いたことを伝える。UI を直感的に感じさせる土台であり、控えめで速いほどよい。

移動距離が大きい動きほど時間を要し、小さい動きは短く済む、という関係がある。ただし本チームでは、後述のとおり Tailwind の組込みスケールに値を限定する。

状態変化（hover / focus / active）には短いトランジションを添える。既定は transition-colors、継続時間は duration-150 とする。瞬時の切り替えを避け、操作可能であることを穏やかに伝えるためである。状態をいつ出すかはアフォーダンスに従い、ここでは動きの付け方だけを定める。
出現と退場（ダイアログ・ドロップダウン・ツールチップなど）は transform と opacity だけをアニメートする。継続時間は 150〜250ms、出現は ease-out を基本とし、Radix の data-state に対して付与する。
継続時間とイージングは Tailwind の組込みスケール（duration-150 / ease-out など）に限定する。任意値は使わない。場当たりな値を避け、動きの一貫性を保つためである。

動きは、一部の利用者にとって不快や体調不良の原因になる。前庭障害のある利用者には、スクロールやホバーで要素が動くと、めまいや吐き気を引き起こすことがある。

prefers-reduced-motion を尊重する。動きを減らす設定の利用者には、本質的でない動きを無効化する（WCAG 2.3.3）。これは各アプリの globals.css のグローバル設定で全コンポーネントに一括適用しており、個別コンポーネントでの対応は不要である。
動きに意味を依存させない。動きが無効化されても情報が伝わるよう、動きはあくまで補助とする。状態や変化は、色・アイコン・ラベルでも伝わるようにする。

実装後は各アプリの開発用ページ（museum なら /dev/components）と実画面で、次を確認する。