Claude Codeでダッシュボードを作成する方法｜自動更新と社内共有

マーケティングのKPIを可視化するとき、Looker Studioでグラフを1つずつ作成したり、スプレッドシートの関数とグラフで集計表を組んだりする作業には手間がかかります。指標を追加するたびに設定を見直す必要があり、作成者以外には管理しにくくなりがちです。

一方で、Claude Codeに依頼してダッシュボードを作成すると、見た目は短時間で整うものの、「データが自動で更新されない」「社内のメンバーに共有する方法がわからない」という課題が残ります。

作成したHTMLファイルには作成時点のデータしか入っておらず、ファイルを渡せば、受け取った人は誰でも開けてしまいます。

本記事では、Claude Codeで作成できるダッシュボードの例を紹介したうえで、Google Apps Script（以下、GAS）のウェブアプリとして公開する方法を解説します。スプレッドシートやBigQueryのデータを閲覧のたびに読み込むため、元のデータを更新すれば自動で反映され、閲覧できる人も社内のアカウントに限定できます。

Looker Studioとの使い分け、費用、共有するときの注意点もあわせて紹介します。

月次の広告費・登録単価（CPA）の推移、チャネル別の売上、都道府県別の登録数と、広告費・新規登録・CPA・購入・売上・ROASのKPIカードをまとめたダッシュボード

本記事の方法で作成したダッシュボード（デモ用のデータ）

なお、2026年10月時点でLooker Studioは「データポータル」（英語名はData Studio）に名称が変わっています（Data Studio のドキュメント（別タブで開く））。本記事では、広く使われている「Looker Studio」の名称で説明します。

Claude Codeでダッシュボードを作成する仕組み

全体の構成は次のとおりです。可視化したいデータをスプレッドシートかBigQueryに置き、GASがデータを読み込んで集計し、HTMLのダッシュボードとして表示します。

GASのウェブアプリとして公開するとURLが発行されるため、閲覧する人にはそのURLを共有するだけです。

スプレッドシートまたはBigQueryのデータを、Apps Scriptが閲覧のたびに読み込んでウェブアプリとして公開し、社内のアカウントに限定したURLで社内メンバーがブラウザから閲覧する流れを示した図

ダッシュボードの全体像

GASを使うと、ダッシュボードの公開に必要な3つの要素を、Googleアカウントの仕組みだけでまかなえます。

ホスティング：GASのウェブアプリとして公開すれば、サーバーを用意する必要がありません
データの更新：ページを開くたびにスプレッドシートやBigQueryを読み込むため、元のデータを更新すれば、次に開いたときに反映されます
認証：閲覧できる人を、自社のGoogle Workspaceのアカウントなどに限定できます

ダッシュボードのコードの作成と修正をClaude Codeに任せます。後述するclaspを使えば、コードの反映からデプロイまでをClaude Codeへの日本語の指示で完結できます。

Claude Codeはどこで動かすか

Claude Codeは、Anthropicが提供するAIエージェントです。ファイルの読み書きやコマンドの実行を、日本語の指示にもとづいて自ら行います。

2026年10月時点では、ターミナル、VS CodeやJetBrainsなどのIDE、デスクトップアプリ、ブラウザ（Web版）で利用できます（Claude Code overview（別タブで開く））。

本記事の方法では、claspというコマンドを手元のPCで実行するため、ターミナルかデスクトップアプリ、IDEで使うのが確実です。Claude Codeを使ったデータ分析の全般は、「Claude Codeでデータ分析する方法（別タブで開く）」で解説しています。

必要なものと費用

以下は2026年10月時点の情報です。

Claude Code：Pro・Max・Team・Enterpriseのいずれかのプラン、またはClaude Console（API）のアカウントが必要です。無料プランには含まれません（Claude Codeのセットアップ（別タブで開く）、Claudeの料金（別タブで開く））
Googleアカウント：GASとスプレッドシートは追加の費用なしで使えます。閲覧者を社内に限定するには、Google Workspaceのアカウントで作成します
Node.js：claspを使う場合に必要です。2026年10月時点で、バージョン22以上が求められています（claspのREADME（別タブで開く））
BigQuery（データが多い場合）：毎月1TiBまでのクエリ処理と10GiBまでのストレージが無料です（BigQueryの料金（別タブで開く））

