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

このレッスンでわかること

「毎月の売上と問い合わせ数を、パッと見てわかる形にしたい」「経営会議のたびに Excel でグラフを作り直すのが面倒」——数字を扱う仕事をしていれば、一度は感じたことがあるはずです。

Claude Code は、CSV ファイルを読み込んで、グラフ付きの HTML ダッシュボードを生成できます。ブラウザで開くだけで見られる1枚のページに、売上の推移、問い合わせ数の棒グラフ、達成率のカードが並ぶ——そんなものが、専用ツールを契約しなくても作れます。

このレッスンで身につくのは次の3点です。

• ダッシュボードを作る前に「見たい指標」を紙で整理する習慣
• グラフの種類（折れ線・棒・円）の選び方と指示の仕方
• 月次更新の運用（データ差し替え→再生成）と Excel グラフとの使い分け

道具を作ること自体よりも、「何を見たいかを先に決める」ことがこのレッスンの核心です。

仕組み：CSV から HTML ダッシュボードができるまで

Claude Code に「このCSVからダッシュボードを作って」と頼むと、おおむね次の流れで処理されます。

1. CSV を読み込み、列の構成（日付・売上・問い合わせ数など）を把握する
2. 必要なら Python（pandas など）で集計する（月別合計、前月比など）
3. グラフ描画ライブラリ（Chart.js が代表的）を使った HTML ファイルを生成する

できあがるのは dashboard.html のような1個のファイルです。ダブルクリックすればブラウザで開け、社内の共有フォルダに置けばツール代ゼロで共有できます。サーバーもデータベースも不要です。

Chart.js は Web ページにグラフを描くための定番の無料ライブラリで、折れ線・棒・円など主要なグラフを一通り描けます。とはいえ、あなたが Chart.js を学ぶ必要はありません。「折れ線グラフで」「棒グラフで」と日本語で指定すれば、Claude Code が適切に使ってくれます。

作る前に紙で考える：見たい指標の整理

ダッシュボード作りで一番多い失敗は、「とりあえず全部の数字をグラフにして」と頼んでしまうことです。グラフが10個並んだページは、一見立派ですが、結局誰も見なくなります。

作る前に、紙でもメモアプリでもいいので、次の3つの問いに答えてください。

• 誰が見るのか：自分用か、上司への報告用か、チーム共有用か
• 何を判断したいのか：「先月より良くなったか」「目標に届きそうか」など
• そのために必要な数字は何か：判断に直結する3〜5個に絞る

たとえば「月次の営業会議で進捗を確認する」のが目的なら、必要なのは「月別売上の推移」「目標達成率」「問い合わせ数の推移」くらいで十分です。逆に、判断に使わない数字は思い切って外します。ダッシュボードは数字の置き場ではなく、判断を速くするための道具です。

この整理ができていれば、Claude Code への指示は驚くほど簡単になります。

グラフの種類の選び方

グラフ選びには定石があります。迷ったら次の対応表に従ってください。

見たいもの	適したグラフ	例
時間による変化	折れ線グラフ	月別売上の推移
項目どうしの比較	棒グラフ	商品別・担当者別の売上
全体に占める割合	円グラフ	流入チャネルの構成比
目標との対比	数値カード＋達成率	今月の売上と達成率○%

ひとつ実務的な助言をすると、円グラフは項目が5個を超えると読みにくくなるので、その場合は棒グラフに切り替えたほうが伝わります。また「とにかく推移が見たい」場面が大半なので、迷ったら折れ線グラフが無難です。

指示するときは「売上は折れ線で、商品別比較は棒で」のように、指標とグラフの対応を明示します。指定しなくても Claude Code が妥当に選んでくれることが多いですが、自分で選べると仕上がりのコントロールが効きます。

Bad例とGood例で見る、ダッシュボードの頼み方

Bad例：

sales.csv でいい感じのダッシュボードを作って

「いい感じ」の中身が空っぽです。何のグラフが何個できるかは運任せで、判断に必要な数字が入っている保証もありません。

Good例：

sales.csv から、月次報告用の HTML ダッシュボードを作ってください。

【データの説明】
- 列: 日付, 商品名, 売上金額, 問い合わせ数
- 期間: 2025年1月〜2026年5月の日次データ

【表示したいもの】
1. 月別売上の推移（折れ線グラフ）
2. 直近月の商品別売上（棒グラフ、多い順）
3. 月別問い合わせ数の推移（折れ線グラフ、1と同じ並び）
4. ページ上部に数値カード: 直近月の売上合計と、目標1,000万円に対する達成率

【ルール】
- グラフは Chart.js を使い、dashboard.html の1ファイルにまとめる
- 集計に使った月別合計の数値を、生成後にテキストでも報告する
- 元の sales.csv は変更しない

【成果物】
- dashboard.html（ブラウザで開いて確認できる状態）

注目してほしいのは【データの説明】と「集計値をテキストでも報告する」の2点です。

