【ハンズオン完全ガイド】カスタマーサポート業務を削減！ノーコードで作る自社HPの内容を学習したお問い合わせChatGPTの作り方

# はじめに

こんにちは！@sogengineerです！
今回は、**プログラミング一切不要**で作れる「賢すぎる自社製お問い合わせAIボット」の作り方をシェアします。

:::note warn
この記事では実際に動くAIボットの作り方を**全て公開**します。事前知識は不要！どなたでも作れます！
:::

まず最初に、こんな悩みありませんか？

> 「FAQページ作ったのに誰も読まない...😭」  
> 「同じ質問に何度も答えるの、もう疲れた...」  
> 「お客様は『HPのどこに書いてあるか分からない』って言うけど、トップページに書いてある」

実は、多くの企業・組織で同じ現象が起きています。
「これ、全部AIで自動化できたらどうなるだろう...？」

**今回は、そんな世界を実現する方法をお伝えします！**

## 🚀 この記事を読むと得られるもの

- [x] **繰り返し業務から解放される**具体的な方法
- [x] **プログラミング知識ゼロ**でAIボットを作る完全ガイド
- [x] **ChatGPT以上に賢い**カスタムAIの仕組み
- [x] **明日から使える**実践的なノウハウ

## 🤖 今回作る自社専用ChatGPTについて

まずは今回ハンズオンで作るものの説明をしたいと思います。
### 利用するノーコードツール
difyというAIアプリの開発に特化したノーコード開発ツールになります。

https://dify.ai/jp

### 従来のチャットボット と これから私たちが作る自社専用AIの違い

⇩とある大学の専用AIを仮定⇩

**👤 ユーザーの質問：**
> 「キャンパス見学したいんだけど、予約必要？」

これに対して以下の回答をします

:::note danger
**❌ 従来のキーワード検索ボット：**
```
申し訳ございません。
「キャンパス見学」に関する情報は見つかりませんでした。
別のキーワードでお試しください。
```
:::

:::note success
**✅ 私たちが作る意味理解AIボット：**
```
オープンキャンパスへのご参加をご検討いただき、ありがとうございます！

キャンパス見学について以下の方法があります：
1. 定期開催のオープンキャンパス（事前予約制）
2. 個別見学（平日のみ・要予約）
3. 学園祭期間中（予約不要）

次回のオープンキャンパスは〇月〇日です。
ご予約はこちらから→ [リンク]
```
:::

**この違い、理解いただけましたでしょうか？**

AIが「キャンパス見学＝オープンキャンパス」と**意味を理解**して、さらに**関連情報まで提供**してるんです！

## 📚 本題に入る前に

本題に入る前に、今回の自社専用ChatGPTを作るにあたって理解しておきたい「**RAG**」という技術について簡単に説明させてください。
これが今回のAIボットの核心技術となるものです！

:::details 🔍 RAG（Retrieval-Augmented Generation）とは？

### **RAGとは？：**
「AIが回答する前に、まず関連情報を検索して、その情報を基に回答を生成する技術」

**🏢 会社の新人さんに例えると：**

**従来のAI（ChatGPTなど）：**
- 新人「あ、この質問知ってます！（記憶だけで回答）」
- でも最新情報や会社特有の情報は知らない...

**RAG搭載AI：**
- 新人「ちょっと待ってください、資料を確認します！」
- → 会社のマニュアルや最新資料を検索
- → 「資料によると〇〇です！」と正確に回答

**🌟 RAGの3つのステップ：**
1. **Retrieval（検索）**：質問に関連する情報を探す
2. **Augmentation（拡張）**：見つけた情報を整理
3. **Generation（生成）**：整理した情報を基に自然な回答を作成

### **具体例：**

**質問：** 「御社の年末年始の営業時間は？」

1. **検索：** 単純なキーワード検索だけでなく、「営業時間」「休業日」などの関連情報も会社のHPから検索
2. **拡張：** 見つけた情報を整理
   - 12月29日〜1月3日：休業
   - 1月4日から通常営業
   - 営業時間：9:00-17:00
3. **生成：** 「年末年始は12月29日から1月3日まで休業いたします。新年は1月4日9時より通常営業いたします。」

