Claudeのbuild-dashboardでHTMLダッシュボードを1ファイルで作る
dataプラグインのbuild-dashboardは、KPIカード・Chart.jsのグラフ・フィルタ・表を1つのHTMLに収めます。入れ方、7段階の流れ、CDN読み込みの注意、行数の目安をまとめます。
build-dashboardは、Anthropicのknowledge-work-pluginsリポジトリにあるdataプラグインのskillです。説明文は「グラフ・フィルタ・表を備えたインタラクティブなHTMLダッシュボードを作る」。KPIカード付きの経営向け概要や、クエリ結果を配れる1ファイルのレポートにしたい場面が想定されています。サーバーも依存パッケージも要らず、ブラウザで開けば動く単一ファイルが成果物です。
ここでは入れ方、skillが踏む7段階、手元のCSVで試す指示の書き方、そしてテンプレートに潜む注意点を順に見ます。
build-dashboardは何を作るskillか
出力は、HTML・CSS・JavaScript・データを1つに収めた.htmlファイルです。skill本文は次の要素を挙げています。
- 上部のKPIカード(2〜4枚が目安)
- Chart.jsによる折れ線・棒・ドーナツなどのグラフ(1〜3個が目安)
- ドロップダウンや日付範囲のフィルタ
- 列見出しで並べ替えられる詳細テーブル
- 画面幅に応じて並びが変わるレスポンシブなレイアウトと、印刷用スタイル
データはJavaScriptの変数としてHTMLに直接埋め込まれます。実行時にデータを取りに行かないので、ファイルを渡せば相手の環境でも同じ数字が出ます。
dataプラグインはCoworkを主な対象にしつつ、Claude Codeでも使えると明記されています。build-dashboardはその中の/build-dashboardコマンドにあたります。プラグイン全体のコマンドは6つです。
| コマンド | 役割 |
|---|---|
/analyze | 役割データの質問に答える |
/explore-data | 役割データセットの形・品質・傾向を調べる |
/write-query | 役割方言に合わせたSQLを書く |
/create-viz | 役割Pythonで静止画のグラフを作る |
/build-dashboard | 役割フィルタ付きのHTMLダッシュボードを作る |
/validate | 役割共有前に分析の方法や偏りを点検する |
静止画のグラフならPythonを使う/create-viz、触って絞り込める1ファイルならbuild-dashboard、という役割分担です。
入れ方と呼び出し方
READMEにある導入手順は2行です。
claude plugin marketplace add anthropics/knowledge-work-plugins
claude plugin install data@knowledge-work-pluginsマーケットプレイスの追加とプラグインの導入が別コマンドになっている点だけ押さえれば足ります。プラグインを自社用に組み立てる側の話はcowork-plugin-managementの記事が扱っています。
呼び出しはスラッシュコマンドです。引数は「ダッシュボードの説明」と、任意の「データの出どころ」の2つ。skillのargument-hintは<description> [data source]です。
/build-dashboard 月次の売上ダッシュボード。売上推移、商品別トップ、地域別の内訳。データは sales.csvREADME・skill本文ともコマンドは/build-dashboardと表記されています。プラグイン由来のコマンドは入力補完に候補が出るので、実際に補完される名前で呼べば迷いません。
skillが踏む7段階
skill本文の「Workflow」は次の順序です。
build-dashboardの流れ
- 1
要件を確かめる
目的(経営向け概要・運用監視・深掘り分析・チーム報告)、読み手、重要な数字、絞り込みの軸、データの出どころを決めます。
- 2
データを集める
データウェアハウスにつながっていればクエリして結果をJSONで埋め込みます。貼り付けやアップロードならパースと整形をしてから埋め込みます。
- 3
レイアウトを決める
ヘッダーにタイトルとフィルタ、その下にKPIカード、中段にグラフ、下段に詳細テーブルという標準形を内容に合わせて調整します。
- 4
HTMLを組む
ベーステンプレートを土台に、構造・スタイル・動き・データを1ファイルへ書き出します。
- 5
グラフを実装する
時系列は折れ線、カテゴリ比較は棒、構成比はドーナツ、構成の推移は積み上げ棒、量と率の重ね合わせは棒と折れ線の複合を使います。
- 6
動きを足す
フィルタが全グラフと表を同時に更新し、列見出しで並べ替えられるようにします。
- 7
保存して開く
sales_dashboard.htmlのような名前で保存し、既定のブラウザで開いて表示を確かめ、データの差し替えや調整のやり方を伝えます。
注目したいのは第2段階の3つ目の分岐です。データが無く説明だけ渡した場合、skillは現実的なサンプルデータを作り、ダッシュボード上に「サンプルデータ」と明記し、実データへの差し替え手順を添える、と定めています。デモ用の骨組みを先に見たいときは、データなしで依頼する使い方が成立します。
ドーナツは「6カテゴリ未満のとき」という条件付きで勧められています。カテゴリが多い構成比を円で描かせないための歯止めです。
手元のCSVで試すときの指示の書き方
skillが最初に確かめる項目(目的・読み手・数字・軸・データ)を、依頼文にあらかじめ入れておくと、確認のやり取りが減ります。
/build-dashboard サポート問い合わせの週次レビュー用。
読み手は部門長。KPIは「件数」「初回応答時間の中央値」「解決率」。
優先度と担当チームで絞り込めるようにし、最下部に一覧表。
データは tickets.csv(列: opened_at, priority, team, first_response_min, resolved)。
日付は YYYY-MM-DD に揃えて埋め込んで。最後の1行には理由があります。skillの「Combined Filter Logic」の例は、日付フィルタをrow.date < startDateという文字列比較で書いています。2026/10/5のような表記が混じると、期待どおりに絞れません。ISO形式(YYYY-MM-DD)に揃えるよう頼んでおけば、この比較が成立します。
生成されたら、次の3点を自分の目で見ます。
- KPIの合計値が、元のCSVを集計した数字と一致するか
- フィルタを「すべて」に戻したとき、表の行数が元データの行数に戻るか
- 空の絞り込み結果(該当0件)で、グラフやカードが壊れないか
数字の突合は、Claudeに「CSVを直接集計し直して、ダッシュボードの表示と差を出して」と頼むのが速い方法です。同梱の/validateは、共有前の点検として集計ロジックや分母の取り方を見直す役目なので、配布前に通す選択肢になります。
「オフラインで動く」とCDN読み込みの食い違い
skill本文は2か所で次のように書いています。
- 「サーバーも依存関係も要らずブラウザで開ける」
- 「すべてのデータをHTMLに埋め込み、外部のデータ取得は不要。ダッシュボードは完全にオフラインで動く」
一方、ベーステンプレートのheadには、Chart.jsと日付アダプタをcdn.jsdelivr.netから読むscriptタグがあります。
| 読み込むもの | 指定されているバージョン | 補足 |
|---|---|---|
| Chart.js | 指定されているバージョンchart.js@4.5.1 | 補足integrity(SRIハッシュ)付き |
| chartjs-adapter-date-fns | 指定されているバージョンchartjs-adapter-date-fns@3.0.0 | 補足integrity付き |
つまり、テンプレートどおりに作られたファイルは、データこそ埋め込みでも、ライブラリはネットワーク越しに取得します。ネットワークにつながらない環境や、外部CDNを遮断した社内ネットワークで開くと、グラフが描かれない可能性があります。「完全にオフライン」という説明と、テンプレートの実装が一致していない部分です。
手元のファイルで確かめるには、scriptタグのsrcを数えます。
grep -o '<script src="[^"]*"' sales_dashboard.htmlhttps://で始まる行が出たら、そのファイルは外部CDNに依存しています。配布先がオフラインや閉域網なら、次のように頼めます。
sales_dashboard.html の外部 script 読み込みをやめて、
Chart.js 本体をファイル内にインライン展開して。Chart.js本体を埋め込むとファイルは大きくなります。メールで回すか、閉域網で配るかを先に決めてから選ぶ話です。
行数の目安とテンプレートの癖
skillにはデータ量の目安表があります。
| データ量 | 方針 |
|---|---|
| 1,000行未満 | 方針そのまま埋め込む。操作は全機能が使える |
| 1,000〜10,000行 | 方針埋め込めるが、グラフ用に事前集計が要る場合がある |
| 10,000〜100,000行 | 方針サーバー側で事前集計し、集計後のデータだけ埋め込む |
| 100,000行超 | 方針クライアント側のダッシュボードには向かない。BIツールかページ分割を使う |
描画の目安も書かれています。折れ線は1系列あたり500点未満、棒は50カテゴリ未満、散布図は1,000点まで。表示行は100〜200行に抑え、それ以上はページ送りにします。フィルタ更新時のchart.update('none')と、グラフ数が多いときのanimation: falseは、動きを軽くする設定として挙げられています。
事前集計の考え方は、生の5万行を埋め込まず、月別売上12行、商品トップ10行、KPIの合計値にまとめて渡すものです。DuckDBで先に集計してから渡す運用なら、DuckDBプラグインの記事の手順がそのまま前工程になります。
もう1点、テンプレートのコードを読んで気づいた癖があります。並べ替え可能な表の例は、セルの値を<td>${value}</td>の形で文字列に組んでinnerHTMLに渡しています。値にHTMLの特殊文字を含むデータ(問い合わせ本文、商品名の<や&など)を載せると、そのままHTMLとして解釈されます。自由記述の列を表に出すなら、次のように頼んでおくと安全側に倒せます。
表のセルは innerHTML ではなく textContent で入れて。
文字列の列は HTML エスケープしてから表示して。これはテンプレートの実装から読み取れる点で、skillが明示している注意事項ではありません。社外に配るファイルでは、確認してから渡してください。
見た目の初期値と、変えたいときの頼み方
skillのCSS節には、色と余白の初期値が書かれています。背景は薄いグレー、カードは白、ヘッダーは濃紺(#1a1a2e)。データ用の6色は青・オレンジ・緑・赤・紫・茶(#4C72B0から#937860)で、増減の表示には緑と赤が使われます。余白は16px、角丸は8pxです。フォントはシステムフォントなので、Webフォントの読み込みも発生しません。
画面幅768px以下ではヘッダーとフィルタが縦並びになり、KPIカードは2列、グラフは1列に切り替わります。印刷時はフィルタを隠し、グラフが途中で分断されないようにします。PDFにして配る使い方まで見込んだ作りです。
社内の配色に合わせるなら、色コードを依頼文に書きます。たとえば「データ用の色は#0F766Eと#B45309の2色に絞って」。緑と赤で増減を示す初期値は、色の見分けにくい読み手がいる場合、矢印や符号を併記するよう頼んでおくと伝わりやすくなります。
他の作り方との使い分け
同じ「ダッシュボード」でも、置き場所と更新方法で選択肢が分かれます。
| やりたいこと | 向く手段 |
|---|---|
| 1つのHTMLファイルとして配る。スナップショットでよい | 向く手段build-dashboard |
| claude.ai上で数字を検算しながら作り込む | 向く手段Claude Artifacts。調達の月次レポートを例にした手順の記事がある |
| データ接続して質問・共有まで1つの機能で済ます | 向く手段Claude Dashboards |
| 常時更新が要る | 向く手段BIツール |
skill自身も、リアルタイムのダッシュボードにはBIツールへの接続を勧め、build-dashboardの成果物は「ある時点のスナップショット」だと説明しています。毎週同じ形式で出し直すなら、依頼文と整形済みCSVを固定して再実行する運用が現実的です。見た目の調整には、「ダークモード」「プレゼン向け」「社のカラーに合わせる」と頼めばよい、とTipsに書かれています。
まとめ
build-dashboardは、集計済みの数字を人に見せる1ファイルへ変える道具です。1万行を超えるデータや常時更新には向かず、閉域網では外部CDNの読み込みで詰まる可能性があります。配布先の環境、データの行数、日付の形式、自由記述の列の有無。この4つを依頼文に入れておくと、生成物の手直しが減ります。