アイコン付き KPI カード
アイコン付き KPI カードは、左にアイコン、右に大きな数字と説明文を横並びにした実績表示の部品です。 display:flex で要素をそろえ、アイコン枠は flex-shrink:0 で縮まないよう固定し、数字側だけが幅に合わせて伸縮します。
解説
アイコン付き KPI カードは、左にアイコン、右に大きな数字と説明文を横並びにした実績表示の部品です。display:flex で要素をそろえ、アイコン枠は flex-shrink:0 で縮まないよう固定し、数字側だけが幅に合わせて伸縮します。数字には Georgia のセリフ体を当てて他の文字と差をつけ、数値そのものを主役に見せています。
使う場面
- ダッシュボードの指標表示（売上・登録数など）
- サービス紹介ページの「導入実績◯◯件」の見せ場
- レポートやサマリー画面の要約数値
アイコン枠の色は .kp-card__ic の background、数字の大きさは b の font-size で調整します。アイコンはインライン SVG なので外部読み込みは不要で、別の図柄に差し替えるだけで用途を変えられます。横幅は min(320px,90vw) で狭い画面にも収まります。複数並べるときは親で display:grid を使うと整います。数値は装飾画像ではなくテキストで持たせているため、読み上げや検索にもそのまま伝わります。スクリーンリーダー向けに、アイコンが装飾の場合は読み上げ対象から外しておくと冗長になりません。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
アイコンは別の図柄に変えられますか
変えられます。アイコンはインラインSVGで埋め込まれているので、SVG部分を差し替えるだけで売上やユーザー数など用途に合った図柄にできます。外部フォントは不要です。
数字のフォントが本文と違うのはなぜですか
数字にGeorgiaのセリフ体をあてて、周囲のサンセリフ体と差をつけています。数値を主役として目立たせる狙いで、font-familyの指定を変えれば統一もできます。