ダッシュボードのKPIカード設計

管理ダッシュボードの上部に配置するKPIカードについて、数値の意味と比較対象が伝わるように設計しました。合計値だけでなく、期間、前回比、更新時刻を併記しています。

色による増減表示だけでは判断できないため、矢印や文言も組み合わせます。重要度に応じてカードの大きさを変えすぎず、一覧性を保つことを重視しました。

データ取得中、未取得、エラー、データなしの状態をそれぞれ用意し、空白や0だけを表示しない設計です。Reactコンポーネントとして再利用できる形を想定しています。