使い方ガイドへスキップ
kpi-dashboard-design作者 Seth Hobson

KPI Dashboard Design スキル。

Claude Code と Codex のための図表作成スキル:KPI ダッシュボード:指標の選定、グラフの選択、レイアウト、リアルタイムパターン。

  • Diagrams & Data Visualization
  • Dashboard
wshobson/agents · plugins/business-analytics/skills/kpi-dashboard-design/SKILL.mdSKILL.md
--- name: kpi-dashboard-design 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 … --- ## When to Use This Skill ## Core Concepts ## Detailed worked examples and patterns ## Best Practices ## Related Skills
上流ファイルから 2026-09-14 に読み込まれた前付けとセクション見出し · 全 5,423 文字

01 できること

Claude CodeとCodexにおける kpi-dashboard-design スキルの役割

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、事業判断を導くKPIダッシュボードを設計するための包括的なパターンを提供します。3つのダッシュボードレベルを対象とし、経営層向けの戦略レベル(月次・四半期更新)、マネージャー向けの戦術レベル(週次・月次更新)、チーム向けの運用レベル(リアルタイム・日次更新)を扱います。

このスキルは、一連のライフサイクル全体をカバーします。SMARTフレームワークを用いた意味のあるKPIの選定、適切な可視化手法の選択、経営層向けサマリーから部門ビュー、詳細なドリルダウンまでのダッシュボード階層の確立、さらに部門間でのメトリクスの不整合、アラート疲れ、リアルタイムクエリによるデータベースのパフォーマンス問題といった典型的な課題への対処法も含まれます。コホート分析、MRRの正規化、事前集計されたメトリクス、動的なアラートしきい値のための具体的なSQLおよびPythonのパターンも収録しています。

生成されるもの

  • ツールチップやデータディクショナリに正規化の計算式を明記したSQLクエリ
  • OLAPとOLTPのワークロードを分離する、事前集計されたメトリクススナップショットのためのPythonコード
  • 移動平均と標準偏差を用いた動的アラートしきい値のロジック
プロンプト例を見る ↗

仕組み

  1. 01
    KPIのレベルと対象者を定義する

    ダッシュボードのスコープを3つのレベルのいずれかに合わせます。経営層向けで月次/四半期更新を行う戦略レベル、マネージャー向けで週次/月次更新を行う戦術レベル、チーム向けでリアルタイム/日次更新を行う運用レベルです。

  2. 02
    各指標にSMART基準を適用する

    すべてのKPIが、明確な定義を持つSpecific(具体的)、定量化可能なMeasurable(測定可能)、現実的な目標を持つAchievable(達成可能)、目標に整合したRelevant(関連性)、期間を定めたTime-bound(期限付き)であることを確認してください。

  3. 03
    3階層のHierarchy(階層構造)を構築する

    トレンド指標と主要なアラートを表示する4〜6件の主要KPIを示すエグゼクティブサマリーページ、営業/マーケティング/運用/財務の各部門ビュー、そして根本原因分析のための詳細ドリルダウンでダッシュボードを構成してください。

  4. 04
    スコープを絞り、コンテキストを示す

    1つのビューにつき最大5〜7件のKPIに絞り、比較・トレンド・目標値を常に併記することで、ユーザーが数値を意味のある形で解釈できるようにしてください。

  5. 05
    サマリーから詳細へのドリルダウンを可能にする

    ユーザーが経営層向けの高レベルな指標から、その数値の背後にある詳細データや根本原因分析まで、クリックして掘り下げられるようナビゲーションパスを設計してください。

02 適合性を確認

kpi-dashboard-design スキルを使用するタイミング

この種のダイアグラムやチャートのジョブには、Claude Code または Codex で kpi-dashboard-design スキルを使用します。以下の適合性と制限はスキル自身のファイルから取得しています。

