AIチャットボットをホームページに埋め込む方法は、大きく分けて2つです。1つはノーコードツールで自分で設置する方法、もう1つは自社データを学習させたオーダーメイド開発です。ツールの管理画面で発行されたコードをサイトに貼り付けるだけなら、アカウント登録から表示まで最短1時間ほどで完了します。ただし、「自社の料金や営業時間に正確に答える」「専門的な問い合わせをさばく」といった実用レベルを目指すなら、自社データを学習させる仕組みが欠かせません。この記事では、設置手順・FAQ自動応答の作り方・費用相場・失敗しないポイントまで、導入の判断ができるように解説します。
チャットボット単体ではなく、問い合わせ対応全体をどう自動化するかを俯瞰したい方は、カスタマーサポートをAIで自動化する進め方もあわせてご覧ください。
AIチャットボットをホームページに埋め込む方法は2つ（ノーコード vs オーダーメイド）
まず全体像です。AIチャットボットの埋め込みは、「ノーコードツールで設置する」か「自社データを学習させたオーダーメイド（RAG型）を開発する」かの2択で考えると整理しやすくなります。RAG（Retrieval-Augmented Generation＝検索拡張生成）とは、回答を作る前に自社のFAQや資料を検索し、その内容に基づいて答えさせる仕組みのことです。これにより、AIが事実に基づかない回答（ハルシネーション）をするリスクを抑えられます。
どちらが正解ということはなく、目的・予算・求める回答精度によって最適解は変わります。下の比較表で違いを確認してください。
比較項目 | ノーコードツール | オーダーメイド開発（RAG型） |
|---|---|---|
設置の手軽さ | 管理画面でコード発行→貼り付けのみ。最短1時間程度 | 要件定義・データ整備・開発が必要（数週間〜） |
回答の精度・専門性 | 登録できるデータ量に制限。汎用的な応答が中心 | 自社データを深く学習。専門的な質問にも対応しやすい |
カスタマイズ性 | デザイン・機能はツールの範囲内 | UI・連携・回答方針まで自由に設計可能 |
外部システム連携 | 限定的（予約・CRM連携などは制約あり） | 予約システム・社内DB・LINE等と柔軟に連携 |
初期費用 | 無料〜数万円（プラン次第） | 約50万〜500万円以上（規模による） |
向いているケース | まず試したい／一般的な案内で十分 | 正確な接客・売上貢献を本気で狙いたい |
結論として、「とりあえず試す」ならノーコード、「自社に正確に答えさせて成果を出す」ならオーダーメイドという棲み分けになります。小規模事業者がまず効果を体感する流れについては、小規模事業者向け24時間接客AIの効果と始め方もあわせて参考にしてください。
ホームページへの設置手順（スクリプトタグ方式・iframe方式）
埋め込みの実装方式は主に2種類あります。スクリプトタグ方式（ウィジェット型）とiframe方式（埋め込み枠型）です。それぞれ貼り付け場所と見え方が異なるため、目的に合わせて選びます。多くのツールでは、アカウント登録からコード発行までが10分程度、サイトへの貼り付けまで含めても1時間以内に表示できます。
予約の受付そのものをサイトに載せたい場合は、予約システムをホームページに無料で埋め込む手順を別記事で解説しています。チャットボットと予約フォームを組み合わせると、問い合わせと予約の両方を自動で受けられます。
スクリプトタグ方式（画面右下に浮かぶウィジェット型）
スクリプトタグ方式は、JavaScriptのコードを読み込ませることで、画面の右下などにチャットの吹き出しボタンを常時表示する方式です。サイトのどのページからでも話しかけられるため、問い合わせ窓口として最も一般的です。設置は、ツールが発行する<script>タグを、HTMLの</body>の直前に貼り付けるだけです。
たとえばノーコードツールのChatbase（チャットベース）では、管理画面の「Embed on site（サイトに埋め込む）」から、ウィジェット用のscriptスニペットを発行できます。bodyの末尾に貼ると表示パフォーマンスへの影響を抑えられるため、原則としてページ下部への配置が推奨されます。
iframe方式（ページ内の指定位置に埋め込む）
iframe（インラインフレーム＝Webページ内に別ページを表示する枠）方式は、ページ内の好きな場所にチャット画面そのものを埋め込む方式です。「お問い合わせページ全体をチャット画面にしたい」「FAQページの中にチャット枠を置きたい」といった用途に向いています。発行された<iframe>タグを、表示したい位置のHTMLに貼り付けます。
ChatbaseやDify（ディファイ）などのツールでは、scriptとiframeの両方のスニペットを選んで発行できます。浮かぶボタンが欲しいならscript、ページ内に固定で見せたいならiframeと覚えておくと選びやすくなります。
WordPressへの埋め込み
WordPress（ワードプレス）の場合、テーマのHTMLを直接触らずにコードを挿入できる「WPCode」などのプラグインが安全です。WPCodeは「Insert Headers and Footers」機能でヘッダー・フッターにコードを差し込めるため、テーマを更新してもコードが消えません。チャットボットのscriptタグは、フッター（body末尾）に貼り付けるのが基本です。
プラグインを使わない場合は、子テーマのfunctions.phpにフック（WordPressの拡張ポイント）を使って挿入する方法や、header.phpを直接編集する方法もあります。ただし直接編集はテーマ更新で上書きされるリスクがあるため、初心者にはプラグイン方式をおすすめします。
Next.jsへの埋め込み
Next.js（ネクストジェイエス＝Reactベースのフレームワーク）では、通常の<script>を直書きするのではなく、専用のnext/scriptコンポーネントを使うのが定石です。全ページに表示したい場合は、共通レイアウト（app/layout.tsxなど）の中に<Script>を置き、ページ全体で1度だけ読み込まれるようにします。
読み込みタイミングはstrategyで指定でき、ページの表示を妨げにくい設定を選ぶのが一般的です。実装の細部はツールやバージョンで変わるため、各ツールの公式ドキュメントを確認しながら進めてください。なお自社サイトをこれから作るなら、Next.jsとWordPressのどちらを選ぶかでチャットボットの組み込み方も変わります。
FAQ・問い合わせ自動応答の作り方
チャットボットを設置しただけでは、「自社のこと」には答えられません。FAQや問い合わせの自動応答を実用レベルにするには、自社の情報をAIに渡して回答の根拠にする必要があります。手順の大枠は次のとおりです。
- 想定質問を洗い出す：実際に多い問い合わせ（料金・営業時間・予約方法・キャンセル規定など）をリスト化する。
- 回答用データを整える：FAQ文書・サービス資料・サイトのページなどを、AIが読みやすい形に整理する。
- AIに学習・参照させる：ツールにデータを取り込むか、RAGで検索対象として登録する。
- テストと修正：実際に質問して誤りを確認し、データや指示文（プロンプト）を調整する。
誤回答を放置すると顧客の信頼を損なうため、公開後も定期的なテストと改善が前提になります。
自社データを学習させるには（RAG）
「自社に正確に答える」ための鍵がRAGです。RAGは、ユーザーの質問に対してまず自社データの中から関連情報を検索し、その内容に基づいて回答を生成します。AIに架空の情報を作らせず、根拠のある回答に近づけられるのが最大の利点です。
ノーコードツールでも、DifyのようにRAG機能を標準搭載し、FAQや社内文書を取り込んでチャットボットを作れるものがあります。一方、データ量が多い・社内システムと連携したい・回答方針を細かく制御したいといった場合は、オーダーメイドでのRAG構築が向いています。士業や専門サービスのように回答の正確さが重視される業種での活用例は、士業・専門サービスサイトのAIチャット導入で詳しく解説しています。予約方法やキャンセル規定への回答のように、予約受付に用途を絞って自動化したい場合は、AIで予約受付を自動化する方法｜店舗・クリニックのLINE予約で店舗・クリニック向けの構築パターンを紹介しています。
費用相場（段階別）
費用は「どこまで自社向けに作り込むか」で大きく変わります。2026年時点のおおよその相場を段階別にまとめました。あくまで目安であり、データ量・連携範囲・利用量によって変動します。
導入レベル | 初期費用 | 月額（運用・従量） | 特徴 |
|---|---|---|---|
ノーコードツール（無料〜） | 0円〜数万円 | 0円〜数万円 | まず試す段階。メッセージ数やデータ量に制限あり |
ノーコードRAGツール活用の構築 | 約50万〜150万円 | 月2万〜10万円程度 | 自社データを学習。中小規模に現実的な選択肢 |
フルスクラッチ開発 | 約200万〜500万円以上 | 月2万〜10万円程度〜 | UI・連携・回答方針まで自由に設計 |
大規模RAG導入 | PoC 100〜300万円／本番 300〜1,000万円 | 月10〜50万円 | 大量データ・全社利用・高い精度要件向け |
月額にはOpenAI等のAI（API＝外部サービスを呼び出す仕組み）の利用料や、検索基盤の費用が含まれます。これらは利用量に応じた従量課金のため、問い合わせが増えるほど月額も上がる点に注意してください。PoC（Proof of Concept＝本格導入前の効果検証）は、いきなり大きく投資せず効果を確かめるための小規模な試行を指します。
無料で設置できるか
結論から言うと、無料で「設置」までは可能です。Chatbaseのようにメッセージ数や学習データ量に制限のある無料プランを使えば、コストをかけずにウィジェットを表示できます。試しに体験する用途であれば十分です。
ただし無料プランには、メッセージ数の上限・取り込めるデータ量の制限・一定期間使わないとデータが削除されるといった制約が伴うことが多くあります。本格的に問い合わせ対応へ使うなら、有料プランかオーダーメイドへの移行が現実的です。「無料でずっと業務利用」は難しいと理解しておきましょう。
失敗しないポイント（注意点・運用の注意）
導入後に「思ったほど使われない」「誤回答でクレームになった」とならないために、押さえるべき注意点を挙げます。メリットだけでなく、現実的なデメリットも理解しておくことが大切です。
- 誤回答（ハルシネーション）対策を前提にする：AIは自信ありげに間違えることがあります。RAGで根拠を与え、重要事項は「担当者に確認」へ誘導する設計にする。
- 「作って終わり」にしない：実際の質問ログを見て、答えられなかった質問をデータに追加する運用が成果を左右します。
- 有人対応への切り替え口を残す：複雑な相談やクレームは人に引き継げるようにし、機会損失と不満を防ぐ。
- 個人情報の扱いに注意：チャットで個人情報が入力される可能性を踏まえ、保存・送信の取り扱いを確認する。
- 表示速度への影響を確認する：スクリプトの読み込みでページが重くならないか、設置後にチェックする。
ツール選びやパートナー選定では、他社を批判するより「良いパートナーの条件」で考えると失敗しにくくなります。具体的には、(1)自社データの活用方法まで提案できる、(2)運用・改善まで伴走してくれる、(3)費用の内訳と従量課金の見通しを明示してくれる、の3点です。
なお、顧客接点をLINEに置きたい場合は、サイト埋め込みではなくLINE上のチャットボットが適することもあります。チャネルの使い分けはLINEでのAIチャットボットの作り方を参考に、自社サイト埋め込みとあわせて検討してください。
よくある質問（FAQ）
AIチャットボットの設置にどれくらい時間がかかりますか？
ノーコードツールであれば、アカウント登録からコード発行まで10分程度、サイトへの貼り付けまで含めても1時間以内に表示できることが多いです。一方、自社データを学習させたオーダーメイド開発は、要件定義やデータ整備が必要なため数週間〜が目安になります。
scriptタグ方式とiframe方式はどちらを使うべきですか？
画面右下などに常時浮かぶ吹き出しボタンを表示したいならscriptタグ方式、お問い合わせページなど特定の位置にチャット画面を埋め込みたいならiframe方式が向いています。多くのツールで両方のコードを発行できるため、目的に合わせて選べます。
自社の料金や営業時間に正確に答えさせるにはどうすればよいですか？
FAQや資料などの自社データをAIに学習・参照させるRAG（検索拡張生成）の仕組みが必要です。DifyのようにノーコードでもRAGを使えるツールがあるほか、精度や連携を重視する場合はオーダーメイドでの構築が適しています。
無料で使い続けられますか？
無料プランで設置・体験は可能ですが、メッセージ数や学習データ量に上限があり、長期間使わないとデータが削除されるツールもあります。業務として本格的に使うなら、有料プランかオーダーメイド開発への移行が現実的です。