GASには実行時間などの上限があります。たとえば、1回の実行時間は6分までです（Apps Script の割り当てと上限（別タブで開く））。

ダッシュボードの表示に使う程度であれば、通常は問題になりません。

Claude Codeで作成できるダッシュボードの例

構築の手順の前に、どのようなダッシュボードを作成できるのかを紹介します。画面は、本記事で配布するサンプル（月・チャネル・都道府県別のマーケティングのKPI）を表示したもので、数値はすべてデモ用のデータです。

KPIの一覧と推移を、期間・チャネル・地域で絞り込む

冒頭の画面のように、広告費・新規登録・登録単価（CPA）・購入・売上・ROASのKPIを上段に並べ、その下に月次の推移とチャネル別・都道府県別の内訳を表示します。期間、チャネル、都道府県で絞り込むと、すべての数値とグラフが連動して切り替わります。

チャネルをInstagram広告、都道府県を東京都に絞り込み、KPIカードと月次の広告費・登録単価（CPA）のグラフが切り替わったダッシュボード

Instagram広告と東京都に絞り込んだ画面（デモ用のデータ）

Looker Studioでも同様の絞り込みはできますが、Claude Codeで作成する場合は、「登録単価は広告経由の登録だけで計算する」「KPIカードの下に計算式を表示する」といった細かな仕様も、日本語の指示だけで反映できます。

ファネルと明細の表で、数値の根拠を確認する

ページの下部には、セッションから新規登録、購入、リピート購入までのファネルと、各段階の前段比を表示しています。その下の表は、列の見出しをクリックすると並び替えができ、右上の「CSV」ボタンで絞り込んだ結果を書き出せます。

セッション・新規登録・購入・リピートのファネルと前段比、月・チャネル・都道府県別の広告費・登録・購入・売上・セッションの明細表

ファネルと明細の表（デモ用のデータ）

画面の幅に合わせてレイアウトが変わるため、スマートフォンでも閲覧できます。グラフの種類や指標を変える、目標値との比較を加える、といった変更も、後述する手順でClaude Codeに依頼すれば反映できます。

Looker Studioとの違いと使い分け

Looker Studioは、ドラッグ＆ドロップの操作でグラフを配置し、フィルタ付きのレポートを作成して共有できる無料のBIツールです。Claude Codeで作成する方法と比べると、主に次の違いがあります。

	Looker Studio	Claude Code＋GAS
作り方	画面の操作でグラフを1つずつ配置する	日本語で指示し、コードを生成させる
修正できる人	操作を覚えれば、エンジニアでなくても修正できる	Claude Codeを使える人。修正はコードの書き換えになる
見た目と計算の自由度	用意されたグラフと計算フィールドの範囲	コードで書けるものなら自由に作れる
データの接続	Googleのサービスを中心に、多くのコネクタがある	スプレッドシートやBigQueryなど、GASから読めるもの
定期配信	レポートのPDFをメールで定期的に送れる	必要なら自分で作る
費用	無料（有料版のData Studio Proもある）	GASは追加の費用なし。Claude Codeは有料プラン

Looker Studioのほうが向いているのは、マーケティング部門の担当者が自分でグラフを追加・修正したい場合や、レポートを決まった日にメールで配りたい場合です（レポートの定期配信（別タブで開く））。多くの人が編集する、全社で標準のダッシュボードにも適しています。

当社が支援した株式会社DeNA SOMPO Mobility様（個人間カーシェア「Anyca」を運営）でも、BigQueryで統合したデータをLooker Studioのダッシュボードで見られるようにしました。マーケティング部門がエンジニアや分析担当者を介さずに最新の数字を確認できるようになり、施策の立案から実行までの周期も短くなっています（「集計の手作業をなくし、マーケターが最新の統合データを見られる状態に（別タブで開く）」）。

