実績カウンター統計
このパーツは、大きな数字とアイコンで実績を4つ並べる統計セクションです。 display:grid の grid-template-columns:repeat(4,1fr) で4列を均等に割り、各指標を1枚のカードにまとめています。
このパーツの使いどころと実装ポイント
このパーツは、大きな数字とアイコンで実績を4つ並べる統計セクションです。display:grid の grid-template-columns:repeat(4,1fr) で4列を均等に割り、各指標を1枚のカードにまとめています。数字には clamp(34px,5vw,46px) を当てているため、画面幅に応じて文字サイズが連続的に変化し、スマートフォンでも大きく読めます。アイコンはインラインSVGなので外部フォントに依存せず単体で完結します。
向いている場面
- 会社概要ページで「公開サイト数」「継続率」など信頼を示したいとき
- サービスLPで導入実績や満足度を一目で伝えたいとき
- 採用ページで在籍年数や拠点数を訴求したいとき
カスタマイズの勘所は、st__num の数値と st__suffix の単位、st__label の説明をセットで差し替える点です。4指標という構成は崩さず、自社で本当に語れる数字だけを選ぶと説得力が出ます。指標を3つにしたい場合は列数を repeat(3,1fr) に変えます。
実装上の注意
暗い背景に白文字の配色なのでコントラストは確保しやすいですが、半透明カードを使うため背景画像に重ねる際は読みやすさを再確認してください。数字を演出としてカウントアップさせたい場合はJavaScriptを足しますが、その際もHTML側に最終値を残し、スクリーンリーダーが正しい数値を読めるようにします。狭い画面では列が窮屈になるため、必要に応じて2列へ折り返す指定を加えると安定します。
よくある質問
数字をスクロールでカウントアップさせるには？
このパーツ自体は静的な表示です。カウントアップを付けたい場合はIntersectionObserverで要素が画面に入ったことを検知し、st__num の中身を0から最終値まで段階的に書き換えるJavaScriptを追加します。最終値はHTMLに残したまま操作すると、JavaScriptが無効な環境でも数字が表示されます。
指標を4つではなく3つや5つにできますか？
できます。CSSの grid-template-columns:repeat(4,1fr) の数字を、表示したい列数に合わせて変更してください。あわせてHTMLの st__item ブロックを増減します。5つ以上にすると1列あたりが狭くなるので、レスポンシブで2段に折り返す指定を加えると読みやすさを保てます。