**これがRAGの仕組みです！**
:::

RAGによって、あなたの会社の最新情報を常に参照しながら回答するAIが作れるんです！

## 📚 5分で分かる！今回使う技術
他に使う技術についてざっくりと説明します。
粒度は荒いですが、ビジネスで活用する範囲であれば以下の理解でOKです。

:::details 🍳 AI技術を料理に例えると...
**1. LLM（大規模言語モデル）**
- みんながよく使うAIで、ChatGPTやClaudeのような、文章を理解して生成するAI
- 学習した内容から、最適な回答を文章生成します

**2. RAG（検索拡張生成）**
- 先ほど解説した、従来のLLMにある特定の範囲のナレッジを学習させて回答生成させる技術手法

**3. エンベディングモデル(Embedding, 埋め込みモデル)**
- 単語や文章をAIが扱いやすい数値に変換するモデル
- 変換された数値は、1000次元以上の計算空間に座標として配置され、意味的に似た単語同士が空間内で近い位置に配置される

**4. チャンク**
- 生成AIが扱えるコンテキストには限界があるため、巨大な情報を扱いやすいサイズに分割するための手法
- 必要な部分だけを素早く取り出せる
:::

これらを組み合わせることで、**あなたの会社専用のAIアシスタント**が完成します！

## 🛠️ 実践編

さて、それでは実際に作ってみましょう！今回は**青山学院大学のHP**を例に説明しますが、どんな組織のHPでも同じ手順で作れます。

:::note
### 📝 必要なもの

- パソコン（Windows/Mac OK）
- メモリ16GB推奨（8GBでも可）
- インターネット環境
- **プログラミング知識は不要！**
:::

### ステップ0：準備するもの（10分）

まずは以下の2つをインストールします：

1. **Docker Desktop**
   - https://docs.docker.com/desktop/
   - アプリを動かすための基盤ソフト

2. **Git**
   - https://git-scm.com/book/ja/v2/使い始める-Gitのインストール
   - ファイルをダウンロードするツール

:::note warn
**💡 インストールのコツ：**
- 基本的に「Next」を押していけばOK
- 不安な方は「Docker Desktop インストール方法」でググると画像付き解説が出てきます
:::

### ステップ1：Difyをインストール（5分）

:::details Difyとは？
- ノーコードでAIアプリが作れる魔法のツール
- 無料で使える（オープンソース）
- 日本語完全対応
:::

**インストール手順：**

1. ターミナル（Mac）またはPowerShell（Windows）を開く
2. 以下のコマンドを一行ずつ順にコピペして実行：

```bash
git clone https://github.com/langgenius/dify.git
cd dify/docker
cp .env.example .env
docker compose up
```

3. ブラウザで http://localhost/install にアクセス
4. メールアドレスとパスワードを入力（なんでもOK）

![Dify初期設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/1ee63e86-3ffc-40f9-8944-8e00dd06f925.png)

:::note success
**🎉 これでDifyの準備完了！**
:::

### ステップ2：AIアプリの基本設定（3分）

1. 「最初から作成」をクリック

![アプリ作成画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/39421626-c8b1-4f55-937e-3df103eec466.png)

2. 「チャットボット」を選択
3. 「作成する」をクリック

たったこれだけで、AIアプリの土台ができました！

### ステップ3：Webサイトの情報を学習させる（15分）

ここからが本番！あなたの組織のHPをAIに学習させます。

:::details 3-1. ナレッジ（知識ベース）を作成
1. 画面上部の「ナレッジ」タブをクリック

![ナレッジタブ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/9691183c-5d1d-4370-9cb3-bf1a1029a451.png)

2. 「Webサイトから同期」を選択

![Webサイト同期](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/73ce99ca-e976-4ff7-9661-7333a3d597da.png)
:::

:::details 3-2. Firecrawlの設定（初回のみ）
**Firecrawlとは？**
- Webサイトを自動で読み取るツール
- 設定は最初の1回だけ！

![Firecrawl設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/d55d64ba-81c6-4011-9782-f47636897766.png)

