mcpField
K
kpi-dashboard-design

kpi-dashboard-design

github.com/sickn33デザイン・UI48.8k328 回インストール今日更新
リポジトリ

kpi-dashboard-design について

KPI ダッシュボードの設計を支援するスキルです。指標の選定や業務別ビューの構成に取り組むチーム向けに、レイアウト例と計算・データ品質の注意点をまとめています。

主な機能

  1. 01戦略・戦術・運用 KPI フレームワーク
  2. 02SMART KPI の選定ガイド
  3. 03経営層・部門別ダッシュボードの型
  4. 04指標計算とデータ品質の注意点

活用シーン

  1. 01経営報告向け KPI の選定
  2. 02部門別指標ビューの設計
  3. 03リアルタイム運用ダッシュボードの計画
  4. 04KPI の計算とガバナンスの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill kpi-dashboard-design

インストール後、Claude Code で/kpi-dashboard-designを入力して読み込まれたか確認します。

同梱ファイルresources/metric-queries.sqlresources/implementation-playbook.md

詳細

KPIダッシュボードの設計

ビジネス上の意思決定を促す、効果的な重要業績評価指標(KPI)ダッシュボードを設計するための包括的なパターンです。

このスキルを使用しない場合

  • タスクがKPIダッシュボードの設計に関係しない場合
  • この範囲外の別のドメインやツールが必要な場合

手順

  • 目標、制約、必要な入力を明確にします。
  • 関連するベストプラクティスを適用し、結果を検証します。
  • 実行可能な手順と検証方法を提示します。
  • 詳細な例が必要な場合は、resources/implementation-playbook.mdを開きます。

このスキルを使用する場合

  • 経営層向けダッシュボードを設計するとき
  • 意味のあるKPIを選定するとき
  • リアルタイム監視画面を構築するとき
  • 部門固有の指標ビューを作成するとき
  • 既存のダッシュボードレイアウトを改善するとき
  • 指標のガバナンスを確立するとき

基本概念

1. KPIフレームワーク
レベル焦点更新頻度対象者
戦略長期目標月次/四半期経営層
戦術部門目標週次/月次マネージャー
運用日々の業務リアルタイム/日次チーム
2. SMART KPI
Specific: Clear definition
Measurable: Quantifiable
Achievable: Realistic targets
Relevant: Aligned to goals
Time-bound: Defined period
3. ダッシュボードの階層
├── Executive Summary (1 page)
│   ├── 4-6 headline KPIs
│   ├── Trend indicators
│   └── Key alerts
├── Department Views
│   ├── Sales Dashboard
│   ├── Marketing Dashboard
│   ├── Operations Dashboard
│   └── Finance Dashboard
└── Detailed Drilldowns
    ├── Individual metrics
    └── Root cause analysis

部門別の一般的なKPI

営業KPI
Revenue Metrics:
  - Monthly Recurring Revenue (MRR)
  - Annual Recurring Revenue (ARR)
  - Average Revenue Per User (ARPU)
  - Revenue Growth Rate

Pipeline Metrics:
  - Sales Pipeline Value
  - Win Rate
  - Average Deal Size
  - Sales Cycle Length

Activity Metrics:
  - Calls/Emails per Rep
  - Demos Scheduled
  - Proposals Sent
  - Close Rate
マーケティングKPI
Acquisition:
  - Cost Per Acquisition (CPA)
  - Customer Acquisition Cost (CAC)
  - Lead Volume
  - Marketing Qualified Leads (MQL)

Engagement:
  - Website Traffic
  - Conversion Rate
  - Email Open/Click Rate
  - Social Engagement

ROI:
  - Marketing ROI
  - Campaign Performance
  - Channel Attribution
  - CAC Payback Period
製品KPI
Usage:
  - Daily/Monthly Active Users (DAU/MAU)
  - Session Duration
  - Feature Adoption Rate
  - Stickiness (DAU/MAU)

Quality:
  - Net Promoter Score (NPS)
  - Customer Satisfaction (CSAT)
  - Bug/Issue Count
  - Time to Resolution

Growth:
  - User Growth Rate
  - Activation Rate
  - Retention Rate
  - Churn Rate
財務KPI
Profitability:
  - Gross Margin
  - Net Profit Margin
  - EBITDA
  - Operating Margin

Liquidity:
  - Current Ratio
  - Quick Ratio
  - Cash Flow
  - Working Capital

Efficiency:
  - Revenue per Employee
  - Operating Expense Ratio
  - Days Sales Outstanding
  - Inventory Turnover

ダッシュボードのレイアウトパターン

