〜「問い合わせ対応、AIに任せられたらいいのに」を、実際に形にする〜
「よくある質問に、毎回同じ返信をしている」
「営業時間外の問い合わせを、みすみす逃している」
「AIチャットボットは高そう＆難しそうで、手が出せない」
——このガイドは、それを“自分の手で”解決するための実践教材です。
プログラミング未経験でも、Claude Codeに“コピペで指示するだけ”で、
【自社サイトに埋め込めるAI問い合わせボット】を、ゼロから作って公開するまでを完全実況します。
ボットには自社の情報（料金・メニュー・FAQ）を覚えさせ、お客様の質問に24時間自動で答えさせます。
▼ 完成するもの
・サイトの右下に出る「チャットで質問」ウィジェット
・お客様の質問に、自社の情報をもとにAIが自動回答
・「答えられなかった質問」を管理画面で確認 → 改善できる
・変な回答・暴走を防ぐガードレールつき
・どのサイトにも貼れる“埋め込みコード1行”
▼ 特徴
1. 全ステップに「コピペするだけのプロンプト」つき
2. 「こう返ってくればOK」の確認ポイントつき
3. 実際に出るエラー（APIキー漏れ・暴走・コスト）と解決法つき
4. AIの中身が分からなくても、上から順にやれば動く
▼ 目安
・所要時間：3〜4時間 ・必要：Claude Codeが動くPC＋Claude APIキー ・技術：Node.js
■ 作る順番（全体マップ）
STEP 0：何を答えさせるか“設計”する ★無料公開
STEP 1：チャット画面（ウィジェット）を作る ★無料公開
─────────（ここから有料）─────────
STEP 2：Claude APIにつなぐ（AIに答えさせる）
STEP 3：自社情報を“覚えさせる”（料金・FAQ・メニュー）
STEP 4：どのサイトにも貼れる“埋め込みコード”にする
STEP 5：会話ログ保存＋「答えられなかった質問」を管理画面で見る
STEP 6：暴走・不適切回答を防ぐ＆コストを抑える
STEP 7：インターネットに公開する（デプロイ）
＋ つまずき解決（5つ）／応用（LINE・予約連携・多言語）
■ 事前準備
・Claude Codeが動く状態にしておく
・Claude APIキーを用意（console.anthropic.com で発行。sk-ant- で始まる文字列）
┌─── コマンド ───────────
mkdir ai-chatbot
cd ai-chatbot
claude
└────────────（ここまで）
■ STEP 0：何を答えさせるか“設計”する
いきなり作らず、「どんな質問に、どこまで答えさせるか」を決めます。ここが精度を左右します。
┌─── プロンプト（ここから下をコピー）───────────
自社サイトに置く「AI問い合わせチャットボット」を作りたいです。
プログラミング未経験なので、初心者向けに手伝ってください。
やりたいこと：
・お客様の質問に、自社の情報（料金・営業時間・メニュー・よくある質問）をもとに自動で答える
・分からないこと・センシティブなことは、無理に答えず「担当者に確認します」と返す
・サイトに簡単に埋め込めるようにする
技術の希望：
・AIはClaude APIを使う（安く速いモデルを想定）
・シンプルな構成（Node.js）で、後で公開しやすいもの
まず「全体像」と「作る順番」、そして“ボットに持たせるべき情報の整理のしかた”を、
初心者向けに教えてください。いきなりコードは書かず、設計から始めましょう。
└────────────（ここまで）
こう進めばOK：作る順番と、ボットに持たせる情報（FAQ・料金表など）の整理方法を提案してくれます。
💡 コツ：「分からないことは無理に答えず“担当者に確認します”と返す」を最初に決めておくと、後の“暴走対策”がラクになります。
■ STEP 1：チャット画面（ウィジェット）を作る
まずは“見た目”から。サイト右下に出るチャット窓を作ります。
┌─── プロンプト（ここから下をコピー）───────────
Webサイトの右下に表示する「チャットウィジェット」を作ってください。
仕様：
・右下に丸い「チャットで質問」ボタン → 押すとチャット窓が開く
・お客様のメッセージは右、ボットの返信は左に吹き出しで表示
・入力欄と送信ボタン。Enterでも送信できる
・返信を待っている間は「…」の入力中アニメを出す
・スマホでも崩れないデザイン
・色は[ブランドカラー / お任せ]
この時点ではAIにはまだ繋がなくてOKです。
まずは見た目と、メッセージが画面に追加される動きだけ作ってください。
└────────────（ここまで）
こう進めばOK：ブラウザで開くとチャット窓が出て、打ったメッセージが吹き出しで表示されれば成功（返事はまだ来ません）。
💡 コツ：「まだAIには繋がなくてOK」と区切ると、一度に作りすぎて壊れるのを防げます。
─────────────────────────────
ここまでで“見た目”はできました。でも——ボットはまだ何も答えません。
ここから先が本番です。実際に作ると、必ずこの壁にぶつかります：
・APIキーをコードに直書き → 公開したら丸見え＆不正利用でコスト爆発（！）
・自社の情報をどう“覚えさせる”か分からない
・AIが平気で嘘（実在しない料金）を答えてしまう
・「料金いくら？」への答えがサイトの内容とズレる
・レスポンスが遅い／コストが読めなくて怖い
この先（有料パート）では──
・STEP 2〜7：Claude API接続 → 自社情報を覚えさせる → 埋め込み → ログ管理 → 暴走対策 → 公開
・実際に出る5つのエラーの即・解決法
・応用（LINE連携／予約システムと繋いで“予約できるボット”／多言語対応）
を、すべてコピペできる形で公開します。上から順にやれば、“答えるボット”が完成します。
この記事のライター
