過去に投資系の不動産会社で、保有している物件をチャットで対話しながら探せるボットを作ったことがありました。当時はまだ生成AIがそれほど使われていなかったので、かなりシンプルな作りでした。今回は同じ「対話で探す窓口」を、LLMとRAG(ベクトル検索で近い文章を探して、それだけを根拠に答えさせるやり方)で作ってみました。
このサイトに来てくださった方が「この人は何ができるのか」を確かめる手段は、これまで経歴ページとブログ記事しかありませんでした。どちらも通して読んでもらう前提のもので、読む側からするとそこそこ重いと思います。聞きたいことだけ聞けばいいので、それらをソースに、ボットが答えてくれるようにしています。お問い合わせフォームだと、メールで届いてメールが帰ってくるまで結構なラグがあるので、これなら私のスキルを調べたい人はすぐに調べることができますね。
そんなわけで、いまこのページの右下に吹き出しのボタンが出ているはずです。押すと小さいチャットが開いて、井上の開発経験・スキル・実績について答えてくれます。どのページからでも開けるので、この記事を読みながらそのまま試せますよ。以下は「どう触ると面白いか」が中心で、仕組みの方は軽く触れるくらいに留めておきます。
どのページでも、画面の右下にこのボタンが出ています
答えるのは自分のことだけ
最初に決めたのは、答えられる範囲より、断る範囲の方でした。
なんでも答えてくれるチャットボットはもう世の中にいくらでもあるので、ここに置く意味は「自分のことに限ったとき」にしか出てきません。そういうわけで、一般的な技術解説も、雑談も、天気も断るようにしてあります。「ReactのuseEffectについて教えて」と聞くと、丁寧に断ったうえで、答えられる範囲を一文で返してくるはずです。
開発経験と関係ない質問は、答えられる範囲を添えて断ります
聞いてみて面白いのは、このあたりでしょうか。
- AIを使った案件の経験は？
- 使える言語やクラウドは？
- Cloudflareで作ったものは？
チャットを開いた最初の画面にもこの3つをボタンで置いてあるので、何を聞けばいいか迷ったら押してみてください。
知らないことは知らないと言う
意地悪な質問も歓迎しています。
たとえば、やったことのない技術の経験を聞いてみると、「その情報は持ち合わせていません」と答えて、詳しくは問い合わせフォームからどうぞ、と案内します。ここは一番気を使ったところでした。RAGは検索で拾ってきた文章を渡して答えさせる作りなので、渡した資料に書いていないことを勝手に足されてしまうと、経歴を盛ったのと同じことになってしまいます。資料に無いことは書かない、と指示したうえで、そもそも近い文章が見つからなかった場合は生成モデルを呼ばずに定型文で断るようにしました。
とはいえ自動生成なので、間違えることもあります。大事なお話は、問い合わせフォームから直接どうぞ。
答えの下に出典が出る
回答の下には、根拠にした資料へのリンクが出ます。
元にしているのは、ブログ記事、サイトの経歴ツリーと実績、GitHubで公開しているリポジトリのREADMEです。それと、サイトには載せていないスキルシートや案件のメモも入れてあります。ただしこちらは、業種・規模・技術スタック・担当した範囲くらいまで匿名化した版だけにしました。サイトに出していないだけで聞かれれば答えてしまうものなので、公開情報と同じ扱いで用意しています。
回答の下に、根拠にした記事へのリンクが並びます
ブログ記事が根拠になったときは、そのままその記事へのリンクが出ます。チャットで概要を掴んで、気になったら記事を読む、という順序で見てもらえるとちょうどいいかなと思っています。
記事を読みながら聞くと、その記事を優先する
チャットは開いているページのパスも一緒に送っていて、ブログ記事のページから開いた場合は、その記事の中身を優先的に拾います。
たとえばこの記事を開いたまま「これってどう作ってるの？」と聞くと、記事の外まで探しに行かずに、目の前の記事の話として答えてくれます。「これ」「それ」で聞けるのは、読みながら使うぶんには結構ラクではないでしょうか。
英語ページで開いた場合は英語で答えます。資料の方が日本語のままでも英語で返ってくるようにしてあるので、海外の方にも試していただけるとうれしいです。
仕組みはCloudflareの中で完結している
一応、中身にも軽く触れておくと、質問文を埋め込みモデルでベクトルにして、近い文章の断片をVectorizeから探し、その断片だけを根拠に生成モデルへ答えさせています。埋め込みも生成もWorkers AIなので、外部のAPIキーは増えていません。今のところ無料枠に収まる範囲で動いていますが、使いすぎたときのために1日の回答数にも上限を置きました。上限に当たると「本日の質問受付は上限に達しました」と出るので、そのときは翌日にお願いします。
置き場所は前に作ったバックエンドと同じWorkersで、Turnstileやレート制限の仕組みもそのまま使い回しています。
2026-06-15静的サイトにバックエンドを追加する素のHTMLをGitHub Pagesに置いた静的サイトに、ランニングコストをかけずCloudflare Workersでバックエンドを足した記録。Honoの書き味と、お問い合わせフォームをTurnstile・Resend・KVでAPI化するまで。答えられなかった質問が、一番の収穫になりそう
置いてみて気づいたのは、質問のログの方が自分にとって役に立ちそうだ、ということでした。
答えられなかった質問は、要するにサイトに書いていないことそのものです。自分では「これは書いた」と思っていても、聞かれ方が違うと拾えていなかったりします。何を書き足すべきかを読んだ方に決めてもらえる仕組みになっていて、記事を書く順番を決めるのにも効いてきそうです。
自分の経歴を他人の口から三人称で説明されるの、なんだかむず痒くて面白いんだよね～。
御社のサイトにも置いてみませんか
作ってみて、これはうちのサイト専用にしておくのはもったいないな、と思いました。サイトに来た人が知りたいことを自分で確かめられる窓口は業種を問わず効くはずなので、いまは他社のサイトにも組み込める形に整えているところです。
考えているのは、御社のCloudflareアカウントの中に構築して、そのままお渡しする形。サイト自体はCloudflare上になくても大丈夫で、レンタルサーバのWordPressでも既存の静的サイトでも、1行のタグを貼れば動く形を目指しています。月額をいただいて面倒を見続ける形は取りませんので、記事や資料が増えたら自動で読み直すところまで作り込んでお渡しします。回答の元になる資料も、既存のサイトの本文やWordPressの記事から取り込めるようにしていく予定です。
「うちのサイトで何が答えられるようになるのか」は、実際に資料を見てみないと分からない部分もあります。まずは右下の窓口を触ってみて、同じものが自社サイトにあったらどうかを想像してみてください。面白そうだと思われましたら、メニューのお問い合わせからご相談ください。