ホームページにAIチャットボットを付けた事例｜問い合わせも会話の中で

こんにちは！アントロンのNaokoです。

ホームページを見に来た人が、どのサービスが自分に合うのか分からないまま、何も聞かずに帰ってしまう。そんなもどかしさを感じたことはありませんか？

結論から書くと、このサイト（untronc.jp）では、AIチャットボットが困りごとを聞いて合うサービスを案内し、相談したくなったらそのまま会話の中で問い合わせを受け付ける形にしました。2026年10月5日から、全ページで動いています。作業は Claude Code（AI に作業を頼めるアプリ）と一緒に進めました。この記事では、実際の画面と仕組み、つまずいたことをまとめます。

見に来た人が、聞けないまま帰ってしまう

サービスのページを並べていても、見る側にはこんな迷いがあります。

• 自分の困りごとが、どのサービスに当たるのか分からない
• 料金や頼むまでの流れを、ページを行き来して探すのが手間
• 問い合わせフォームは、名前やメールアドレスを入れる欄が並んでいて身構える
• 「まだ相談するほどの話ではない」と思って閉じてしまう

どれも、誰かに一言聞ければ済むことです。ただ、ホームページには聞ける相手がいません。

解決の考え方：話を聞いて案内し、そのまま受け付ける

チャットボットにしてもらうことは、次の3つにしました。

• 困りごとを聞き、合うサービスを1〜2つ挙げて、そのページへのリンクを出す
• 料金は、公開しているページに書いてあることだけで答える
• 話が個別の相談になったら問い合わせをすすめ、会話の中で受け付ける

最初（9月30日）は、サイトに付けて案内するだけのつもりでした。10月2日に、そのまま問い合わせにつながる方がよいのでは、ほかのチャットボットもそうなっているのでは、と考え直し、会話の中で受け付ける形に決めました。

このチャットボットは、アントロンで受けている AIチャットボット導入の見本も兼ねています。

実際の画面：右上の妖精を押すと開く

サイトの右上にいる妖精のキャラクターを押すと、チャットの画面が開きます。

妖精は、私が Canva の「画像を生成」で作り、色をサイトの色に合わせました。羽を動かしていて、ページをスクロールすると、それに合わせて下へ動きます。チャットの画面は、緑を使ったシンプルなデザインです。

開くと、画面の上に「アントロン に相談」と出て、次のあいさつが表示されます。

「お困りごと・頼んでみたいことを話してください。どんなサービスがご提供できるかご案内します。このチャットはAIがお答えしています。アントロンが導入しているAIチャットボットの見本です。」

あいさつの下には、ボタンを4つ置きました。

• このチャットボットについて知りたい
• 料金を知りたい
• 頼むまでの流れ・期間
• うちでも使えるか相談したい

最後の「うちでも使えるか相談したい」を押すと、問い合わせが始まります。入力欄には「お困りごとを入力してください」と出し、その下に「AIが自動で回答しています。内容が正しくない場合があります。」と添えました。

料金は、公開しているページの内容だけで答える

「料金を知りたい」を押すと、AI がサービスごとの料金を答えます。

答えるのは、公開しているページに書いてある料金だけです。個別の見積もりや納期は答えず、問い合わせへ案内します。

問い合わせは、会話の中で3つだけ聞く

問い合わせに進むと、次の順に1つずつ聞きます。

1. お名前
2. 返信先のメールアドレス
3. ご相談の内容

ここは AI ではなく、決まった手順で聞く作りにしました。途中で「やめる」と入れれば、いつでも取りやめられます。

3つそろうと、入力した内容と「送信する」「直す」「やめる」のボタンが出ます。あわせて「いただいた情報は、ご相談への返信のために使います。送信すると、プライバシーポリシーに同意したものとして扱います。」と表示します。

画像のお名前とメールアドレスは、撮影のために入れた見本です。

スパム対策として、確認の画面に Cloudflare Turnstile（送っているのがボットでないかを確かめる仕組み）を出しています。

送信すると、私に会話の記録を添えたメールが届きます。送った人には、これまでの問い合わせフォームの自動返信と同じ文面で、控えのメールが届きます。

使ったものと費用

• Cloudflare Workers（Cloudflare の上でプログラムを動かすサービス）：チャットボットの本体
• Workers AI（Cloudflare の上で AI を使えるサービス）：答えを作る AI。モデルは Llama 3.3 70B
• D1（Cloudflare のデータベース）：会話の記録を1年間保存する。毎月1日に、まとめがメールで届く
• Cloudflare Turnstile：問い合わせのスパム対策
• Resend（メール配信サービス）：メールを送る
• WordPress の子テーマの functions.php（テーマに機能を足すファイル）：読み込みの1行を足して、全ページに出す

チャットの画面は Shadow DOM（ページの CSS の影響を受けないように部品を切り分ける仕組み）で作りました。サイトの CSS が、チャットの見た目に混ざらないようにするためです。

Workers AI には1日の無料枠（10,000ニューロン。ニューロンは AI を使った量の単位）があります。公開前の試験でこの枠を使い切ったので、2026年10月3日に Cloudflare の有料プラン Workers Paid に入りました。費用は月5ドルからです（出典：Workers AI の料金（Cloudflare Docs））。

公開の前に、サイトのプライバシーポリシーに「AIチャットについて」の項目を足しました。集める情報、使う目的、1年間保存すること、海外の事業者が処理することを書いています。

公開前の試験では、AI の答えを30問・34回の呼び出しで試して33回が通り、問い合わせの試験は24件すべて通りました。通らなかった1回は、システム利用料（お客さまが直接払う実費）についての質問でした。

つまずいたこと

1つ目は、控えのメールが迷惑メールに入ったことです。送った人に届く控えのメールが、iCloud の迷惑メールフォルダに入りました。送信元を確かめる設定の SPF・DKIM・DMARC は、どれも通っていました。これまでの問い合わせフォームの控えも、10月4日に同じように迷惑メールフォルダに入っています。

これはまだ解決していません。対策として、送信したあとの画面で、迷惑メールフォルダも確かめてもらうよう案内しています。

2つ目は、公開したあとに本番のサイトで、妖精がヘッダーの「Contact」のリンクに重なったことです。「Contact」を押そうとしても、妖精の方が押される状態でした。10月5日に、妖精がヘッダーより下だけを動くように直しました。

ほかにも10月5日に、注意書きの改行、入力欄と送信ボタンの色、問い合わせのメールの件名を直しました。

まずは、サイトに来た人に最初に聞かれそうなことを3つ書き出してみてください

チャットボットを付けるかどうかに関わらず、最初に聞かれそうなことを3つ書き出し、その答えがホームページに載っているかを見てみてください。載っていなければ、そこが見に来た人の迷いやすい所かもしれません。

このサイトの右上の妖精から、実際に話しかけることもできます。AIチャットボットを自分のサイトに付けたい方は、AIチャットボット導入のページをご覧ください。ご相談は、チャットの「うちでも使えるか相談したい」か、お問い合わせフォームからどうぞ。

最後まで読んでくださりありがとうございました！