プログレスバー実績
「プログレスバー実績」は、顧客満足度やリピート率などの達成率を、横棒のバーで視覚的に見せる KPI セクションです。各項目はラベルと数値を display:flex で左右に振り分け、その下にバーを配置しています。
このパーツの使いどころと実装ポイント
「プログレスバー実績」は、顧客満足度やリピート率などの達成率を、横棒のバーで視覚的に見せる KPI セクションです。各項目はラベルと数値を display:flex で左右に振り分け、その下にバーを配置しています。バーは背景の溝（トラック）の中に色付きの帯を重ね、帯の width を割合（96% など）に合わせることで充足度を表現しています。角は border-radius:9999px で丸めて柔らかい印象です。
向いている場面
サービス紹介ページの信頼指標、会社案内の実績まとめ、採用サイトの社員アンケート結果などに向きます。数字を並べるだけより、バーの長さで直感的に「ほぼ満点」「高水準」を伝えられます。
カスタマイズと注意点
- 数値を変えるときは、表示テキストとバーの
widthの両方をそろえて変更します。片方だけだと見た目と数字が食い違います。 - スクロールで 0% から伸びるアニメーションを足すと印象が強まりますが、過度な演出は控えめにします。
- 実績の数値は事実に基づいたものを使い、誇張は避けます。色覚に配慮し、長さと数値の両方で伝わるようにしておくとアクセシビリティが上がります。
よくある質問
バーの長さはどうやって決まっていますか？
色付きの帯のwidthを割合で指定することで決まります。たとえば96%なら帯がトラックの96%まで伸びます。表示している数値とwidthの値をそろえることが大切です。
バーがスクロールで伸びるアニメーションは付けられますか？
付けられます。画面に入ったタイミングでwidthを0%から目標値へ変化させるCSSやスクリプトを足せば、バーが伸びる演出になります。ただし過度な動きは控えめにするのが見やすさのコツです。