ダッシュボードで使う数値カード。tabular-numsで桁を揃え、増減は色と矢印記号の両方で伝える色覚フレンドリーな作りです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
数値には font-variant-numeric: tabular-nums を指定し、更新で値が変わっても桁幅が揃ってガタつかないようにします。増減の良し悪しは緑／臙脂の色だけでなく「↑↓」の記号でも重ねて表現し、色の区別が難しいユーザーにも伝わるようにしています。カード自体は flex-wrap で並べ、画面幅に応じて折り返します。
「増加=良い」とは限らない指標（直帰率など）では、色の意味を「値の方向」ではなく「良し悪し」に合わせると誤読を防げます。
ダッシュボード用のKPI統計カードを作ってください。ラベル・大きな数値（font-variant-numeric: tabular-nums）・前月比の増減表示の構成で、増減は色と矢印記号の両方で伝えてください。