アニメーションとインタラクション

UIのアニメーションは、ユーザーに状態変化を伝え、操作の結果を視覚的にフィードバックするという重要な役割を持つ。「アニメーションはデコレーション」という誤解があるが、適切に設計されたアニメーションは認知負荷を下げ、ユーザーがシステムの状態を直感的に把握する助けになる。一方で過剰・不必要なアニメーションは集中の妨げになり、前庭障害を持つユーザーには身体的な不快感を引き起こすこともあるため、prefers-reduced-motion メディアクエリへの対応が不可欠である。

パフォーマンスの観点から、CSSアニメーションとWeb Animations API（WAAPI）はGPUで合成される transform・opacity プロパティを使うことでメインスレッドをブロックしないアニメーションを実現できる。width・height・margin・top 等のレイアウトを引き起こすプロパティをアニメーションさせると、毎フレームでレイアウト計算が走り（リフロー）、60fpsを維持できなくなる。requestAnimationFrame はJavaScriptからフレームごとに処理を実行する低レベルAPIであり、複雑な物理ベースのアニメーションに使われるが、transformの変更であってもJavaScriptからの操作はメインスレッドで動作する点に留意が必要である。

Framer MotionはReact向けのアニメーションライブラリで、宣言的なAPIで複雑なアニメーションを実現できる。特にレイアウトアニメーション（layoutプロパティ）は、要素のサイズや位置が変化するときに自動でスムーズなアニメーションを適用する機能であり、Accordionやリストの並べ替えのような複雑なアニメーションを少ないコードで実装できる。ページ遷移アニメーションはApp RouterやTanStack Routerと組み合わせた実装が各フレームワークで整備されつつある。

コードレビューで着目するポイント

アニメーションが transform・opacity のみを変化させており、width・height・margin 等レイアウトを引き起こすプロパティを使っていないか
prefers-reduced-motion: reduce を適用する際に、アニメーションが完全に無効化されているか（単に速くするだけでは不十分）
Framer Motion の AnimatePresence を使ったマウント/アンマウントアニメーションで、keyが正しく設定されているか
requestAnimationFrame のコールバック内でDOMを読み書きする際に、強制的なレイアウト（Forced Synchronous Layout）が発生していないか
アニメーションの継続時間がUXの観点で適切か（マイクロインタラクションは100〜300ms、ページ遷移は200〜500ms程度が一般的）
ループアニメーションやパーティクルのような高負荷なアニメーションに処理負荷の上限（フレームスキップ対応等）が設けられているか

典型的なアンチパターン

レイアウトアニメーション: height: 0 から height: auto へのCSS transitionや、margin-top を変化させるアニメーションは毎フレームでレイアウト計算を強制する。transform: scaleY() や Framer Motion の layout プロパティを代替として使うことでGPU合成に乗せられる。

reduced-motion の未対応: prefers-reduced-motion を設定しているユーザーに対してアニメーションをそのまま表示し続けることは、前庭障害を持つユーザーに具体的な身体的苦痛を引き起こす可能性がある。グローバルなCSSに @media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } } を必ず含める。

useEffect内でのDOMアニメーション直接操作: ReactのuseEffect内でDOMのstyleを直接書き換えてアニメーションを実装すると、Reactの仮想DOMとの整合性が崩れ、予期しない状態リセットが発生する。Framer MotionやWeb Animations API、またはCSSのclass切り替えでアニメーションを制御するのが正しいアプローチである。

参考リソース

ツール: Framer Motion - ReactのためのアニメーションライブラリのAPIリファレンスとサンプル集
標準: Web Animations API - ブラウザネイティブのアニメーションAPIの仕様
書籍: 「The Illusion of Life」（Frank Thomas, Ollie Johnston） - アニメーションの12原則の原典（ディズニーアニメーターによる）
記事: Animations and Performance - GoogleによるGPU合成アニメーションのガイド
ツール: Motion One - Web Animations APIをベースにした軽量アニメーションライブラリ