kpi-dashboard-design
MRR・チャーン・LTV/CACなどのKPIダッシュボードを、指標の選定・可視化のベストプラクティス・リアルタイム監視パターンに基づいて設計します。経営層向けSaaSメトリクスダッシュボードの構築、サービス稼働状況やリクエストスループットを表示するオペレーションセンターの設計、プロダクトチーム向けのコホートリテンション分析ビューの作成、また計算ロジックの不整合による指標の矛盾をデバッグする際にも活用できます。
description の原文を見る
Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict each other due to inconsistent calculation methodology.
SKILL.md 本文
KPIダッシュボード設計
経営判断を促す効果的なKey Performance Indicator (KPI) ダッシュボードを設計するための包括的なパターン集です。
このスキルを使うとき
- エグゼクティブダッシュボードを設計するとき
- 意味のある KPI を選定するとき
- リアルタイム監視ディスプレイを構築するとき
- 部門別のメトリクスビューを作成するとき
- 既存のダッシュボードレイアウトを改善するとき
- メトリクスのガバナンスを確立するとき
コアコンセプト
1. KPIフレームワーク
| レベル | 焦点 | 更新頻度 | 対象 |
|---|---|---|---|
| 戦略的 | 長期目標 | 月単位/四半期単位 | エグゼクティブ |
| 戦術的 | 部門目標 | 週単位/月単位 | マネージャー |
| 運用的 | 日々の業務 | リアルタイム/日単位 | チーム |
2. SMART KPI
Specific: 明確な定義
Measurable: 定量化可能
Achievable: 現実的なターゲット
Relevant: 目標に適合
Time-bound: 期間が定義されている
3. ダッシュボードの階層構造
├── エグゼクティブサマリー(1ページ)
│ ├── 4~6個の主要KPI
│ ├── トレンド指標
│ └── 重要なアラート
├── 部門別ビュー
│ ├── 営業ダッシュボード
│ ├── マーケティングダッシュボード
│ ├── 運用ダッシュボード
│ └── 財務ダッシュボード
└── 詳細ドリルダウン
├── 個別メトリクス
└── 根本原因分析
部門別の一般的な KPI
営業 KPI
売上メトリクス:
- Monthly Recurring Revenue (MRR)
- Annual Recurring Revenue (ARR)
- Average Revenue Per User (ARPU)
- 売上成長率
パイプラインメトリクス:
- 営業パイプライン総額
- 受注率
- 平均取引規模
- 営業周期
活動メトリクス:
- 営業担当者あたりの通話/メール数
- スケジュール済みデモ数
- 送付済み提案数
- クローズ率
マーケティング KPI
顧客獲得:
- Cost Per Acquisition (CPA)
- Customer Acquisition Cost (CAC)
- リード件数
- Marketing Qualified Leads (MQL)
エンゲージメント:
- ウェブサイトトラフィック
- コンバージョン率
- メール開封率/クリック率
- ソーシャルエンゲージメント
ROI:
- マーケティング ROI
- キャンペーン成績
- チャネルアトリビューション
- CAC回収期間
プロダクト KPI
利用:
- Daily/Monthly Active Users (DAU/MAU)
- セッション継続時間
- 機能採用率
- Stickiness (DAU/MAU)
品質:
- Net Promoter Score (NPS)
- Customer Satisfaction (CSAT)
- バグ/問題件数
- 解決までの時間
成長:
- ユーザー成長率
- アクティベーション率
- リテンション率
- チャーン率
財務 KPI
収益性:
- グロスマージン
- 純利益率
- EBITDA
- 営業利益率
流動性:
- 流動比率
- 当座比率
- キャッシュフロー
- 運転資本
効率性:
- 従業員あたりの売上
- 営業費用比率
- 売上債権回収日数
- 在庫回転率
ダッシュボードレイアウトパターン
パターン1: エグゼクティブサマリー
┌─────────────────────────────────────────────────────────────┐
│ エグゼクティブダッシュボード [日付範囲 ▼] │
├─────────────┬─────────────┬─────────────┬─────────────────┤
│ 売上 │ 利益 │ 顧客数 │ NPS スコア │
│ $2.4M │ $450K │ 12,450 │ 72 │
│ ▲ 12% │ ▲ 8% │ ▲ 15% │ ▲ 5ポイント │
├─────────────┴─────────────┴─────────────┴─────────────────┤
│ │
│ 売上トレンド │ 製品別売上比率 │
│ ┌───────────────────────┐ │ ┌──────────────────┐ │
│ │ /\ /\ │ │ │ ████████ 45% │ │
│ │ / \ / \ /\ │ │ │ ██████ 32% │ │
│ │ / \/ \ / \ │ │ │ ████ 18% │ │
│ │ / \/ \ │ │ │ ██ 5% │ │
│ └───────────────────────┘ │ └──────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ 🔴 アラート: チャーン率が閾値を超過(>5%) │
│ 🟡 警告: サポートチケット件数が平均より20%増加 │
└─────────────────────────────────────────────────────────────┘
パターン2: SaaS メトリクスダッシュボード
┌─────────────────────────────────────────────────────────────┐
│ SAAS メトリクス 2024年1月 [月単位 ▼] │
├──────────────────────┬──────────────────────────────────────┤
│ ┌────────────────┐ │ MRR 成長率 │
│ │ MRR │ │ ┌────────────────────────────────┐ │
│ │ $125,000 │ │ │ /── │ │
│ │ ▲ 8% │ │ │ /────/ │ │
│ └────────────────┘ │ │ /────/ │ │
│ ┌────────────────┐ │ │ /────/ │ │
│ │ ARR │ │ │ /────/ │ │
│ │ $1,500,000 │ │ └────────────────────────────────┘ │
│ │ ▲ 15% │ │ 1月 2月 3月 4月 5月 6月 7月 8月... │
│ └────────────────┘ │ │
├──────────────────────┼──────────────────────────────────────┤
│ ユニット・エコノミクス │ コホート別リテンション │
│ │ │
│ CAC: $450 │ 1か月目: ████████████████████ 100% │
│ LTV: $2,700 │ 3か月目: █████████████████ 85% │
│ LTV/CAC: 6.0x │ 6か月目: ████████████████ 80% │
│ │ 12か月目: ██████████████ 72% │
│ 回収期間: 4か月 │ │
├──────────────────────┴──────────────────────────────────────┤
│ チャーン分析 │
│ ┌──────────┬──────────┬──────────┬──────────────────────┐ │
│ │ グロス │ ネット │ ロゴ │ 拡張 │ │
│ │ 4.2% │ 1.8% │ 3.1% │ 2.4% │ │
│ └──────────┴──────────┴──────────┴──────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
パターン3: リアルタイム運用
┌─────────────────────────────────────────────────────────────┐
│ オペレーションセンター ライブ ● 最終: 10:42:15 │
├────────────────────────────┬────────────────────────────────┤
│ システムヘルス │ サービスステータス │
│ ┌──────────────────────┐ │ │
│ │ CPU MEM DISK │ │ ● API Gateway 健全 │
│ │ 45% 72% 58% │ │ ● User Service 健全 │
│ │ ███ ████ ███ │ │ ● Payment Service 劣化 │
│ │ ███ ████ ███ │ │ ● Database 健全 │
│ │ ███ ████ ███ │ │ ● Cache 健全 │
│ └──────────────────────┘ │ │
├────────────────────────────┼────────────────────────────────┤
│ リクエストスループット │ エラー率 │
│ ┌──────────────────────┐ │ ┌──────────────────────────┐ │
│ │ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁▂▃▄▅ │ │ │ ▁▁▁▁▁▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │ │
│ └──────────────────────┘ │ └──────────────────────────┘ │
│ 現在: 12,450 req/s │ 現在: 0.02% │
│ ピーク: 18,200 req/s │ 閾値: 1.0% │
├────────────────────────────┴────────────────────────────────┤
│ 最近のアラート │
│ 10:40 🟡 Payment Service のレイテンシが高い(p99 > 500ms)│
│ 10:35 🟢 解決: データベース接続プール回復 │
│ 10:22 🔴 Payment Service のサーキットブレーカーが発動 │
└─────────────────────────────────────────────────────────────┘
実装パターン
KPI 計算用 SQL
-- Monthly Recurring Revenue (MRR)
WITH mrr_calculation AS (
SELECT
DATE_TRUNC('month', billing_date) AS month,
SUM(
CASE subscription_interval
WHEN 'monthly' THEN amount
WHEN 'yearly' THEN amount / 12
WHEN 'quarterly' THEN amount / 3
END
) AS mrr
FROM subscriptions
WHERE status = 'active'
GROUP BY DATE_TRUNC('month', billing_date)
)
SELECT
month,
mrr,
LAG(mrr) OVER (ORDER BY month) AS prev_mrr,
(mrr - LAG(mrr) OVER (ORDER BY month)) / LAG(mrr) OVER (ORDER BY month) * 100 AS growth_pct
FROM mrr_calculation;
-- Cohort Retention
WITH cohorts AS (
SELECT
user_id,
DATE_TRUNC('month', created_at) AS cohort_month
FROM users
),
activity AS (
SELECT
user_id,
DATE_TRUNC('month', event_date) AS activity_month
FROM user_events
WHERE event_type = 'active_session'
)
SELECT
c.cohort_month,
EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month)) AS months_since_signup,
COUNT(DISTINCT a.user_id) AS active_users,
COUNT(DISTINCT a.user_id)::FLOAT / COUNT(DISTINCT c.user_id) * 100 AS retention_rate
FROM cohorts c
LEFT JOIN activity a ON c.user_id = a.user_id
AND a.activity_month >= c.cohort_month
GROUP BY c.cohort_month, EXTRACT(MONTH FROM age(a.activity_month, c.cohort_month))
ORDER BY c.cohort_month, months_since_signup;
-- Customer Acquisition Cost (CAC)
SELECT
DATE_TRUNC('month', acquired_date) AS month,
SUM(marketing_spend) / NULLIF(COUNT(new_customers), 0) AS cac,
SUM(marketing_spend) AS total_spend,
COUNT(new_customers) AS customers_acquired
FROM (
SELECT
DATE_TRUNC('month', u.created_at) AS acquired_date,
u.id AS new_customers,
m.spend AS marketing_spend
FROM users u
JOIN marketing_spend m ON DATE_TRUNC('month', u.created_at) = m.month
WHERE u.source = 'marketing'
) acquisition
GROUP BY DATE_TRUNC('month', acquired_date);
Python ダッシュボードコード(Streamlit)
import streamlit as st
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
st.set_page_config(page_title="KPI Dashboard", layout="wide")
# ヘッダーと日付フィルター
col1, col2 = st.columns([3, 1])
with col1:
st.title("エグゼクティブダッシュボード")
with col2:
date_range = st.selectbox(
"期間",
["過去7日", "過去30日", "過去四半期", "年初来"]
)
# KPI カード
def metric_card(label, value, delta, prefix="", suffix=""):
delta_color = "green" if delta >= 0 else "red"
delta_arrow = "▲" if delta >= 0 else "▼"
st.metric(
label=label,
value=f"{prefix}{value:,.0f}{suffix}",
delta=f"{delta_arrow} {abs(delta):.1f}%"
)
col1, col2, col3, col4 = st.columns(4)
with col1:
metric_card("売上", 2400000, 12.5, prefix="$")
with col2:
metric_card("顧客数", 12450, 15.2)
with col3:
metric_card("NPS スコア", 72, 5.0)
with col4:
metric_card("チャーン率", 4.2, -0.8, suffix="%")
# チャート
col1, col2 = st.columns(2)
with col1:
st.subheader("売上トレンド")
revenue_data = pd.DataFrame({
'Month': pd.date_range('2024-01-01', periods=12, freq='M'),
'Revenue': [180000, 195000, 210000, 225000, 240000, 255000,
270000, 285000, 300000, 315000, 330000, 345000]
})
fig = px.line(revenue_data, x='Month', y='Revenue',
line_shape='spline', markers=True)
fig.update_layout(height=300)
st.plotly_chart(fig, use_container_width=True)
with col2:
st.subheader("製品別売上")
product_data = pd.DataFrame({
'Product': ['Enterprise', 'Professional', 'Starter', 'Other'],
'Revenue': [45, 32, 18, 5]
})
fig = px.pie(product_data, values='Revenue', names='Product',
hole=0.4)
fig.update_layout(height=300)
st.plotly_chart(fig, use_container_width=True)
# コホート・ヒートマップ
st.subheader("コホート別リテンション")
cohort_data = pd.DataFrame({
'Cohort': ['1月', '2月', '3月', '4月', '5月'],
'M0': [100, 100, 100, 100, 100],
'M1': [85, 87, 84, 86, 88],
'M2': [78, 80, 76, 79, None],
'M3': [72, 74, 70, None, None],
'M4': [68, 70, None, None, None],
})
fig = go.Figure(data=go.Heatmap(
z=cohort_data.iloc[:, 1:].values,
x=['M0', 'M1', 'M2', 'M3', 'M4'],
y=cohort_data['Cohort'],
colorscale='Blues',
text=cohort_data.iloc[:, 1:].values,
texttemplate='%{text}%',
textfont={"size": 12},
))
fig.update_layout(height=250)
st.plotly_chart(fig, use_container_width=True)
# アラートセクション
st.subheader("アラート")
alerts = [
{"level": "error", "message": "チャーン率が閾値を超過(>5%)"},
{"level": "warning", "message": "サポートチケット件数が平均より20%増加"},
]
for alert in alerts:
if alert["level"] == "error":
st.error(f"🔴 {alert['message']}")
elif alert["level"] == "warning":
st.warning(f"🟡 {alert['message']}")
ベストプラクティス
すべきこと
- 5~7個の KPI に限定 - 重要なことに焦点を当てる
- コンテキストを表示 - 比較、トレンド、目標を示す
- 一貫した色を使用 - 赤=悪い、緑=良い
- ドリルダウンを有効化 - サマリーから詳細へ
- 適切に更新 - メトリクスの頻度に合わせる
してはいけないこと
- 虚栄の指標を表示しない - 実行可能なデータに焦点を当てる
- 過密を避ける - 空白がわかりやすさを助ける
- 3D チャートを使用しない - 認識を歪ませる
- 計算方法を隠さない - ダッシュボードに直接記載する
- モバイルを無視しない - レスポンシブデザインを確保する
トラブルシューティング
ダッシュボードの MRR と財務部門の数字が矛盾する
最も一般的な原因は、年間プランの処理方法が一貫していないことです。財務部門が日次レートで按分している一方、ダッシュボードが月次に正規化している可能性があります。単一の計算式に統一し、ダッシュボードカード上に直接記載してください:
-- ツールチップ/データ辞書に表示される明示的な計算式
-- 年間プラン: 総契約額を12で割る
-- 四半期プラン: 3で割る
-- 月間プラン: そのまま使用
CASE subscription_interval
WHEN 'monthly' THEN amount
WHEN 'quarterly' THEN amount / 3.0
WHEN 'yearly' THEN amount / 12.0
END AS normalized_mrr
ダッシュボードは緑なのに、プロダクトチームはユーザーのクレームを報告している
ダッシュボードはシステムアップタイム(遅行指標)を追跡していますが、ユーザーが実感する品質メトリクスが不足しています。インフラストラクチャメトリクスと並行して、ユーザーが実感するメトリクスを追加してください:
| インフラストラクチャ(緑) | ユーザーが実感する指標(追加) |
|---|---|
| API アップタイム 99.9% | P95ページロード時間 |
| エラー率 0.1% | タスク完了率 |
| キュー深度 正常 | サポートチケット件数 |
リテンションコホートがフラット — コホート間に変動がない
コホートクエリが登録月で正しく分割されているか確認してください。一般的なバグは created_at::date を使用することで、日付で分割されるためコホートが小さすぎてトレンドが表示されません:
-- 間違い: 粒度が細かく、コホートが小さすぎる
DATE_TRUNC('day', created_at) AS cohort_date
-- 正しい: 月単位のコホート
DATE_TRUNC('month', created_at) AS cohort_month
リアルタイムダッシュボードがデータベースに負荷をかけている
10秒ごとにリアルタイムダッシュボードが複雑なコホート SQL で更新される場合、本番クエリのパフォーマンスが低下します。スケジュール済みジョブで事前集計メトリクスをサマリーテーブルに書き込み、ダッシュボードはそこから読み込むことで OLAP ワークロードを OLTP から分離してください:
# Cron/Celery で5分ごとにスケジュール実行
def refresh_mrr_summary():
conn.execute("""
INSERT INTO kpi_snapshot (metric, value, snapshot_at)
SELECT 'mrr', SUM(...), NOW()
FROM subscriptions WHERE status = 'active'
ON CONFLICT (metric) DO UPDATE SET value = EXCLUDED.value
""")
アラート閾値が常に発火し、チームが無視している
一度設定して見直さない静的閾値はアラート疲れを招きます。動的閾値を使用して、メトリクスが独自のベースラインから大きく逸脱した場合のみ発火するようにしてください:
# 現在値が30日間の移動平均から2標準偏差を超えた場合にアラート
def is_anomalous(current: float, history: list[float]) -> bool:
mean = statistics.mean(history)
stdev = statistics.stdev(history)
return abs(current - mean) > 2 * stdev
関連スキル
data-storytelling- ダッシュボードの発見を経営判断を促すナラティブに変換する
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- wshobson
- リポジトリ
- wshobson/agents
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/wshobson/agents / ライセンス: MIT
関連スキル
nano-banana-2
inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview(Nano Banana 2)で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード:「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」
octocode-slides
洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー(概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー)で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。
gpt-image2-ppt
OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。
nano-banana
Nano Banana PRO(Gemini 3 Pro Image)およびNano Banana(Gemini 2.5 Flash Image)を使用したAI画像生成機能です。以下の場合に活用できます:(1)テキストプロンプトからの画像生成、(2)既存画像の編集、(3)インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、(4)複数画像での人物キャラクターの一貫性保持、(5)正確なテキスト描画を含む画像生成、(6)AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。
oiloil-ui-ux-guide
モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム(Webアプリ)に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP(コントラスト・反復・配置・近接)をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル(クリーン・余白・タイポグラフィ主導)を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。
axiom-hig-ref
Apple Human Interface Guidelines リファレンス — 色(セマンティックカラー、カスタムカラー、パターン)、背景(マテリアル階層、ダイナミック背景)、タイポグラフィ(標準スタイル、カスタムフォント、Dynamic Type)、SF Symbols(レンダリングモード、色、多言語対応)、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。