Claude Code＋GASが向いているのは、Looker Studioでは表現しにくい集計や画面を作りたい場合、スプレッドシートで管理しているデータをすぐに可視化したい場合、指標の追加や画面の修正を短い周期で繰り返したい場合です。

どちらか一方に決める必要はなく、全社の定点観測はLooker Studio、部門ごとの分析用の画面はClaude Codeで作るといった併用もできます。

Claude Dashboardsとの使い分け

2026年10月8日、Anthropicは依頼文だけでダッシュボードを作る「Claude Dashboards」を公開しました（2026年10月時点ではベータ版）。BigQueryなどに接続しておけば、コードを書かずに短時間でダッシュボードができます。

ただし、閲覧者自身の権限でデータを読むため、共有する相手にもBigQueryの閲覧権限が必要です。まず数字を見てみたいときはClaude Dashboards、権限を持たない社内のメンバーに見せたいときや集計の決めごとを固定したいときは本記事の方法が向いています。詳しくは「Claude Dashboardsの使い方（別タブで開く）」で比べています。

スプレッドシートのデータでダッシュボードを公開する手順

ここからは、サンプルのデータとコードを使って、ダッシュボードを公開する手順を解説します。最初はClaude Codeを使わず、GASの画面で公開までを行い、仕組みを確認します。

ステップ1：スプレッドシートにデータを用意する

まず、可視化したいデータをスプレッドシートに入れます。本記事では、マーケティングのチャネル別の分析を想定し、月・チャネル・都道府県・セッション数・登録数・購入数・リピート購入数・売上・広告費の9列、599行のサンプルを用意しました。

kpi_sample.csv（CSV・30 KB）（デモ用のデータ）

新規のスプレッドシートを開き、「ファイル」→「インポート」からCSVを取り込みます。シート名は「kpi」にします。

ステップ2：Apps Scriptにコードを貼る

スプレッドシートのメニューから「拡張機能」→「Apps Script」を開きます。

Apps Scriptのエディタを開いた直後の画面。左のファイル一覧にコード.gsがあり、右に空のmyFunctionが表示されている

Apps Scriptのエディタ

最初に開かれている「コード.gs」の中身を、次のファイルの内容に置き換えます。

Code.gs（GS・3 KB）（シートを読み込み、ダッシュボードのHTMLにデータを渡す処理）

次に、「ファイル」の横の＋ボタンから「HTML」を選び、ファイル名を「Index」にして、次のファイルの内容を貼り付けます。

Index.html（HTML・16 KB）（ダッシュボードの画面。外部のライブラリを使わず、1つのファイルで完結する）

ステップ3：ウェブアプリとしてデプロイする

右上の「デプロイ」→「新しいデプロイ」を選び、種類の選択で「ウェブアプリ」を選びます。設定は次のとおりにします。

次のユーザーとして実行：自分
アクセスできるユーザー：自社のドメイン内の全員

「自分」として実行すると、閲覧者が誰であっても、スクリプトは作成者の権限でスプレッドシートを読み込みます（ウェブアプリ（別タブで開く））。そのため、閲覧者にスプレッドシート自体を共有しなくても、ダッシュボードだけを見せられます。

元のデータを編集されたくない場合や、明細は見せずに集計結果だけを共有したい場合に役立ちます。

デプロイが完了するとURLが発行され、アクセスするとダッシュボードが表示されます。スプレッドシートのデータを追加・修正すれば、次にダッシュボードを開いたときに反映されます。

アクセスできるユーザーの選び方

「アクセスできるユーザー」には、次の4つの段階があります（ウェブアプリの設定項目（別タブで開く））。

設定	閲覧できる人
自分のみ	デプロイした本人だけ
自社のドメイン内の全員	デプロイした人と同じGoogle Workspaceのドメインのユーザー
Googleアカウントを持つ全員	Googleアカウントにログインしている人なら誰でも
全員	ログインしていない人を含め、URLを知っている誰でも

