結論：Gemini APIで、自社サイトにAIチャットを入れられる
Webサイトに訪問者と会話するAIチャットボットを設置すると、24時間自動で問い合わせ対応ができるようになります。この記事では、Google Gemini APIを使ったAIチャットの実装方法を、実際にプロダクション運用している経験をもとに解説します。
<!-- [画像: チャットボットのUI例のスクショ] -->
AIチャットボットの仕組み
AIチャットボットは以下の流れで動きます。
1. 訪問者がチャット欄にメッセージを入力
2. サーバーがメッセージを受け取り、Gemini APIに送信
3. Gemini APIがシステムプロンプト（会社情報・応対方針）をもとに回答を生成
4. 回答をストリーミングで画面に表示
ポイントは、**APIキーはサーバー側で管理する**こと。クライアント（ブラウザ）に直接APIキーを持たせると漏洩のリスクがあります。
実装に必要なもの
Gemini APIキー — Google AI Studioから取得（無料枠あり）
サーバーサイドの処理 — Next.js API Routes、Node.jsなど
チャットUI — React等で構築
Gemini APIの特徴
Gemini APIはGoogleが提供するAIモデルで、以下の点がWebサイト組み込みに向いています。
無料枠がある — 開発・テスト段階のコストを抑えられる
ストリーミング対応 — 文字が逐次表示され、待ち時間のストレスが少ない
日本語対応 — 日本語の質問に対して自然な回答が返る
マルチターン会話 — 会話の文脈を維持した応答ができる
システムプロンプトの設計が成果を決める
AIチャットの回答品質は、システムプロンプト（AIへの事前指示）の設計で大きく変わります。
含めるべき情報
会社情報 — 社名、所在地、連絡先
サービス内容 — 各プランの名前、価格、納期、内容
よくある質問 — 実際に聞かれる質問とその回答
応対ルール — 答えられない質問への対処、トーン
応対ルールの例
```
•ですます調で統一
•専門用語は具体的な動作で説明する
•答えられない質問は「担当者にご相談ください」と誘導
•1回の応答は300字以内
```
実際に運用していると、「答えられない質問が来たとき」の対処が重要です。放置すると的外れな回答をしてしまうので、「わからないときは正直に伝えて、問い合わせフォームへ誘導する」ルールを明記しておきます。
ストリーミング応答の実装
ユーザー体験として、回答が一気に表示されるより、文字が逐次表示（ストリーミング）される方が待ち時間のストレスが少ないです。
Gemini APIはServer-Sent Events（SSE）でストリーミング応答に対応しています。サーバー側でAPIからのストリームを受け取り、そのままクライアントに流す設計にします。
<!-- [画像: ストリーミング応答のフロー図] -->
運用で学んだこと
1. 学習データは公開後も継続的に更新する
「こういう質問が来るだろう」と想定して作った学習データでは、実際の質問の50%程度しかカバーできませんでした。公開後に実際の会話ログを見て、週1回のペースでFAQを追加しています。
2. 応答速度はユーザー満足度に直結する
Gemini 2.0 Flashモデルを使用することで、応答開始まで1〜2秒に抑えています。応答が3秒以上かかると離脱率が上がる傾向があります。
3. コストは月数千円程度
一般的な企業サイトの問い合わせ量（1日10〜30件程度）であれば、API利用料は月2,000〜5,000円程度です。
よくある質問
Q. AIチャットボットの導入費用はどのくらいですか？
Craftでは、既存サイトへの後付けが18万円〜、サイト制作とセットの場合は80万円〜で提供しています。
Q. どんなサイトにも設置できますか？
タグを1行埋め込む形式なので、WordPress、Wix、静的HTMLサイトなど、ほとんどのサイトに対応できます。
Q. チャットボットが変な回答をする心配は？
システムプロンプトで応対範囲を限定し、答えられない質問は「担当者にお繋ぎします」と案内する設計にしています。
まとめ
Gemini APIを使えば、中小企業のサイトにも実用的なAIチャットボットを導入できます。このサイト（webstudio-craft.com）の右下で動いているチャットも同じ技術で実装しています。実際の動作をぜひお試しください。
導入をご検討の方は、[お問い合わせフォーム](/contact)からお気軽にご相談ください。[AIチャットボット搭載サイト](/services/ai-chatbot-site)のプラン詳細もご覧いただけます。