列の構成を先に伝えると、Claude Code がデータの中身を誤解するリスクが減ります。そして集計値の報告は、前章のデータ整理で学んだ「検証させる」習慣のダッシュボード版です。グラフは見た目がもっともらしいぶん、集計ミスに気づきにくいもの。報告された月別合計を、元データや Excel の合計と1か所でも突き合わせてから信頼してください。

月次更新の運用：データ差し替え→再生成

ダッシュボードは一度作って終わりではなく、毎月更新してこそ価値があります。運用はシンプルで、次の2ステップです。

1. 最新データを含む CSV を同じファイル名・同じ列構成で上書き（または追記）する
2. Claude Code に「sales.csv が更新されたので、前回と同じ仕様で dashboard.html を再生成して」と頼む

さらに安定させたいなら、初回生成のときにこう頼んでおく方法があります。

今後毎月更新するので、CSV を読み込んで dashboard.html を生成する処理を
Python スクリプト（make_dashboard.py）として保存してください。

スクリプトとして残しておけば、翌月は「make_dashboard.py を実行して」だけで済み、毎回ゼロから作るより速く、仕様のブレもなくなります。これは3章で学んだ「道具そのものを作らせる」発想の応用です。

運用上の注意がひとつ。列の名前や構成を変えないことです。「売上金額」の列名を「売上」に変えただけでスクリプトは動かなくなります。変えたい場合は、その旨を伝えてスクリプトも更新してもらいましょう。

Excel グラフとの使い分け

「Excel でもグラフは作れるのに、わざわざ HTML にする意味は？」という疑問はもっともです。使い分けの目安を挙げます。

Excel が向いている場面：

• その場で1回だけ見たい、使い捨てのグラフ
• グラフを作る本人が Excel に慣れていて、データも小さい
• 提出先が「Excel ファイルでの提出」を求めている

Claude Code ＋ HTML ダッシュボードが向いている場面：

• 毎月同じ形式で更新する定例レポート（再生成が一瞬で終わる）
• 複数のグラフと数値カードを1画面に整理して見せたい
• 元データが数万行あり、Excel の操作が重くなってきた
• グラフ作成の手順を属人化させたくない（スクリプトに手順が残る）

要するに、単発なら Excel、繰り返すなら Claude Code が基本の判断軸です。両方を併用し、「日常は HTML ダッシュボード、役員への提出時だけ Excel に転記」といった運用も現実的です。

やってみよう

演習1（指標の整理）：自分の仕事で毎月見ている（または見るべき）数字を書き出し、「誰が・何を判断するためか」を添えて3〜5個に絞ってください。ダッシュボードの設計図はこのメモがすべてです。

演習2（ダミーデータで一周する）：Claude Code に「日付・商品名・売上金額・問い合わせ数の列を持つ、18か月分のダミー売上CSVを作って」と頼み、続けて Good 例の形式でダッシュボードを生成させましょう。ブラウザで開いて、報告された集計値とグラフが一致しているか確かめてください。

演習3（更新の体験）：演習2のCSVに「1か月分のデータを追加して」と頼み、その後ダッシュボードを再生成させましょう。グラフに新しい月が増えていれば、月次運用の流れを体験できたことになります。

まとめ

• Claude Code は CSV から Chart.js などを使ったグラフ付き HTML ダッシュボードを生成できる
• 作る前に「誰が・何を判断するために・どの数字を見るか」を紙で整理し、指標は3〜5個に絞る
• グラフの定石: 推移は折れ線、比較は棒、構成比は円（5項目まで）、目標対比は数値カード
• 集計値をテキストでも報告させ、元データと突き合わせてから信頼する
• 月次運用は「同じ列構成でCSVを差し替え→再生成」。スクリプト化すればさらに安定する
• 使い分けの軸は「単発なら Excel、繰り返すなら Claude Code」

理解度チェック

Q1. KPI ダッシュボードを作るとき、最初にやるべきこととしてもっとも適切なものはどれでしょう？

1. CSV にあるすべての列をグラフ化するよう指示する
2. 誰が何を判断するためのものかを整理し、表示する指標を3〜5個に絞る
3. もっとも見栄えのするグラフライブラリを調査する
4. まず Excel で同じグラフを作って比較する

解答を見る

正解: 2

ダッシュボードは判断を速くするための道具です。目的と読み手から逆算して指標を絞ることが、作成前の最重要ステップです。全列のグラフ化（選択肢1）は「誰も見ないダッシュボード」になる典型的な失敗パターンです。

Q2. 「月別売上の推移」を見せるグラフとして、定石にもっとも合うものはどれでしょう？

1. 円グラフ
2. 折れ線グラフ
3. 散布図
4. 数値の一覧表のみ

解答を見る

正解: 2

時間による変化（推移）を見せるなら折れ線グラフが定石です。円グラフは全体に占める割合、棒グラフは項目どうしの比較に向いています。迷ったときも、推移であれば折れ線を選んでおくのが無難です。