これからはマーケターもVibe Codingする時代！家計支出分析QA開発の裏側
こんにちは。本間 充 (Mike Homma) です。皆さんは「Vibe Coding（バイブコーディング）」という新しい概念をご存知でしょうか。
これは、プログラミング言語を一行も書くことなく、AIと自然言語で対話しながらシステムを作り上げていく開発スタイルのことです。エンジニアではない方でも、アイデアさえあれば形にできる時代がやってきました。
今回、私はこのVibe Codingを駆使して、「家計支出分析データ」に普通の言葉で質問できるAIシステムを開発しました。この記事では、私がどのような指示を出し、AIがどう動いて完成に至ったのか、その全貌を包み隠さずお伝えします。
私が開発した「家計支出分析QAシステム」とは
今回開発したのは、総務省の家計調査データ（約490品目×4地域×2000年からの毎月の金額）をベースにしたQAシステムです。ユーザーが普通の言葉で質問を投げかけると、該当するデータと説明文を的確に返してくれます。
たとえば、「最近プロテインの消費はどう？」とデータにない商品を聞かれても、用途が近い「栄養剤」や「スポーツドリンク」のデータを提示して解説します。このシステムは、以下のURLから実際に触っていただけます。
私がVSCode（Claude）にお願いした「最初の一言」
開発にあたり、私が最初にVSCodeの拡張機能（Claude）に投げかけた指示は、たった1回の文章でした。具体的には次のような内容を伝えました。
「家計支出分析のデータに、ふつうの言葉で質問できるようにしてほしい。答えは該当するデータと説明文の両方で出してほしい。データにない商品を聞かれたら、近いデータを示してそこから何が言えるかを説明してほしい」
「誰でも使える公開デモにしてほしい。使いすぎを防ぐ制限は、以前作った別のデモと同じ考え方で。マーケターが使いやすいように、サンプルの質問と『穴うめ』で質問を作れる仕組みを入れてほしい」
「同じ日に何度も使う人にはメールアドレスを入力してもらい、メールマガジンの名簿に自動で追加してほしい。インターネット上に公開するところまでやってほしい」
この要望を伝えただけで、AIは自律的に考え、システムエンジニアやデザイナーのように開発をスタートさせました。
VSCode with Claudeが実行した6つの驚異的プロセス
ここからは、私の指示を受けたAIがどのように動いたのかを詳しく解説します。これこそが、マーケターのVibe Codingの真骨頂とも言えるプロセスです。
1. 既存の仕組みを調べる（作る前の下調べ）
AIはまず、私が過去に作成したデモのコードを自ら読みに行きました。使いすぎを防ぐための「1人あたりの回数制限」や「1日のAI利用上限」の考え方を理解し、新しいシステムに流用することを選択したのです。
さらに、膨大な家計支出分析データの構造をしっかりと確認しました。メール名簿に追加する仕組みについても、以前別のサービス用に作ったコードを見つけ出し、効率的に使い回す判断を下しています。
2. ハルシネーションを防ぐ緻密なシステム設計
AIがもっともらしいウソの数字を作ってしまう「ハルシネーション」を防ぐため、AIの役割を明確に2つに限定しました。1つ目は質問から使うデータを決めること、2つ目は計算済みの数字を受け取って説明文を書くことです。
数字の計算自体はAIにさせず、プログラムで厳密に行う設計にしました。さらに、説明文の数字が実際のデータと合っているかを自動でチェックし、結果を画面に出す機能まで実装しています。
説明文はマーケター向けに最適化され、「答え」「データからわかること」「マーケティングへのヒント」「注意点」の4つに分けて出力されます。大きな分類ごとの合計データも作成し、幅広い質問に対応できるようにしました。
3. マーケター目線で作られた使いやすい画面
ユーザーインターフェースもAIが工夫を凝らしました。通常の質問欄だけでなく、クリックするだけで質問できる「サンプル質問」のボタンを設置し、季節の販促やトレンドなどを簡単に調べられるようにしています。
また、7つの型から選んで「穴うめで質問を作る」画期的な機能も作成しました。品目や地域を選ぶだけで質問文が完成し、「目的」を入力するとその意図が説明文に反映される親切な仕様です。
グラフや表の表示、説明文のコピー機能、質問をURLで共有する機能も完備しています。スマートフォンでも見やすいレスポンシブデザインに対応し、ダークモードまで取り入れる徹底ぶりです。
4. 利用制限とリード獲得（メルマガ登録）の構築
システムを安定して運用するため、1人あたり1分に4回・1日に30回まで、全員の合計で1日100回までというAIの利用制限を設けました。同じ質問への回答は保存して再利用し、AIのAPI利用料を抑える工夫も施されています。
開発途中で、私から「2回目で登録を求めるのは早い。5回目からにして」と仕様変更を依頼すると、AIは即座に対応しました。同じ日の5回目のアクセスから、名前とメールアドレスの登録を求める画面が表示されます。
登録された情報は自動でメルマガ名簿に追加されますが、もし通信エラーなどで送れなかった場合はデータを保存しておき、1時間ごとに送り直して取りこぼしを防ぐ強固な仕組みも構築しました。
5. AI自身によるテストと自己修正
最も驚くべきは、AIが完成したシステムを自分でテストし、バグを見つけて修正したことです。様々な質問を実際に投げかけ、ブラウザで画面を撮影して見た目の確認まで行っています。
「グラフの目盛りに品目名ではなく番号が出ている」「地域比較で『全国』が含まれていない」「サウナに対して、文字が似ているだけの『うなぎのかば焼き』を選んでしまう」といった問題をAI自身が発見しました。
さらに、数字のチェック機能において「15.0%」と「15%」を違う数字として判定してしまう細かいエラーも、すべて自律的に修正し、精度の高いシステムへとブラッシュアップさせました。
6. インターネットへの公開と自動更新設定
最終的に、新しいURL（kakei-qa.mslabo.org）でインターネット上に公開する作業までAIが完遂しました。毎月新しいデータが更新されると、このデモにも自動で反映される運用設計になっています。
公開中のサイトで実際に質問を行い、正常に動くことの最終確認も行われました。使い方や設定、裏側の仕組みを説明書（README）にわかりやすくまとめるドキュメント作成まで完璧です。
この開発で私（人間）が行ったこと
ここまで読んでいただくと「人間は何もしていないのでは？」と思われるかもしれません。しかし、私が担当した重要な役割も確実に存在します。
まず、メルマガ登録用の合言葉など、AI（Claude）からはアクセスできない秘密情報を管理画面で調べて設定しました。また、完成したデモシステムをWixのページに埋め込んで公開する最終作業も行っています。
最も重要なのは、「何をしたいか」という目的を明確に伝え、「登録を求めるのは何回目からにするか」といったビジネス上の仕様判断を下したことです。AI時代において、この「意思決定」こそが人間の最大の役割となります。
なぜ「マーケターのVibe Coding」が重要なのか？
今回の開発を通して痛感したのは、「計算はプログラム、文章はAI」と役割を分担させたことが、信頼できる答えにつながっているという事実です。AIにすべてを丸投げするのではなく、強みを活かす設計が成功の鍵です。
これまでは、マーケターが独自のツールや分析システムを作りたいと思っても、エンジニアに依頼して多大な時間とコストをかける必要がありました。しかし今は違います。
マーケターのVibe Codingなら、プログラミング言語を知らなくても、頭の中にあるアイデアをそのままAIに伝えるだけで形になります。現場の課題を、自らの手で即座に解決できる時代が到来したのです。
まとめ：マーケターこそVibe Codingでアイデアを形にしよう
家計支出分析QAシステムの開発は、私にVibe Codingの圧倒的な可能性を教えてくれました。システム開発のハードルは極限まで下がり、今や「アイデア」と「判断力」を持つマーケターが勝つ時代です。
AIが自ら既存の仕組みを読み解き、テストを行い、間違いを修正して完成へと導いてくれる。この感動的な体験は、あなたのビジネスの強力な武器になるはずです。
社会人の皆様、そして全国のマーケターの皆様。これからはぜひ、「マーケターのVibe Coding」に挑戦してみてください。あなたの素晴らしいアイデアを、AIという最強のパートナーと共にいち早く形にしていきましょう。
コメント