AIチャットボットをリリースしました
このたび、合同会社四次元はAIチャットボット作成サービス「AIチャットボット」をリリースしました。
この記事では、まずは初心者でも分かるようにAIチャットボットの使い方を手順ごとに解説します。
今回は最初のAIを立ち上げて実際に製品について質問に回答できるまで学習させていきます。
今回は架空のカフェ「Sky Coffee」を例として使用します。店舗情報、メニュー、価格などはすべてチュートリアル用に作成した架空のデータです。実際に導入する際は、あなたのお店やサービスの情報に置き換えてください。
なぜAIチャットボットを作ったのか
AIチャットボットのサービスって、他にもありますよね？なぜ自分で作ろうと思ったんですか？
実は、自分のサイトにAIチャットボットを導入しようと思って、いろいろ探したんです。でも、なかなか良いサービスが見つからなくて...。
どういうところが不満だったんですか？
まず、UIがわかりにくいサービスが多かったですね。あと、使われているAIモデルが古かったり。でも一番困ったのは、導入のハードルが高すぎたことです。
導入のハードル、ですか？
そうなんです。問い合わせフォームから連絡したら、営業担当から折り返し電話がかかってきて、契約書がどうとか、年間契約がどうとか...。もっと手軽に始められるサービスが欲しかったんですよ。
たしかに、ちょっと試してみたいだけなのに、いきなり営業電話は面倒ですね。
そうなんです！だから「無料で始められて」「しつこい営業もなくて」「嫌だったらすぐやめられる」サービスを作ろうと思ったんです。1年縛りとかもないし、合わなければすぐ解約できます。
AIチャットボットの特徴
- 無料で始められる
- プログラミング不要で簡単作成
- 最新のAIモデル（Gemini）を使用
- Webサイトに簡単埋め込み
現在はベータ版のため、無料プランでもすべての機能をお使いいただけます。
今後は予約機能、FAQ自動生成、多言語対応なども追加予定です。
用意するもの
AIチャットボットを始めるために必要なものは以下の2つだけです。
- メールアドレス - アカウント登録に使用
- チャットボットに学習させたい情報 - FAQや製品情報など
プログラミングの知識は一切不要です。
ステップ1: アカウント登録
まずはAIチャットボットにアカウントを登録します。
- AIチャットボットにアクセス
- 右上の「無料で始める」をクリック
- メールアドレスとパスワードを入力
- 届いた確認メールのリンクをクリック
これでアカウント登録は完了です。
ステップ2: AIチャットボットを作成
ログインしたら、AIチャットボットを作成します。
- 左メニューの「AI一覧」をクリック
- 「新規AIを追加」をクリック
- AIの作成に成功すると、AI設定画面に自動で移動します
- 「AI名」を入力（例：すかい君）
- 「許可ドメイン」を設定
許可ドメインは、チャットの埋め込みを許可するドメインです。ここにはあなたのWebサイトのドメインを入力してください。カンマ区切りで複数指定できます。今回はチュートリアルなので、このWebサイト aichat.168.tokyo を入力しています。
- 「システムプロンプト」を入力
システムプロンプトはAIの性格を決める重要な部分です。今回のSky Coffee用に以下のように設定します：
あなたは「Sky Coffee 渋谷本店」のAIアシスタントです。 ## 役割 お客様からのメニュー、店舗情報、サービスに関する質問に丁寧にお答えします。 ## 対応できること - メニューと価格のご案内 - 営業時間・アクセス情報 - アレルギー情報 - カスタマイズオプション - テイクアウト・ポイントカードについて - 店内設備（Wi-Fi、電源、席数など） ## 対応できないこと - 席の予約（当店は予約不可・先着順です） - 在庫状況の確認 - クレーム対応（スタッフにお繋ぎします） ## 回答のルール 1. 簡潔に、わかりやすく回答する 2. 価格は税込で案内する 3. わからないことは「スタッフにお問い合わせください」と案内する 4. 親しみやすく、丁寧な口調で対応する 5. **アレルギー情報については、回答後に必ず「念のためスタッフにもご確認ください」と案内する**（健康に関わる重要事項のため） ## 口調の例 - 「いらっしゃいませ！Sky Coffeeへようこそ。」 - 「〜でございます」「〜ですね」 - 「他にご質問はありますか？」 ## 重要な制約 - メニューや価格について質問された場合、**提供されたドキュメントに記載がある情報のみ**を回答してください - ドキュメントに記載がない情報は「申し訳ございません、詳細なメニュー情報はスタッフにお問い合わせください」と案内してください - **絶対に存在しないメニューや価格を作り上げないでください**
システムプロンプトには、AIの役割や回答のトーンを具体的に指定しましょう。「丁寧語で回答する」「専門用語は避ける」などを書くと、AIがそのスタイルで回答してくれます。
- 「初期メッセージ」を入力（右上のウィジェット設定）
初期メッセージは、ページ訪問者がチャットを開いたときに最初に表示されるメッセージです。画面右上の「ウィジェット設定」から設定できます。挨拶と一緒に、質問の例を入れておくとユーザーが使いやすくなります。
こんにちは！Sky Coffee 渋谷本店です ☕ メニューや店舗について、お気軽にご質問ください。 例えば… - 「おすすめのドリンクは？」 - 「Wi-Fiはありますか？」 - 「乳製品アレルギーでも飲めるものは？」 - 「テイクアウトできますか？」
- 「保存」をクリック
これでAIチャットボットの作成は完了です。次はAIに知識を学習させましょう。
ステップ3: Knowledge (RAG) を登録する
AIチャットボットが質問に答えるためには、Knowledge（知識データ）を登録する必要があります。
Knowledgeって何ですか？
Knowledgeとは、AIが回答するための参照情報です。FAQや製品マニュアルなどを登録しておくと、AIがその内容をもとに回答してくれます。RAG（Retrieval-Augmented Generation）という技術を使っています。
Knowledgeの登録方法
- 左メニューの「Knowledge (RAG)」をクリック
- ファイルをアップロードエリアにドラッグ＆ドロップ、または「ファイルを選択」をクリック
今回はSky Coffeeの店舗情報をアップロードします。以下のサンプルファイルをダウンロードしてお使いください：
# Sky Coffee（スカイコーヒー） 東京・渋谷にある自家焙煎コーヒー専門カフェ。厳選した豆を店内で焙煎し、一杯ずつ丁寧にドリップしています。 --- ## 店舗情報 - 店名：Sky Coffee 渋谷本店 - 住所：東京都渋谷区神南1-2-3 スカイビル1F - 最寄駅：渋谷駅ハチ公口より徒歩5分 - 電話番号：03-1234-5678 - 営業時間：8:00〜21:00（ラストオーダー 20:30） - 定休日：年中無休（年末年始を除く） - 席数：店内32席（カウンター8席、テーブル24席）、テラス8席 - 喫煙：全席禁煙 - Wi-Fi：無料Wi-Fiあり（パスワードはレジでお伝えします） - 電源：カウンター席のみ電源コンセントあり - 駐車場：なし（近隣にコインパーキングあり） --- ## 支払い方法 - 現金 - クレジットカード（VISA、Mastercard、JCB、AMEX） - 電子マネー（Suica、PASMO、iD、QUICPay） - QRコード決済（PayPay、LINE Pay、楽天Pay） --- ## ドリンクメニュー ### ホットドリンク | 商品名 | 価格（税込） | サイズ | |--------|-------------|--------| | ブレンドコーヒー | S 350円 / M 420円 / L 490円 | S/M/L | | アメリカーノ | S 380円 / M 450円 / L 520円 | S/M/L | | カフェラテ | S 450円 / M 520円 / L 590円 | S/M/L | | カプチーノ | S 450円 / M 520円 / L 590円 | S/M/L | | カフェモカ | S 500円 / M 570円 / L 640円 | S/M/L | | キャラメルラテ | S 520円 / M 590円 / L 660円 | S/M/L | | 抹茶ラテ | S 500円 / M 570円 / L 640円 | S/M/L | | ココア | S 450円 / M 520円 / L 590円 | S/M/L | | 紅茶（アールグレイ） | S 400円 / M 470円 / L 540円 | S/M/L | ### アイスドリンク | 商品名 | 価格（税込） | サイズ | |--------|-------------|--------| | アイスコーヒー | S 380円 / M 450円 / L 520円 | S/M/L | | アイスカフェラテ | S 480円 / M 550円 / L 620円 | S/M/L | | アイスカフェモカ | S 530円 / M 600円 / L 670円 | S/M/L | | アイスキャラメルラテ | S 550円 / M 620円 / L 690円 | S/M/L | | アイス抹茶ラテ | S 530円 / M 600円 / L 670円 | S/M/L | | コールドブリュー | S 450円 / M 520円 / L 590円 | S/M/L | | レモネード | S 450円 / M 520円 / L 590円 | S/M/L | ### 季節限定ドリンク（12月〜2月） | 商品名 | 価格（税込） | サイズ | |--------|-------------|--------| | ホワイトチョコモカ | S 550円 / M 620円 / L 690円 | S/M/L | | ジンジャーラテ | S 520円 / M 590円 / L 660円 | S/M/L | --- ## フードメニュー ### モーニングセット（8:00〜11:00） | 商品名 | 価格（税込） | 内容 | |--------|-------------|------| | トーストセット | 550円 | 厚切りトースト、ミニサラダ、ドリンクS | | クロワッサンセット | 650円 | クロワッサン、スクランブルエッグ、ドリンクS | | ホットドッグセット | 700円 | ホットドッグ、ポテト、ドリンクS | ### サンドイッチ・軽食 | 商品名 | 価格（税込） | 備考 | |--------|-------------|------| | たまごサンド | 480円 | | | ツナサンド | 480円 | | | BLTサンド | 550円 | ベーコン、レタス、トマト | | ハムチーズサンド | 520円 | | | アボカドサーモンサンド | 650円 | 人気No.1 | | クロックムッシュ | 600円 | 温かいチーズトースト | ### スイーツ | 商品名 | 価格（税込） | 備考 | |--------|-------------|------| | チーズケーキ | 450円 | 濃厚ベイクドタイプ | | ティラミス | 480円 | | | チョコレートケーキ | 450円 | | | シフォンケーキ | 400円 | 日替わりフレーバー | | スコーン | 320円 | プレーン or チョコチップ | | マフィン | 350円 | ブルーベリー or バナナ | | クッキー（3枚） | 280円 | | --- ## アレルギー情報 ### 乳製品を含む商品 カフェラテ、カプチーノ、カフェモカ、キャラメルラテ、抹茶ラテ、ココア、チーズケーキ、ティラミス、チョコレートケーキ、シフォンケーキ、スコーン、マフィン、クロックムッシュ、ハムチーズサンド ### 小麦を含む商品 全てのサンドイッチ、トースト、クロワッサン、ホットドッグ、スコーン、マフィン、クッキー、ケーキ類 ### 卵を含む商品 たまごサンド、クロワッサンセット（スクランブルエッグ）、チーズケーキ、ティラミス、チョコレートケーキ、シフォンケーキ、マフィン、クッキー ### ナッツを含む商品 チョコレートケーキ（アーモンド）、一部のマフィン（くるみ） ※詳細はスタッフにお問い合わせください。 --- ## カスタマイズオプション ### ミルクの変更（+50円） - 豆乳 - オーツミルク - アーモンドミルク ### シロップ追加（+50円） - バニラシロップ - キャラメルシロップ - ヘーゼルナッツシロップ ### その他 - エスプレッソショット追加：+100円 - ホイップクリーム追加：+80円 - デカフェに変更：+50円 --- ## テイクアウト 全メニューテイクアウト可能です。 - テイクアウト用カップでご提供 - 紙袋は無料 - マイカップ持参で50円引き --- ## ポイントカード Sky Coffeeポイントカード（無料） - 100円につき1ポイント - 50ポイントでドリンク1杯無料（Sサイズ、500円まで） - アプリでもポイント管理可能（Sky Coffeeアプリ） --- ## 予約について - 席の予約：不可（全席先着順） - ケーキの予約：前日までに電話にて受付（ホールケーキのみ） - 貸切：平日19時以降、10名以上で応相談 --- ## その他サービス - ドッグフレンドリー：テラス席のみペット同伴可 - ベビーカー：入店可（通路が狭いためお声がけください） - 車椅子：入店可（店内バリアフリー） - 多目的トイレ：あり - おむつ交換台：多目的トイレ内にあり
sky-coffee-info.md（約6KB）
- ファイルを選択すると、アップロードエリアの下に「学習する」ボタンが表示されます
ファイルをアップロードしただけでは学習は完了しません。「学習する」ボタンを必ずクリックしてください。
- 学習が完了すると、「学習済みドキュメント」にステータスが「学習完了」と表示されます
ナレッジは複数登録できます。カテゴリごとに分けて登録すると管理しやすくなります。例えば「店舗情報」「ドリンクメニュー」「フードメニュー」「アレルギー情報」などに分けるとよいでしょう。
これでAIがSky Coffeeのメニューや店舗情報について回答できるようになりました。次は実際に会話してみましょう。
ステップ4: 実際に会話してみよう
Knowledgeの登録が完了したら、AIチャットボットが正しく動作するか確認してみましょう。
- 画面右下にあるチャットアイコンをクリック
- チャットウィンドウが開いたら、設定した初期メッセージが表示されます
- 試しに「Wi-Fiはありますか？」と質問してみます
このように、Knowledgeに登録した情報についてはAIが正確に回答できます。
登録していない情報を質問された場合
では、Knowledgeに登録していない情報について質問するとどうなるでしょうか？試しに「誕生日特典はありますか？」と聞いてみます。
AIは誕生日特典について「ご用意がございません」と回答し、代わりに登録済みのポイントカード情報を案内してくれました。このように、Knowledgeに登録していない情報については正確に回答できません。
誕生日特典を案内したい場合は、Knowledgeに情報を追加しましょう。
ステップ5: Knowledgeを更新する
誕生日特典を案内できるように、ドキュメントに情報を追加して再アップロードしましょう。
- 先ほどアップロードしたMarkdownファイルに、以下の情報を追加します
## その他サービス - ドッグフレンドリー：テラス席のみペット同伴可 - ベビーカー：入店可（通路が狭いためお声がけください） - 車椅子：入店可（店内バリアフリー） - 多目的トイレ：あり - おむつ交換台：多目的トイレ内にあり - 誕生日のお客様には全品20％OFFの割引特典あり
- 更新したファイルをKnowledge (RAG)画面で再度アップロード
- 「学習する」ボタンをクリックして再学習
- もう一度同じ質問をしてみましょう
このように、Knowledgeに情報を追加して再学習することで、AIが正確に回答できるようになります。
ステップ6: Webサイトに埋め込む
最後に、作成したAIチャットボットをあなたのWebサイトに埋め込みましょう。
- 左メニューの「AI設定」をクリック
- 画面右下の「埋め込みコード」をコピー
- あなたのWebサイトの
</body>タグの直前に貼り付け
これだけで、あなたのWebサイトにAIチャットボットが表示されます。
運用のコツ
AIチャットボットは、運用しながら育てていくものです。
- 会話ログを確認して、回答できなかった質問をチェック
- 足りない情報はKnowledgeに追加して再学習
- よくある質問はQ&Aに登録して確実に回答
- システムプロンプトを調整してAIの回答スタイルを改善
おめでとうございます！これでAIチャットボットの基本的なセットアップは完了です。
ご質問やフィードバックがあれば、お気軽にお問い合わせください。
