実践：スプレッドシートから
ダッシュボードを作ろう

Claude Codeを使いながら、データ可視化を体験する

ハンズオンチュートリアル / 社内インターン向け

このチュートリアルで作るもの

Googleスプレッドシートの売上データを、Webダッシュボード（HTMLページ）で見られるようにします。

Google
スプレッドシート データの入力・管理
→
GAS
(Google Apps Script) データをAPIとして公開
→
HTML
ダッシュボード データをグラフ・表で表示
所要時間の目安：約30〜45分（初めての方）
必要なもの：Googleアカウント（会社のもの）、ブラウザ、Claude Code（インストール済み）

完成完成イメージ

最終的にこんなダッシュボードが出来上がります：

売上ダッシュボード - サンプル店舗
今月の売上合計
¥1,250,000
来店数
156名
客単価
¥8,013
目標達成率
83%
週別売上推移
第1週
第2週
第3週
第4週

もくじ

  1. スプレッドシートにデータを準備する5分
  2. GAS（Google Apps Script）でAPIを作る10分
  3. GASをウェブアプリとして公開する5分
  4. APIの動作を確認する2分
  5. Claude Codeでダッシュボードを作る10分
  6. ダッシュボードを完成させる5分
  7. 困ったときは

1スプレッドシートにデータを準備する

1-1. 新しいスプレッドシートを作成

  1. sheets.new にアクセス（新しいスプレッドシートが自動で開きます）
  2. 左上の「無題のスプレッドシート」をクリックして、名前を 「ダッシュボード練習用」 に変更
  3. シート名（左下のタブ）を 「売上データ」 に変更（タブをダブルクリック）

1-2. 以下のデータを入力

A1セルから以下の内容をそのまま入力してください：

A B C D
1 日付 店舗名 メニュー 売上
2 2026/3/1 渋谷店 眉毛スタイリング 6500
3 2026/3/1 渋谷店 まつ毛パーマ 7000
4 2026/3/1 新宿店 まつ毛エクステ 9000
5 2026/3/2 渋谷店 眉毛スタイリング 6500
6 2026/3/2 新宿店 まつ毛パーマ 7000
7 2026/3/2 新宿店 眉毛スタイリング 6500
8 2026/3/3 渋谷店 まつ毛エクステ 9000
9 2026/3/3 渋谷店 まつ毛パーマ 7000
10 2026/3/3 新宿店 まつ毛エクステ 9000
コピペでもOK：Excelやスプレッドシートにデータを貼り付ける場合は、タブ区切りになっていれば自動でセルに分かれます。自分でデータを追加してもOKです！

1-3. スプレッドシートIDをメモする

ブラウザのアドレスバーに表示されているURLを確認してください：

https://docs.google.com/spreadsheets/d/ここがスプレッドシートID/edit

d/ と /edit の間の長い文字列が「スプレッドシートID」です。後で使うのでコピーしておいてください。

IDの例：1aBcDeFgHiJkLmNoPqRsTuVwXyZ0123456789
このような英数字の文字列です。URLの一部なので、間違えずにコピーしてください。

2GAS（Google Apps Script）でAPIを作る

GASとは？：Google Apps Script の略で、Googleのサービス（スプレッドシートなど）をプログラムで操作できる仕組みです。今回はスプレッドシートのデータを外部から読み取れるようにするために使います。無料で使えます。

2-1. Apps Scriptを開く

  1. さっき作ったスプレッドシートを開いた状態で
  2. メニューバーの 「拡張機能」→「Apps Script」 をクリック
  3. 新しいタブでApps Scriptエディタが開きます

2-2. コードを貼り付ける

エディタに最初から書いてある function myFunction() { } を全部消して、以下のコードを丸ごとコピー＆ペーストしてください：

