数値で語る統計グリッド
大きな数字とラベルを横並びにした、実績アピール用の統計ブロックです。 flex と gap で各項目を均等に並べ、 flex-wrap を効かせているので、画面幅が狭くなると自動で折り返します。
解説
大きな数字とラベルを横並びにした、実績アピール用の統計ブロックです。flex と gap で各項目を均等に並べ、flex-wrap を効かせているので、画面幅が狭くなると自動で折り返します。数字は font-weight:900 と Georgia 系のセリフ書体で堂々と見せ、ラベルは小さめ・字間広め・大文字化して対比をつけています。
活躍する場面
- 会社情報ページのユーザー数や満足度の提示
- 採用ページで規模感や成長を伝える数値
- サービス LP の信頼づくりとなる実績バッジ
項目数は要素を足し引きするだけで増減でき、min-width で各列の最小幅を保てます。数字の桁を強調したい時はフォントサイズや色で階層をつけます。誇張した数字は信頼を損なうので、出せる実数で書くのが基本です。閲覧時にカウントアップさせたい場合は、画面内に入ったタイミングで数値を加算する JavaScript を後付けすると効果的です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
項目を 4 つ以上に増やせますか。
増やせます。div を追加すれば flex と flex-wrap により自動で並びます。狭い画面では min-width を頼りに折り返されます。
数字をアニメーションで増やしたいです。
標準では静止表示です。要素が画面に入ったら 0 から目標値まで加算する JavaScript を足すと、カウントアップ演出にできます。