Claude Codeで経営ダッシュボードを構築する方法｜複数データソースを統合してリアルタイム可視化する

Claude CodeのMCP（Model Context Protocol）連携を使えば、freee・HubSpot・Google Sheetsなど複数のSaaSからデータを引き出し、経営ダッシュボードを自然言語の指示だけで構築できます。BIツールの導入コストも学習コストもかかりません。「先月の売上と今月のパイプラインを1枚にまとめて」と指示するだけで、HTMLベースのダッシュボードがリアルタイムで生成されます。

この記事でわかること

Claude CodeのMCP連携で複数SaaSのデータを統合し、経営ダッシュボードを自然言語だけで構築する方法を解説します。BIツール不要で、リアルタイムなデータ可視化を実現する具体的な手順を紹介します。

• 複数のSaaSデータを1つのダッシュボードに集約する全体設計 — 会計・営業・目標管理のデータを統合する方法を解説します
• BIツールなしで経営ダッシュボードを作る手順 — 設計からデータ取得、画面生成までをステップバイステップで進めます
• 自動更新とSlack通知の連携方法 — 定期的にデータを更新し、結果をSlackに通知する仕組みを構築します
• データの鮮度・API制限・セキュリティの注意点 — 実際の運用で気をつけるべきポイントと対策を説明します

対象読者: 複数SaaSのデータを手動集計している経営者・経営企画担当者で、BIツールを導入せずにデータを一元可視化したい方

なぜClaude Codeで経営ダッシュボードを作るのか

BIツールとClaude Codeの根本的な違い

Tableau、Looker Studio、Power BIといったBIツールは強力ですが、「導入して使いこなすまで」のハードルが高いのが現実です。ダッシュボードの設計にはSQLやデータモデリングの知識が必要で、データソースの接続設定にも技術的な作業が発生します。

Claude Codeで経営ダッシュボードを構築するアプローチは、この構造を根本から変えます。

Claude Codeの最大の強みは「見たいデータが変わったらプロンプトを変えるだけ」という柔軟性です。BIツールではダッシュボードの再設計が必要な変更も、自然言語で即座に対応できます。

MCPがデータ統合の鍵になる理由

MCP（Model Context Protocol）は、Claude Codeが外部ツールやデータソースと直接やりとりするためのプロトコルです。従来のAPI連携では、各SaaSのAPIドキュメントを読み、認証処理を書き、レスポンスをパースするコードを自分で実装する必要がありました。

MCPを使えば、Claude Codeが「freeeから今月の売上データを取得して」という指示を理解し、適切なAPIを呼び出してデータを取得します。エンジニアがAPIクライアントを書く工程がまるごと不要になります。

データソース設計｜何をどこから取得するか

経営ダッシュボードを構築する前に、「どのデータを、どのSaaSから取得するか」を明確に設計します。データソースの選定を間違えると、ダッシュボードの信頼性が損なわれます。

データソースと取得項目の整理

この設計で重要なのは「Single Source of Truth（唯一の正）」を決めることです。売上データをfreeeとStripeの両方から取得すると、タイミングの差異で数値が一致しないことがあります。「確定売上はfreee、リアルタイム売上はStripe」のように役割を明確にしてください。

CLAUDE.mdでデータ定義を管理する

Claude Codeのプロジェクトルートにある CLAUDE.md に、ダッシュボードのデータ定義を記述します。これにより、毎回プロンプトで詳細を指示しなくても、Claude Codeが正しいデータソースから正しい項目を取得してくれます。

# 経営ダッシュボード データ定義

### データソース

- 財務データ: freee MCP経由（売上勘定科目IDを指定）
- パイプライン: HubSpot MCP経由（直販パイプラインのみ対象）
- KPI目標: Google Sheets「FY26 KPI管理」シート

### ダッシュボード構成

1. 月次売上推移（freee → 折れ線グラフ）
2. パイプライン状況（HubSpot → ファネルチャート）
3. KPI達成率（Google Sheets × freee → ゲージチャート）
4. キャッシュフロー推移（freee → 棒グラフ）

ダッシュボード構築手順｜5ステップで完成させる

ステップ1: MCPサーバーのセットアップ

まず、Claude Codeが各SaaSにアクセスできるようにMCPサーバーを設定します。Claude Codeの設定ファイル（.claude/settings.json や claude_desktop_config.json）にMCPサーバーの接続情報を記述します。

{
  "mcpServers": {
    "freee": {
      "command": "npx",
      "args": ["freee-mcp"],
      "env": {
        "FREEE_CLIENT_ID": "${FREEE_CLIENT_ID}",
        "FREEE_CLIENT_SECRET": "${FREEE_CLIENT_SECRET}"
      }
    },
    "hubspot": {
      "command": "npx",
      "args": ["@hubspot/mcp"],
      "env": {
        "HUBSPOT_ACCESS_TOKEN": "${HUBSPOT_ACCESS_TOKEN}"
      }
    }
  }
}

