#142
インタラクション・アニメーション
#142じゃんく
ジャンク (Jank)
別名・表記:JankStutteringカクつき
UIXHERO Definition
「カクつき」。スムーズに動くべきものが、ガタつくこと。
概要
本来「滑らか（Smooth）」であるべきインタラクションが、「ガタガタ（Janky）」すること。1フレームあたり16.6ms（60fps）以内に描画処理が完了しない場合、Jankが発生する。
原因は主に、メインスレッド（JavaScriptの実行など）が忙しすぎて、ブラウザが画面を描画する（レンダリング）余裕がないことにある。
UXでの活用
- 知覚パフォーマンス: Jankを解消することは、新機能を追加することよりも重要かもしれない。カクつきのない滑らかな動きは、それだけで「高級感」や「信頼性」を生む。
- 原因の特定: Chrome DevToolsのPerformanceタブなどで計測し、どの処理がJankを引き起こしているか（Layout Thrashingなど）を特定して解消する。
💡 使いどころ
パフォーマンスの問題を指摘する時。60fps（1フレームあたり16.6ms以内）での描画処理が間に合わなかった状態を指す。
⚠️ 注意点・誤用
ユーザーにとっては非常にストレスフル（不快）であり、アプリの品質を低く感じさせる最大の要因の一つ。特にスクロールの滑らかさは、モバイル体験の質を大きく左右する。
具体例
- スクロール中に一瞬止まるような引っかかり
- アニメーションのコマ落ち
出典・参考文献:
- Nielsen, J. (1993). Response times: The 3 important limits. Nielsen Norman Group.
- Google Developers. (n.d.). Rendering performance. Google Web Fundamentals.
- Grigorik, I. (2013). High Performance Browser Networking. O’Reilly Media.
- Google Developers. (n.d.). RAIL performance model. Google Chrome Developers.
- Google Developers. (n.d.). Long tasks API. Google Chrome Developers.
関連する解説記事
関連する記事詳細が見つかりませんでした。