自分のサイトの情報をもとに、訪問者の質問に答えてくれるチャットボットを置いてみたい。
Web制作やAI活用について調べるなかで、まずは自分のサイトで試してみることにしました。使ったのは、AIアプリを作成できる「Dify」です。
今回は、サイトの情報をPDFにまとめて登録し、Next.jsで作ったサイトにチャットボットを組み込みました。設定したことと、途中でつまずいたことを残しておきます。
※この記事は2026年1月の実装記録に、2026年10月の再検証と画面キャプチャを追記したものです。画面の名称や提供機能は変更される場合があります。
なぜDifyを使ったのか
チャットボットを作る方法はいくつかあります。APIを使って自分で実装することも考えましたが、今回はチャットの画面や情報検索の仕組みを一から作るより、まず動かしてみたかった。
そこで、画面上で設定を進められて、必要に応じて機能を広げられるDifyを選びました。
やりたいことは、BriteWorksのサービスや制作について、サイトの情報を参照しながら回答してもらうことです。一般的な質問に何でも答えるAIではなく、まずは自分のサイトの案内役を目指しました。
サイトの情報を「ナレッジ」として渡す
今回の中心になるのが、Difyの「ナレッジ」です。回答の材料にしたい文書を登録し、チャットボットから参照できるようにします。
もともとは「自分のサイトの情報をAIに学習させる」と考えていました。ただ、今回使うRAGという仕組みは、モデル自体を追加学習するものとは異なります。
質問に関係する情報を資料から探し、その内容を回答の材料にする仕組みです。自分のサイト専用の資料を、回答するときに読んでもらうイメージに近いと思います。Dify公式のナレッジ解説
今回はURLからの取得を見送り、PDFを使った
サイトのURLから情報を取り込む方法も検討しました。
ただ、確認した方法では、Jina ReaderやFirecrawlといったデータソースプロバイダーの導入や、別途APIキーの設定が必要そうでした。今回はそこまで広げず、サイトのページをPDFとして保存し、アップロードする方法にしました。
まずは、自分で用意した資料を使って一通り動かしてみることにします。
チャットボットを設定する
Difyでは、次の順番で設定を進めました。
1. アプリの名前とアイコンを決める
チャットボット用のアプリを作成し、名前とアイコンを設定します。
チャット画面で表示される部分なので、サイトを見に来た人に何の窓口なのかが伝わるようにします。
2. プロンプトに役割を書く
次に、チャットボットにどのような役割で答えてほしいかを書きました。最初に入れたのは、次のような内容です。
あなたは、Web制作とAI活用支援を行っているBriteWorksの専属アシスタントです。デザインの可否、AI導入の相談などについて、BriteWorksの経験に基づいて回答してください。
まずは「誰として、何について答えるのか」を決めるための指示です。
ただし、「BriteWorksの経験に基づいて」と書くだけで、AIがこちらの実績や対応範囲を知ってくれるわけではありません。その材料になる資料も渡す必要があります。
3. ナレッジを結びつける
アップロードしたPDFを、チャットボットのコンテキストに追加します。
資料を登録するだけで終わらず、このアプリがどの資料を参照するのかを設定するところまで進めました。
4. 利用するモデルを設定する
今回使ったモデルは、GoogleのGemini 2.5 Flashです。モデルプロバイダーの画面でAPIキーを設定しました。
これで、役割を決めるプロンプト、回答の材料になるナレッジ、回答を作るモデルが揃います。
ナレッジにも、いくつか設定がある
ナレッジの登録画面には、文書の分け方や検索方法などの設定もありました。最初は用語だけでは違いがつかみにくかったので、次のように整理しました。
| 設定 | 何を決めるか |
|---|---|
| チャンク設定 | 長い文書を、どのような単位で小分けにするか |
| インデックス方法 | 小分けにした情報を、検索できる形にどう整理するか |
| 検索設定 | 質問に関係する情報を、どの方法で探すか |
PDFを登録すれば準備完了、というだけではなく、登録した情報をどう見つけてもらうかも調整できる構成です。Dify公式のナレッジ解説
今回はまず設置まで進めることを優先しました。どの設定が自分の資料に合っているかは、回答を見ながら確かめていきたい部分です。
2026年10月の再検証時の画面。PDFが見出しや短い文ごとに分割されていました。設定値はこのときの検証用です。
Next.jsのサイトに埋め込む
チャットボットを設定したら、公開して埋め込み用のコードを取得します。
今回は、画面の右下にある吹き出しのボタンを押すと、チャット画面が開くタイプを選びました。訪問者が必要なときに開ける形です。
Difyでは、こうしたチャットバブルのほかに、ページ内へ直接表示するiframe形式も用意されています。Dify公式の埋め込みガイド
スクリプトの読み込みでつまずいた
今回のサイトはNext.jsで作っています。
最初は、JavaScriptでscript要素を作り、appendChildでページに追加する方法を試しました。ただ、自分の実装ではうまく動かず、next/scriptのScriptコンポーネントで読み込む形に変更しました。
変更した読み込み部分は、次のような形です。
import Script from "next/script";
<Script
src="https://udify.app/embed.min.js"
id="XXXXXXXXX"
strategy="afterInteractive"
/>
これは読み込み部分だけの抜粋です。実際には、先にwindow.difyChatbotConfigへアプリのトークンなどを設定しています。XXXXXXXXXや読み込み先は、利用するDify環境で発行されたコードに合わせる必要があります。
埋め込み用のトークンと、モデルプロバイダーのAPIキーは別のものです。GeminiなどのAPIキーを、このサイト側のコードに書くわけではありません。
Next.jsのafterInteractiveは、ページのハイドレーションが一部進んだ後にスクリプトを読み込む指定です。Next.js公式のScript解説
今回は設定と読み込みをDifyChatというコンポーネントにまとめ、Footerに追加しました。
なお、appendChildを使う方法が一般に動かない、という話ではありません。このときは原因を切り分けきれていないので、自分の環境では読み込み方を変えて対応した、という記録です。
見た目は調整できるが、自由度は確認が必要
サイトに置く以上、ボタンの色やチャット画面の大きさも気になります。
今回はCSSで、ボタンやウィンドウの表示位置、幅、高さなどを指定しました。埋め込み型でも、サイトに合わせて調整できる部分があります。
一方、当時の環境では「Powered by Dify」の表示が残りました。見た目をすべて自分のサイトと同じにできるとは限らないので、仕事で使う場合は、必要なカスタマイズができるかを先に確認しておきたいところです。
資料にあるのに、答えてくれない
設置後に試すと、PDFに記載したメールアドレスを答えてくれませんでした。「どんなことを相談できますか？」にも、サービス内容ではなく、問い合わせ時に伝えてほしい情報が返ってきます。
Difyの検索テストを見ると、見出しや案内文だけが短いチャンクとして取得され、肝心の回答に必要な情報が含まれていませんでした。
取得できたのは見出しや案内文で、メールアドレスそのものが含まれていませんでした。
そこで、質問と回答をひとまとまりにしたテキストへ変更。
質問と回答をひとまとまりにした、FAQ形式のテキストを用意しました。画像をクリックすると元のサイズで確認できます。
PDFを検索対象から外し、テキストだけで同じ質問を試すと、期待した回答が得られました。
PDFを検索対象から外して再確認すると、お問い合わせ先のメールアドレスを回答できました。
形式と文章構成を両方変えたため、PDF自体が原因とは言い切れません。ただ、資料に情報があることと、回答に必要な情報が検索で見つかることは別だとわかりました。
作って、質問して、見直す
Difyを使って、自分のサイトにチャットボットを設置できました。ただ、置くだけで期待どおりに答えてくれるわけではありませんでした。
今回役立ったのは、検索テストで回答の材料を確認することです。うまく答えないときは、資料がどう分割され、どの部分が取得されているかを見る。そこまで含めて、チャットボットづくりなのだと感じました。