function doGet(e) { // スプレッドシートからデータを取得 const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('売上データ'); const data = sheet.getDataRange().getValues(); const headers = data[0]; // データを整形（1行目はヘッダーなのでスキップ） const rows = []; for (let i = 1; i < data.length; i++) { const row = {}; for (let j = 0; j < headers.length; j++) { if (headers[j] === '日付' && data[i][j] instanceof Date) { // 日付を文字列に変換 row[headers[j]] = Utilities.formatDate(data[i][j], 'Asia/Tokyo', 'yyyy/MM/dd'); } else { row[headers[j]] = data[i][j]; } } rows.push(row); } // 集計データも追加 const summary = { total: rows.reduce((sum, r) => sum + r['売上'], 0), count: rows.length, byStore: {}, byMenu: {} }; rows.forEach(r => { summary.byStore[r['店舗名']] = (summary.byStore[r['店舗名']] || 0) + r['売上']; summary.byMenu[r['メニュー']] = (summary.byMenu[r['メニュー']] || 0) + r['売上']; }); // JSON形式で返す const result = { rows: rows, summary: summary }; return ContentService .createTextOutput(JSON.stringify(result)) .setMimeType(ContentService.MimeType.JSON); }

2-3. プロジェクト名を変更

左上の「無題のプロジェクト」をクリックして 「売上ダッシュボードAPI」 に変更してください。

2-4. 保存する

Ctrl + S（Macは Command + S）で保存します。

ここまでのまとめ：スプレッドシートのデータを読み取って、JSON（データの形式）として返すプログラムが書けました。次のステップでこれを公開します。

3GASをウェブアプリとして公開する

3-1. デプロイ設定

  1. Apps Scriptエディタの右上にある 「デプロイ」 ボタンをクリック
  2. 「新しいデプロイ」 を選択
  3. 左上の歯車アイコンをクリック → 「ウェブアプリ」 を選択
  4. 以下の設定を行う：
    • 説明：売上ダッシュボードAPI（何でもOK）
    • 次のユーザーとして実行：自分
    • アクセスできるユーザー：全員
  5. 「デプロイ」 ボタンをクリック
「アクセスを承認」が求められたら：
  1. 「アクセスを承認」をクリック
  2. 自分のGoogleアカウントを選択
  3. 「詳細」→「（プロジェクト名）に移動」をクリック
  4. 「許可」をクリック

※ 自分で作ったスクリプトなので、安全に許可して大丈夫です。

3-2. URLをメモする

デプロイが完了すると、ウェブアプリのURLが表示されます。

https://script.google.com/macros/s/ここがデプロイID/exec

このURLをコピーして、メモ帳などに保存しておいてください。ダッシュボード作成時に使います。

URLを失くしたら：Apps Scriptエディタ →「デプロイ」→「デプロイを管理」で確認できます。

4APIの動作を確認する

さっきコピーしたURLをブラウザのアドレスバーに貼り付けてアクセスしてください。

こんな感じのデータ（JSON）が表示されれば成功です：

{ "rows": [ {"日付":"2026/03/01", "店舗名":"渋谷店", "メニュー":"眉毛スタイリング", "売上":6500}, ... ], "summary": { "total": 67500, "count": 9, "byStore": {"渋谷店":36000, "新宿店":31500}, "byMenu": {"眉毛スタイリング":19500, ...} } }
データが表示されればOK！ スプレッドシートのデータがAPI経由で取得できるようになりました。
何も表示されない・エラーが出る場合
  • シート名が「売上データ」になっているか確認（全角スペースに注意）
  • GASのコードにエラーがないか確認（赤い下線が出ていないか）
  • デプロイ時に「全員」を選択したか確認
  • ブラウザをリロード（F5）して再度試す

5Claude Codeでダッシュボードを作る

ここからClaude Codeの出番！
ステップ1〜4で用意したAPIを使って、Claude Codeにダッシュボードを作ってもらいます。

5-1. ターミナル（PowerShell）を開く

インストールマニュアルで覚えた手順でターミナルを開きます。

5-2. 作業フォルダを作成して移動

# Mac mkdir ~/Desktop/my-dashboard && cd ~/Desktop/my-dashboard # Windows（PowerShell） mkdir ~\Desktop\my-dashboard; cd ~\Desktop\my-dashboard

5-3. Claude Codeを起動

claude

5-4. Claude Codeに指示を出す

以下のプロンプトをClaude Codeにコピー＆ペーストしてください。
赤字の部分はステップ3でメモしたURLに差し替えてください。

以下のGAS APIからデータを取得して表示するHTMLダッシュボードを作ってください。 API URL: ここにステップ3でコピーしたURLを貼り付ける 要件： - index.html 1ファイルで完結（CSS・JSもHTML内に書く） - APIからfetchでデータを取得して表示 - 売上合計・来店数・客単価をカード形式で表示 - 店舗別売上を棒グラフで表示（Chart.jsを使用） - メニュー別売上を円グラフで表示 - 日付別の売上一覧テーブルも表示 - スマホでも見やすいレスポンシブデザイン - 色は緑系（#40916c）をメインカラーに

5-5. Claude Codeが作業してくれます

Claude Codeが自動でHTMLファイルを作成します。途中でファイル作成の許可を求められたら y を入力してください。

> （上のプロンプトを入力）

ダッシュボードを作成します。
[index.html を作成中...]

Write index.html? y

index.html を作成しました。ブラウザで開いて確認してください。
Claude Codeの強み：「こうしてほしい」を日本語で伝えるだけで、コードを自動生成してくれます。色を変えたい、グラフを追加したいなどの修正も、続けて日本語で指示するだけでOKです。

6ダッシュボードを完成させる

6-1. ブラウザで確認

作成された index.html をブラウザで開きます：

# Mac: Finderで開く open ~/Desktop/my-dashboard/index.html # Windows: エクスプローラーで開く start ~\Desktop\my-dashboard\index.html

...または、デスクトップの my-dashboard フォルダを開いて、index.html をダブルクリックしてもOKです。

6-2. カスタマイズしてみよう

Claude Codeはまだ起動中なので、続けて修正の指示を出せます。試しに以下のような指示を出してみてください：

やりたいことClaude Codeへの指示
タイトルを変えたい「タイトルを"SSIN STUDIO 売上ダッシュボード"に変えて」
色を変えたい「メインカラーをピンク系に変えて」
グラフを追加したい「日付別の売上推移を折れ線グラフで追加して」
見た目を良くしたい「もっとおしゃれなデザインにして」
ポイント：Claude Codeにはどんどん日本語で指示を出してOKです。「ここをもっとこうして」「これは要らない」「背景をダークにして」など、思ったことをそのまま伝えてみてください。

6-3. データを追加してみよう

スプレッドシートに新しいデータ行を追加してから、ダッシュボードをリロード（F5）してみてください。データが自動で反映されます！

おめでとうございます！ スプレッドシートのデータをリアルタイムでダッシュボードに表示する仕組みが完成しました！

? 仕組みの解説（読み物）

今回作った仕組みを簡単に説明します：

要素役割たとえるなら
スプレッドシート データの保管場所 売上ノート
GAS（API） データを外部に渡す窓口 「データください」と言われたら渡す受付係
HTML（ダッシュボード） データを見やすく表示する画面 グラフや表にまとめたレポート
Claude Code HTMLを自動で作ってくれるAI 優秀なプログラマーのアシスタント
この仕組みのメリット：
- スプレッドシートを更新するだけでダッシュボードに反映される
- HTMLファイルなのでブラウザがあれば誰でも見られる
- すべて無料（Google + Claude Codeのアカウントのみ）

!困ったときは

ダッシュボードにデータが表示されない（空白になる）

よくある原因：

  1. APIのURLが間違っている → ブラウザで直接URLにアクセスして、JSONデータが出るか確認
  2. CORS エラー → ブラウザの開発者ツール（F12 → Console）でエラーを確認。GASのデプロイ設定で「全員」が選ばれているか確認
  3. シート名が違う → GASコード内の「売上データ」とスプレッドシートのシート名が一致しているか確認
GASのデプロイでエラーが出る
  1. コードを保存（Ctrl+S）してからデプロイしているか確認
  2. コードに赤い波線（エラー）がないか確認
  3. エラーメッセージをClaude Codeに貼り付けて聞いてみてください
Claude Codeが作ったHTMLでエラーが出る

Claude Codeにそのまま伝えてください：

「ブラウザで開いたらエラーが出ます。F12で確認したら以下のエラーでした：（エラーメッセージを貼り付け）」

Claude Codeが自動で修正してくれます。

スプレッドシートを更新してもダッシュボードに反映されない

ブラウザでCtrl + Shift + R（スーパーリロード）を試してください。キャッシュが残っている場合があります。

それでもダメな場合は、GASを再デプロイ（「デプロイ」→「デプロイを管理」→バージョンを更新）してください。

Geminiに質問するときのテンプレート

Googleスプレッドシートのデータをダッシュボードに表示する作業をしています。 以下のマニュアル手順に沿って作業していますが、ステップ○で止まっています。 【マニュアルの手順一覧】 ステップ1: スプレッドシートにサンプル売上データを入力 ステップ2: GAS（Google Apps Script）でAPIを作成（doGet関数） ステップ3: GASをウェブアプリとしてデプロイ（公開） ステップ4: ブラウザでAPIのURLにアクセスしてJSON表示を確認 ステップ5: Claude Codeを起動して、APIからデータを取得するHTMLダッシュボードを作成 ステップ6: ブラウザで確認・カスタマイズ 【今の状況】 ここに、画面に表示されているエラーメッセージや状況を書いてください IT初心者にもわかるように、次に何をすればいいか教えてください。

+ 余裕がある人向け：もっとやってみよう

ダッシュボードが完成したら、以下にもチャレンジしてみてください。すべてClaude Codeに指示するだけでできます。

レベルチャレンジ内容Claude Codeへの指示例
初級 ロゴやファビコンを追加 「ページのタイトル横にロゴ画像を追加して」
中級 日付や店舗でフィルター機能 「店舗を選択するドロップダウンを追加して、選んだ店舗のデータだけ表示されるようにして」
上級 自動更新（30秒ごと） 「30秒ごとに自動でデータを再取得して画面を更新する機能を追加して」
SSIN STUDIO 社内マニュアル | 作成日: 2026年3月12日 | 実践チュートリアル