トレンド矢印付き KPI 統計
トレンド矢印付き KPI 統計は、数値の下に「▲ 12.5% 先月比」のような前期比を矢印と色で添えて、増減が一目で伝わるようにした表示です。レイアウトは grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) を使い、画面幅に応じてカード数が自動で折り返し…
解説
トレンド矢印付き KPI 統計は、数値の下に「▲ 12.5% 先月比」のような前期比を矢印と色で添えて、増減が一目で伝わるようにした表示です。レイアウトは grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) を使い、画面幅に応じてカード数が自動で折り返します。上昇は緑、下降は赤と、修飾クラス（--up / --down）で色を切り替えるのがポイントです。アニメーションも JavaScript も使わない静的な CSS 部品です。
向いている使いどころ
- 売上・顧客数・解約率などを並べる管理ダッシュボード
- IR ページや月次レポートの実績ハイライト
- SaaS の利用状況サマリー
矢印の三角記号は文字として置いているので、フォントに依存せず表示できます。ただし色だけで増減を伝えると色覚特性のある人に区別しづらいため、矢印記号や「先月比」の語を併記してアクセシビリティを保つのが安全です。数値は手入力なので、実データと連動させる場合はテンプレートエンジンや JavaScript で該当箇所を差し替えてください。桁が大きい金額はカンマ区切りにすると読みやすくなります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
上昇と下降の色はどこで変えますか？
修飾クラスの --up と --down にそれぞれ color を指定しています。緑と赤以外のブランドカラーにしたい場合は、この2つの値を書き換えれば全体に反映されます。
色だけで増減を表すのは問題ありませんか？
色覚特性のある人には区別しづらいため推奨しません。このサンプルのように▲▼の矢印記号と「先月比」の文言を併記すれば、色が見えなくても増減が伝わります。