環境変数は .env ファイルに保管し、設定ファイルには値を直書きしないでください。APIトークンの漏洩防止は経営ダッシュボードにおいて最重要のセキュリティ対策です。

ステップ2: データ取得の動作確認

MCPサーバーが正しく接続されているか、個別にデータ取得を試します。

freee MCPから今月の月次損益データを取得して表示して

HubSpotの直販パイプラインから、現在のステージ別取引件数と金額を取得して

各データソースから正しくデータが返ってくることを確認してから、統合ダッシュボードの構築に進みます。ここで問題がある場合は、認証トークンの有効期限やAPIの権限設定を確認してください。

ステップ3: HTMLダッシュボードの生成

データ取得が確認できたら、Claude Codeにダッシュボード全体の生成を指示します。

以下のデータを統合して、HTMLの経営ダッシュボードを生成して：

■ 構成
1. 売上推移グラフ（過去6ヶ月・freeeデータ）
2. パイプラインファネル（HubSpotデータ）
3. KPI達成率ゲージ（目標: Google Sheets、実績: freee）
4. キャッシュフロー棒グラフ（freeeデータ）

■ デザイン要件
- レスポンシブ対応（PC・タブレット・スマートフォン）
- Chart.jsでグラフ描画
- ダークモード非対応（ライトテーマのみ）
- 最終更新日時を右上に表示

■ 出力
dashboard.html として保存

Claude Codeは、Chart.jsやApexChartsなどのJavaScriptライブラリを使って、単一のHTMLファイルにグラフ・テーブル・KPIカードを組み込んだダッシュボードを生成します。外部サーバーは不要で、ブラウザで開くだけで閲覧できます。

ステップ4: カスタマイズと調整

生成されたダッシュボードを確認し、追加の調整を自然言語で指示します。

パイプラインファネルの色をHubSpotのステージカラーに合わせて。
売上推移グラフに前年同月の点線を追加して。
KPI達成率が80%未満の項目は赤色で表示して。

BIツールではフィルター設定やグラフ種類の変更にGUI操作が必要ですが、Claude Codeでは自然言語で伝えるだけです。「この切り口で分析を追加して」「この指標は不要だから消して」と、対話的にダッシュボードを作り込んでいけます。

ステップ5: 自動更新スクリプトの作成

ダッシュボードが完成したら、データの自動更新を設定します。Claude Codeにスクリプト生成を依頼します。

dashboard.htmlのデータを毎朝9時に自動更新するスクリプトを作って。
更新完了後にSlackの#managementチャンネルにダッシュボードのスクリーンショットを送信して。

Claude Codeが生成する自動更新の仕組みは、以下の構成になります。

1. cronジョブ（またはlaunchd）が毎朝9時にスクリプトを実行
2. Claude Code SDK（ヘッドレスモード）がMCP経由で最新データを取得
3. HTMLファイルのデータ部分を更新
4. Puppeteerでスクリーンショットを撮影
5. Slack APIでチャンネルに画像を投稿

ダッシュボードの構成要素と設計パターン

売上推移グラフ

freee会計から取得した月次売上データを折れ線グラフで表示します。前年同月比を点線で重ねると、季節変動を考慮したトレンド分析が可能になります。

表示する指標の例:

• 月次売上高（確定値）
• 前年同月の売上高（比較用）
• 売上目標ライン（Google Sheetsから取得）

パイプライン状況

HubSpot CRMの取引パイプラインをファネルチャートまたは横棒グラフで表示します。ステージ別の件数と金額を同時に表示することで、パイプラインのどこにボトルネックがあるかが一目でわかります。

KPI達成率

Google Sheetsに設定した目標値と、freee・HubSpotから取得した実績値を突き合わせ、達成率をゲージチャートで表示します。

達成率の色分け基準を設定しておくと、異常値が一目で判別できます。

• 100%以上: 緑
• 80〜99%: 黄
• 80%未満: 赤

キャッシュフロー

freee会計のデータからキャッシュフロー推移を棒グラフで表示します。営業キャッシュフロー・投資キャッシュフロー・財務キャッシュフローを積み上げで表示すると、資金の流れが明確になります。

運用と自動更新の仕組み

cronジョブによる定期更新

macOSの場合は launchd、Linuxの場合は cron を使って定期実行を設定します。

# crontab の例: 毎朝9時にダッシュボードを更新
0 9 * * * cd /path/to/project && node update_dashboard.js >> /var/log/dashboard.log 2>&1

Slackへの定期レポート送信

ダッシュボード更新後に、Slack APIでサマリーを自動送信する仕組みを組み込むと、チームメンバーがダッシュボードを見に行かなくてもKPIの状況を把握できます。

