はじめに

「AI時代」と言われる昨今ですが、中小企業の現場では「具体的に何ができるのか」がまだ見えにくいのが現状です。 そこでまずは小さなことから始めてみようと思い、自分のWebサイトに「何でも知っているAIチャットボット」を導入してみました。

AIチャットボットを作る方法はいくつかありますが、今回は以下の理由から「Dify」というツールを採用しました。

1. プログラミング不要（ノーコード）で作成できる
2. 拡張性が高い（将来的に色々な機能を追加できる）
3. 低コストで始められる

Difyとは？

「専門知識がなくても、自社専用のAIアプリをノーコードで作れるプラットフォーム」です。 主な特徴は以下の通りです。

好きなAIを選べる：ChatGPT（OpenAI）、Gemini（Google）、Claude（Anthropic）など、その時々で性能の良いAIを自由に切り替えて使えます。
無料枠が広い：クラウド版（dify.ai）なら、テスト運用には十分な無料枠があります。
自社データを教え込める：ここが最大の特徴です。PDFやExcel、WebサイトのURLを読み込ませるだけで、自社の情報に基づいた回答をするAI（RAG）がすぐに作れます。
設置が簡単：数行のコードをサイトに貼るだけで設置完了です。

AIチャットボットの作り方

1. アプリの作成

まずDifyにログイン（https://cloud.dify.ai/signin）し、「最初から作成」を選択。「初心者向けの基本的なアプリタイプ」に「チャットボット」が隠れているので、そちらを押下。 アプリの名前には「BriteWorks アシスタント」など、わかりやすい名前をつけます。これがチャット画面のタイトルになります。

2. AIに「役割」を与える（プロンプト設定）

AIにどのような性質で振る舞ってほしいかを指示します。

あなたは、Web制作とAI活用支援を行っているBriteWorksの専属アシスタントです。
デザインの可否、AI導入の相談などについて、briteworksの経験に基づいて回答してください。

3. 自社の知識を教える（ナレッジ設定）

ここが大事なポイントです。自社のパンフレット（PDF）や、過去の実績リスト、サービス資料などを「ナレッジ」としてアップロードします。 これにより、AIはChatGPTが本来知らない「あなたの会社のこと」を学習し、それに基づいて回答できるようになります。

※WebサイトのURLをそのまま読み込ませる方法もありますが、今回は確実性を高めるためにPDF化して読み込ませました。

4. AIモデルの選択

今回は、GoogleのGemini 2.5 Flashを採用しました。高速でコストパフォーマンスが良く、長文の読み込みにも強いためです。

サイトへの設置

基本的な設置方法（推奨）

設定が完了したら、右上の「公開する」ボタンを押し、「サイトに埋め込む」を選択します。 表示された<script>タグをコピーして、自社サイトのHTML（</body>タグの直前など）に貼り付けるだけです。

これだけで、サイトの右下にチャットボットのアイコンが表示され、クリックすると会話ができるようになります。

【参考】React/Next.jsでの高度な実装

React（Next.js）製のサイトに最適化して組み込む場合は、next/scriptコンポーネントを使用するとスムーズです。

"use client"
import { useEffect } from 'react';
import Script from 'next/script';
const DifyChat = () => {
  // スタイルの調整などはuseEffect内で設定可能です
  useEffect(() => {
    window.difyChatbotConfig = {
      token: 'XXXXXXXXX', // 発行されたトークン
    };
  }, []);
  return (
    <Script
      src="https://udify.app/embed.min.js"
      id="XXXXXXXXX"
      strategy="afterInteractive"
    />
  );
};
export default DifyChat;

「とりあえず」は簡単。でも「精度」を求めると…？

ここまでご紹介した通り、AIチャットボットを「設置するだけ」なら本当に簡単です。 しかし、実際に運用してみると、以下のような「あと一歩」の壁にぶつかることがあります。

• 「資料に書いてあるのに、AIがうまく答えてくれない…」
• 「回答が少し機械的で、自社の雰囲気に合わない…」
• 「社内用語や略語を正しく理解してくれない…」

実は、AIを「賢い営業マン」レベルに育てるには、裏側の「ナレッジの整理」や「プロンプトの微調整」といった、少し地味で専門的なチューニングが必要です。 ここをどこまで作り込めるかが、「ただのボット」になるか「頼れるアシスタント」になるかの分かれ目です。

おわりに

かなりカスタマイズ可能なチャットボットが作成可能。ほとんど要件クリアになるのではないか。

BriteWorksでは、Web制作だけでなく、こうした「AIチャットボットの導入・調整支援」も行っています。 「まずは自分でやってみたい」という方のサポートから、「面倒なデータ整理や調整は丸投げしたい」というご相談まで、AI活用でお悩みの際はぜひお気軽にお声がけください。

自社のビジネスを知り尽くしたAIが、あなたのサイトで接客を始める。そんな未来を一緒に作ってみませんか？