7-2 Claude Code で KPI ダッシュボードを作成

このレッスンで身につくこと

前のレッスン 7-1: 競合調査 で集めた情報を、「数字を眺めて意思決定するためのダッシュボード」に変換 する工程に進みます。

数字の羅列は、人間の脳には入ってきません。「先月の売上 312 万円、今月 287 万円」と言われても、それが良いのか悪いのか瞬時には分かりません。同じ数字でも「折れ線で前年同月と並べる」だけで、見た瞬間に判断できる ようになります。これがダッシュボードの本質です。

所要時間 — 約 60 分（実機ハンズオン込み） 難易度 — ★★★☆☆

なぜ「数字を眺める場所」を作るのか

ダッシュボード作成は、データ分析の中で 最も ROI が見えやすい 仕事です。1 回作れば毎日・毎週・毎月くりかえし使われる からです。

毎週月曜の朝に上司から「先週の売上どうだった？」と聞かれ、Excel を開いてグラフを作り直しているなら、それは 100% 自動化対象です。1 つ作って URL をブックマークしておけば、聞かれた瞬間にリンクを返すだけで済みます。

翌月の再利用率 が決定的な差です。

ダッシュボードに必要な要素 4 つ

良いダッシュボードは、ほぼ例外なく次の 4 つを持っています。逆に言えば、これがないものはダッシュボードと呼ぶ価値がない ということです。

要素 1 — KPI カード（瞬時に分かる主要指標）

画面上部に 3〜6 個の数字 を大きく並べます。基本構成は ラベル + 数字 + 比較値 の 3 段。

┌─────────────────┐
│ 今月の売上       │  ← ラベル(小)
│ ¥3,420,000      │  ← 数字(大)
│ ▲ 12.3% (前月比) │  ← 比較値(中)
└─────────────────┘

比較値（前月比 / 前年同月比 / 目標比）がないと、その数字が良いのか悪いのか判断できません。

要素 2 — トレンドグラフ（時間軸での変化）

KPI カードが「点」、トレンドグラフは「線」。12 ヶ月の折れ線 や 30 日の棒グラフ で「上がっているか下がっているか」を見せます。重要なのは、複数の系列を重ねる こと。

• 売上の折れ線 + 前年同月の点線
• 訪問者数の棒 + 目標ラインの横線
• タスク完了数 + バーンダウン理想線

比較対象が同じ画面に映っているか で、実用度が 10 倍違います。

要素 3 — 内訳（カテゴリ別の分解）

合計値だけ見ても原因は分かりません。

円グラフはカテゴリ 6 個を超えたら使わない。それ以上は横棒に切り替えます。

要素 4 — フィルター / 切り口

見る人が自分で切り替えられる 余地を持たせます。期間（Q1〜Q4）/ 地域・部署 / ドリルダウン / CSV エクスポートなど。

技術スタック選択

最初の 1 個目で技術選択を間違えると、後で全部やり直し になります。

選択肢 1 — HTML + Chart.js（推奨）

最も汎用的でコスト 0。Claude Code との相性も最高。

• 形態 — HTML 1 ファイル + Chart.js を CDN
• コスト — 完全無料
• 共有 — メール添付 / GitHub Pages / Cloudflare Pages
• 向く規模 — 数万行までのデータ、3〜10 種類のグラフ

> 売上.csv からダッシュボードを作って。
> Chart.js を CDN で読み込み、HTML ファイル 1 つで完結。
> モバイル対応 (レスポンシブ) 必須。

1 ファイル完結 が最大の強み。Slack に貼っても良し、メール添付も良し。

選択肢 2 — Streamlit（Python で動的に）

「ユーザーがスライダーを動かすと再計算される」ような インタラクティブな分析ツール に向きます。データ加工ロジックが重いとき（複雑な集計 / 機械学習モデルの結果表示）に楽。一方でサーバを立てる手間があります。

選択肢 3 — Looker Studio

データが Google Sheets / BigQuery / GA 中心 ならこれが最速。Claude Code との相性は薄いが、データ連携が標準装備。

使い分け一覧

実例 1 — 売上 KPI ダッシュ

経営でいちばん使われる構成です。

Step 1 — データ準備

実データが無いなら、Claude にダミー CSV を作らせます。

> 12 ヶ月分の売上サンプル CSV を作って。
> カラム: 月, 売上, 利益, 顧客数, 新規顧客数, 解約数
> 売上は 200 万〜400 万、ゆるい右肩上がりトレンドで。
> ファイル名 sales-2026.csv

Step 2 — ダッシュボード生成

