Vibe Codingで予算ダッシュボードを自作｜3指標で月次報告を高速化
この記事の要点
- Vibe Codingは予算の数字を1か所にまとめ、見たい指標を3つに絞ってからAIに頼むのが成功の近道
- 主役はプロンプトではなく、データの整え方と出力の確認手順。ここを人がやれば精度は安定する
- 毎月データを差し替えるだけで自動更新。Excelの数式崩れや属人化から抜け出せる
毎月の広報予算、いまもExcelの表とにらめっこして「今どれくらい使ったんだっけ」と電卓を叩いていませんか。数式が壊れたり、ファイルが何代も増えたりして、肝心の「使いすぎ」に気づくのが遅れる。よくある悩みです。
この記事では、プログラミングをしない広報・総務の担当者が、Vibe Coding（AIに日本語で頼んでアプリを作ってもらうやり方）で広報予算ダッシュボードを自作する手順を、データの準備から公開前のチェックまで具体的に解説します。コードが読めなくても、再現できる道筋をそのまま書いていきます。
Contents / 目次
結論。広報予算ダッシュボードは「3指標に絞って」自作するのが正解
結論からお伝えします。広報予算ダッシュボードの自作は、「データを1か所に集める→見る指標を3つに絞る→AIに作らせる→毎月差し替える」の順で進めるのがいちばん失敗しません。多機能なBIツールを契約する前に、まずは自分たちが毎月見たい数字だけを映す軽い画面を作る。これがコスパも定着率も高い進め方です。
Vibe Codingとは、ひとことで言うと「AIに日本語で“こういう画面を作って”と話しかけると、AIが裏側のプログラムを書いてくれる作り方」のことです。お店で店員さんに「予算の使いすぎが一目で分かる表を作って」と相談する感覚に近いと思ってください。コードを自分で書かないので、プログラミング経験がなくても始められます。IBMの解説でも、バイブコーディングとは、人が手作業でコードを書く代わりにAIツールにプロンプトを与えてコードを生成させる行為と説明されています。
ここで一番大事なのは、ツール選びではなく「何を見たいか」を先に決めることです。ダッシュボードがうまくいかない原因のほとんどは、見たい数字が決まらないまま画面を作り始めることにあります。だからこそ、まず指標を3つに絞ります。
ポイント。広報予算ダッシュボードで最初に映すべき指標は、欲張らず3つで十分です。多すぎると毎月見なくなり、形だけのダッシュボードになります。
| 映す指標 | 何が分かるか | 計算のもと |
|---|---|---|
| 予算消化率 | 年間予算のうち何％を使ったか。ペースが速いか遅いか | 実績合計 ÷ 年間予算 |
| 項目別の使いすぎ | 広告・イベント・制作など、どの費目が予算をオーバー気味か | 費目ごとの実績 − 費目ごとの予算 |
| 残り予算 | あと何円残っているか。年度末まで持つか | 年間予算 − 実績合計 |
この3つが毎月パッと見えるだけで、予算会議の準備時間はぐっと減ります。逆に、最初から10個も20個も指標を並べると、作るのも見るのも大変になり、結局誰も開かなくなります。「まず3つ、慣れたら足す」が現場でうまく回るやり方です。
なお、過去データから来年度の配分を決めたい段階に入ったら、予算の組み立て方そのものを見直すのが効きます。配分の考え方は広報予算をAIで予測し過去データで配分を最適化する方法でも詳しく解説しています。
作り方の手順。データ準備からAIへの依頼まで5ステップ
具体的な作り方を、再現できる順番で説明します。広報予算ダッシュボードは、次の5ステップで作れます。手を動かす中心は最初の「データ準備」で、ここを丁寧にやるほど後がラクになります。
ステップ1。予算と実績の数字を1つの表にまとめる
まず、バラバラに管理している予算と実績を、1枚の表に集めます。請求書フォルダ、経理からもらう実績、広告の管理画面など、あちこちに散った数字を1か所に寄せるイメージです。この「散らばりを1つにする」作業が、実はダッシュボード作りで一番価値のある工程です。
表の形は、次のようにシンプルな縦並びにしておくとAIが扱いやすくなります。1行＝1件の支出、という形です。
日付,費目,内容,予算区分,金額
2026-04-10,広告,SNS広告4月分,実績,120000
2026-04-15,イベント,展示会ブース装飾,実績,85000
2026-04-01,広告,年間広告予算,予算,1500000
2026-04-01,イベント,年間イベント予算,予算,800000このとき守ってほしい整え方があります。日付は「2026-04-10」の形（YYYY-MM-DD）で統一し、費目の名前は表記を揃え（「広告費」と「広告」を混ぜない）、空っぽの行や合計行は入れないことです。AIは表の形が整っているほど正しくグラフ化できます。人間でいう「読みやすい資料ほど誤読しない」のと同じです。
ここを軽視すると、後でグラフがズレたり、AIが数字を取り違えたりします。データの整え方が9割と言っていいくらい大事な工程です。面倒でもこの段階で揃えておきましょう。
ステップ2。AIにダッシュボードを頼むときの「たたき台」を用意する
次に、AIへの依頼文を用意します。いまのAIは、ざっくり頼めば自分で良い指示に整え直してくれます。だから、作り込んだ長い命令文は要りません。次のような短いたたき台（出発点）から始めて、あとはAIと会話しながら詰めていくのがコツです。
あなたはノーコードでダッシュボードを作る開発者です。
添付したCSV（［予算と実績のデータ］）をもとに、
広報予算ダッシュボードを1ファイルのHTMLで作ってください。
映したい指標は次の3つです。
1. 予算消化率（実績合計 ÷ 年間予算）を大きく表示
2. 費目別の「予算 vs 実績」を棒グラフで比較
3. 残り予算を金額で表示
・スマホでも見やすいレイアウトにしてください
・データを差し替えるだけで更新できる作りにしてください
・専門用語は使わず、見出しは日本語にしてくださいこのたたき台を渡したら、出てきた画面を見ながら「棒グラフを横向きにして」「使いすぎの費目を赤く」のように、ふつうの会話で直していきます。最初から完璧を狙わず、対話で近づけていくのがVibe Codingの本来の進め方です。
Vibe Codingを使えるツールはいくつもあります。AIアシスタントに直接頼む方法のほか、ブラウザだけで動くものや、エディタに組み込むものもあります。使いやすいものから始めれば十分です。Googleも自然言語のプロンプトでアプリを即座に構築する方法としてバイブコーディングを解説しており、入り口のハードルはどんどん下がっています。
ステップ3。出てきた画面の「数字が合っているか」を人が確認する
ここが、この記事でいちばんお伝えしたい工程です。AIは画面を作るのは得意ですが、「その数字が正しいかどうか」の最終判断は人がやる必要があります。生成された画面を、次の観点で必ず検算してください。
- 合計が合うか：電卓やExcelで出した実績合計と、画面の数字が一致するか
- 消化率の計算：「実績÷予算」で出した％と画面の％が同じか
- 抜け漏れ：入れたはずの支出が、画面に反映されているか
- 桁ズレ：12万円が1.2万円になっていないか（カンマや単位のミス）
1回だけ手計算で答え合わせをしておけば、その後は安心して使えます。AIの出力は一般に精度が高いものの、100％ではありません。最初の検算は「人がやるべき仕事」と割り切りましょう。
ステップ4。そのまま動く1ファイルを手元に持つ
イメージをつかんでもらうために、コピーすればそのままブラウザで開ける完結したサンプルを置いておきます。メモ帳などに貼り付けて「dashboard.html」という名前で保存し、ダブルクリックすればグラフが表示されます。データの部分（dataの行）を自社の数字に書き換えるだけで使えます。
<!-- 使い方：このまま dashboard.html として保存し、ダブルクリックで開く -->
<!-- インターネット接続が必要です（グラフ描画ライブラリChart.jsをCDNから読み込むため） -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>広報予算ダッシュボード</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: sans-serif; margin: 24px; color: #2b2b2b; }
.cards { display: flex; gap: 16px; flex-wrap: wrap; }
.card { background: #f5f3ef; border-radius: 12px; padding: 20px; flex: 1; min-width: 180px; }
.card .num { font-size: 28px; font-weight: bold; }
canvas { max-width: 640px; margin-top: 24px; }
</style>
</head>
<body>
<h1>広報予算ダッシュボード</h1>
<!-- ［ここを自社の数字に変更］年間予算と費目別データ -->
<script>
const yearlyBudget = 2300000; // 年間予算の合計
const data = [
{ item: "広告", budget: 1500000, actual: 1180000 },
{ item: "イベント", budget: 800000, actual: 720000 }
];
</script>
<div class="cards">
<div class="card"><div>予算消化率</div><div class="num" id="rate"></div></div>
<div class="card"><div>実績合計</div><div class="num" id="used"></div></div>
<div class="card"><div>残り予算</div><div class="num" id="left"></div></div>
</div>
<canvas id="chart"></canvas>
<script>
// 合計を計算
const usedTotal = data.reduce((s, d) => s + d.actual, 0);
const rate = Math.round(usedTotal / yearlyBudget * 100);
const yen = n => n.toLocaleString() + "円";
document.getElementById("rate").textContent = rate + "%";
document.getElementById("used").textContent = yen(usedTotal);
document.getElementById("left").textContent = yen(yearlyBudget - usedTotal);
// 費目別の予算 vs 実績を棒グラフに
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: data.map(d => d.item),
datasets: [
{ label: "予算", data: data.map(d => d.budget) },
{ label: "実績", data: data.map(d => d.actual) }
]
},
options: { responsive: true, plugins: { title: { display: true, text: "費目別 予算と実績" } } }
});
</script>
</body>
</html>このコードは、ネット接続があれば追加のインストールなしで動きます。つまずきやすいのは、グラフが表示されないケースです。その多くは「ネットにつながっていない（ライブラリを読み込めない）」か「dataの書き方でカンマが抜けた」かのどちらかです。AIにこのファイルを丸ごと渡して「グラフが出ません、原因を教えて」と聞けば、たいてい直してくれます。
ステップ5。毎月の運用は「データの差し替え」だけ
完成後の運用はとても軽くなります。毎月やることは、上のdata部分の数字を最新に書き換えるだけです。Excelのように「数式が壊れた」「セルがズレた」という事故が起きにくいのが大きな利点です。Vibe Codingで社内向けの小さな業務アプリを作る発想は、Vibe Codingで社内限定アプリを自作する方法でも応用できます。
取り組むとどう変わるか。月次報告と予算判断が速くなる
自作ダッシュボードを回し始めると、効果は「報告の速さ」と「気づきの早さ」に表れます。いちばん大きいのは、予算の使いすぎに月の途中で気づけるようになることです。年度末に「もう予算がない」と慌てる事態を減らせます。
レポート作成の定型作業—月次の集計やグラフ化、コメントの下書き—は、もともとAIに任せやすい部分です。予算管理のダッシュボードも、こうした「報告の手間を減らす」発想の延長にあります。
成果を出している企業に共通するのは、派手なツールを入れることではなく、「毎月必ず見る数字」を決めて、それを軽い画面で見える化している点です。具体的な変化のイメージを挙げます。
- 報告準備：毎月Excelを開いて表を作り直していた作業が、数字の差し替えだけになる
- 会議の質：「今いくら使ったか」を探す時間が消え、「どこに寄せるか」の議論に時間を使える
- 判断の速さ：費目別の使いすぎが色で見えるので、月の途中で配分を組み替えられる
ただし、数値での効果は会社の規模や元の管理状態によって大きく変わります。「誰がやっても何時間削減できる」と断言はできません。確実に言えるのは、散らばった数字を1か所に集めて毎月同じ形で見る習慣ができると、予算の判断スピードは上がるということです。これはツールの性能というより、運用の仕組みがもたらす効果です。
よくある失敗と回避法。ダッシュボードが使われなくなる3パターン
現場でよく見かける失敗を、起きる状況・どうなるか・どう防ぐかのセットで紹介します。先に知っておくだけで、つまずきをかなり避けられます。
失敗1。指標を盛りすぎて、誰も見なくなる
「せっかく作るなら全部見たい」と、最初から10個も20個も指標を詰め込むパターンです。こうなると画面がごちゃつき、結局どこを見ればいいか分からなくなって、開かれなくなります。ダッシュボードが「作ること」自体の目的化で形だけになる典型です。防ぐには、最初は前述の3指標だけに絞ること。物足りなく感じても、まず3つで運用を回し、必要になってから足すほうが続きます。
失敗2。元データが汚いまま作って、数字を信用できなくなる
日付の形がバラバラ、費目名が揺れている、合計行が混ざっている。こうしたデータのままAIに渡すと、グラフがズレたり数字を取り違えたりします。一度でも「この数字、本当に合ってる？」と疑われると、ダッシュボードは使われなくなります。防ぐには、ステップ1のデータ整形を徹底すること。日付はYYYY-MM-DD、費目名は統一、空行と合計行は削除。地味ですが、ここがダッシュボードの信頼を支える土台です。
失敗3。「AIが全部やってくれる」と検算をサボる
AIの出力をそのまま信じて、検算せずに会議に出してしまうパターンです。AIの精度は高いものの100％ではないため、桁ズレや抜け漏れがそのまま報告に乗ると、信頼を一気に失います。防ぐには、最初の1回だけでいいので手計算で答え合わせをすること。合計と消化率が手元の計算と一致するかを確認すれば、その後は安心して使えます。「AIに任せる」と「丸投げ」は別物だと覚えておきましょう。
失敗4。作って満足し、運用ルールを決めない
完成した瞬間に満足して、「誰がいつ数字を更新するか」を決めないパターンです。更新が止まると、古い数字が表示されたまま放置され、やがて見られなくなります。防ぐには、月初めに更新担当と更新日を1つ決めておくこと。「毎月5日に広報の◯◯さんがデータを差し替える」と決めるだけで、ダッシュボードは生き続けます。
自作する前に知っておきたい現場の本音と落とし穴
ここからは、教科書には載りにくい現場の妥協点を率直にお伝えします。Vibe Codingは便利ですが、万能ではありません。任せていい範囲と、慎重になるべき範囲を分けて考えるのが大事です。
まずセキュリティです。Vibe Codingやノーコードは手軽な反面、会社が把握していないアプリが勝手に増え、情報漏えいのリスクにつながることがあります。とくに広報予算には取引先名や金額など見せたくない情報が含まれがちです。だから、作ったファイルは社内の限られた人だけが触れる場所に置き、誰でも見られるネット上に公開しないのが鉄則です。AIに予算データを渡すときも、個人情報や機密が混じっていないかを一度確認してください。何を入れてはいけないかはAIに入力してはいけない個人情報とAIセキュリティ社内ルールの作り方が参考になります。
次に内製と外注の線引きです。今回のような「自分たちだけで使う、軽い見える化ツール」は、Vibe Codingでの内製がとても向いています。一方で、複数部署が同時に使う、他システムと自動連携する、毎日大量のデータを処理する、といった本格的な仕組みになると、設計やセキュリティの専門知識が必要になります。ここを無理に自作で押し通すと、かえって時間も信頼も失います。
判断軸。「自分の部署だけで完結し、見られても困らない範囲」は内製でOK。「他部署や社外も巻き込む、止まると困る業務」はプロと一緒に設計するのが安全です。
もうひとつの本音として、ダッシュボードは作って終わりではないことも知っておいてください。本当の価値は、出た数字を見て「来月はどこに予算を寄せるか」を判断し、行動を変えるところにあります。きれいなグラフが出ても、見て終わりなら宝の持ち腐れです。だからこそ、指標を3つに絞って「毎月必ず見て、必ず1つ決める」運用にするのが、結局いちばん効きます。ツールはあくまで判断を助ける手段だと割り切りましょう。
よくある質問
プログラミングが全くできなくても本当に作れますか
作れます。Vibe CodingはAIに日本語で頼むやり方なので、コードを書く必要はありません。大事なのは「見たい数字を決めること」と「出てきた数字が合っているか確認すること」で、これは広報や総務の方が得意な作業です。コードの中身は分からなくて大丈夫です。
AIに予算のデータを渡しても大丈夫でしょうか
取引先名や個人名など、外に出したくない情報が含まれていないかを先に確認しましょう。心配な場合は、社名を伏せ字にする、金額と費目だけにするなど、必要最低限の情報に絞って渡すのが安全です。会社のAI利用ルールがあれば、それに沿って使ってください。
Excelで十分な気もしますが、わざわざ作る意味はありますか
毎月の報告で同じ表を作り直しているなら、作る意味は大きいです。ダッシュボードなら数字を差し替えるだけで自動でグラフが更新され、数式が壊れる事故も減ります。少人数で予算管理を回している現場ほど、準備時間の削減効果を感じやすいです。
作ったあと、毎月の更新は大変ではないですか
慣れれば数分です。やることは最新の数字を所定の場所に書き換えるだけで、グラフは自動で更新されます。月初めに「誰がいつ更新するか」を1つ決めておくと、止まらず続けられます。
ここまで読んで、進め方は分かったけれど自社のデータ整理やセキュリティまで含めると一人でやり切るのは不安、と感じた方もいるかもしれません。コレットラボのAI業務システム化支援では、Vibe Codingでの内製を「自分たちで作りたい」「プロに任せたい」のどちらにも合わせて伴走しています。まずは現状を整理するだけでも構いません。AI業務システム化の詳細はこちらから、お気軽にご相談ください。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