適している場合

  • MRR、チャーン、LTV/CAC比率を追跡するエグゼクティブ向けSaaSメトリクスダッシュボードの構築
  • サービスの稼働状況とリクエストスループットをライブ監視するオペレーションセンターの設計
  • プロダクトチーム向けのコホートリテンション分析ビューの作成
  • 計算方法の不整合により指標同士が矛盾するダッシュボードのデバッグ
  • 組織全体で指標定義の整合性を確保するための指標ガバナンスの確立

    提供すべきもの

    • 既存の指標定義不整合の診断や数式の整合を行うため、現在の指標算出方法(年間プランのMRR上での扱いやコホートのグルーピングロジックなど)を共有してください。

    03 スキルの内部

    kpi-dashboard-design スキルがClaude CodeとCodexに与えるルール

    SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

    1. 一貫した色の意味づけを使用する

      ネガティブなパフォーマンスや問題を示す場合は赤、ポジティブなパフォーマンスや健全な状態を示す場合は緑を、すべてのダッシュボードビューで一貫して適用してください。

    2. バニティメトリクスを決して表示しない

      見栄えは良いが実行可能な意思決定に結びつかない指標は除外してください。チームが成果改善のために行動できるデータのみに焦点を当てます。

    3. 3Dチャートを決して使用しない

      三次元の可視化は知覚を歪め、ユーザーが値を正確に比較しにくくなるため避けてください。

    4. 計算方法を文書化する

      指標の計算方法を隠してはいけません。解釈の食い違いを防ぐため、ダッシュボードカードやツールチップに直接、数式とロジックを常に文書化してください。

    5. 更新頻度を指標の種類に合わせる

      各KPIに適したダッシュボード更新頻度を設定してください。運用指標はリアルタイムまたは日次、戦術指標は週次または月次、戦略指標は月次または四半期ごとが目安です。

    6. モバイル対応のレスポンシブデザインを確保する

      デスクトップ画面だけでなく、モバイルデバイスでも効果的に機能するようダッシュボードを設計し、経営陣やチームメンバーがどこでも重要な指標にアクセスできるようにしてください。

    7. 理解を助けるために余白を保つ

      ダッシュボードのレイアウトに要素を詰め込みすぎないようにしてください。余白は理解を助け、ユーザーが最も重要な指標に集中できるようにします。

    04 実際に使う

    Claude Code または Codex に kpi-dashboard-design をインストール

    npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

    Claude Code、Codex または使用中のエージェントに kpi-dashboard-design を追加

    プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

    Terminal
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

    スキルに最初の図表とチャートのタスクを与える

    スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

    Starter prompt
    Design an executive SaaS metrics dashboard for [our company] that tracks monthly recurring revenue, customer churn rate, and LTV/CAC ratio. The dashboard needs to update weekly and show trends over the past 12 months with comparisons to our target goals. We've been getting conflicting MRR numbers between this dashboard and finance reports because annual subscriptions are normalized differently. Include the calculation methodology directly on each metric card and ensure the design works on mobile devices for our remote executive team.

    出典:SKILL.md をスキル自身の用語に沿って記述。

    最初の結果を確認

    SKILL.md 自体が正しい結果として示しているもの:

    • コホートクエリがDATE_TRUNC('month', created_at)を使用しているか確認してください。日単位までの日付切り捨てでは、コホートが小さすぎてトレンドを示せません
    • P95ページロード時間やタスク完了率といったユーザー体感品質の指標が、インフラの稼働率指標に伴って表示されているか確認してください
    • リアルタイムダッシュボードが、本番データベースに対して複雑なクエリを実行するのではなく、事前集計済みのサマリーテーブルから読み取っているかテストしてください
    • アラートのしきい値が静的な値ではなく、移動平均に基づく動的な値になっているか検証してください。静的な値はアラート疲れを引き起こします

    OpenDesignでは、kpi-dashboard-designをSKILL.mdのリンクからインポートしてください:Plugins → Add → Skill → Import from link、その後トップバーで選択します。

    05 オープンソースで追跡可能

    ソース、ライセンス、検証

    このページの情報の出所と、最終確認日時です。

    Repository
    github.com/wshobson/agents ブランチ main
    スキルファイル
    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md 検証時にコンテンツチェックサムを記録;コミット 4236bb9
    License
    MIT LICENSE より
    リポジトリスター数
    39,635 GitHub スナップショットは2026年9月14日に取得されたもので、wshobson/agents リポジトリ全体を対象としています。このリポジトリにはカタログ内に18個のスキルが含まれています。kpi-dashboard-design の評価や使用回数ではありません。
    OpenDesign により検証済み
    2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

    SKILL.md の中身

    1. このスキルを使用する場面6つのシナリオを挙げています:経営ダッシュボード、KPI選定、リアルタイム監視、部門別ビュー、レイアウト改善、指標のガバナンス
    2. コアコンセプト3つのレベルからなるKPIフレームワーク、SMART KPIの基準、3層のダッシュボード階層構造を定義しています
    3. 詳細な実例とパターン部門別の一般的なKPIやより深いパターンについては、references/details.mdを参照してください
    4. ベストプラクティス5つの推奨事項(KPIを絞る、コンテキストを示す、色を統一する、ドリルダウン、適切な更新頻度)と5つの非推奨事項(バニティメトリクス、過密表示、3Dチャート、隠された計算方法、モバイル対応の無視)
    5. トラブルシューティング5つの問題を解決します:MRRと財務部門の不一致、健全なインフラ指標とユーザーからの不満の食い違い、変化のないコホート、データベースへの過負荷、アラート疲れ
    6. 関連スキルダッシュボードの発見を経営陣向けのナラティブに変えるdata-storytellingスキルへのリンクです
    スキル自身による説明
    「効果的な KPI ダッシュボードを、指標の選定、ビジュアライゼーションのベストプラクティス、リアルタイム監視パターンを用いて設計します。このスキルは、MRR、チャーン、LTV/CAC 比率を追跡するエグゼクティブ向け SaaS 指標ダッシュボードの構築、ライブサービスヘルスとリクエストスループットを表示するオペレーションセンターの設計、プロダクトチーム向けコホートリテンション分析ビューの作成、または一貫性のない計算方法により指標が矛盾しているダッシュボードのデバッグなどに使用します。」

    SKILL.md の Front-matter 説明です。ファイル全体は約5,423文字です。GitHub でファイル全体を読む。

    06 インストールする前に

    kpi-dashboard-designスキルについての質問

    回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

    ダッシュボードは健全な指標を示しているのに、ユーザーから不満が出ている場合はどうすればよいですか?

    ダッシュボードはAPIの稼働率などのインフラ指標を追跡していても、ユーザー体感の品質を追跡していない可能性があります。インフラの稼働率やエラー率と並んで、P95ページロード時間、タスク完了率、サポートチケット件数といった顧客体感の指標を追加してください。システムの健全性が必ずしもユーザー体験を反映するわけではありません。

    KPI Dashboard Design

    kpi-dashboard-design を実際の図表・チャートタスクで実行します。

    OpenDesign をダウンロードし、SKILL.md リンクから kpi-dashboard-design をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認します。

    ターミナル
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    OpenDesign デスクトップ版

    ひとつのデザインシステムで、すべての制作物をブランドらしく

    完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

    • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
    • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
    • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
    無料ダウンロード

    macOS と Windows に対応