2026年10月更新版｜公式資料を確認し、最新モデルの使い分け・導入判断・検収テンプレートを追加しました。

営業時間、駐車場、予約方法。お店のサイトに載っているのに、毎回同じ質問へ対応している。店舗向けチャットを作るなら、最初に決めたいのは「何を答えさせるか」と「分からないとき、どこへ案内するか」です。

この教材で作るもの

店舗が確認したFAQを最大30件登録し、AIが質問に合うFAQを選ぶ、小規模サイト向けのチャットです。回答文はAIに自由生成させず、登録した文章をそのまま表示します。登録外は公式窓口へ案内します。ただし、AIが誤ったFAQを選ぶ可能性は残るため、実際の質問で試験してから公開します。

無料部分はチャット画面の表示デモまで。有料部分には、PHPの中継処理、FAQ設定、回数制限、停止方法、ヒアリング・受入試験・見積・引き継ぎのテンプレートを本文に収録しました。外部の配布リンクがなくても、コードをコピーして設置できます。

向いている人と対応範囲

ファイルをサーバーへ置いた経験があり、小さな店舗サイトへFAQ案内を提案したい制作者向けです。PHPの設定・エラーを確認する作業があります。コードを読まずに設置したい方や、多店舗を一括管理する完成済みSaaSを探している方には向きません。

対応の前提はPHP 8.3以上、cURL・mbstring、HTTPS、外部APIへの通信、公開領域の外に設定ファイルを置けること、PHPが書き込める非公開ディレクトリ、ローカルファイルの排他制御です。単一サーバー・低アクセスの導入用実装です。分散サーバー、共有ファイルシステム、多店舗の請求管理には別設計が必要です。

予約確定、決済、診断、個別の法律相談、リアルタイム在庫・空席案内は扱いません。WordPressの記事自動生成やcron運用、自分専用の業務ツールへの改造も本版には含めません。今回は店舗FAQの設置から納品・運用までを完結させます。

費用を、サーバー代だけで比べない

商品代金にサーバー、ドメイン、API利用料、保守作業は含みません。APIの料金はモデル・入力・出力・利用回数に依存します。自作が既存サービスと同じ品質や費用になるとは限りません。初期制作費、月額実費、更新・障害対応の作業費を分けて見積もります。受注や収益を保証する教材ではありません。

無料部分｜まず画面だけを表示する

本記事末尾の「表示用コード」からchat-widget.jsとchat-widget.cssをUTF-8で保存し、サイトの公開ルートにあるaiフォルダーへ置きます。保存時に.txtが付いていないか確認してください。以下を表示したいページの本文末尾、body終了タグの前へ挿入します。

<link rel="stylesheet" href="/ai/chat-widget.css">
<script src="/ai/chat-widget.js"
 data-demo="true"
 data-endpoint="/ai/chat.php"
 data-name="店舗のご案内（デモ）"
 data-chips="営業時間は？|駐車場は？"></script>

WordPressはテーマ本体へ直接書く前にバックアップを取り、利用中のテーマ・挿入機能に合う方法でフッターへ追加します。テーマ更新で消える方法や、二重読み込みは避けてください。aiフォルダーが別の位置なら、読み込み先とdata-endpointをその位置へそろえます。

右下のバーが開く、質問が入力できる、表示デモの応答が出る、Escapeキーで閉じる、スマホで横にはみ出さないことを確認します。data-demo="true"の間は外部APIへ通信せず、課金もありません。表示デモの応答はAIの回答ではありません。

表示用コード｜chat-widget.js

以下を同名のファイルへ保存します。

