C
Claude Code Hackathon

Lab: 売上ダッシュボードを作る

このハンズオンでは、売上データを 見える化するWebダッシュボード を Claude Code に作ってもらいます。 プログラミングの知識は一切不要です。日本語で指示を出すだけで、プロが作ったような画面が完成します。

所要時間： 約15〜20分

このハンズオンで体験すること

  1. サンプルの売上データ（CSV）を Claude Code に作ってもらう
  2. そのデータから グラフ付きのWebダッシュボード を自動生成する
  3. ブラウザで開いて動くことを確認する
  4. 日本語の指示で デザインや機能を改善 していく

CSV（シーエスブイ） とは、Excelで開けるデータファイルの形式です。カンマで区切られたテキストファイルで、売上データや名簿などでよく使われます。

Phase 1：準備

まず、作業用フォルダで Claude Code を起動します。 ウォームアップで作った hackathon フォルダをそのまま使います。

ターミナルに以下を1行ずつ入力してください。

cd ~\Desktop\hackathon
claude

> マークが表示されたら準備完了です。

サンプル売上データを作ってもらう

Claude Code にサンプルデータを生成してもらいます。以下をそのまま入力してください。

売上データのサンプルCSVファイルを作ってください。
以下の条件でお願いします：
- ファイル名: sales_data.csv
- 200行のデータ
- 列: 日付、商品名、カテゴリ、地域、売上金額、数量
- 期間: 2024年1月〜12月の12ヶ月分
- カテゴリ: 食品、飲料、日用品、家電の4種類
- 地域: 東京、大阪、名古屋、福岡、札幌の5地域
- 売上金額はカテゴリによって現実的な範囲で変えてください

Claude Code が許可を求めてきたら y を押して Enter してください。 数秒で sales_data.csv ファイルが hackathon フォルダの中に作られます。

確認方法： hackathon フォルダを開いて sales_data.csv ができていればOKです。ダブルクリックすると Excel で中身を見ることもできます。

Phase 2：ダッシュボードを生成する

いよいよ本番です。以下の指示を Claude Code に入力してください。

このフォルダにある sales_data.csv を読み込んで、
Chart.js を使ったWebダッシュボードをHTMLファイルで作ってください。

以下のグラフを含めてください：
1. 月別の売上推移（折れ線グラフ）
2. カテゴリ別の売上構成比（円グラフ）
3. 地域別の売上比較（横棒グラフ）
4. 売上トップ10の商品（棒グラフ）

見た目はモダンで綺麗なデザインにしてください。
1つのHTMLファイルに全部まとめてください。

Chart.js（チャートジェイエス） とは、Webページでグラフを描くための無料ツールです。名前だけ知っていれば大丈夫です。Claude Code が全部やってくれます。

Claude Code が考え始めます。画面にコードがたくさん表示されますが、 中身を理解する必要はありません 。 許可を求められたら y を押して進めてください。

30秒〜1分ほどで dashboard.html というファイルが作成されます。

Phase 3：ブラウザで確認する

作成されたダッシュボードを見てみましょう。

開き方

  1. デスクトップの hackathon フォルダを開く
  2. dashboard.html ファイルを見つける
  3. ダブルクリック する

これだけです。ブラウザ（Edge や Chrome）が自動的に開いて、 グラフ付きのダッシュボード が表示されます。

画面に表示されるもの

  • 月ごとの売上の上がり下がりが 折れ線グラフ でわかる
  • どのカテゴリが全体の何%を占めるかが 円グラフ でわかる
  • 地域ごとの売上の差が 棒グラフ でわかる
  • 売れ筋トップ10の商品が一目でわかる

インターネット接続が必要です。 Chart.js をインターネットから読み込むため、オフラインでは表示できません。社内ネットワークに繋がっていれば問題ありません。

Phase 4：改善の指示を出してみよう

ここからが Claude Code の真骨頂です。 ダッシュボードを見て「こうしたいな」と思ったことを、 そのまま日本語で伝える だけで改善できます。

改善例 1：ダークテーマに変える

ダッシュボードをダークテーマに変更してください。
背景を暗い色にして、文字を白系にしてください。
かっこいい感じにお願いします。

許可して完了したら、ブラウザで dashboard.html を 再読み込み（F5キー）してください。 雰囲気がガラッと変わります。

改善例 2：フィルター機能を追加する

地域を選択するドロップダウンを追加してください。
地域を選ぶと、その地域のデータだけでグラフが更新されるようにしてください。
「全地域」という選択肢も入れてください。

ドロップダウン とは、クリックすると選択肢が下に開く、あの選択欄のことです。

改善例 3：集計テーブルを追加する

