【予算2000円！】金欠副業者が自分のWebサイトにAI問い合わせボット機能を実装した話【Google AI Studio】
こんにちは、T1です🐶
ちょいと久しぶりに技術記事のようなものを公開します！
１．AI問い合わせボット、カッコいいよね
さて、私は本業でサラリーマンをやりつつ、副業（ほぼ趣味レベル？）としてゲーム制作や、ツール制作などをしております。
で、それら副業の制作物の情報については、自分で作ったWebサイトでまとめて公開しております。↓が実際のWebサイトです。
ゲームやツールをコツコツ作って公開していると、Webサイト上のコンテンツや活動記録も増えていきます。
活動を開始して半年ほどですが、気づけばWebサイトには情報が随分と積み重なってきました。ゲームは制作中を含めて8つくらい、ツールや小説も3つほど、実況ガイドラインやお仕事募集のページも作成しました。
そうなると、「ユーザーが欲しい情報に、もっと手軽にアクセスできるようにしたい」という課題が出てきますよね。
(ま、そこまで大量のアクセスが来ているわけではないので、ほんとにそんな課題があるのか、というツッコミはありますが・・・。ここは本題に入るまでの前振りだとして、聞き逃してください！！！）
で。
最近、いろんな企業のWebサイトの右下に、ちょこんとAI問い合わせボットが居座っているのを見かけませんか？
「あれ、いいな～。自分のWebサイトにも実装されてると、「モダン」で「最先端」な感じがして、カッコええやん！」
と、AI問い合わせボットの実装に手を付けてみたのです。
で、できたのが、こちらです！それっぽいでしょ！
２．どんなふうに開発する？
じゃあ、どんなふうに開発しましょうか。
そもそも、世間にはすでにいろいろな「AI問い合わせボット」を実現するためのサービスがあります。
が、しかし。
これらは早々に検討から除外しました。そりゃ当然ですけど、ちゃんとプロダクトとして作られているものは、高価なんです。(調べてみてください。)あってもなくても同じような機能に、月額ウン万円もかけるわけにはいきません！
それに、自分で作った方が面白そうだし！
ってことで、Google AI Studio(※)を利用して、自分で開発することにしました。
具体的には、問い合わせボット向けに入力されたデータをもとに、GoogleのAIエンジンに回答をリクエストする、という機能を実装していくことになります。
「自分で開発」といっても、実務は優秀なAIコーディングエージェント（ AntigravityCLI）に任せて、自分は指示を出すだけのバイブコーディングでサクッと形にしています。
※Google AI Studioとは？
：Googleが提供する、最先端のAI（Geminiなど）をWebブラウザ上で手軽にテストしたり、自分のアプリに組み込むための設定を行ったりできる開発者向けのプラットフォームです。今回はこれを使って、GeminiをWebサイト上から呼び出す機能を実装していきました。
※バイブコーディングとは？
：コードを手動で書くのではなく、「こんな機能を作って」「このエラーを直して」と、ざっくりとした概念を伝えてAIに丸投げする開発スタイルのことです。私はこれしかできません笑
結果、「予算2000円ポッキリ（しかも実質ほぼ無料）」で、自分が公開しているコンテンツの情報をリンク付きで回答し、質疑内容が自分にDiscordで通知される、という、私だけのAIチャットボット環境が完成しました。
今回は、限られた予算で、いかに「それっぽい機能」を実現したか、設計と開発のプロセスを共有したいと思います。
詳しくはこの後順番に説明しますが、「予算2000円」を実現するために、3つの重要な設計を組み込んでいます。
① 前提知識量の切り詰めによる、処理1回あたりのトークン消費量低減
② 無料枠APIと有料枠APIを組み合わせることによる、課金発生回数の最小化
③ 事前課金額を上限とする設定と、連続アクセスの防止による費用爆発回避
では、それぞれ解説していきます！
３．今回のシステム構成は、こちら！
今回作った仕組みは非常にシンプルなものです。すでにWebサイト自体はNext.jsを利用して制作していたので、バックエンドとしてNext.jsのAPI Routes機能を利用する構成にしました。
ブラウザから直接APIを叩くとGoogle AI StudioのAPIキーが露出して悪用されるリスクがあるため、一度自前のサーバー側（Next.js）でリクエストを受け取り、安全に環境変数からキーを呼び出してGeminiへと繋いでいます。
なお、このあたりの実装やDiscordへのWebhook連携のコードは、AntigravityCLIに指示を出してものの数時間で形にできました！
４．予算2000円に抑えるための「3つのケチケチ設計」
ここからは、「予算を抑える、あるいは実質無料枠で運用する」ために行った3つの工夫を解説します！
① 前提知識（コンテキスト）の軽量化
AIに自分のサイトの情報を答えさせるには、システムプロンプト(※)にサイトのデータを読み込ませる必要があります。しかし、Webサイトの全テキストやnoteの全記事情報をそのまま流し込むと、1リクエストあたりのトークン(※)消費量が跳ね上がり、その分費用も大きくかかってしまいます。
そのため、今回は情報を以下のように要約・構造化したJSON風のテキストにしてプロンプトに仕込みました。
• 各コンテンツのタイトル、ジャンル、概要
• 配信ガイドラインの内容
• 該当ページへのURLリンク集
• 私のnoteのトップページへのリンク
必要な情報とURLだけをミニマルに凝縮したことで、1往復あたりのトークン消費量を極限まで削っています。具体的には、もともと5～6万トークンだったコンテクストデータを、7,000トークンほどにまで軽量化しています！
② 意地でも無料枠を使い切る「3段階のフォールバック戦略」
Google AI Studioには、1分あたりのリクエスト数等に制限があるものの、強力な「無料枠」が用意されています。今回はこの無料枠を限界までしゃぶり尽くすため、無料枠用と有料枠用で2つのAPIキー(※)を発行し、バックエンド側で以下のフォールバック処理(※)を組んでいます。
1. 第0段階(デフォルト設定)： まずは「無料枠のAPIキー」で、高速・高性能なGemini 3.5にアクセスを試みる。でも、Gemini 3.5は、まだお試し解放中みたいで、世界的なリクエスト過多で、拒絶されちゃうことも多いんです。そうなったら、フォールバックが機能します！
2. 第1段階フォールバック： もし無料枠の制限等でリジェクトされたら、同じく「無料枠」のまま、より制限の緩いGemini 3.1に切り替える。
3. 第2・3段階のフォールバック： それでもダメだった場合、初めて「有料枠のAPIキー」に切り替え、同様にGemini 3.5 ・ Gemini 3.1へとアクセスを逃がす。
ちなみに、これだけフォールバックしてもダメだった場合は「ごめんね！」と謝る設定にしています！(激レアな反応)
※システムプロンプトとは？
：AIに最初から読ませておく「事前の指示書」のことです。「あなたはT1のサイトの案内役です」「知識にないことを聞かれたら嘘をつかず分からないということ」といった制約条件などを事前に書き込んでおきます。
※トークンとは？
：AIが文章を認識・処理する際の「文字や単語の塊」の単位です。日本語だと1〜2文字で「1トークン」としてカウントされるのが一般的。AIの利用料金は基本的に「何トークン消費したか」で決まるため、入力する文字数を節約することがそのままお金の節約に直結するんです！
※APIキーとは？
：外部のサービス（今回はGoogleのAI機能）を、自分のプログラムから呼び出して利用するための「身分証明書」兼「パスワード」のような文字列です。これが他人に漏れると勝手に使われてしまうため、バックエンドで厳重に管理する必要があります。
※フォールバックとは？
：システムで何らかのエラーや制限（アクセス超過など）が発生した際に、完全に処理をストップさせるのではなく、あらかじめ用意しておいた別の代替手段に自動で切り替えて処理を継続させる仕組みのことです。
この執念のルーティングのおかげで、普段のアクセス規模なら有料枠まで処理が回ってこず、日々の運用コストを実質0円に抑えることができています。
ただ、フォールバックを繰り返していると、返事が返ってくるまでにそこそこの時間がかかることがあります。(0段階で試してみて、ダメなら・・・と繰り返すので当然ですね)
ま、ここは許容するしかありません。今回はただのAIチャット。レスポンスの速さが求められる業務システムではないのですから・・・。
③ プリペイド上限とフロント側での連打防止
万が一のバグや連続アクセスによる高額請求を防ぐため、以下の安全策を入れています。
• Google AI Studioのプリペイド課金: 現在、Google AI Studioでは前払い機能が有効になっています！あらかじめアカウントに「2000円」だけチャージしておきます。これを超えたらAPIが自動停止するので、物理的に2000円以上の請求は来ません。
※ちなみに、最低入金額が2000円ですので、2000円が今回の構成の「最低必要額」となるのです！
• フロントエンド側の簡易レートリミット: LocalStorageを使って「1ユーザー1日10回まで」という制限をかけています。（ブラウザの設定でクッキーとサイトデータを削除した場合は突破できてしまいますが・・・笑）。
※なお、悪意と技術がある人による連続リクエストで2000円が溶けたら、泣きながらそのネタでnote記事を書きます！！！
５．Discordの通知機能で簡易的なログ管理！
AIボットの裏側に仕込んだDiscordへのWebhook(※)通知ですが、これが運用面で非常に役立っています。
もともと、どんな質問が来ていてどんな回答がされているかを蓄積・分析したいと思っていて、その方法を考えていました。
正攻法でやるなら「専用のDBに質問・回答を都度入れていく」ですが、個人事業の範疇なので、すべてのデータをDBに保持しておくほどではないです。
※別に、監査法人の監査を受けるわけじゃあるまいし・・・笑
ということで、Discordへの投稿機能で、
・ユーザーがどんな質問をして、AIがどう返したか
・その応答で、どのキーが利用され、どれだけトークンが消費されたか
を確認できる機能を実装しました。
AIがマズい回答(嘘や誇張)を言っていないか、Webサイト来訪者がどんなコンテンツに興味を持ってくれているのか、が重要なので、現状はこれで十分でしょう！
※Webhookとは？
：何らかのイベントが発生したときに、指定した場所に自動でデータを送りつける仕組みです。今回は「AIが回答する」イベントを検知して、「Discordへ通知を飛ばす」ために使っています。
６．まとめ・最後に
と、いうことで。
大がかりなチャットボットサービスを契約しなくても、「Google AI StudioのAPI ＋ 自分の使い慣れたWebフレームワーク」の組み合わせだけで、お小遣い程度の予算での実用的な問い合わせボット実装ができました。
最新のプリペイド仕様やフォールバック機能を活用すれば、低リスクで面白い機能が作れます。
サイトのコンテンツや活動記録が増えてきた個人開発者やゲーム制作者の方は、AIチャットボット、ぜひ試してみてはいかがでしょうか？
実装してみたい、また、もっとセキュアにしたうえで作ってみてほしい！などあれば、ぜひご相談ください！質問箱もやってます！