送信する情報は、ダッシュボードのスクリーンショットと主要KPIの数値サマリーの2つです。スクリーンショットはPuppeteerで自動撮影し、Slack APIの files.upload エンドポイントで送信します。

更新履歴の管理

ダッシュボードのデータを更新するたびに、更新日時とデータのスナップショットをログとして保存しておくと、過去の状況をさかのぼって確認できます。

# ダッシュボード更新ログ
### 2026-04-11 09:00

- 売上: 取得成功（freee MCP）
- パイプライン: 取得成功（HubSpot MCP）
- KPI目標: 取得成功（Google Sheets）
- HTML更新: 完了
- Slack送信: 完了

CLAUDE.mdを活用したダッシュボード管理

ダッシュボード専用のCLAUDE.md設計

プロジェクトのCLAUDE.mdに、ダッシュボードの仕様を記述しておくと、更新のたびに詳細な指示を出す必要がなくなります。

# 経営ダッシュボード仕様

### 更新タイミング

- 毎営業日 9:00（自動）
- 月末最終営業日は月次確定版を生成

### データ取得ルール

- freee: 当月は速報値、前月以前は確定値を使用
- HubSpot: 直販パイプラインのみ対象（パートナー経由を除外）
- Google Sheets: 「FY26 KPI管理」シートのB列〜M列（月別目標値）

### 異常値アラート

- 売上が前月比30%以上減少 → Slackに警告メッセージ
- パイプラインの商談化率が前月比50%以上低下 → 警告
- キャッシュ残高が月商の2ヶ月分を下回る → 警告

### 出力先

- HTML: dashboard/index.html
- スクリーンショット: dashboard/screenshots/YYYY-MM-DD.png
- ログ: dashboard/logs/update_log.md

CLAUDE.mdにダッシュボードの仕様を書いておくと、「ダッシュボードを更新して」の一言で、データ取得・HTML更新・Slack通知まで全自動で実行されます。仕様変更も自然言語で即座に反映できます。

カスタムコマンドの活用

Claude Codeのカスタムコマンド機能（.claude/commands/）を使えば、ダッシュボード関連の操作をショートカット化できます。

# .claude/commands/dashboard-update.md
経営ダッシュボードを最新データで更新して、Slackに送信してください。
CLAUDE.mdの「経営ダッシュボード仕様」に従って実行してください。

/dashboard-update と入力するだけで、一連の処理が自動実行されます。

実践例｜SaaS企業の経営ダッシュボード

Sansan株式会社の事例に学ぶKPI設計

Sansan株式会社は、SaaS企業のKPI管理で「MRR（月次経常収益）」「チャーンレート（解約率）」「LTV/CAC比率」を重要指標として公開しています。SaaS企業が経営ダッシュボードを構築する際は、これらのSaaS特有の指標を盛り込むことが重要です。

Claude Codeでは、以下のようにSaaS KPIを指示するだけでダッシュボードに追加できます。

ダッシュボードにSaaS KPIセクションを追加して：
- MRR推移（Stripeのサブスクリプションデータから算出）
- チャーンレート（月初顧客数と月末顧客数から算出）
- LTV/CAC比率（LTVはMRR÷チャーンレート、CACは広告費÷新規顧客数）

SmartHR株式会社の事例に学ぶデータ活用

SmartHR株式会社は、プロダクト利用データと営業データを統合した意思決定を行っていることで知られています。同社は人事労務SaaSという特性上、顧客の利用頻度や機能別アクティブ率をモニタリングし、解約リスクの早期検知や追加機能の提案タイミングの最適化に活かしています。経営ダッシュボードでも、財務データだけでなくプロダクトの利用状況（アクティブユーザー数、機能利用率、オンボーディング完了率など）を統合することで、売上の先行指標となるプロダクトヘルスを把握でき、より深いインサイトが得られます。

CRM特化型パートナーとしての実務経験から言えば、営業データ（HubSpot）とプロダクト利用データを統合したダッシュボードは、SaaS企業の解約率改善において最もインパクトの大きい施策の1つです。Claude Codeであれば、これらの複数データソースを1つのセッションで統合分析できます。

注意点とベストプラクティス

データ鮮度の管理

freee会計のデータは、経理担当が月次の仕訳を確定するまで「速報値」です。ダッシュボード上で「速報値」と「確定値」を明確に区別する表示にしてください。

APIレート制限への対処

各SaaSのAPIにはレート制限があります。ダッシュボードの更新頻度が高すぎると、制限に達してデータ取得が失敗します。

• freee API: 3,600リクエスト/時間
• HubSpot API: 100リクエスト/10秒（Private Appの場合）
• Google Sheets API: 60リクエスト/分/ユーザー

