「毎月Excelでグラフを作り直しているが、データが多くて管理しきれない」「営業会議でKPIを共有するたびにスライドを更新するのが面倒」「経営指標をリアルタイムで確認できる画面が欲しいが、システム会社に頼むと高額になる」——こうした悩みを持つ経営者・マネージャーは多くいます。Claude Codeを使うと、こうした要望を満たすWebダッシュボードをプログラミング不要で作れます。40人規模の製造業の会社では、Claude Codeで社内ダッシュボードを作り、毎月の経営会議資料作成にかかっていた6時間を完全になくした実績があります。この記事では、Claude Codeでデータ可視化ダッシュボードを作る方法を解説します。
目次
- ダッシュボードで何が実現できるか
- 作成できるダッシュボードの種類と例
- 基本的な作成手順
- 売上ダッシュボード：月次推移と目標達成率を可視化
- KPIダッシュボード：部門別指標を一覧表示
- 顧客データダッシュボード：セグメント分析を自動化
- 更新・運用を自動化する方法
1. ダッシュボードで何が実現できるか
Claude Codeで作るダッシュボードは、ブラウザで開けるWebページです。チームメンバー全員が同じURLにアクセスすれば、最新の指標を確認できます。
従来のExcelグラフとの違いを整理します。
| 項目 | Excelグラフ | Claude Codeで作るダッシュボード |
|---|---|---|
| データ更新 | 手動でコピー貼り付け | スプレッドシート更新で自動反映 |
| 共有方法 | ファイル送付・PowerPoint化 | URLを送るだけ |
| 閲覧デバイス | PCのみ | PC・スマホ・タブレット |
| リアルタイム性 | 作成時点のデータ | 最新データを自動取得 |
| 作成コスト | 毎月手作業 | 初回作成のみ（以降は自動） |
ダッシュボードは一度作れば半永久的に使え、データが変わっても自動で反映されます。これが最大のメリットです。
2. 作成できるダッシュボードの種類と例
Claude Codeで作れるダッシュボードの代表的な種類を紹介します。
売上管理ダッシュボード 月別・週別の売上推移グラフ、目標達成率のゲージ、担当者別売上ランキング、前年同期比較などを1画面に集約します。Googleスプレッドシートの売上データを参照して自動更新されます。
マーケティングKPIダッシュボード 広告費・クリック数・コンバージョン数・CPAなどの推移グラフ、チャネル別のROI比較、日次・週次・月次の切り替え表示が実現します。Google Analytics・Google広告・Meta広告のデータを統合表示することも可能です。
在庫・発注ダッシュボード 商品別の在庫残数、発注点以下の商品リスト、入出庫履歴グラフ、廃棄ロスの推移などを可視化します。スプレッドシートの在庫データと連動します。
採用・人事ダッシュボード 応募者数・選考通過率・内定率の推移、採用チャネル別効果比較、在籍者数の推移などを表示します。採用管理スプレッドシートと連動できます。
プロジェクト進捗ダッシュボード タスクの完了率、スケジュール遵守率、メンバー別稼働状況などをガントチャートやバーグラフで表示します。Notionのデータベースと連携することも可能です。
3. 基本的な作成手順
ダッシュボード作成の基本的な流れは次のとおりです。
ステップ1: 表示したい指標を整理する（30分）
ダッシュボードに表示したいグラフや数値をリストアップします。「月別売上推移（棒グラフ）」「目標達成率（円グラフ）」「前月比較（テキスト表示）」のように、グラフの種類も一緒に書き出すと後でClaude Codeへの依頼がスムーズです。
ステップ2: データソースを確認する（15分）
ダッシュボードに表示するデータがどこにあるかを確認します。Googleスプレッドシート・CSV・Notionデータベース・手入力など、データの在り処を把握します。
ステップ3: Claude Codeでコードを生成する（60〜90分）
整理した要件をClaude Codeに伝えてHTMLとJavaScriptのコードを生成してもらいます。
ステップ4: Vercelで公開する（30分）
生成されたコードをGitHubにアップしてVercelでデプロイすると、URLが発行されてブラウザからアクセスできるようになります。
4. 売上ダッシュボード：月次推移と目標達成率を可視化
月次売上の推移と目標達成率を表示するダッシュボードの作成手順を説明します。
Claude Codeへのプロンプト例：
売上ダッシュボードのHTMLページを作ってください。
データソース：Googleスプレッドシート（ID: XXXXXXXX）の「月次売上」シート
データ構造：A列（月）、B列（実績売上）、C列（目標売上）、D列（前年売上）
表示する要素：
1. 年間売上の累計（大きい数字で画面上部に表示）
2. 月別売上推移グラフ（実績・目標・前年の3本の折れ線）
3. 目標達成率のゲージグラフ（現時点の進捗）
4. 前月比・前年同月比（プラスは緑、マイナスは赤で表示）
デザイン：シンプルで見やすい。背景白・グラフは青系。モバイル対応。
グラフライブラリ：Chart.jsを使用
データはシートから毎時自動更新する
このプロンプトでClaude Codeが生成するのは、HTMLファイル1つです。このファイルをVercelにデプロイすれば、URLで社内共有できる売上ダッシュボードが完成します。
実際にこのダッシュボードを導入した製造業の会社では、月次経営会議のために担当者がExcelとPowerPointを更新する作業（月6時間）が完全になくなりました。会議当日は全員がブラウザでダッシュボードにアクセスするだけで最新の数字を共有できるようになっています。
5. KPIダッシュボード：部門別指標を一覧表示
複数部門のKPIを1画面で確認できるダッシュボードです。
Claude Codeへのプロンプト例：
部門別KPIダッシュボードを作ってください。
部門と指標：
- 営業部：月間受注件数・受注金額・商談進捗件数（達成率表示）
- マーケティング：サイト流入数・CV数・CPA（月次推移グラフ）
- CS：問い合わせ件数・解決率・平均対応時間（目標との比較）
データソース：各部門のスプレッドシートから読み込む
- 営業部：スプレッドシートID A
- マーケ：スプレッドシートID B
- CS：スプレッドシートID C
ページ上部に今月の全社サマリー（主要3指標の達成状況）を表示する
各部門のセクションはタブで切り替えられるようにする
部門別のKPIを1つのURLで確認できるようになると、毎週の全社会議での「各部門資料を集めて合体させる」作業がなくなります。
6. 顧客データダッシュボード：セグメント分析を自動化
顧客データを分析・可視化するダッシュボードで、どのセグメントが成長しているか、どのセグメントがリスクかを自動的に判断できる状態を作ります。
Claude Codeへのプロンプト例：
顧客分析ダッシュボードを作ってください。
データソース：スプレッドシート（ID: ZZZZZZZZ）の「顧客一覧」シート
A列：顧客ID、B列：業種、C列：従業員数規模、D列：契約金額、E列：契約日、F列：最終購入日
表示する要素：
1. 業種別の契約件数と金額（積み上げ棒グラフ）
2. 従業員規模別の分布（円グラフ）
3. 直近3ヶ月で購入がない顧客のリスト（解約リスク顧客として赤枠で表示）
4. 新規契約数の月別推移
5. 顧客単価の分布（ヒストグラム）
このダッシュボードを使うと、解約リスクのある顧客を毎日自動で特定できます。従来は月次で手作業分析していた内容が、毎日リアルタイムで確認できる状態になります。
7. 更新・運用を自動化する方法
ダッシュボードのデータ更新を自動化するためのポイントを整理します。
Googleスプレッドシートと連動させる場合: ダッシュボードのコードにGoogle Sheets APIを組み込んでおけば、ブラウザがページを読み込むたびに最新データを取得します。担当者がスプレッドシートを更新するだけで、ダッシュボードの表示も自動で最新になります。
定期的なデータ収集を自動化する場合: 広告データなど、複数のサービスから自動収集する場合は、Claude Codeにデータ収集スクリプトの作成も依頼します。毎日午前7時にデータを収集してスプレッドシートに書き込み、それをダッシュボードが表示するという仕組みを作れます。
パスワード保護を設定する場合: 社内向けのダッシュボードであっても、URLを知っていれば誰でも見られる状態は避けたいこともあります。Vercelのパスワード保護機能またはBasic認証の設定方法をClaude Codeに質問すれば、アクセス制限の実装方法を説明してくれます。
モバイル対応: 「スマートフォンでも見やすいレイアウトにしてください」とClaude Codeに依頼すれば、モバイル対応のレスポンシブデザインで生成されます。出張中や移動中でもスマートフォンからKPIを確認できます。
Claude Code道場では、データ可視化ダッシュボードの作成を実践演習で学べます。「経営数字をリアルタイムで把握したい」「毎月のレポート作業をなくしたい」という方が、実際に手を動かして自分のビジネスに合ったダッシュボードを作れるようになるカリキュラムを提供しています。ぜひClaude Code道場で学んでみてください。