パターン1:経営層向けサマリー
┌─────────────────────────────────────────────────────────────┐
│  EXECUTIVE DASHBOARD                        [Date Range ▼]  │
├─────────────┬─────────────┬─────────────┬─────────────────┤
│   REVENUE   │   PROFIT    │  CUSTOMERS  │    NPS SCORE    │
│   $2.4M     │    $450K    │    12,450   │       72        │
│   ▲ 12%     │    ▲ 8%     │    ▲ 15%    │     ▲ 5pts     │
├─────────────┴─────────────┴─────────────┴─────────────────┤
│                                                             │
│  Revenue Trend                    │  Revenue by Product     │
│  ┌───────────────────────┐       │  ┌──────────────────┐   │
│  │    /\    /\          │       │  │ ████████ 45%     │   │
│  │   /  \  /  \    /\   │       │  │ ██████   32%     │   │
│  │  /    \/    \  /  \  │       │  │ ████     18%     │   │
│  │ /            \/    \ │       │  │ ██        5%     │   │
│  └───────────────────────┘       │  └──────────────────┘   │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│  🔴 Alert: Churn rate exceeded threshold (>5%)              │
│  🟡 Warning: Support ticket volume 20% above average        │
└─────────────────────────────────────────────────────────────┘
パターン2:SaaS指標ダッシュボード
┌─────────────────────────────────────────────────────────────┐
│  SAAS METRICS                     Jan 2024  [Monthly ▼]     │
├──────────────────────┬──────────────────────────────────────┤
│  ┌────────────────┐  │  MRR GROWTH                          │
│  │      MRR       │  │  ┌────────────────────────────────┐  │
│  │    $125,000    │  │  │                          /──   │  │
│  │     ▲ 8%       │  │  │                    /────/      │  │
│  └────────────────┘  │  │              /────/            │  │
│  ┌────────────────┐  │  │        /────/                  │  │
│  │      ARR       │  │  │   /────/                       │  │
│  │   $1,500,000   │  │  └────────────────────────────────┘  │
│  │     ▲ 15%      │  │  J  F  M  A  M  J  J  A  S  O  N  D  │
│  └────────────────┘  │                                      │
├──────────────────────┼──────────────────────────────────────┤
│  UNIT ECONOMICS      │  COHORT RETENTION                    │
│                      │                                      │
│  CAC:     $450       │  Month 1: ████████████████████ 100%  │
│  LTV:     $2,700     │  Month 3: █████████████████    85%   │
│  LTV/CAC: 6.0x       │  Month 6: ████████████████     80%   │
│                      │  Month 12: ██████████████      72%   │
│  Payback: 4 months   │                                      │
├──────────────────────┴──────────────────────────────────────┤
│  CHURN ANALYSIS                                             │
│  ┌──────────┬──────────┬──────────┬──────────────────────┐ │
│  │ Gross    │ Net      │ Logo     │ Expansion            │ │
│  │ 4.2%     │ 1.8%     │ 3.1%     │ 2.4%                 │ │
│  └──────────┴──────────┴──────────┴──────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
パターン3:リアルタイム運用
┌─────────────────────────────────────────────────────────────┐
│  OPERATIONS CENTER                    Live ● Last: 10:42:15 │
├────────────────────────────┬────────────────────────────────┤
│  SYSTEM HEALTH             │  SERVICE STATUS                │
│  ┌──────────────────────┐  │                                │
│  │   CPU    MEM    DISK │  │  ● API Gateway      Healthy    │
│  │   45%    72%    58%  │  │  ● User Service     Healthy    │
│  │   ███    ████   ███  │  │  ● Payment Service  Degraded   │
│  │   ███    ████   ███  │  │  ● Database         Healthy    │
│  │   ███    ████   ███  │  │  ● Cache            Healthy    │
│  └──────────────────────┘  │                                │
├────────────────────────────┼────────────────────────────────┤
│  REQUEST THROUGHPUT        │  ERROR RATE                    │
│  ┌──────────────────────┐  │  ┌──────────────────────────┐  │
│  │ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁▂▃▄▅ │  │  │ ▁▁▁▁▁▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁  │  │
│  └──────────────────────┘  │  └──────────────────────────┘  │
│  Current: 12,450 req/s     │  Current: 0.02%                │
│  Peak: 18,200 req/s        │  Threshold: 1.0%               │
├────────────────────────────┴────────────────────────────────┤
│  RECENT ALERTS                                              │
│  10:40  🟡 High latency on payment-service (p99 > 500ms)    │
│  10:35  🟢 Resolved: Database connection pool recovered     │
│  10:22  🔴 Payment service circuit breaker tripped          │
└─────────────────────────────────────────────────────────────┘

実装パターン