対策として、取得したデータをローカルにキャッシュし、差分がある場合のみAPIを呼ぶ仕組みを導入します。Claude Codeにキャッシュ付きの更新スクリプトを生成してもらうのが効率的です。

セキュリティ対策

経営ダッシュボードには機密性の高いデータが含まれます。以下の対策は必須です。

• APIトークンは .env ファイルに保管し、リポジトリには含めない（.gitignore に追加）
• ダッシュボードのHTMLファイルを社外に公開しない
• アクセスログを記録し、不正アクセスを検知できるようにする
• データのスナップショットにもアクセス制限をかける

経営データを扱うダッシュボードでは、APIトークンの管理が最重要です。トークンをコードに直書きしたり、Slackで共有したりするのは絶対に避けてください。.envファイルへの集約と.gitignoreでの除外が基本です。

よくある質問

Q1: BIツール（TableauやLooker Studio）とClaude Codeダッシュボード、どちらを選ぶべきですか？

チームに専任のデータアナリストがいて、複雑なドリルダウン分析や大量データのリアルタイムフィルタリングが必要な場合はBIツールが適しています。一方、経営者や少人数チームが「今すぐデータを可視化したい」「柔軟に切り口を変えたい」場合はClaude Codeが効率的です。両者は排他的ではなく、Claude Codeで素早くプロトタイプを作り、要件が固まったらBIツールに移行するアプローチも有効です。

Q2: MCPに対応していないSaaSのデータも統合できますか？

はい。MCPに対応していないSaaSでも、REST APIが提供されていればClaude Codeからデータを取得できます。Claude CodeにAPIのエンドポイントと認証方式を指示すれば、データ取得スクリプトを自動生成してくれます。CSVエクスポートしかできないSaaSの場合は、CSVファイルを定期的にダウンロードしてClaude Codeに読み込ませる方法もあります。

Q3: ダッシュボードをチームメンバーに共有するにはどうすればいいですか？

HTMLファイルをそのまま共有する方法が最もシンプルです。社内のファイルサーバーやGoogle Driveに置けば、ブラウザで閲覧できます。より本格的に共有したい場合は、GitHub PagesやVercelにデプロイして社内限定でアクセスできるようにする方法もあります。Slack連携で毎朝スクリーンショットを送信する方法は、チームメンバーが能動的にアクセスしなくてもKPIを把握できるため、特に効果的です。

Q4: データの正確性はどのように担保すればいいですか？

3つの対策を推奨します。第一に、freeeの確定仕訳と速報値を区別し、ダッシュボード上で明示すること。第二に、複数データソース間のクロスチェック（freeeの売上とStripeの売上を突き合わせるなど）を月次で実施すること。第三に、ダッシュボードの更新ログを保存し、データ取得エラーが発生した場合はSlackに警告を送信する仕組みを入れることです。

Q5: 複雑なグラフやインタラクティブなフィルター機能も実装できますか？

Claude Codeが生成するHTMLダッシュボードでは、Chart.js・ApexCharts・Plotly.jsなどのJavaScriptライブラリを使って、ドロップダウンフィルターや期間選択、ホバーでの詳細表示などのインタラクティブ機能を実装できます。「月別でフィルターできるドロップダウンを追加して」と指示するだけで、対応するJavaScriptコードが生成されます。ただし、大量データのリアルタイムフィルタリングはフロントエンドだけでは限界があるため、その場合はバックエンドAPIの導入を検討してください。

まとめ

Claude Codeを使った経営ダッシュボードは、BIツールのライセンス料や専任エンジニアなしで、freee・HubSpot・Google Sheetsなど複数データソースを統合したリアルタイム可視化を実現する実践的なアプローチです。MCP連携によってデータ取得を自動化し、HTMLとして生成されたダッシュボードはブラウザで即座に確認できるため、「ダッシュボードを作る」から「経営判断に使う」までの距離が一気に縮まります。

重要なのは、最初から完璧なダッシュボードを目指さないことです。まずは売上・パイプライン・KPI達成率の3指標だけでPoCを作り、運用しながら必要な要素を追加していく——このスモールスタートの進め方が、少数精鋭の経営チームにとって最も確実な導入経路です。データ鮮度の管理やAPIレート制限への対処といった運用上の注意点を押さえつつ、cronやSlack連携で「見に行かなくても届く」仕組みに育てていくことで、経営判断の速度と精度が継続的に改善していきます。

関連記事

経営ダッシュボード構築と組み合わせて読むと理解が深まる記事をまとめました。

• Claude Code × freee MCPで会計データを自動取得する：ダッシュボードの売上・利益データ取得の基盤となるfreee MCP連携の実装
• Claude Codeで中小企業の経営管理を効率化する：少人数経営における経営管理の仕組み化
• Claude Codeで役員会資料を自動生成する：ダッシュボード数値を起点にした月次役員会資料の自動化