> sales-2026.csv からダッシュボード HTML を作って。
> - 上部に KPI カード 4 つ
>   (今月売上 / 前月比 / 累計売上 / 顧客数)
> - 折れ線: 12 ヶ月の売上推移、前年同月を点線で重ねる
> - 棒グラフ: 月別利益率
> - 横棒: 直近 3 ヶ月の新規 / 解約数
> - Chart.js v4 を CDN、レスポンシブ (768px 以下で縦積み)
> - 配色は #0AA5D4 (ブランド) と #1E293B (アクセント)
> - dashboard-sales.html として保存

配色を指定する のがコツ。指定しないと「鮮やかな赤と青と緑」みたいな主張の強い配色になりがちです。ブランドカラー 1 色 + アクセント 1 色 + グレースケールで、見やすさが一段上がります。

Step 3 — フィルター追加

最初のバージョンが動いたら、機能を 1 つずつ足します。

> dashboard-sales.html に以下を追加して。
> - 期間フィルター (Q1 / Q2 / Q3 / Q4 / 全期間)
> - グラフクリックで詳細モーダル
> - 右上に CSV エクスポートボタン

1 度に全部頼まない。1 機能ずつ追加してブラウザで確認する方が、デバッグが圧倒的に楽です。

Step 4 — モバイル確認

PC で見栄えが良くても、スマホで開くと崩れる ことはよくあります。Chrome DevTools のレスポンシブモード (375px 幅) で確認します。

> スマホ画面で KPI カードが横にはみ出る。
> 768px 以下では KPI カードを縦 1 列、フォントも一回り小さく。

経営層の半分はスマホで開きます。これを軽視すると誰も見なくなります。

実例 2 — Web アクセス解析ダッシュ

GA4 / PostHog からエクスポートしたデータを可視化します。

> ga4-export.csv からダッシュボードを作って。
> - KPI カード 6 つ
>   (今月 PV / 前月比 / UU / 平均滞在時間 / CV 数 / CVR)
> - 折れ線: 過去 30 日の日別 PV、平均値の横線を引く
> - 円グラフ: 流入元別シェア (Top 5、その他にまとめる)
> - 横棒ランキング: 人気ページ Top 10
> - 棒グラフ: デバイス別 (PC / SP / Tablet)
> - 配色は青系統で統一、dashboard-traffic.html

Web アクセス特有の落とし穴

生データを盲信しない。「あれ、この数字おかしい」と感じたら Claude に「違和感のある点を 3 つ挙げて」と聞いて、データ品質チェックまでやらせます。

実例 3 — タスク進捗ダッシュ

Asana / Notion / Jira などから CSV エクスポートして可視化します。

> tasks.csv からスクラム風のタスク進捗ダッシュを作って。
> - KPI カード 4 つ
>   (Total / Done / In Progress / Blocked)
> - バーンダウンチャート (理想線 + 実績線)
> - 担当者別の Done タスク数 (横棒)
> - 期限超過タスクを赤でハイライトしたテーブル
> - dashboard-tasks.html

バーンダウン は、スプリント期間で残タスクが 0 に減るのを可視化するグラフ。理想線（均等に減る直線）と実績線（毎日の残数）を重ねます。実績線が理想線より上にあれば遅れている のが見た瞬間に分かるのが威力。

毎週金曜のレビューで画面共有しながら 5 分で振り返る運用が定着すると、テキスト議事録より圧倒的に効率的です。

データ更新の仕組み — 手動 / cron / リアルタイム

「作って終わり」ではなく、更新し続けて初めて価値が出る ものです。

レベル 1 — 手動更新（最初はこれで十分）

CSV を差し替えて「再生成して」と頼むだけ。月 1 回のレポートならこれで十分、所要 2 分。

> sales-2026-06.csv に新月データを追加した。
> dashboard-sales.html のデータ部分だけ差し替えてグラフ更新。

レベル 2 — cron / GitHub Actions

データソースが API や DB なら、定期実行に乗せます。

# 毎日 8:00 にデータ取得 → ダッシュ再生成
0 8 * * * cd ~/work/dashboard && \
  python fetch-data.py > data/$(date +\%Y-\%m-\%d).csv && \
  claude -p "今日のデータでダッシュ再生成" > dashboard.html

毎朝出社したら最新版が用意されている 状態が作れます。

レベル 3 — リアルタイム更新

EC のリアルタイム売上、ライブイベント参加者数など。WebSocket / SSE / fetch ポーリングで実装。

月次レポートをリアルタイムにしても意味はありません。大半は レベル 2 で十分。

失敗パターン

失敗 1 — グラフ多すぎ

