数値ハイライトカード
ラベル・大きな数値・増減の3点をひとまとめにして、指標をひと目で伝える数値ハイライトカードです。JavaScriptは不要で、構造はとても素直です。小さなラベル（月間PV）、太く大きな本数値（128,400）、緑色の増減（▲ 12.4%）を縦に並べ、白背景にやわらかい影と角丸を付けてカードとして独立させています。
解説
ラベル・大きな数値・増減の3点をひとまとめにして、指標をひと目で伝える数値ハイライトカードです。JavaScriptは不要で、構造はとても素直です。小さなラベル（月間PV）、太く大きな本数値（128,400）、緑色の増減（▲ 12.4%）を縦に並べ、白背景にやわらかい影と角丸を付けてカードとして独立させています。数字をfont-weight:900で強調することで、視線が自然と数値に向かいます。
使うとよい場面
- ダッシュボードのKPIサマリー（PV・売上・登録数など）
- サービスサイトの実績を並べる数値セクション
- レポート冒頭のハイライト指標
同じカードをgridやflexで横に並べれば、複数指標のダッシュボードになります。増減の色は意味と合わせるのがコツで、増加は緑、減少は赤など色分けすると直感的です。なお記号の▲▼は「上向き＝良い」とは限らないため、本当に良い変化かどうかは色やプラス・マイナスの符号でも補って誤読を防ぎます。装飾は影と角丸だけに絞っているので、配色を変えるだけでどんなブランドにもなじみます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
このカードを横に複数並べたいです。
親要素を display:grid または display:flex にして、このカードを必要な数だけ並べます。それぞれにラベルと数値を入れれば、KPIを横並びにしたダッシュボードになります。
増減の色を変えられますか。
変えられます。増減を表す要素の文字色を変更するだけです。増加は緑、減少は赤のように意味に合わせて色分けすると、良い変化か悪い変化かが直感的に伝わります。