社外秘のデータを扱うダッシュボードでは、「Googleアカウントを持つ全員」と「全員」は選ばないでください。「Googleアカウントを持つ全員」は社内に限らず、URLを知っている社外の人も閲覧できます。

さらに閲覧者を絞りたい場合は、Code.gsの冒頭にある ALLOWED_EMAILS に、閲覧を許可するメールアドレスを書きます。

閲覧者のメールアドレスを取得できるのは、原則として作成者と閲覧者が同じGoogle Workspaceのドメインに属する場合です（Session.getActiveUser（別タブで開く））。この絞り込みは、「自社のドメイン内の全員」と組み合わせて使います。

2回目以降のデプロイ

コードを修正したときは、「デプロイ」→「デプロイを管理」から既存のデプロイを編集し、バージョンで「新バージョン」を選んでデプロイします。この方法であれば、URLは変わりません。

「新しいデプロイ」を選ぶと別のURLが発行されるため、共有済みのURLが古い版のままになります。

Claude Codeとclaspで修正からデプロイまで任せる

サンプルを自社のデータに合わせて修正する作業は、Claude Codeに任せます。claspを使えば、GASのコードを手元のPCで管理でき、Claude Codeがコードの修正、GASへの反映、デプロイの更新までを行えます。

Claude Codeに日本語で修正を指示すると、claspでコードの反映とデプロイの更新が行われ、URLを変えずにダッシュボードに修正が反映される流れを示した図

Claude Codeとclaspによる修正の流れ

claspは、GASのプロジェクトをローカルで開発・管理するためのコマンドラインツールです。Googleが公開していますが、READMEには公式のサポート対象の製品ではないと明記されています（claspのREADME（別タブで開く））。

claspの準備

Node.js（バージョン22以上）を入れたうえで、npm install -g @google/clasp でclaspをインストールする
Apps Script の設定画面（別タブで開く）で「Google Apps Script API」をオンにする
clasp login を実行し、ブラウザでGoogleアカウントの認証を行う
作業用のフォルダで clasp clone-script にApps ScriptのエディタのURLを渡し、プロジェクトを手元に取り込む

ここまでの手順も、Claude Codeに「claspでこのApps Scriptのプロジェクトを手元に取り込んで」と依頼すれば、コマンドの実行を任せられます。ただし、clasp login の認証は、ブラウザで自分で行います。

Claude Codeに修正を依頼する

プロジェクトを取り込んだフォルダでClaude Codeを起動し、次のように依頼します。

プロンプト例
これはGASで作成したダッシュボードです。kpiシートの列の意味とCode.gs・Index.htmlを確認し、チャネル別の購入単価（広告費÷購入数）の推移グラフを追加してください。修正したらclaspでGASに反映し、既存のデプロイを新しいバージョンで更新してください。URLは変えないでください。

claspでは、clasp push でコードをGASに反映し、clasp create-deployment に既存のデプロイのIDを指定すると、同じURLのまま新しいバージョンを公開できます。

デプロイのIDを指定しないと新しいURLが発行されるため、プロンプトで「既存のデプロイを更新する」と明示しておくと確実です。

修正を繰り返す場合は、指標の定義やデプロイのIDを、Claude Codeが毎回読み込むメモのファイル（CLAUDE.md（別タブで開く））に書いておくと、毎回説明する必要がなくなります。

シートと列の意味（例：spendは税抜の広告費、signupsは新規登録数）
指標の定義（例：CPAは広告費÷広告経由の登録数）
公開しているデプロイのID と「新しいデプロイは作らない」というルール

なお、AIが作成した集計が意図どおりとは限りません。指標を追加したときは、スプレッドシート側で合計値などを計算し、ダッシュボードの数値と一致するかを確認してください。

データが増えたらBigQueryを参照する

スプレッドシートのデータ量には上限があり、1ファイルあたり2,000万セルまでです（Google ドライブに保存できるファイル（別タブで開く））。ただし、上限に届く前でも、数万行を超えるあたりから、スプレッドシートの操作やダッシュボードの表示が重くなりがちです。

