読む進捗バーをCSS＋JavaScriptで実装する方法｜スクロール連動のUX改善テクニック

6月 10, 2025 6月 10, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「記事がどこまで読まれているのか」
「あとどれくらいで読み終わるのか」

ユーザーがWebサイトで長文記事を読むとき、実はこの体感って意外と大事です。
そこで活躍するのが、画面上部に表示される「読む進捗バー（Reading Progress Bar）」です。

実装は意外とシンプル。
JavaScriptとCSSだけで、スクロールに応じて横に伸びていく進行度バーが作れます。
今回は、そんな読む進捗バーを最小構成かつコピペで導入可能な形で丁寧にご紹介します！

読む進捗バーとは？UXへの効果

進捗バーとは、画面の最上部（または任意の位置）に配置され、ページの読み進め具合に応じて横に伸びていくバーのことです。

主なメリットは以下の通りです。

読了までの目安が視覚的に分かる
「読むことに集中しやすい」心理状態を作る
記事の離脱率や直帰率の改善につながる

ブログ記事やノウハウページ、縦長のコンテンツにぴったりの演出です。

実際のコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML構造はたった1行

まずは、バーを表示するためのHTML要素をひとつ追加しましょう。
これを bodyの直下、または headerの中に設置するだけでOKです。

<div id="progressBar"></div>

CSSでバーの見た目を作る

次に、スタイルを設定してバーの見た目を整えます。

#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: #03a9f4;
  z-index: 9999;
  transition: width 0.2s ease-out;
}

これで、「幅0％から徐々に伸びる青いライン」が出来上がります。
固定表示されているので、ユーザーがスクロールしても常に上部に表示され続けます。

JavaScriptでスクロールに連動させる

そして肝心の「スクロール量に応じて伸びる」動作を、JavaScriptで制御します。

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;
  document.getElementById('progressBar').style.width = scrollPercent + '%';
});

このコードはページのスクロール位置を常に監視して、ドキュメント全体の高さに対するスクロール率をバーの横幅に反映します。
実にシンプルですが、UXの質をぐっと引き上げる演出がこれだけで完成するんです。