カードごとに、レポートのタイムゾーン、通貨と換算日、分子と分母、比較対象期間を定義します。変化率とパーセンテージポイント、NPSポイントを混同しないでください。同じ期間と定義を使用する場合、ARR = 12 × MRRであれば成長率は等しくなります。これらの架空のレイアウト数値は、照合済みの会計データではありません。顧客・従業員データや財務データを表示する前に、アクセス制御、集計/コホートの最小サイズ、データの鮮度/網羅性のラベルを必須とし、生のPIIのエクスポートは避けてください。メールの開封やクリックにはプライバシー保護用のプロキシやボットが含まれる場合があり、エンゲージメントを直接証明するものではありません。

KPI計算用SQL

実行可能な正規化済み入力の例には、resources/metric-queries.sqlを使用します。usersには顧客ごとに1行、eventsにはユーザー/月ごとの観測値、spendにはソースごとの支出行、monthly_revenueには月ごとに照合済みの金額が含まれます。月は整数の「年 × 12 + 月 − 1」として表し、12月以降にオフセットが折り返さないようにします。

クエリでは元のコホート分母を維持し、集計前にアクティビティを重複排除し、顧客との結合前に支出を集計して、成長率または顧客獲得コストが定義できない場合はNULLを返します。アクティビティがゼロの行を表示する必要がある場合、欠落したコホート/月の組み合わせには明示的なレポート用カレンダーが必要です。成長率のクエリは、連続する利用可能な行を比較します。完全な月次カレンダーを必須とするか、複数月にまたがる変化を月次成長率と呼ばず、欠落期間ありとして示してください。CACを解釈する前に、支出と獲得顧客のチャネル/期間コホートを一致させます。月次売上を算出する前に、サブスクリプションの期間、通貨、返金、収益認識を正規化します。これらの例では会計方針を定義していません。

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")

# Synthetic layout illustration; this is not a connected or filterable dashboard.
# Header with illustrative date selector
col1, col2 = st.columns([3, 1])
with col1:
    st.title("Executive Dashboard")
with col2:
    date_range = st.selectbox(
        "Period",
        ["Last 7 Days", "Last 30 Days", "Last Quarter", "YTD"]
    )

# KPI Cards
def metric_card(label, value, delta, prefix="", suffix="", delta_unit="%", lower_is_better=False):
    st.metric(
        label=label,
        value=f"{prefix}{value:,.1f}{suffix}",
        delta=f"{delta:+.1f}{delta_unit}",
        delta_color="inverse" if lower_is_better else "normal",
    )

col1, col2, col3, col4 = st.columns(4)
with col1:
    metric_card("Revenue", 2400000, 12.5, prefix="$")
with col2:
    metric_card("Customers", 12450, 15.2)
with col3:
    metric_card("NPS Score", 72, 5.0, delta_unit=" pts")
with col4:
    metric_card("Churn Rate", 4.2, -0.8, suffix="%", delta_unit=" pp", lower_is_better=True)

# Charts
col1, col2 = st.columns(2)

with col1:
    st.subheader("Revenue Trend")
    revenue_data = pd.DataFrame({
        'Month': pd.date_range('2024-01-01', periods=12, freq='ME'),
        '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("Revenue by Product")
    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)

# Cohort Heatmap
st.subheader("Cohort Retention")
cohort_data = pd.DataFrame({
    'Cohort': ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    '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)

# Alerts Section
st.subheader("Alerts")
alerts = [
    {"level": "error", "message": "Illustrative alert: no live threshold evaluation connected"},
    {"level": "warning", "message": "Support ticket volume 20% above average"},
]
for alert in alerts:
    if alert["level"] == "error":
        st.error(f"🔴 {alert['message']}")
    elif alert["level"] == "warning":
        st.warning(f"🟡 {alert['message']}")

ベストプラクティス

推奨事項
  • KPIは5~7個に絞る - 重要な指標に焦点を当てます
  • コンテキストを示す - 比較、傾向、目標を表示します
  • 一貫した色を使う - 赤=悪い、緑=良い
  • ドリルダウンを可能にする - サマリーから詳細へ移動できるようにします
  • 適切な頻度で更新する - 指標の頻度に合わせます
避けるべきこと
  • 見栄えだけの指標を表示しない - 行動につながるデータに焦点を当てます
  • 情報を詰め込みすぎない - 余白が理解を助けます
  • 3Dチャートを使わない - 認識を歪めます
  • 算出方法を隠さない - 計算方法を文書化します
  • モバイルを無視しない - レスポンシブデザインを確保します

リソース

制限事項

  • タスクが上記の説明範囲に明確に該当する場合にのみ、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント