スクロール進捗 円形インジケーター
ページをどこまで読み進めたかを、画面右下に固定した円形ゲージで示すスクロール進捗インジケーターです。長い記事でも「あとどれくらいか」が視覚的に分かり、読了率の向上にも役立ちます。 仕組みは SVG の円を2枚重ね、背景の薄い円の上に色付きの円を描いています。
解説
ページをどこまで読み進めたかを、画面右下に固定した円形ゲージで示すスクロール進捗インジケーターです。長い記事でも「あとどれくらいか」が視覚的に分かり、読了率の向上にも役立ちます。
仕組みは SVG の円を2枚重ね、背景の薄い円の上に色付きの円を描いています。色付きの円には stroke-dasharray と stroke-dashoffset を指定し、線の見える長さを変えることでゲージを表現します。JavaScript の scroll イベントで現在のスクロール量を全体の高さで割って割合を求め、その値に応じて strokeDashoffset を更新します。円を rotate で回転させ、進捗が真上から時計回りに増えて見えるようにしています。
向く場面と調整
- 長尺のブログ記事やコラム
- 利用規約やドキュメントの読み進め確認
- 縦に長いランディングページ
ゲージの色は .sp-bar の stroke、置き場所は right と bottom で変えられます。円の半径を変えたときは stroke-dasharray の 163という線の長さも併せて計算し直す必要があります。固定表示なので本文に重ならない位置を選ぶと読みやすさを保てます。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
ゲージの色や位置は変えられますか
変えられます。色は .sp-bar の stroke、表示位置は .sp-ind の right と bottom で調整します。スマートフォンでは本文に重ならない位置を選ぶと読みやすくなります。
円の大きさを変えると進捗がずれます
円の半径を変えたら、線一周ぶんの長さである stroke-dasharray の数値と JavaScript 側の値も合わせて計算し直してください。半径から円周を求めて設定すると正しく動きます。