「あれもこれも」と詰め込むと、1 画面 15 個のグラフ みたいになります。これは ダッシュボードではなくグラフカタログ。

「何を見せたいか」を 1 文で書ける ダッシュが良いダッシュです。

失敗 2 — 色使い過剰

お任せだと、デフォルトで 虹色のグラフ が出てきがちです。

> グラフ配色を見直して。
> ブランド色 #0AA5D4 主軸、強調は #F59E0B、それ以外は
> グレーの濃淡 (#1E293B, #64748B, #CBD5E1) で統一。
> 赤緑は使わない (色覚多様性対応)。

失敗 3 — モバイル非対応

PC でしか動かない ダッシュは、半分の利用者を切り捨てています。経営層・営業はスマホで開く頻度が高いです。

> 768px 以下のとき:
> - KPI カードは 2 列 × 2 行
> - グラフは縦並び、高さ 240px
> - body 16px、見出し 20px

プロンプトテンプレート 3 つ

ここまでの内容を コピペで使えるテンプレ に圧縮しました。

テンプレ 1 — KPI ダッシュボード（汎用）

[CSV ファイル名] からダッシュボード HTML を作って。

データ構造:
- [列名と意味を 3〜5 行で]

構成:
- KPI カード [4-6] 個 ([カード1] / [カード2] / ...)
- メイングラフ (折れ線): [軸]
- サブグラフ (棒/円): [軸]
- フィルター: [期間 / カテゴリ]

技術:
- Chart.js v4 を CDN
- レスポンシブ (768px 以下で縦積み)
- 配色は [ブランド色] と [アクセント色] のみ

出力:
- ファイル名 [filename].html
- データは HTML 内に直書き
- モバイル動作確認済み

テンプレ 2 — 月次レポート（差分更新）

先月作った dashboard.html のデータを更新して。

新データ: [新 CSV ファイル名]
追加月: [YYYY-MM]

ルール:
- グラフ構造は変えない、データの追記のみ
- KPI カードの「今月」「前月比」を更新
- ファイル名 dashboard-[YYYY-MM].html として別名保存
- 前月版から変化が大きい指標があればコメント

テンプレ 3 — リアルタイム監視

[API エンドポイント] からポーリングするダッシュを作って。

間隔: [N] 秒ごと
表示:
- 現在値 (KPI カード)
- 過去 [N] 分の折れ線
- 閾値 [VALUE] 超過は赤でハイライト

実装:
- HTML + JS (fetch API)
- localStorage に [N] 件保存
- Page Visibility API で非表示時停止
- エラー時はトースト通知

やってみよう

机上で読むだけでなく、1 つ必ず作ってみる。所要 30 分。

# パターン A — 自社の売上データ
> sales.csv からダッシュボードを作って。
> KPI カード 4 + 12 ヶ月折れ線 + カテゴリ別棒グラフ。
> Chart.js v4 / レスポンシブ / 配色は青系統。

# パターン B — 個人の家計簿
> kakeibo.csv から月別の支出カテゴリ内訳を円グラフで。

# パターン C — チーム週次 KPI
> weekly-kpi.csv からバーンダウン + 担当者別 Done 数。

読んだだけだと 3 日後に忘れます。

まとめ

1. 必要な 4 要素 — KPI カード / トレンドグラフ / 内訳 / フィルター
2. 技術は HTML + Chart.js がデフォルト。Python なら Streamlit、Google 系なら Looker Studio
3. 実例 3 つ — 売上 / Web アクセス / タスク進捗
4. 更新は 手動 / cron / リアルタイム の 3 レベル、大半は cron で十分
5. 失敗 3 種 — グラフ多すぎ / 色使い過剰 / モバイル非対応
6. 配色は ブランド色 1 + アクセント 1 + グレースケール
7. 生活動線にダッシュを置く ところまで運用設計する

<Quiz question="ダッシュボードに必ず入れるべき 4 要素はどれ？" options={["KPI カード / トレンドグラフ / 内訳 / フィルター","タイトル / 著者名 / 日付 / バージョン","ヘッダー / フッター / サイドバー / メイン"]} answer={0} />

<Quiz question="ダッシュボードのモバイル対応で最も重要なのはどれ？" options={["CSS Grid / Flex で 768px 以下は縦積み、Chart.js の responsive を有効化","PC 版とは別に専用アプリを開発する","モバイル用にデータ量を 10 分の 1 に減らす"]} answer={0} />

次のレッスン 7-3: CSV 処理 では、ダッシュに渡す前段の CSV 変換・結合・クリーニング を自動化します。月次レポート作業を更にもう一段圧縮できます。