SaaSダッシュボード デザインインスピレーション
SaaSダッシュボードは「データを最短距離で意思決定に変換する」UIである。Stripe、Datadog、Grafana -- これらのプロダクトに共通するのは、装飾ゼロ・情報密度最大という設計哲学だ。1画面に必要な情報を全て表示し、スクロールを最小化する。そのために、フォントサイズは13-14px、スペーシングは4pxベースという高密度設計を採用する。
このページは、Stripe/Datadog のデザイン言語から抽出したSaaSダッシュボードテーマを、豊富なビジュアル例とともに解説する。管理画面、分析ダッシュボード、モニタリングツール -- データ中心のあらゆるプロダクトに応用できる。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。色やサイズの微妙な違いを視覚的に確認しながら、自分のプロダクトに適用するイメージを掴んでください。
デザイン哲学 -- データが主役
UIは数値を邪魔せず、最短距離で意思決定に導く。装飾ゼロ、情報密度最大。
ダッシュボードのユーザーは「見たい情報に最速でたどり着く」ことを求めている。美しさは二の次だ。しかし、整然としたデータ表示は結果として美しくなる。Stripeの管理画面が美しいのは、装飾をしているからではない -- データを整理する力が卓越しているからだ。
高密度設計の3原則
- 数値は大きく、ラベルは小さく: メトリクスカードでは数値が主役。ラベルは12pxのキャプションで十分
- tabular-nums 必須: 全数値に
font-variant-numeric: tabular-numsを適用し、列揃えを保証 - コンパクトだが窮屈ではない: 4pxベースのスペーシングだが、行間は確保。密度と可読性のバランス
カラーパレット -- データ視覚化対応
背景サーフェス
Background Surfaces
チャートカラーパレット
Chart Colors
Indigo
Green
Amber
Blue
Pink
Teal
ボタン / バッジ
Buttons
Primary
Secondary
Ghost
Danger
Badges
DefaultActiveErrorWarningInfo
使い方ガイド
このテーマが適するプロダクト
- SaaS管理画面・ダッシュボード
- 分析・モニタリングツール
- API管理画面
- データ可視化ツール
- DevOpsツール
重要な設計原則
| 原則 | 詳細 |
|---|---|
| tabular-nums | 全数値に適用。列揃えはダッシュボードの生命線 |
| コンパクトスペーシング | 4pxベースユニット。余白は最小限 |
| ステータスの二重表現 | 色+テキストで状態を伝える（色覚障害対応） |
| Sticky Header | テーブルヘッダーは常に固定表示 |
Stitch向けプロンプト例
このDESIGN.mdに従って、APIモニタリングダッシュボードを作成してください。
背景は#111111、サイドバーは#0a0a0a（220px幅）。
メトリクスカードは#222222背景、数値は28px tnum、ラベルは11px uppercase #a3a3a3。
データテーブルはCompactスペーシング（セルパディング8px 12px）、数値列はtnum。
アクセントカラーは#6366f1（indigo）です。