アイコン + 数字グリッド

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

このパーツは、アイコンと大きな数字を組み合わせたカードを 4 つ横に並べる統計表示セクションです。display:grid で 4 列に分割し、各カードに白背景と淡い影、角丸を付けて独立したブロックに見せています。数字を font-weight:900 のセリフ体で大きく出し、その上にアイコン、下に小さなラベルを置く三段構成なので、内容を読まなくても「重要な数値だ」と一目で伝わります。

向いている場面

導入実績や応答速度、稼働率、サポート対応時間といった「自慢できる数字」を持つサービスサイトに向きます。コーポレートサイトの実績紹介、SaaS のランディングページ、採用ページの会社データなど、説得材料を視覚的に押し出したい場面で効果的です。

カスタマイズと注意点

• 各カードのアイコンはインライン SVG なので、内容に合った形（時計・盾・人など）に差し替えて意味を一致させる
• 数字の単位や補足は小さなラベル側にまとめ、数字本体はできるだけ短く保つ
• レスポンシブでは 4 列を 2 列に折り返す指定が入っているため、スマホでも窮屈になりにくい

数値は誇張せず、根拠のある実数を入れてください。アイコンには aria-hidden を付け、意味はテキスト側で伝えるとアクセシビリティ上も安心です。