広告の日別・キーワード別のデータのように行数が増え続けるデータは、BigQueryに置き、集計した結果だけをダッシュボードで読み込む構成にします。

この構成では、ダッシュボードを開くたびにBigQueryのクエリが実行されます。読む期間と列を絞っておくと、費用を抑えられます。費用の出どころの調べ方は、「BigQueryの料金が高い原因と下げ方｜クエリと保存の見直し手順（別タブで開く）」で解説しています。

GASの処理のうち、データを読み込む部分（Code.gsの getRows_()）を書き換えるだけで、画面はそのまま使えます。

GASからBigQueryを読み込む

GASからBigQueryを使うには、Apps Scriptのエディタの「サービス」の＋から「BigQuery API」を追加します（BigQuery サービス（別タブで開く））。

そのうえで、getRows_() を次のように書き換えます。プロジェクトIDとテーブル名は自社のものに置き換えてください。

var PROJECT_ID = 'your-project-id';
var SQL =
  'SELECT ym, channel, pref, SUM(sessions) AS sessions, SUM(signups) AS signups, ' +
  'SUM(orders) AS orders, SUM(repeat_orders) AS repeat_orders, ' +
  'SUM(revenue) AS revenue, SUM(spend) AS spend ' +
  'FROM `your-project-id.marketing.kpi_daily` GROUP BY ym, channel, pref';
var NUMERIC = ['INTEGER', 'INT64', 'FLOAT', 'FLOAT64', 'NUMERIC', 'BIGNUMERIC'];

/** BigQuery で集計した結果を [{列名: 値}, ...] にする。1時間はキャッシュを使う */
function getRows_() {
  var cache = CacheService.getScriptCache();
  var hit = cache.get('rows');
  if (hit) return JSON.parse(hit);

  var res = BigQuery.Jobs.query({ query: SQL, useLegacySql: false }, PROJECT_ID);
  var jobId = res.jobReference.jobId;
  while (!res.jobComplete) {
    Utilities.sleep(500);
    res = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }
  var fields = res.schema.fields;
  var rows = (res.rows || []).map(function (r) {
    var o = {};
    r.f.forEach(function (c, i) {
      var isNum = NUMERIC.indexOf(fields[i].type) >= 0 && c.v !== null;
      o[fields[i].name] = isNum ? Number(c.v) : c.v;
    });
    return o;
  });

  var json = JSON.stringify(rows);
  if (json.length < 100000) cache.put('rows', json, 3600);
  return rows;
}

この書き換えも、Claude Codeに「getRows_() をBigQueryの次のテーブルから読み込む形に変えて」とテーブルの定義を添えて依頼すれば、作成から反映まで任せられます。

権限と費用の考え方

「次のユーザーとして実行」を「自分」にしている場合、BigQueryのクエリは作成者の権限で実行されます。閲覧者にBigQueryの権限を付与する必要はありません。

一方で、作成者のアカウントには、対象のプロジェクトでクエリを実行し、テーブルを閲覧する権限が必要です。

BigQueryのクエリは、読み込んだデータ量に応じて課金されます。ダッシュボードを開くたびにクエリを実行すると、閲覧者が多い場合に処理量が増えるため、上のコードでは結果を1時間キャッシュしています（CacheService（別タブで開く））。

キャッシュの有効期限は最長6時間で、1件あたり100KBまでしか保存できないため、ダッシュボードで使う粒度まで集計した結果を返すのが前提です。明細の大きなテーブルは、あらかじめ集計用のテーブルを作っておくと、費用も表示の速さも安定します。

BigQueryのデータを自動で更新する

ダッシュボードが自動で更新されるかどうかは、元のデータが自動で更新されるかで決まります。広告媒体やGA4のデータをBigQueryに毎日自動で転送しておけば、ダッシュボードは常に最新のデータを表示します。

広告データの転送には、Fivetranなどのデータ連携ツールを使う方法があります（「Fivetranとは？広告データ統合でできること・料金・始め方（別タブで開く）」）。複数の広告媒体のデータを1つのテーブルにまとめる方法は、「広告の媒体横断分析をAIで行う方法（別タブで開く）」で解説しています。

