7-2 ダッシュボード作成

ダッシュボードの価値

数字の羅列では意思決定が難しいですが、グラフで可視化すればトレンドが一目でわかります。

Claude Code なら、CSVデータを渡すだけで見栄えの良いダッシュボードが作れます。

Before / After：データ可視化の変化

ダッシュボード作成の Before / After です。

Before（手作業）

• Excelでグラフを作成 → 30分
• PowerPoint に貼り付け → 15分
• 毎月繰り返し → 毎月45分
• インタラクティブ機能なし

After（Claude Code）

• 「ダッシュボードを作って」→ 10分
• 翌月は「データを更新して再生成」→ 2分
• フィルターやホバー表示など動的機能付き
• ブラウザで開くだけで共有可能

実践：売上ダッシュボード

月次の売上データからダッシュボードを作ります。

> 12ヶ月分の売上サンプルデータ（月, 売上, 利益, 顧客数）のCSVを作成。
> そのデータからダッシュボードHTMLを作って。
> - KPIカード: 今月売上/前月比/累計/顧客数
> - 売上推移の折れ線グラフ
> - 月別利益率の棒グラフ
> - Chart.js 使用、レスポンシブ対応

期待される出力

Claude Code は以下のようなダッシュボードを生成します。

• 画面上部に4つのKPIカード（今月売上、前月比、累計売上、顧客数）
• 折れ線グラフで12ヶ月の売上推移
• 棒グラフで月別利益率の比較
• 各グラフにホバーで数値が表示される
• スマホでは縦積みレイアウトに自動切り替え

HTMLファイル1つで完結するので、メール添付や共有フォルダに置くだけで共有できます。

Created: sales-data.csv (12 rows)
Created: dashboard.html

> dashboard.html をブラウザで開いて確認して。

フィルター機能の追加

ダッシュボードにフィルター機能を追加して、インタラクティブにします。

> ダッシュボードに以下の機能を追加して。
> - 期間フィルター（Q1/Q2/Q3/Q4/全期間）
> - グラフをクリックすると詳細がポップアップ表示
> - データのCSVエクスポートボタン

よくある失敗と対処法

ダッシュボード作成でよくあるトラブルです。

グラフが表示されない → Chart.js の CDN リンクが正しいか確認してください。「Chart.js の最新バージョンを CDN で読み込んで」と指示すると確実です。

データが多すぎてグラフが見づらい → 月次データにまとめるか、期間フィルターを追加しましょう。

KPIの計算が間違っている → 「前月比は（今月 - 前月）/ 前月 × 100 で計算して」と計算式を明示してください。

> グラフが表示されない。Chart.js の CDN を
> 最新バージョンに更新して、
> 読み込みエラーがないか確認して。

やってみよう：自分のデータでダッシュボードを作る

以下のどれかを試してみましょう。

1. 自社の売上データ（CSV）からダッシュボードを生成
2. 個人の家計簿データを可視化
3. チームの週次KPIをダッシュボード化

実際のデータで作ると、ダッシュボードの価値を実感できます。

> 家計簿データ kakeibo.csv を読み込んで、
> 月別の支出カテゴリ内訳を円グラフで表示する
> ダッシュボードを作って。Chart.js 使用。

まとめ

このレッスンのポイントを振り返ります。

• CSVデータからインタラクティブなダッシュボードを生成できる
• Chart.js でグラフ、KPIカードで重要指標を表示
• フィルターやエクスポート機能も追加可能
• HTMLファイル1つで完結し、簡単に共有できる

次のレッスンでは、CSV データの変換・結合・クリーニングを学びます。