円形プログレス 数字セクション

このパーツの使いどころと実装ポイント

円形のリングで進捗を見せながら、中央に数字を置いて実績を伝えるセクションです。SVGのcircleを2枚重ね、土台のグレー円の上に進捗バー用の円を描き、--pというカスタムプロパティで割合（0〜1）を指定します。リング全体をrotate(-90deg)で回し、時計の12時位置からバーが伸びるように見せています。3項目を横並びにした構成です。

向いている場面

• 顧客満足度や稼働率などの割合をアピールするプロダクト紹介
• 達成率・成長率を視覚的に見せたいSaaSの実績ページ
• 数字を主役にしたいサービスや調査レポートの要約

カスタマイズと注意点

各リングの割合はstyle="--p:.92"のように小数で指定します。中央の数字（92）とこの値が食い違うと誤解を招くので、必ず一致させてください。%でない指標（件数や年数）を入れる場合は、リングの満タンが何を意味するかを添えると親切です。SVGは拡大しても劣化しないため高解像度でもきれいですが、リングだけでは値が読み取りにくいので必ず数字とラベルを併記します。画面が狭いときは3列を2列や1列に折り返してください。掲載する数字は実際の根拠に基づくものにします。