社内に共有するときの注意点

社外秘のデータを公開URLに出さない

「アクセスできるユーザー」を「全員」や「Googleアカウントを持つ全員」にすると、URLを知っている社外の人も閲覧できます。売上や顧客に関するデータを扱う場合は、「自社のドメイン内の全員」以下に限定してください。

Claude Codeに依頼してデプロイの設定を変える場合も、アクセスの範囲は自分で確認します。

同様に、Claude Codeが作成したHTMLファイルにデータを埋め込んで共有したり、誰でも閲覧できる場所に置いたりする方法は、社外秘のデータには向きません。

個人のアカウントではなく、組織のアカウントで作成する

ウェブアプリは、作成者のアカウントの権限で動きます。作成者が異動・退職してアカウントが使えなくなると、ダッシュボードも止まる可能性があります。

スクリプトの所有者を別のドメインのアカウントや共有ドライブに移した場合は、動かなくなることがあり、移した先で再デプロイが必要です（ウェブアプリ（別タブで開く））。継続して使うダッシュボードは、管理者を決めたうえで組織のアカウントで作成し、デプロイの方法とURLを記録しておきます。

Claude Codeに渡すデータの範囲を決める

Claude Codeは、作業用のフォルダにあるファイルを読み込みます。画面の作成や修正には、データの列の意味がわかれば十分なことがほとんどです。

社内のルールで外部のAIサービスに渡してよいデータの範囲を確認し、必要に応じて本記事のサンプルのようなデモ用のデータで画面を作ってから、本番のデータに切り替えてください。

よくある質問

AIを使ってダッシュボードを作成するには、どうすればよいですか

ClaudeやChatGPTにデータとグラフの要件を渡せば、ダッシュボードのHTMLを作成できます。ただし、データの自動更新と社内への共有まで考えると、本記事のように、データを読み込む仕組みと公開の仕組みを用意する必要があります。

ダッシュボードを作るのではなく、週次・月次のレポートを自動で作成したい場合は、「広告レポートをAIで自動化する方法（別タブで開く）」で解説しています。

Claude Codeを使わずに同じことはできますか

できます。本記事の手順のうち、スプレッドシートとGASでの公開は、Claude Codeを使わずに行えます。

修正するときは、ClaudeやChatGPTに元データの列とGASのコードを渡して修正を依頼し、返ってきたコードを貼り付けて再度デプロイします。Claude Codeとclaspを使うと、このコピー＆ペーストとデプロイの作業がなくなります。

まとめ

仕組み：スプレッドシートやBigQueryのデータを、GASのウェブアプリが閲覧のたびに読み込み、ダッシュボードとして表示する
公開と権限：「自分」として実行し、アクセスできるユーザーを自社のドメイン内に限定する。社外秘のデータを「全員」に公開しない
修正とデプロイ：claspを使えば、Claude Codeが修正から既存のデプロイの更新までを行える
データが増えたら：BigQueryに置き、集計した結果だけを読み込む。キャッシュでクエリの費用を抑える
使い分け：担当者が自分で編集するダッシュボードや定期配信はLooker Studio、自由度の高い分析用の画面はClaude Code

ダッシュボードの価値は、元のデータが正しく、自動で更新されているかで決まります。広告・GA4・CRMのデータが分かれたままでは、どの方法で作っても、数値の確認と手作業の集計が残ります。

株式会社INVOXは、データ基盤の構築、データ分析の支援、AIエージェントの開発を行っています。広告やGA4、CRMのデータをBigQueryに統合し、Looker StudioやClaudeで分析できる環境の構築までを支援しています。

支援の内容は「マーケティング分析（別タブで開く）」で、支援実績は「集計の手作業をなくし、マーケターが最新の統合データを見られる状態に（別タブで開く）」で紹介しています。

「ダッシュボードのデータを自動で更新したい」「部門ごとに作られたダッシュボードの数値がそろわない」といった課題をお持ちでしたら、お問い合わせください。