ChatGPTとJevでサイト内チャットを作ってみた。これ、接客にも使えそう！

西澤です。

弊社のサイトに、ChatGPTとJevを使ってチャットを作ってみました。

画面右下にいる、弊社のバーチャル社員「風早美桜」です。 「美桜に聞いてみる」を押すと、そのまま話しかけられます。

最近はAIと会話すること自体は珍しくなくなりましたが、 せっかく自社のホームページに置くなら、ちゃんと訪問者の役に立つものにしたい。

ということで、今回は質問に答えながら、必要なページまで案内してくれるチャットにしてみました。

これがなかなかいい感じです。 文章だけだと伝わりづらいので、実際の画面を見ながら紹介しますね。

チャットに聞いたのに、結局自分で探すのは面倒ですよね。

ホームページに来る方は、会社のことを全部知りたいわけではなくて、

「料金はいくらなんだろう？」 「自分が頼みたいことに対応してくれるのかな？」 「どこから問い合わせたらいい？」

など、それぞれ知りたいことがあると思います。

作っている側は「ここに書いてあるやん」と思っていても、 初めて来た方には、その「ここ」がわからない。

そこでチャットに聞いてみたのに、 「詳しくはサービスページをご覧ください」と返されたら、

いや、そのサービスページのどこなんよ。笑

となってしまいますよね。

なので今回は、会話をするところから、知りたい情報を見るところまで、 できるだけスムーズにつながるようにしたかったんです。

実際に美桜に聞いてみると、こんな感じです。

① 右下の美桜を押して、気になっていることを入力。

まず、チャットを開くとこんな画面になります。 以下はスマホでの表示です。

「ホームページを見直したい」 「AIで仕事を効率化したい」 「集客について相談したい」

最初にこんな選択肢も出しています。 何を入力したらいいかわからない方は、近いものを押していただければ大丈夫です。

今回は下の入力欄に、「ホームページ制作の料金を知りたいです」と入れて、送信してみます。

② 答えてくれる。同時に、関連するページも開いてくれる。

↑ こんな感じで、料金の目安を教えてくれました。 そのうえで、どんなホームページを作りたいかも聞いてくれます。

ここまでは普通のチャットに見えるのですが、 実はこの時点で、後ろのページが料金表のある場所に切り替わっています。

会話はそのまま続けられるので、 ページを移動するたびに、最初から説明し直す必要もありません。

そして、回答の下にある 「関連するページを開きました💡」を押すと……。

③ チャットが閉じて、知りたかった料金表が見える。

はい、この場所まで来られます。

サービスページの一番上に飛ばして、 「あとはスクロールして探してください」ではなく、 料金を聞かれたら、料金表まで案内する。

地味に見えるかもしれませんが、ここをやりたかったんです。

特にスマホだと、メニューを開いて、ページを選んで、 長い説明をスクロールして……というのはなかなか面倒なので。

聞いたら、その場所が開いている。 このくらい自然に使える方が、訪問者にとっても楽ですよね。

※画面は2026年9月22日の操作時のものです。回答は質問によって変わります。現在の料金・条件はサービスページの料金表をご確認ください。

④ そのまま相談したくなったら、会話をコピー。

チャットである程度話してから、 「具体的に相談したい」と思うこともあるはずです。

そのときに、問い合わせフォームでもう一度同じことを書くのは面倒なので、 美桜とのやり取りをまとめてコピーする機能も付けています。

チャットを開き直して、入力欄の下の「相談内容をコピー」を押すと、こうなります。

あとは下のLINEやメールから相談窓口を開いて、 コピーした会話を貼り付けていただければOKです。

自動で担当者に送られるわけではなく、内容を確認して、ご自身で送っていただく形です。

せっかくチャットで話したことが、その後の相談にも使える。 こういうところも、使う側の手間を減らせるようにしています。

このページ誘導に、Jevがいい仕事をしてくれています。

今回、ChatGPTと組み合わせたのが「Jev」です。

「Jevって何？」という方も多いと思うのですが、 このチャットでは、質問の内容を見て、どのページに案内するかを選ぶ係として使っています。

たとえば、制作の料金について聞かれたら料金表へ。 制作例が見たいなら、制作実績へ。

サイトの中に用意した案内先から、質問に合うものを選んでもらうわけです。 Jevには、こうした選択肢を判断する機能があります。 TypeSafe公式ドキュメントでも紹介されています。

一方、美桜の自然な受け答えはOpenAIのモデルが担当しています。 サイト内ではAPIという接続の仕組みを使って動かしています。

つまり、会話の文章を作る役と、行き先を選ぶ役を分けています。

そこにサイト側のページ移動を組み合わせることで、 先ほどの「聞いたら、その場所が開いている」という流れができました。

Jevのおかげで、このページ誘導がかなりスムーズになりました。

単にチャットを設置するだけではなく、 ホームページそのものを使いやすくするところまで持っていける。 ここが個人的には面白いところです。

しかも安い。これはありがたい。

そしてもう一つ、Jevは費用の面でも取り入れやすいと感じています。

いくら便利でも、チャットを置くだけで運用費が重くなるなら、 小さな会社やお店ではなかなか使いづらいですよね。

今回のように、案内先を選ぶ役割で使えて、しかも安い。 これはほかのサイトにも取り入れてみたくなります。

もちろん、チャット全体の費用にはOpenAIのAPI利用料なども含まれますし、 利用される回数によっても変わります。

ただ、お客様の「どこを見ればいいの？」を減らす仕組みを、費用を抑えながら作れるのは、かなり嬉しいポイントです。

ECサイトの接客や、クリニックの予約にも使えそう。

作っていて思ったのですが、 これ、会社のサービス案内だけで終わらせるのはもったいないなと。

ECサイトなら「どれを買えばいい？」の相談役に。

たとえば、ネットショップでプレゼントを探しているとき。

商品名がわかっていれば検索できますが、 「何を買ったらいいかわからない」という段階だと、検索もしづらいですよね。

そこで、贈る相手や用途を会話で確認して、 合いそうな商品ページに案内してくれる。

サイズで迷ったらサイズガイドへ。 配送について知りたければ配送案内へ。

実店舗で店員さんに聞くような感覚で、商品を選べるようになったら便利だと思いませんか？

商品情報などとの連携は必要ですが、 購入する前の「ちょっとわからない」を解消する接客役として、活用できそうです。

クリニックなら、初めて来る方を予約ページまで案内。

クリニックでも、 「初診のときは何を持っていけばいい？」 「予約はどこから取ればいい？」 といった疑問はあると思います。

そんなときに、初診の案内や予約ページを開いてくれれば、 初めての方も次に何をすればいいかわかりやすい。

ここで考えているのは、診断ではなく、受付や予約の入口を案内する使い方です。 予約の確定まで対応するなら、予約システムとの連携も別途必要になります。

まずは、予約したい人が予約ページまで迷わず行けること。 そこを整えるだけでも、利用する側には助かる場面があると思います。

ぜひ一度、美桜に話しかけてみてください。

ホームページは、情報を増やしたら使いやすくなるとは限りません。 どこに何があるかわからなければ、せっかく書いた内容も読んでもらえないので。

今回やりたかったのは、 訪問者が知りたいことを、知りたいタイミングで見られるようにすること。

ChatGPTとJevを使って、その形が一つできました。

まずは画面右下の美桜に、気になっていることを聞いてみてください。 料金の質問なら、この記事で紹介した流れも試せます。

「うちのサイトでも、こんな案内ができたらいいな」 と思った方は、ぜひご相談ください。

ECの接客や予約の入口など、どこに置くと役に立つかを考えるのも楽しそうです。

それでは。