問い合わせフォームにAIを導入したら何が変わったか？導入前後レポート

「対応が追いつかない」「同じ質問ばかり来る」そんな悩みを抱えるWeb担当者へ。AIチャットボット導入前後の変化を実案件データとコード例を交えてレポートします。

こんな悩みはありませんか？

「問い合わせフォームから毎日同じような質問が届いて、その返信だけで午前中が終わってしまう」 「営業時間外に来た問い合わせを翌朝まとめて処理していたら、お客様が他社に流れてしまった」 「フォームを設置しているのに、実際に使われているのかもよく分からない」

神奈川を拠点にWebサイト制作を手がけて20年以上。この種の相談は、業種を問わずコンスタントに届きます。特に中小企業のWeb担当者は1人〜数人体制のことも多く、問い合わせ対応に人的リソースを取られるのは深刻な問題です。

今回は、実際にクライアントのサイトへAIチャットボットを組み込んだ案件をもとに、導入前後で何がどう変わったのかを具体的な数値と実装の観点からレポートします。「うちには関係ない」と思っている方こそ、最後まで読んでみてください。

なぜ「同じ質問が繰り返される」のか？背景を整理する

問い合わせフォームに集中する質問の多くは、**「サイト内に答えが書いてあるにもかかわらず見つけられない」**というユーザー行動に起因しています。FAQページを設けていても、ナビゲーションが分かりにくければ誰も辿り着きません。

また、ユーザー心理として「フォームに書けば確実に返事が来る」という安心感が、検索行動よりも問い合わせを優先させます。これはUXの問題であり、FAQを増やすだけでは根本解決になりません。

さらに、問い合わせへの返信までのリードタイムが長くなるほど、顧客の検討熱が冷めるという実態があります。BtoCのECサイトや予約系サービスでは、問い合わせから返信まで3時間以上かかると離脱率が大幅に上昇するというデータもあります。

「問い合わせ対応が追いつかない」という問題の裏側には、機会損失という静かなコストが発生しているわけです。AIチャットボットはこの構造的な課題を正面から解決する手段として有効です。

実案件レポート：神奈川県内 建材メーカーへの導入事例

導入前の状況

神奈川県内に拠点を置く建材メーカーのWebサイトを長年管理しているクライアントからの相談でした。

• 月間問い合わせ数：平均120〜140件
• そのうち「同じ質問」の割合：担当者調べで約60〜70%
• 平均返信時間：翌営業日（最大24時間以上）
• 問題点：1名の担当者が電話・メール・フォーム対応を兼任しており、繁忙期は対応しきれないケースが発生していた

担当者から「よく来る質問を自動で処理できないか」という相談を受け、まずは既存のWordPressサイトにAIチャットボットを後付けで組み込む形を提案しました。

選定したアプローチ

完全カスタムのAI開発はコストが見合わないため、OpenAI APIと既存の問い合わせデータを組み合わせたRAG（Retrieval-Augmented Generation）方式を採用。具体的には以下の構成にしました。

flowchart TD
    A[ユーザーがフォームに質問入力] --> B[フロントエンドがAPIへ送信]
    B --> C{類似質問を社内FAQデータから検索}
    C -->|一致度が高い| D[FAQの回答をAIが整形して返答]
    C -->|一致度が低い| E[AIが一般回答を生成]
    D --> F[ユーザーへ即時表示]
    E --> F
    F --> G{ユーザーが解決したか？}
    G -->|解決した| H[会話終了]
    G -->|解決しなかった| I[有人対応フォームへ誘導]

WordPressのテーマには最小限のJavaScriptでチャットUIを組み込み、バックエンドはLaravelで構築したAPIサーバーを経由してOpenAI APIを呼び出す設計にしました。

実装の核心部分：LaravelによるAPIサーバーの設計

