#254
インタラクション・アニメーション
#254ふれーむれーと
フレームレート (fps)
別名・表記:Frame Ratefpsリフレッシュレート
UIXHERO Definition
「パラパラ漫画の枚数」。1秒間に何枚絵をめくるか。
概要
パラパラ漫画の原理と同じで、枚数が多いほど動きの繋がりが自然に見える。 Webブラウザは通常、ディスプレイのリフレッシュレート（多くの場合は60Hz）に合わせて描画しようとするため、60fpsを維持することが「ヌルヌル動く」快適なUIの指標となる。
※フレームレート（fps）とディスプレイのリフレッシュレート（Hz）は厳密には異なる概念だが、Web体験では両者が揃うことで滑らかさが最大化される。
UXでの活用
- 没入感: 高いフレームレートを維持することで、ユーザーは画面越しであることを忘れ、コンテンツに没頭できる。
- 直接操作感: スクロールやスワイプなどの指の動きに対し、画面が遅れずに追従（60fpsで描画）することで、自分の手で動かしているような感覚（Direct Manipulation）が得られる。
💡 使いどころ
アニメーションの滑らかさを評価する時。パフォーマンスチューニングを行う時。
⚠️ 注意点・誤用
人間の目にとって、一般的なUI操作では60fps前後が十分に滑らかと感じられることが多い。それ以上上げても効果は薄く、バッテリー消費や発熱の原因になる場合が多い（ゲーミングモニターなどは別）。逆に30fpsを下回ると「カクついている（Jank）」と感じる。
具体例
- 60fps：一般的なWebやアプリの基準（非常に滑らか）
- 30fps：テレビ放送や映画（少し残像感があるが許容範囲）
- 24fps：映画の標準的なフレームレート（独特のシネマティックな質感）
出典・参考文献:
- Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann.
- Card, S. K., Moran, T. P., & Newell, A. (1983). The Psychology of Human-Computer Interaction. Lawrence Erlbaum Associates.
- Claypool, M., & Claypool, K. (2006). On frame rate and player performance in first person shooter games. Multimedia Systems, 13(1), 3–17.
関連する解説記事
関連する記事詳細が見つかりませんでした。