AIで作ったサイトにお問い合わせフォームとAIチャットを付ける方法【いたずら・高額請求の対策も】

静的なサイト（Astroなどで作ったサイト）は、表示が速くて安全な反面、そのままではお問い合わせフォームのメール送信のような「サーバーでの処理」ができません。そこで、当社のサイトでは、Firebaseの Cloud Functions を使って、お問い合わせフォームと、訪問者の質問に答えるAIチャットを付けました。

この記事では、その仕組みと、いたずらや大量のアクセスで高額な請求が来ないようにする対策を紹介します。

サイトに付けたAIチャット

参考記事

AIでサイトを作る方法【初心者向けの作り方を、自社サイト制作の実例で解説】
AIで作ったサイトをGitHubとFirebaseで公開する方法【自動更新・独自ドメイン】

仕組みの全体像

機能	流れ
お問い合わせフォーム	フォームの送信 → Cloud Functions → メール送信サービス（Resend）で、社内への通知と、相手への自動返信メールを送る
AIチャット	質問の送信 → Cloud Functions → 生成AIのAPIに、会社の情報と一緒に質問を渡す → 回答を画面に表示

ブラウザから直接メール送信サービスやAIを呼ばずに、必ずCloud Functionsを通すのがポイントです。こうすることで、APIキー（サービスを使うための鍵）をブラウザに出さずに済み、回数制限などの対策もまとめて入れられます。

お問い合わせフォーム

フォームから送られた内容は、Cloud Functionsで次のように処理しています。

入力内容をチェックする（必須項目、メールアドレスの形式、文字数の上限）
回数制限を確認する（後述）
データベース（Firestore）に記録する
社内の担当者に、通知メールを送る
送ってくれた人に、自動返信メールを送る

メールの送信には Resend というサービスを使っています。自社のドメイン（@bistro.business）から送るには、DNSに送信元を証明する設定（SPFやDKIM）を追加する必要があります。この設定も、管理画面のスクリーンショットをAIに見せながら進めました。

AIチャット

AIチャットは、訪問者の質問に、サイトに載っている会社の情報だけをもとに答える案内役です。

会社の情報・サービス・料金・よくある質問などを1つのファイル（knowledge.md）にまとめておく
質問が来たら、その情報と一緒にAIに渡し、「この情報だけをもとに答える」「わからないことは、お問い合わせフォームを案内する」と指示する
費用の見積もりや、載っていない料金など、答えてはいけないことも指示しておく

会社の情報を更新したら、このファイルを直すだけで、AIチャットの答えも変わります。AIのモデルは、応答が速く、費用の安い小型のモデルを使っています。

APIキーは「Secret Manager」に置く

メール送信サービスやAIのAPIキーは、プログラムの中にもGitHubにも書きません。Firebase（Google Cloud）の Secret Manager という、鍵を安全に保管する場所に登録して、Cloud Functionsからだけ読めるようにしています。

firebase functions:secrets:set RESEND_API_KEY
firebase functions:secrets:set ANTHROPIC_API_KEY

コマンドを実行すると、キーの入力を求められるので、そこに貼り付けます。AIとの会話にキーを貼り付けないことも大切です。

いたずら・高額請求の対策

フォームやAIチャットは、悪意のある人やプログラム（ボット）に、何百回、何千回と送信されるおそれがあります。とくにAIチャットは、質問の数だけAIの利用料がかかるので、対策をしないと思わぬ高額請求につながります。当社のサイトでは、次の対策を重ねています。

対策1：回数制限

対象	制限の例
AIチャット（同じ人）	1分に5回まで、1日30回まで
AIチャット（サイト全体）	1日500回まで
お問い合わせ（同じ人）	10分に3回まで、1日10回まで
お問い合わせ（サイト全体）	1日100回まで

「同じ人」は、アクセス元のIPアドレスで判断しています（IPアドレスはそのまま保存せず、暗号化した値で記録）。サイト全体の上限があるので、どんなにアクセスされても、1日のAIの利用料には上限がある状態になります。回数の記録は、一定時間がたつと自動で消える設定（FirestoreのTTL）にしています。

対策2：ボット対策

見えない入力欄：人には見えない入力欄を置き、そこに入力がある送信はボットとみなして処理しない
送信までの時間：ページを開いてから3秒未満で送信されたものは、人ではないとみなす
送信元のチェック：自社のサイト以外のページからの送信は受け付けない
App Check：Firebaseの機能で、「本当に自社のサイトから送られたか」を確かめる仕組みも組み込み、必要に応じて有効にできるようにしている（reCAPTCHAの仕組みを利用）

対策3：処理の数の上限

Cloud Functionsは、アクセスが増えると自動で処理する数（インスタンス）を増やします。当社では同時に動く数の上限を3つに決めて、急にアクセスが集中しても費用が膨らまないようにしています。

対策4：予算アラート

最後の安全網として、Google Cloudの「予算とアラート」で、月の予算を超えそうなときにメールが届くようにしています。AIのサービス側の管理画面でも、月の利用上限を設定しておくと安心です。

計測もしておく

フォームの送信やAIチャットの利用は、Googleタグマネージャー経由でGA4に送っています。

お問い合わせの送信完了：contact_submit
AIチャットへの質問：質問されたことをイベントとして記録

AIチャットでどんな質問が多いかがわかると、サイトにどんな情報を足すべきかのヒントにもなります。

まとめ

静的なサイトでも、Cloud Functionsを使えばフォームやAIチャットを付けられる
APIキーはSecret Managerに置き、ブラウザ・GitHub・AIとの会話には出さない
AIチャットは、会社の情報をまとめたファイルをもとに答えさせる
回数制限・ボット対策・処理の数の上限・予算アラートを重ねて、高額請求を防ぐ
送信やチャットの利用は計測して、サイトの改善に活かす

フォームとAIチャットは、サイトを「見るだけ」から「相談できる」場所に変えてくれる機能です。次の記事では、作ったサイトを検索エンジンやAIに見つけてもらうためのSEO・AIO対策を紹介します。