1. 「🔥Firecrawl」→「設定」を選択
2. 「firecrawl.devからAPIキーを取得する」をクリック
3. 無料アカウントを作成（メールアドレスだけでOK）
4. APIキーをコピーして貼り付け
:::

#### 3-3. 学習させたいページのURLを入力

![URL入力画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/18c4d062-b6ad-4a64-9aae-6c64c58c1975.png)

例：青山学院大学の場合
- 入試情報ページ
- キャンパス案内ページ
- 学生生活情報ページ
- よくある質問ページ

:::note warn
**💡 ポイント：**
- まずは重要なページ5〜10個から始めるのがおすすめ
- 後から追加もできるので気軽に！
:::

処理が完了すると以下のような画面になります：

![処理完了画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/254758f4-2b99-4a1e-9aee-cb1e12ffc206.png)

### ステップ4：チャンク設定とエンベディングモデル（最重要！）（5分）

ここが今回の**最重要ポイント**です！

![チャンク設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/9d75d9ab-b99b-42f3-a230-803980ed2bed.png)

:::note info
#### 🍰 チャンクって何？

長い文章を「意味のあるかたまり」に分割することです。

**なぜ重要？**
- 検索の精度が劇的に変わるから
- 回答の質が格段に上がるから
:::

**おすすめ設定：**
- 最大チャンクサイズ：**800文字**
- チャンクのオーバーラップ：**100文字**

:::note info 
#### 🤖 エンベディングモデルとは？

**エンベディングモデル**は、文章を数値（ベクトル）に変換する技術です。これがRAGの核心部分！

**🧠 簡単に例えると：**
```
「オープンキャンパス」    → [0.8, 0.6, 0.2, 0.1, ...]
「キャンパス見学」       → [0.7, 0.5, 0.3, 0.2, ...]
「入学試験」            → [0.2, 0.1, 0.8, 0.7, ...]
「学食メニュー」        → [0.1, 0.2, 0.1, 0.9, ...]
```

**🎯 なぜこれがすごいの？**

**従来のキーワード検索：**
- 「オープンキャンパス」と検索 → 「キャンパス見学」は見つからない
- 完全一致しないとヒットしない

**エンベディング検索：**
- 「オープンキャンパス」[0.8, 0.6, 0.2, 0.1] と「キャンパス見学」[0.7, 0.5, 0.3, 0.2] のベクトルが近い
- **→ 意味的に似ていると判断！**

**📊 使用モデルの選択肢(APIキーはOpenAIと契約して利用してください)：**

| モデル | 次元数 | 特徴 | おすすめ度 |
|--------|--------|------|------------|
| text-embedding-ada-002 | 1536次元 | 従来モデル・コスト安 | ⭐⭐⭐ |
| **text-embedding-3-large** | **3072次元** | **最高精度・コスト高** | **⭐⭐⭐⭐⭐** |
| text-embedding-3-small | 1536次元 | バランス型 | ⭐⭐⭐⭐ |

**💡 今回のおすすめ：text-embedding-3-large**
- 3072次元の超高解像度で文章を数値化
- 微細な意味の違いも捉える
- 多言語対応も優秀

**実際の効果例：**
```
質問：「学費の支払い方法を教えて」

従来検索：「学費」「支払い」の完全一致のみ
エンベディング検索：
- 「授業料の納入について」✓
- 「入学金の振込方法」✓  
- 「分割払いのご案内」✓
→ 関連する情報を幅広く検索！
```
:::

**インデックス方法より下の項目**
私は以下のように設定しました。
![チャンク詳細設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/c759a0f0-ecd0-496d-868d-659015908cb9.png)

この設定で「保存して処理」をクリック！

:::note info
#### 🎯 Rerankモデルとは？
結論、AIが「本当に重要な情報」を見極めるモデルになります。
画像にRerankモデルと出てきていて分からない人もいるかと思うので雑に解説します。
- 具体例で理解しよう：
    - 質問：「学食のメニューを教えて」
        - Rerankなしの場合：
            - 「学食の営業時間は...」
            - 「学食の場所は...」
            - 「学食のメニューは...」←これが3番目
        - Rerankありの場合：
            - 「学食のメニューは...」←最も関連性が高いと判断！
            - 「学食の営業時間は...」
            - 「学食の場所は...」