ここからは実装サイドの話をします。バックエンドの要となるのは、ユーザーの質問に対してFAQドキュメントを参照しながら回答を生成するコントローラーです。

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Services\FaqSearchService;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ChatbotController extends Controller
{
    public function __construct(
        private readonly FaqSearchService $faqSearch
    ) {}

    public function respond(Request $request)
    {
        $request->validate([
            'message' => 'required|string|max:500',
        ]);

        $userMessage = $request->input('message');

        // FAQデータから類似質問を検索（コサイン類似度ベース）
        $relatedFaqs = $this->faqSearch->findSimilar($userMessage, limit: 3);

        // システムプロンプト：FAQをコンテキストとして渡す
        $systemPrompt = $this->buildSystemPrompt($relatedFaqs);

        $response = Http::withToken(config('services.openai.key'))
            ->post('https://api.openai.com/v1/chat/completions', [
                'model' => 'gpt-4o-mini',
                'messages' => [
                    ['role' => 'system', 'content' => $systemPrompt],
                    ['role' => 'user',   'content' => $userMessage],
                ],
                'max_tokens' => 400,
                'temperature' => 0.3, // 回答のブレを抑えるため低めに設定
            ]);

        if ($response->failed()) {
            return response()->json(['error' => 'AI応答の取得に失敗しました。'], 500);
        }

        $answer = $response->json('choices.0.message.content');

        return response()->json([
            'answer'        => $answer,
            'used_faq_ids'  => collect($relatedFaqs)->pluck('id'),
        ]);
    }

    private function buildSystemPrompt(array $faqs): string
    {
        $context = collect($faqs)->map(fn($faq) =>
            "Q: {$faq['question']}\nA: {$faq['answer']}"
        )->implode("\n\n");

        return <<<PROMPT
あなたは「株式会社〇〇建材」の公式サポートアシスタントです。
以下の社内FAQを参考に、お客様の質問へ丁寧かつ簡潔に回答してください。
FAQに回答が見つからない場合は「詳しくは担当者へお問い合わせください」と伝え、
推測や不確かな情報を提供しないでください。

--- 参考FAQ ---
{$context}
--- ここまで ---
PROMPT;
    }
}

// WordPress テーマの functions.php で wp_enqueue_script() 後に読み込まれる想定
const ChatWidget = {
  init() {
    this.form    = document.getElementById('ai-chat-form');
    this.input   = document.getElementById('ai-chat-input');
    this.log     = document.getElementById('ai-chat-log');
    this.spinner = document.getElementById('ai-chat-spinner');

    this.form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.send();
    });
  },

  async send() {
    const message = this.input.value.trim();
    if (!message) return;

    this.appendMessage('user', message);
    this.input.value = '';
    this.setLoading(true);

    try {
      const res = await fetch('/api/chatbot/respond', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ message }),
      });

      if (!res.ok) throw new Error('Network error');
      const data = await res.json();
      this.appendMessage('bot', data.answer);
    } catch {
      this.appendMessage('bot', 'エラーが発生しました。しばらくしてから再度お試しください。');
    } finally {
      this.setLoading(false);
    }
  },

  appendMessage(role, text) {
    const el = document.createElement('div');
    el.className = `chat-message chat-message--${role}`;
    el.textContent = text;
    this.log.appendChild(el);
    this.log.scrollTop = this.log.scrollHeight;
  },

  setLoading(state) {
    this.spinner.style.display = state ? 'block' : 'none';
    this.form.querySelector('button').disabled = state;
  },
};

document.addEventListener('DOMContentLoaded', () => ChatWidget.init());

temperature を 0.3 に設定しているのがポイントです。問い合わせ対応AIに創造性は不要で、むしろ安定した・ブレない回答が求められます。ここを 0.7 以上にすると、毎回ニュアンスが変わって担当者が確認しきれなくなる、という失敗を初期検証で経験しました。

導入後3ヶ月の変化：数字で見る成果

3ヶ月後の主な変化をまとめます。

• 有人対応の問い合わせ数：月135件 → 52件（61%削減）
• 平均返信時間：翌営業日 → AI回答は即時、有人が必要なケースも2〜3時間以内に短縮
• 担当者の体感コメント：「繁忙期でも問い合わせに追われることがなくなった。本来やりたかった営業準備の時間が取れている」
• API費用：月あたり約3,000〜5,000円（gpt-4o-mini利用、月間1,000リクエスト前後）

API費用がこの水準に抑えられているのは、gpt-4o-mini を選択したことと、FAQデータによる絞り込みでトークン数を圧縮していることが効いています。

よくある失敗パターンと、その回避策

同様の導入を複数案件で経験してきた中で、陥りがちなポイントをまとめます。

まとめと、次に取るべきステップ

AIチャットボットの導入は「大企業が使う高度なシステム」ではなく、中小企業が今すぐ手を伸ばせる実用的なツールになっています。月数千円のAPI費用で、担当者の稼働を半分以下に抑えることも、現実として達成可能です。

重要なのは技術の選定よりも、FAQデータの整備 → 段階的なリリース → ログによる改善サイクルを回し続けることです。AIは「入れれば終わり」ではなく、育てていくシステムです。

導入を検討するなら、以下のチェックリストを出発点にしてみてください。

「自社のサイトでも同じことができるのか試してみたい」「今のWordPressサイトに後付けで組み込めるか判断してほしい」という場合は、ぜひFivenine Designまでご相談ください。現状の問い合わせデータを見せていただくだけで、どこから手をつけるべきか具体的にアドバイスできます。