こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
長めのページを読むとき、ユーザーは「今どのくらい読み進めたのか？」が気になりますよね。
そんなときに便利なのが スクロール連動の進捗バー（Progress Bar） です。
この記事では、ヘッダーに固定してスクロール量に応じて伸びる「読み進捗バー」を実装する方法を解説します。
JavaScriptをほんの少し使うだけで、シンプルに導入可能。
サイトの可読性を高め、ユーザーのストレスを減らす工夫としておすすめです。
なぜ進捗バーが必要なのか？
ユーザーは「あとどのくらい読めばいいのか」が見えると、離脱しにくくなります。
進捗バーはニュースサイトやブログ記事でよく使われるUIで、特にスマホ閲覧時に効果を発揮します。
- 長文コンテンツでも「ゴール」が見える
- 読みやすさ・信頼性の向上
- 滞在時間やスクロール率が上がりSEO効果にも期待
基本のHTML構造
まずはシンプルなHTMLを用意します。
次のCSSで固定ヘッダー上部にバーを配置します。
JavaScriptでスクロール率を計算し、進捗バーの横幅に反映させます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これだけでスクロールに合わせてバーが伸び縮みするようになります。
発展アイデア：太めのバーにして「残り時間ゲージ」風にデザイン
進捗バーをただ伸ばすだけでなく、以下のようにどれくらいバーが伸び縮みするか分かるような工夫もできます。
この方法を用いることで、ユーザーが終わりを意識することができるので最後までコンテンツを見てもらえる確率も上がります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
進捗バーはシンプルですが、ユーザー体験を大きく向上させるUIです。
特に長文記事やストーリー性のあるコンテンツには最適。
スクロール位置を見える化して、読者が最後まで読みやすい記事を目指してみてください！
satokotadesignキャンペーン実施中！