→Rerankモデルは「質問に最も適した回答」を見つけ出すことに長けたモデルです
:::

処理が完了すると、すべてのページにチェックマークが付きます：

![処理完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/4c9f6ff3-7a4c-4d3c-9129-b4dea3e98148.png)

### ステップ5：検索方法の設定（3分）

ここで選ぶ検索方法によって、AIの「賢さ」が決まります！

:::details 🎯 ベクトル検索とは？文章を「座標」で理解する魔法

**従来のキーワード検索の限界：**
- 「オープンキャンパス」で検索 → 「キャンパス見学」はヒットしない
- 「入試」で検索 → 「受験」はヒットしない

**ベクトル検索の革命的な仕組み：**

文章を多次元空間の「座標」として表現します。

```
例：3次元空間での表現（実際は3072次元！）

「オープンキャンパス」 → (0.8, 0.6, 0.2)
「キャンパス見学」     → (0.7, 0.5, 0.3)
「学食」               → (0.1, 0.2, 0.9)

座標が近い = 意味が近い！
```

**🌟 つまり何がすごいの？**

AIが「オープンキャンパス」と「キャンパス見学」の座標が近いことを理解して、
「意味的に似ている」と判断できるんです！
:::

#### 検索設定の選択

| 設定項目 | 推奨設定 | 説明 |
|---------|----------|------|
| インデックス方法 | 高品質 | 最新のtext-embedding-3-largeモデル使用<br>3072次元の超高精度ベクトル化 |
| 検索タイプ | ハイブリッド検索 | ベクトル検索：意味を理解する検索<br>全文検索：キーワード完全一致<br>両方の良いとこ取り！ |
| トップK | 3 | 上位3件を取得 |
| スコア閾値 | 0.5 | 関連度50%以上 |

これで設定完了！

### ステップ6：AIに役割を与える（3分）

最後に、AIに「どんな風に対応してほしいか」を指示します。

![AI役割設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/6fa86d63-011a-42ce-900f-5454adfef6c9.png)

:::note info
**設定のポイント：**
- 「手順」欄：AIの役割を自然言語で具体的に記述
- 「コンテキスト」欄：作成したナレッジを選択
- 「メタデータフィルタ」：o3-miniを選択
- 左側のモデル選択も忘れずに！
:::

**例：青山学院大学の職員として対応する場合**

```
あなたは青山学院大学の学生サポートセンターに所属する職員です。

青山学院大学の伝統と革新性、国際性と地域性、キリスト教精神に基づく人格教育を重視する校風について深く理解しており、各学部・学科の特色、入試制度、キャンパスライフ、キャリア支援、国際交流プログラムなど、幅広い分野について正確で親切な案内を行います。

以下に注意し、回答を生成してください
- ハルシネーションに注意し、分からないことは答えず、直接お問い合わせいただくように要請する
- 温かく丁寧な対応
- 最後に問題が解決したかどうか尋ねること
```

### 🎊 完成！実際に使ってみよう

![実際の回答例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/1c1e2473-5eef-4316-83b5-dc9903dca01b.png)

:::note warn
**この回答に関して特筆すべき点**

回答は「留学」に関するHPの一部分を抜き取っているのですが、質問文は「留学」という言葉が一切使われていない点です。
これはベクトル検索といって文章を数値化したものの座標と近い位置にある質問文だったため「留学」と類似性のある文章だなAIと判断しているためです。
:::

**質問例：**
- 「入試の日程教えて」
- 「学食って美味しい？」
- 「就職率はどのくらい？」
- 「サークル活動について知りたい」

きっと、人間の職員さんと変わらないくらい自然な回答が返ってくるはずです！

### 完成したチャットボットのシステムのアーキテクチャ図
以下のような構成のチャットが完成しました！
![名称未設定ファイル.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590211/342be708-9800-4874-968c-cb60c82b4c84.png)



## 🚀 さらに賢くする上級テクニック

1. 複数の情報源を組み合わせる
- 公式HP
- パンフレットPDF
- よくある質問集
- 過去の問い合わせ履歴