(() => {
  'use strict';
  const script = document.currentScript;
  if (!script || document.getElementById('store-chat')) return;
  const demo = script.dataset.demo === 'true';
  const endpoint = new URL(script.dataset.endpoint || '/ai/chat.php', location.href);
  if (endpoint.origin !== location.origin) return;
  const root = document.createElement('section');
  root.id = 'store-chat';
  const toggle = document.createElement('button');
  toggle.type = 'button'; toggle.textContent = script.dataset.name || '店舗のご案内';
  toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-controls', 'store-chat-panel');
  const panel = document.createElement('div'); panel.id = 'store-chat-panel'; panel.hidden = true;
  const note = document.createElement('p');
  note.textContent = demo ? '表示デモです。通信・課金はありません。' : 'AIで登録FAQを探します。氏名・電話番号・予約情報などの個人情報は入力しないでください。質問はOpenAI APIへ送信されます。予約確定・個別相談は公式窓口へ。';
  const log = document.createElement('div'); log.className = 'chat-log';
  log.setAttribute('role', 'log'); log.setAttribute('aria-live', 'polite');
  const form = document.createElement('form');
  const label = document.createElement('label'); label.htmlFor = 'store-chat-question'; label.textContent = '質問（500文字まで）';
  const input = document.createElement('textarea'); input.id = 'store-chat-question'; input.maxLength = 500; input.rows = 2; input.required = true;
  const send = document.createElement('button'); send.type = 'submit'; send.textContent = '送信';
  const chips = document.createElement('div'); chips.className = 'chat-chips';
  form.append(label, input, send); panel.append(note, log, chips, form); root.append(toggle, panel); document.body.append(root);
  const add = (who, text) => { const p=document.createElement('p'); p.textContent=who+'：'+text; log.append(p); log.scrollTop=log.scrollHeight; };
  let busy = false;
  async function submit(question) {
    if (busy || !question.trim()) return;
    busy=true; send.disabled=true; input.disabled=true; chips.querySelectorAll('button').forEach(b=>b.disabled=true);
    add('あなた',question); input.value='';
    const controller=new AbortController(); const timer=setTimeout(()=>controller.abort(),25000);
    try {
      if (demo) { add('案内','これは画面表示のデモです。AIには接続していません。'); return; }
      const res=await fetch(endpoint.href,{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json'},body:JSON.stringify({question}),signal:controller.signal});
      const data=await res.json();
      if (typeof data.reply !== 'string') throw new Error('format');
      add('案内',data.reply); // HTMLとして解釈せず必ず textContent
    } catch { add('案内','通信できませんでした。公式窓口をご利用ください。'); }
    finally { clearTimeout(timer); busy=false; send.disabled=false; input.disabled=false; chips.querySelectorAll('button').forEach(b=>b.disabled=false); input.focus(); }
  }
  for (const text of (script.dataset.chips || '営業時間は？|駐車場は？').split('|').slice(0,5)) {
    const b=document.createElement('button'); b.type='button'; b.textContent=text;
    b.addEventListener('click',()=>submit(text.slice(0,500))); chips.append(b);
  }
  toggle.addEventListener('click',()=>{ panel.hidden=!panel.hidden; toggle.setAttribute('aria-expanded',String(!panel.hidden)); if(!panel.hidden) input.focus(); });
  root.addEventListener('keydown',e=>{if(e.key==='Escape'){panel.hidden=true;toggle.setAttribute('aria-expanded','false');toggle.focus();}});
  form.addEventListener('submit',e=>{e.preventDefault();submit(input.value.slice(0,500));});
})();

表示用コード｜chat-widget.css

#store-chat { position:fixed; right:16px; bottom:16px; z-index:9999; width:min(360px,calc(100vw - 32px)); color:#17342b; font:15px/1.6 sans-serif; }
#store-chat * { box-sizing:border-box; }
#store-chat button { border:0; border-radius:8px; padding:10px 14px; background:#1f6f5c; color:white; font:inherit; cursor:pointer; }
#store-chat button:disabled { opacity:.55; cursor:wait; }
#store-chat button:focus-visible, #store-chat textarea:focus-visible { outline:3px solid #e6a400; outline-offset:2px; }
#store-chat > button { width:100%; box-shadow:0 3px 15px #0003; }
#store-chat-panel { margin-top:8px; border:1px solid #c9d7d2; border-radius:12px; padding:14px; background:#fff; max-height:70vh; overflow:auto; box-shadow:0 3px 20px #0002; }
#store-chat-panel[hidden] { display:none; }
#store-chat-panel > p { font-size:12px; margin-top:0; }
#store-chat .chat-log { max-height:220px; overflow:auto; overflow-wrap:anywhere; }
#store-chat .chat-log p { margin:6px 0; padding:8px; background:#f1f6f3; white-space:pre-wrap; }
#store-chat .chat-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
#store-chat .chat-chips button { font-size:12px; }
#store-chat textarea { width:100%; font:inherit; padding:8px; border:1px solid #9aafa6; border-radius:6px; resize:vertical; }
#store-chat label { display:block; }
#store-chat form button { margin-top:6px; }