ダッシュボード / アナリティクス デザインインスピレーション
データを美しく。情報の民主化。複雑なデータを直感的に理解できるビジュアライゼーション -- Grafana、Tableau、Datadogが確立した「データダッシュボード」の美学に根ざしている。暗い背景にデータが光り、数値が語る物語を色と形で翻訳する。6-12のメトリクスカード、チャート、データテーブルが1画面に収まる高密度レイアウトが特徴だ。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。KPI数値は大きく太く、テーブルの数値列はモノスペースで右寄せ整列しています。
デザイン哲学 -- 数値が語る物語
データが主役。数値は大きく、ラベルは小さく。色が状態を語る。
アナリティクスUIの世界観では、画面は「データの管制塔」だ。KPI数値が最大級のフォントサイズで画面を支配し、ラベルは小さく控えめに補足する。上昇は緑、下降は赤 -- この色分けが一瞬で状況を伝える。
カラーパレット -- データの6色
アナリティクスの色は「データの種類」を瞬時に識別させる6色パレットで構成される。
Chart Colors
Indigo
#6366f1
#6366f1
Purple
#8b5cf6
#8b5cf6
Pink
#ec4899
#ec4899
Teal
#14b8a6
#14b8a6
Amber
#f59e0b
#f59e0b
Red
#ef4444
#ef4444
Semantic
Success #10b981
Error #ef4444
Warning #f59e0b
| Token | 値 | 役割 |
|---|---|---|
| bg-deep | #0b0f19 | 最深部 |
| bg-base | #111827 | メイン背景 |
| bg-card | #1f2937 | カード |
| text-primary | #f9fafb | KPI数値 |
| text-muted | #6b7280 | ラベル |
| chart-indigo | #6366f1 | シリーズ1 |
| chart-teal | #14b8a6 | シリーズ4 |
| success | #10b981 | 上昇 |
| error | #ef4444 | 下降 |
コンポーネント -- データの部品群
メトリクスカード
Total Users
48,293
+12.4%
Revenue
$127K
+8.2%
Bounce Rate
24.1%
-2.3%
時間範囲セレクター
1h6h24h7d30d
フィルターボタン
Web AppMobileAPIAdmin
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/DASHBOARD_ANALYTICS.mdをプロジェクトのDESIGN.mdにコピー- チャートカラーをデータの種類に合わせて調整
- Stitch に「この DESIGN.md に従ってダッシュボードを作成してください」と指示
- チャートライブラリ（Chart.js / Recharts）は後から統合
適したプロジェクト
- BIダッシュボード・分析ツール
- サーバー・インフラ監視画面
- マーケティング分析・広告管理
- 金融・トレーディングツール
- SaaS管理画面・管理者パネル
不向きなプロジェクト
- コンテンツ中心のブログ・メディア
- ECサイトの商品一覧
- クリエイティブ系ポートフォリオ
- ゲーミング・エンターテイメント
チャートカラーの使いすぎに注意
6色パレットを一度に全て使うと認知負荷が高くなります。1つのチャートには3-4色に制限し、残りの色は他のチャートやセクションで使い分けてください。