7onicDESIGN SYSTEM

MetricCard

MetricCardは、KPIや重要指標をダッシュボードで見やすく表示するコンポーネントです。 タイトル、数値、トレンドインジケーター、説明テキスト、アイコンを自由に組み合わせて使えます。

3
Variants
3
Sizes
3
Trend
Pure
React

Playground

Preview
D

Revenue

$45,231

Increased+20.1%

vs last month

Preset
Variant
Size
Radius
Options
Trend
<MetricCard>
  <MetricCard.Header>
    <MetricCard.Title>Revenue</MetricCard.Title>
    <MetricCard.Symbol><DollarSign /></MetricCard.Symbol>
  </MetricCard.Header>
  <MetricCard.Value>$45,231</MetricCard.Value>
  <MetricCard.Trend direction="up">+20.1%</MetricCard.Trend>
  <MetricCard.Description>vs last month</MetricCard.Description>
</MetricCard>

Variants

Revenue

$3,500

Increased+8.1%

default

Revenue

$3,500

Increased+8.1%

elevated

Revenue

$3,500

Increased+8.1%

ghost

<MetricCard variant="default">...</MetricCard>
<MetricCard variant="elevated">...</MetricCard>
<MetricCard variant="ghost">...</MetricCard>

Sizes

sm
パディング16px
数値text-xl (20px)
タイトルtext-xs (12px)
アイコンicon-sm (16px)
default
パディング20px
数値text-2xl (24px)
タイトルtext-sm (13px)
アイコンicon-md (20px)
lg
パディング24px
数値text-3xl (30px)
タイトルtext-sm (13px)
アイコンicon-lg (24px)

レスポンシブ： default・lgサイズはモバイル（640px未満）で自動的にパディングが一段階小さくなります。 smサイズは固定値です。

Features

Grid Preview

ダッシュボードでの実際の表示イメージ。grid-cols-2 lg:grid-cols-4 レイアウトでの使用例です。

Revenue

$45,231

Increased+20.1%

vs last month

Users

2,350

Increased+12.5%

new signups

Orders

1,234

Decreased-3.2%

vs last week

Conversion

3.24%

No change0.0%

no change

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <MetricCard>
    <MetricCard.Header>
      <MetricCard.Title>Revenue</MetricCard.Title>
      <MetricCard.Symbol><DollarSign /></MetricCard.Symbol>
    </MetricCard.Header>
    <MetricCard.Value>$45,231</MetricCard.Value>
    <MetricCard.Trend direction="up">+20.1%</MetricCard.Trend>
    <MetricCard.Description>vs last month</MetricCard.Description>
  </MetricCard>
  ...
</div>

Trend

トレンドインジケーターは方向に応じてアイコンとカラーが自動適用されます。色覚多様性に配慮し、アイコン＋テキストで意味を伝えます。

Up

$3,500

Increased+8.1%

Down

$3,500

Decreased-3.2%

Neutral

$3,500

No change0.0%

<MetricCard.Trend direction="up">+8.1%</MetricCard.Trend>
<MetricCard.Trend direction="down">-3.2%</MetricCard.Trend>
<MetricCard.Trend direction="neutral">0.0%</MetricCard.Trend>

Radius

Radius

0

Radius

8

Radius

12

Radius

16

Radius

24

<MetricCard radius="none" />    {/* 0px */}
<MetricCard radius="lg" />     {/* 8px */}
<MetricCard />                 {/* 12px — default */}
<MetricCard radius="2xl" />    {/* 16px */}
<MetricCard radius="3xl" />    {/* 24px */}

API

Component Structure

MetricCard— Pure React
.Header.Title.Symbol.Value.TrendProps.Description

Props

MetricCard

variant"default"
"default" | "elevated" | "ghost"

カードのスタイルバリアント

size"default"
"sm" | "default" | "lg"

カードのサイズ (パディング・フォントサイズに影響)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

カードの角丸サイズ (デザイントークン準拠)

animatedfalse
boolean

MetricCard.Valueの数値をカウントアップでアニメーション表示

MetricCard.Trend

direction—
"up" | "down" | "neutral"

トレンドの方向 (必須)。アイコンと色が自動適用

Anatomy

1
2
3
Monthly Revenue
4
5
$2.84M
6
+12.5%
vs last month
7

December 2024 actual

1
Root
ルートコンテナ
2
Header
ヘッダー部
3
Title
カードタイトル
4
Icon
シンボルアイコン
5
Value
大きな数値
6
Trend
トレンド指標
7
Description
補足テキスト

Best Practices

✓

推奨

  • ✓トレンドには色＋アイコン＋テキストを併用する
  • ✓グリッドレイアウトでカードを均等に配置する
  • ✓数値は読みやすいフォーマットで表示する（カンマ区切り等）
  • ✓比較期間を説明テキストで明示する
✕

避けるべき

  • ✗色だけでトレンドの方向を伝えない（色覚多様性に配慮）
  • ✗1画面に多すぎるメトリックカードを配置しない
  • ✗コンテキストなしの数値だけを表示しない
  • ✗異なるサイズのカードを同じグリッドに混在させない

Accessibility

キーボード操作

Tabフォーカス移動

ARIA / WCAG

  • トレンドアイコンは aria-hidden + sr-onlyテキスト
  • 色だけでなくアイコン＋テキストで意味を伝達
  • 自然な読み上げ順序（タイトル→数値→トレンド→説明）
  • WCAG AA色彩コントラスト準拠