スムーススクロール
ページ内アンカーリンク（ページ内の特定の場所へ飛ぶリンク）をクリックした際、パッと瞬間的に切り替わるのではなく、滑らかにスクロールして移動する UI（動き）のことです。ユーザーは「自分が今ページのどのあたりに移動したか」を視覚的に追うことができるため、迷子になりにくくなります。
実務における使い所とメリット
縦に長いランディングページ（LP）や、目次がある長文記事、FAQ（よくある質問）ページなどで、ページ内移動のストレスを減らすためによく使われます。現在は、CSS に scroll-behavior: smooth; と 1 行書くだけで実装できるため、実装コストが極めて低く、手軽に効く UX 改善の小技として非常に優秀です。
初心者が陥りがちな「3 つの落とし穴」
- ヘッダー被り問題（超重要）：画面上部にメニューが固定されている（追従ヘッダー）サイトの場合、移動先の見出しがヘッダーの裏に隠れてしまう事故が頻発します。これを防ぐため、エンジニアに「ヘッダーの高さ分の余白（
scroll-padding-topなど）」を考慮するよう指示する必要があります。 - 独自の速度調整によるイライラ：JavaScript を使って独自に「ゆっくり移動する」ようなアニメーション速度を設定し、ユーザーをイライラさせてしまうこと。CSS 実装であればブラウザが最適な速度を自動計算してくれるため、速度調整はせずにデフォルトに任せるのが一番安全です。
- 画面酔いへの配慮不足：あまりにも移動距離が長い場合、視界が激しく動いて酔ってしまうユーザーもいるため、適度な利用にとどめる配慮も必要です。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
会話上での使用例
LPのアンカーリンクの動きを改善したいとデザイナーから相談される場面
-
デザイナー
LP の中のアンカーリンク、押すといきなり飛ぶのが少し唐突なんですよね。
-
Web 担当者
スムーススクロールを有効にしましょう。CSS を 1 行足すだけで、目的の位置までふわっと移動するようになりますよ。
長いFAQページの操作感をプロデューサーと相談する場面
-
プロデューサー
FAQ がかなり長くなってきて、目的の質問にたどり着きにくいんだよね。
-
Web 担当者
目次から該当の質問へ飛ぶときにスムーススクロールを効かせて、戻るボタンも添えましょう。今どこを見ているかが追いやすくなって、ぐっと使いやすくなります。