統計カード Stat Card

KPIや統計情報を目立つ数値で表示するカード。ダッシュボードの主要指標表示に最適。

使用場面: ダッシュボードで売上・ユーザー数・コンバージョン率などの指標を表示する場面 採用例: Stripe Dashboard, Google Analytics

ライブデモ

総売上 📈

¥12,450,000

▲ 12.5% 前月比

アクティブユーザー 👥

3,456

▲ 8.2% 前月比

コンバージョン率 🎯

4.28%

▼ 1.3% 前月比

ソースコード

<div class="demo-stats">
  <div class="demo-stat-card">
    <div class="demo-stat-header">
      <span class="demo-stat-label">総売上</span>
      <span class="demo-stat-icon">&#128200;</span>
    </div>
    <div class="demo-stat-value">&#165;12,450,000</div>
    <div class="demo-stat-change positive">
      <span>&#9650; 12.5%</span>
      <span class="demo-stat-period">前月比</span>
    </div>
  </div>
  <div class="demo-stat-card">
    <div class="demo-stat-header">
      <span class="demo-stat-label">アクティブユーザー</span>
      <span class="demo-stat-icon">&#128101;</span>
    </div>
    <div class="demo-stat-value">3,456</div>
    <div class="demo-stat-change positive">
      <span>&#9650; 8.2%</span>
      <span class="demo-stat-period">前月比</span>
    </div>
  </div>
  <div class="demo-stat-card">
    <div class="demo-stat-header">
      <span class="demo-stat-label">コンバージョン率</span>
      <span class="demo-stat-icon">&#127919;</span>
    </div>
    <div class="demo-stat-value">4.28%</div>
    <div class="demo-stat-change negative">
      <span>&#9660; 1.3%</span>
      <span class="demo-stat-period">前月比</span>
    </div>
  </div>
</div>

.demo-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.demo-stat-card {
  background: #fff; border-radius: 12px; padding: 16px;
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s, transform 0.15s;
}
.demo-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.demo-stat-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.demo-stat-label { font-size: 12px; color: #888; }
.demo-stat-icon { font-size: 18px; }
.demo-stat-value {
  font-size: 24px; font-weight: 800; color: #333;
  margin-bottom: 6px;
}
.demo-stat-card:first-child .demo-stat-value {
  color: var(--ui-primary);
}
.demo-stat-change {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
}
.demo-stat-change.positive { color: #10b981; }
.demo-stat-change.negative { color: #ef4444; }
.demo-stat-period {
  font-size: 11px; color: #bbb; font-weight: 400;
}
@media (max-width: 500px) {
  .demo-stats { grid-template-columns: 1fr; }
}

AIプロンプト

統計カードをHTML/CSSで作ってください。KPIの数値・ラベル・前月比の増減を表示します。

以下の仕様で統計カードを実装してください。
- 3カード横並びレイアウト（レスポンシブ対応）
- 各カードにアイコン・ラベル・数値・変動率を表示
- 増加は緑、減少は赤で変動率を表示
- プライマリカラー: #2563eb
- ホバー時にカードが浮く
- 数値のカウントアップアニメーション

ダッシュボード用の高機能統計カードを実装してください。
- 数値カウントアップアニメーション（IntersectionObserver連動）
- ミニスパークラインチャート付き
- 期間切替（日/週/月/年）
- ツールチップで詳細表示
- リアルタイム更新のシミュレーション
- ローディングスケルトン状態
- レスポンシブグリッド（1〜4列自動調整）

← カタログに戻る