これらを全部学習させることで、より賢いAIに！


2. 定期的な情報更新
- 月1回、新しい情報を追加
- 古い情報を削除
- 季節ごとの情報を反映


3. 回答の質を高める工夫
- 実際の問い合わせを分析
- よくある質問を重点的に学習
- 回答例を事前に用意


## 📊 導入効果の試算

もしあなたの組織で導入したら...
雑に試算してみました！

| 項目 | 効果 | 詳細 |
|------|------|------|
| **🕐 時間削減効果** | 年間**96時間**の削減 | 1件の問い合わせ対応：平均5分<br>月100件の場合：500分（約8時間） |
| **💰 コスト削減効果** | 年間**19.2万円** | 時給2,000円で計算<br>対応品質の向上による顧客満足度UP<br>24時間365日対応可能に |
| **😊 スタッフの満足度** | 業務改善 | 単純作業から解放<br>より創造的な業務に集中<br>ストレス軽減 |

こんなメリットがあるのではと考えられます

## ⚠️ 注意点とよくある質問

#### Q1. 本当にプログラミング知識は不要？
**A.** はい！今回紹介した手順は全てクリック操作とコピペだけです。

#### Q2. どんな組織でも使える？
**A.** はい！企業、学校、病院、役所など、HPがある組織なら何でもOKです。
ただし、HPによってはクローリングしにくいページ構造になっているものもあるのでその場合はサーバーにテキストファイルを配置してそこから参照させるなどの別の方法を検討したり、工夫が必要です。

#### Q3. デプロイ(webへの一般公開)したいんだけど？
**A.** ここでは紹介していないですが、外部公開するためにはレンタルサーバー上でDifyを起動させたり、有料プランに加入して公開する必要があります。

デプロイ方法は様々あり、チャット画面を公開するだけでなく、HPにチャットを埋め込んだりすることも可能です。また、ここでは紹介してないですがチャットの応答機能をAPIとして運用することも可能です。

#### Q4. ランニングコストは？
**A.** OpenAIなどのAIベンダーが提供しているAPIに関しては従量課金制なので使用量に応じてお金はかかります。料金が心配でしたら、公開する際に一定時間ごとの回答上限を設けたり認証を設けたりなどを検討してみてください。

また、外部公開するにあたってもレンタルサーバー代 もしくは Difyの契約形態に応じた料金が必要となります。詳しい料金についてはDifyの公式HPをご覧ください。


#### Q5. このAIチャットボットの課題はなんでしょう？
**A.** 今回は雑にクローリングしたものをデータにしていますが、やはりそれだけだとチャンクが上手くできてなくて変な回答をしてしまうことがあります。
**如何に学習データをメンテナンスするかがAIチャットボットの性能を左右させますし、その作業にまだかなりの時間を費やす必要があるという意味では現時点でのチャットボットの課題だといえます。**

#### Q6. セキュリティ注意事項はありますか？
**A.** 以下の点には細心の注意を払うようにお願いします
- 機密情報は学習データに含めない
- 本番運用前に十分なテストを実施
- アクセス制限の設定を行うこと

#### 07. 運用開始後はどのようにメンテナンスするのが良さそうですか？
**A.** 以下を検討してみると良いかと思います
- 回答ログの定期分析
- ユーザーフィードバックの収集
- 回答精度の継続的改善

## 🎯 まとめ：明日から始められる業務改革

今回は、ノーコードツール「Dify」を使った賢いお問い合わせAIボットの作り方を解説しました。

:::note success
**📌 ポイントをおさらい：**
1. プログラミング不要で45分で完成
2. あなたの組織専用のAIが作れる
3. 「意味を理解する」賢い対応が可能
4. 業務効率が劇的に改善
:::

**次のアクション：**
1. まずはDockerとGitをインストール
2. 小さく始めて、徐々に拡大
3. 実際の問い合わせを分析して改善

AIの力で、もっと価値ある仕事に時間を使えるようになります。ぜひ試してみてください！

---

**質問・感想お待ちしています！**

この記事が役に立ったら、ぜひシェアしてください。導入事例や改善アイデアなど、コメント欄でお聞かせください