グラフの下に、月別×カテゴリ別の売上集計テーブルを追加してください。
前月比を計算して、上がっていたら緑、下がっていたら赤で表示してください。
合計行と合計列も入れてください。

改善例 4：印刷用のレイアウト

このダッシュボードを印刷したときに見やすいように、
印刷用のCSSも追加してください。A4横向きに収まるようにしてください。

CSS（シーエスエス） とは、Webページの見た目を整える仕組みです。ここでも名前だけわかれば大丈夫です。

自由に試してみよう

他にもこんな指示ができます。気になるものを試してみてください。

  • 「グラフの色をコーポレートカラー（青系）に統一してください」
  • 「ダッシュボードの上部にタイトルと最終更新日時を入れてください」
  • 「グラフにマウスを乗せたときに詳細な数値を表示してください」
  • 「データをCSVからエクスポートするボタンを追加してください」

Phase 5：驚きのポイントまとめ

ここまでの体験を振り返ってみましょう。

あなたがやったこと

  • 日本語で指示を出した（5〜6回）
  • y キーを押して許可した（数回）
  • ファイルをダブルクリックした（1回）

Claude Code がやったこと

  • 200行のリアルな売上サンプルデータを生成した
  • CSVファイルを読み取って内容を理解した
  • グラフ描画ライブラリを使って4種類のグラフを作った
  • レスポンシブ（画面サイズに自動対応する）デザインを適用した
  • フィルター機能や集計テーブルなどの高度な機能を追加した
  • 印刷レイアウトまで調整した

これがもし手作業だったら？

作業内容手作業の場合Claude Code の場合
サンプルデータ作成30分〜1時間約10秒
ダッシュボード開発1〜2日（経験者でも）約1分
デザイン変更数時間約30秒
機能追加（1つ）半日〜1日約30秒
合計3〜5日約15分

しかも、あなたは コードを1行も書いていません 。

ここが Claude Code ならでは

ブラウザ版の Claude（claude.ai）ではこの体験はできません。 その違いを整理します。

ブラウザ版 ClaudeClaude Code
コードを書く画面に表示するだけ実際にファイルとして保存する
コードを実行するできないその場で実行・動作確認できる
複数ファイルの操作1つずつコピペが必要まとめて作成・編集できる
データを読み込む手動で貼り付けファイルを直接読み取れる
段階的な改善毎回全体をコピペし直す既存ファイルをそのまま更新

Claude Code は あなたのパソコンの中で実際に動いている ため、ファイルの作成・読み取り・書き換えが自由自在です。 これが「チャット」ではなく「コーディングパートナー」と呼ばれる理由です。

応用アイデア

今回は売上データでしたが、同じ方法で あなたの業務データ もダッシュボード化できます。

  • 経費精算データ → 部署別・月別の経費推移ダッシュボード
  • 顧客リスト → 地域別・業種別の顧客分布マップ
  • アンケート結果 → 回答傾向の集計・グラフ化
  • 勤怠データ → 残業時間の推移や部署別比較

ヒント： Excel のデータを CSV 形式で保存して hackathon フォルダに置けば、Claude Code に読み込ませることができます。Excel の「名前を付けて保存」で「CSV（コンマ区切り）」を選ぶだけです。

うまくいかないときは

こんなときやること
CSVファイルが作られない「sales_data.csv を作ってください」ともう一度指示してみてください
HTMLファイルをダブルクリックしても白い画面インターネットに接続されているか確認してください。Chart.js の読み込みに必要です
グラフが表示されないブラウザで F5 キーを押して再読み込みしてみてください
「Permission denied」と表示されるClaude Code が許可を求めている画面で y を押してください
ダークテーマにしたら文字が見えない「文字の色をもっと明るくしてください」と追加で指示してください
グラフのデータがおかしい「CSVファイルの中身を確認して、グラフのデータが正しいか検証してください」と指示してください
変更が反映されないブラウザのキャッシュが原因です。Ctrl + Shift + R で強制再読み込みしてください
Claude Code がフリーズしたCtrl + C で中断してから claude で再起動してください

ここまでのまとめ

このハンズオンで確認できたことを整理します。

  • Claude Code は データを読み取り、分析し、グラフにするところまで一気に やってくれる
  • 専門用語やコードを知らなくても 日本語の指示だけ で本格的なダッシュボードが作れる
  • 一度作ったものを 会話で段階的に改善 できる（作り直しは不要）
  • 完成したHTMLファイルは そのまま社内で共有 できる（特別なソフトは不要）

次のハンズオンに進む場合は、サイドバーから選んでください。

困ったときは → 参加者向け Q&A