スムーススクロール
ページ内アンカーリンクをクリックしたときに、瞬間的にジャンプするのではなく滑らかにスクロールする UI 効果。CSS の「scroll-behavior: smooth;」だけで実装可能。ユーザーが現在位置から目的位置への遷移を視覚的に追える。
Web 担当者にとっては、ランディングページ・長文記事・FAQ ページでよく実装される効果。ページ内移動が頻繁なサイトで UX を改善する。
本書のスタンスは「スムーススクロールは『UX 改善の小技』として有効」。実装コストが低く効果が分かりやすい。ただし高速で大きく移動する場合、ユーザーが動きで酔うこともあるので、移動距離・速度の調整が必要。
担当者が陥りやすいのは、過度に長いアニメーション速度を設定して、ユーザーがイライラすること。デフォルト速度のままが現実的に最適。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
会話上での使用例
LP の UX 改善
-
デザイナー
LP 内のアンカーリンク移動を改善したい
-
Web 担当者
スムーススクロール を有効化しましょう。CSS 1 行で実装できます
FAQ ページの UX
-
プロデューサー
長い FAQ ページの操作感
-
Web 担当者
スムーススクロール + 戻るボタンを設置しましょう。目次から該当質問へジャンプする際の体感が良くなります