AIチャットボットをサイトに設置する3つの方法｜手順と公開前チェック
2026-09-04
「自社サイトにAIチャットボットを設置したい」。そう考えたとき、WordPressへの追加、HTMLへの埋め込み、API連携のどれを選べばよいか迷う担当者は少なくありません。設置方法によって、必要な作業も求められる知識も変わります。
結論からお伝えすると、外部システムのデータを使わないならコードを貼り付ける方法で足ります。API連携が必要になるのは、注文照会や予約確認のように個別データを返したい場合に限られます。
本記事では、3つの設置方法を比較したうえで、それぞれの手順を5ステップで解説します。後半では公開前に確認したい6項目もまとめているので、チェックリストとして活用してください。
▶ あわせて読みたい：AIチャットボットとは？仕組み・活用事例・選び方を課題別に解説【2026年版】
1. AIチャットボットをサイトに設置する3つの方法
サイトへの設置方法は、WordPressへのコード追加、HTMLへの埋め込み、API連携の3つに大別されます。違いを次の表に整理しました。
| 比較項目 | WordPressへのコード追加 | HTMLへの埋め込み | API連携 |
|---|---|---|---|
| 向いているサイト | WordPressで構築したコーポレートサイト・メディア | HTMLで構築した静的サイト | 会員情報など外部システムと連動させたいサイト |
| 必要な担当者 | WordPressの管理者権限を持つ担当者 | HTML編集とサーバー操作ができる担当者 | API開発の知識を持つエンジニア |
| 導入難度 | 低 | 低〜中 | 高 |
| カスタマイズ性 | 低〜中 | 低〜中 | 高 |
| 主な用途 | FAQへの自動回答・一次対応 | FAQへの自動回答・一次対応 | 注文照会・予約など個別データを扱う応対 |
埋め込みコードを使う前者2つは、提供元が用意したコードを貼り付けるだけで完了します。専任のエンジニアがいなくても対応できる方法です。
一方のAPI連携は、開発の負担がかかる分、外部システムのデータを使った柔軟な応対を実現できます。自社サイトの構成と、チャットボットに求める応対内容から選びましょう。
作り方そのものから知りたい場合はAIチャットボットの作り方・自作方法｜3つの構築手順を初心者向けに解説もあわせてご覧ください。
2. WordPressサイトにAIチャットボットを設置する手順
WordPressで構築したサイトへの設置は、埋め込みコードの取得から表示確認まで5ステップで完了します。権限まわりのつまずきも多いため、順に見ていきましょう。
ステップ1：WordPress用の埋め込みコードをコピーする
利用するAIチャットボットの管理画面から、WordPress設置用の埋め込みコードを取得します。多くのサービスでは、画面の隅に小さく表示するチャット型や、ページ内へ直接組み込む埋め込み型など、複数の表示形式が用意されています。
サイト上でどう見せたいかを先に決めてから、該当する形式のコードをコピーしましょう。
ステップ2：コードを追加する場所を開く
次に、埋め込みコードを追加する場所をWordPressの管理画面で開きます。追加先の候補は次の3つです。
- 固定ページなどに配置するカスタムHTMLブロック
- コード管理用のプラグイン
- テーマファイル
全ページに表示するならテーマ側、特定のページだけならブロック側というように、追加場所はサイトの構成によって変わります。作業前に、自分のアカウントで該当箇所を編集できるかも確認しておきましょう。
ステップ3：指定欄へコードを貼り付ける
提供元が指定する欄へコードを貼り付けて保存します。ここで注意したいのがWordPressの権限です。
scriptタグやiframeタグを保存できるのは、unfiltered_htmlという権限を持つユーザーだけです。この権限は、シングルサイトでは管理者と編集者に付与されますが、投稿者と寄稿者にはありません。さらにマルチサイト環境では、管理者・編集者でも対象外となり、特権管理者だけが保存できます。
設置は管理者権限（マルチサイトでは特権管理者）のアカウントで行い、保存後にコードが消えていないかを必ず確認してください。
（出典：WordPress公式ドキュメント「Roles and Capabilities」）
ステップ4：キャッシュを削除する
コードを保存したのに表示が変わらない場合は、キャッシュが原因である可能性が高いです。
まずブラウザのキャッシュを削除し、ページを再読み込みしてください。それでも反映されないときは、キャッシュプラグインを確認します。WordPress本体に標準のページキャッシュ機能はないため、該当するのはプラグインを導入している場合だけです。サーバーやCDN（コンテンツ配信を高速化する仕組み）側にキャッシュ機能がある場合も、それぞれの手順に従って削除しましょう。
ステップ5：WordPressサイトで表示を確認する
公開中のページを実際に開き、チャットボタンが想定した位置に表示されているかを確認します。表示の確認だけで終わらせず、チャット画面の開閉から質問の送信、回答の表示まで一通り試してください。
ここまで問題なく動けば、WordPressサイトへの設置は完了です。
3. HTMLサイトにAIチャットボットを埋め込む手順
HTMLで構築したサイトでも、埋め込みコードを使えば5ステップで設置できます。
ステップ1：HTMLサイト用の埋め込みコードをコピーする
管理画面からHTMLサイト設置用のコードを取得します。形式は、JavaScriptを読み込むタイプと、iframeでチャット画面を埋め込むタイプが代表的です。
コード内にはURLのほか、契約アカウントを識別する固有の文字列が含まれます。一部が欠けると動かないため、全体をそのままコピーしてください。
ステップ2：HTMLファイルを開く
AIチャットボットを表示したいページのHTMLファイルを開きます。全ページに表示する場合は、ヘッダーなど複数ページで共通利用しているテンプレートファイルが編集対象です。
どのファイルを直せばよいか分からないときは、サイトの制作会社に確認しましょう。
ステップ3：指定位置へコードを貼り付ける
提供元が指定する位置へコードを追加します。head要素内を指定するサービスもあれば、bodyの閉じタグ直前、あるいはページ内の表示させたい箇所を指定するサービスもあります。
追加位置を自己判断で変えると正しく動作しない恐れがあるため、提供元の設置手順を最優先で参照してください。
ステップ4：ファイルをサーバーへアップロードする
編集が終わったら、公開手順に従ってサーバーへアップロードします。FTPソフト（サーバーとファイルをやり取りする専用ソフト）を使う方法と、レンタルサーバーのファイルマネージャーを使う方法が代表的です。
作業前には、編集前のファイルを必ず別の場所に保存しておきましょう。不具合が起きても、元のファイルに戻せばすぐに復旧できます。
ステップ5：HTMLサイトで表示を確認する
反映したページを開き、チャットボタンの表示を確かめます。表示されない場合に見直したいのは次の3点です。
- コードの欠落
- 貼り付け位置の誤り
- JavaScriptの読み込み状況
ブラウザの開発者ツールでエラーの有無をチェックすると、原因を絞り込みやすくなります。
4. API連携でAIチャットボットをサイトに組み込む手順
API連携を使うと、埋め込みだけでは難しい、外部システムのデータを参照した応対が可能になります。開発前の準備から本番反映まで、押さえておきたい5ステップを紹介します。
ステップ1：連携するデータを決める
最初に決めるのは、AIチャットボットから参照または更新するデータの範囲です。会員情報、注文状況、在庫、予約状況などが候補になります。
思いつくデータをすべて連携させる必要はありません。回答に使う目的がはっきりしているデータだけに絞ると、開発の負担を抑えながら情報漏えいのリスクも小さくできます。あわせて、利用者とAIチャットボットそれぞれに与えるアクセス権限を、業務に必要な範囲へ限定する方針も決めておきましょう。
ステップ2：利用するAPIの仕様を確認する
AIチャットボット側と既存システム側、双方のAPI仕様書を確認します。この段階の目的は、作り方の検討ではなく、そもそも連携できるかの判断です。最低限、次の項目を整理しておきましょう。
- 利用できる処理（データの取得・登録・更新のどれに対応しているか）
- データ形式（JSONなど双方で扱える形式かどうか）
- 認証方式（APIキーとアクセストークンのどちらを使うかなど）
- 利用回数の制限（短時間に呼び出せる回数の上限）
どれか1つでも要件に合わない場合は、連携範囲の見直しが必要です。
ステップ3：APIの認証方法を設定する
接続してきた相手が正当なシステムかを確認するための認証を設定します。代表的な方式は、APIキーまたはアクセストークンによる認証です。
注意したいのは、APIキーが第三者にコピーされると、そのまま悪用される恐れがある点です。APIキー単体を強固な対策と考えず、URLのパラメータにキーを含めない、不要になったキーは削除するといった管理を徹底しましょう。
ステップ4：エラー時の動作を設定する
連携がうまくいかないケースに備えて、エラー発生時の動作も決めておきます。想定しておきたいのは、認証の失敗、入力内容の不備、通信のタイムアウト、接続先システムの停止などです。
大切なのは、情報を取得できないときにAIへ推測で回答させないことです。「確認できませんでした」と正直に伝えたうえで、再試行を促すか、有人窓口へ誘導する流れを設計しておきましょう。
ステップ5：テスト環境で連携を確認する
本番反映の前に、テスト環境で動作を確認します。正常にデータを取得できるケースだけを試して終わりにせず、次のような異常系もあわせてテストしてください。
- 対象のデータが存在しない場合
- 認証に失敗した場合
- 接続先のシステムが応答しない場合
- タイムアウトなど通信エラーが発生した場合
- APIの利用制限（レートリミット）に達した場合
- 想定外のデータ形式でレスポンスが返ってきた場合
権限の範囲外にある情報が表示されないか、個人情報が不適切に出力されないかも確かめたうえで、本番環境へ反映しましょう。
5. AIチャットボットをサイトで公開する前に確認する6項目
設置が終わっても、すぐに公開するのは待ってください。公開後のトラブルを防ぐために、次の6項目を事前に確認しておきましょう。
回答が正しく表示されるか
実際の利用者を想定した質問を複数入力し、登録したFAQやマニュアルに沿った内容が表示されるかをテストします。
誤った回答と、答えられなかった質問は一覧に記録しておきましょう。公開前に直すべき箇所が整理できるうえ、公開後の改善にもそのまま使えます。測り方は【保存版】AIチャットボット回答精度の上げ方｜正答率・カバー率の測り方で解説しています。
スマートフォンで操作できるか
スマートフォンでの動作確認は、パソコンとは別に必ず実施しましょう。見るべき点は次の2つです。
- チャットボタンがほかの要素と重なっていないか
- 入力欄・送信ボタン・閉じるボタンを指で操作できるか
画面幅の狭い機種でも、端末を横向きにした状態でも、チャット画面が画面内に収まるかを試してください。
ページ表示速度への影響はないか
設置の前後で、ページの表示速度を測定して比較しましょう。外部のJavaScriptやiframeを読み込む仕組み上、実装方法によっては読み込みに影響が出る場合があります。
測定にはLighthouseなどの無料ツールが役立ちます。影響が見過ごせない水準であれば、読み込みタイミングを遅らせるといった調整を提供元とサイト管理者に相談してください。
個人情報を入力したときの動作はどうか
氏名、連絡先、顧客番号といった個人情報を入力した場合の扱いも確認が必要です。チェックする項目は、入力内容の保存先、利用目的、閲覧できる担当者の範囲の3点です。
個人情報保護委員会も、生成AIサービスの利用に関する注意喚起を公表しています。自社の運用が注意喚起の内容と矛盾しないかを、公開前に確認しておきましょう。
（出典：個人情報保護委員会「生成AIサービスの利用に関する注意喚起等」）
有人窓口へ切り替わるか
AIチャットボットが答えられない質問への備えとして、有人対応への切り替えも確認します。テストしたいのは、回答できなかった場合と、利用者が担当者との対話を希望した場合の2つです。
有人チャットや問い合わせフォームへ問題なく移動できるかに加えて、それまでの会話履歴と入力済みの情報が引き継がれるかも確かめてください。引き継ぎに失敗すると、利用者は同じ説明を繰り返すことになります。
キーボードで操作できるか
マウスを使わず、キーボードだけで操作できるかも確認しましょう。Tabキーでチャットボタンから入力欄、送信ボタン、閉じるボタンまで順に移動できるかを確認します。判断の基準になるのは、WCAG 2.1（Webコンテンツのアクセシビリティに関する国際的なガイドライン）の達成基準です。
Tabキーで各要素を操作できる（2.1.1 キーボード／レベルA）- 操作の順序が妥当である（2.4.3 フォーカス順序／レベルA）
- チャット画面から抜けられなくならない（2.1.2 キーボードトラップなし／レベルA）
- 現在選択している要素が視覚的に判別できる（2.4.7 フォーカスの可視化／レベルAA）
デジタル庁もWebアクセシビリティ導入の手引きを公開しており、幅広い利用者への配慮は企業サイトにも求められています。
（出典：デジタル庁「ウェブアクセシビリティ導入ガイドブック」）
6. サイトに設置したAIチャットボットを改善する方法
サイトに設置したAIチャットボットは、公開後も会話履歴を確認しながら育てていく必要があります。公開時点の回答精度が、利用者の実際の質問に十分対応できるとは限らないためです。
見直しの起点になるのは、次の4つです。
- 回答できなかった質問（未回答）
- 内容が誤っていた回答（誤回答）
- AIチャットボットの利用率
- 有人窓口への遷移状況
これらをもとに、FAQの追加、回答内容の修正、導線の見直しの優先順位を整理しましょう。改善が止まると利用率も落ちていきます。つまずきやすいポイントはAIチャットボットの活用が進まない企業に共通する3つの落とし穴と対策で解説しています。
▶ 関連事例：月間問い合わせの約50%をAIで解決｜minne
7. サイトの問い合わせ対応をまとめる「GMO即レスAI」
設置作業そのものは、本記事の手順に沿えば多くの場合で対応できます。成果を左右するのは、公開後の運用です。
GMO即レスAIは、Webサイト向けAIチャットボットの設計から公開後の改善までを一緒に進めるAIチャットボット導入支援サービスです。GMOペパボが778万人以上の顧客対応で培ったCS（カスタマーサポート・サクセス）運営のノウハウをもとに、CS出身の担当者が業務フローに合わせて設計します。
- 導入目的の整理と、問い合わせ内容に合わせた設計
- FAQ・マニュアルなど参照データの整備
- 有人対応への切り替えを含む運用フローの構築
- 公開後の会話分析と回答精度のチューニング
導入後1ヶ月で約20,000件の問い合わせに自動対応した実績や、月間正答率99%を達成した運用例があります。有人対応への切り替えやチケット管理、指標の可視化までを1つの画面にまとめたいなら、カスタマーサポート業務に特化したGMO即レスAI for CSが適しています。
「設置作業までは自社で進められるが、その後の運用を担える人がいない」とお考えの方は、お気軽にご相談ください。
▶ AIチャットボットの設置・運用についてのお問い合わせはこちら
8. よくある質問
Q. WordPressのテーマを更新するとコードは消えますか？
A. 親テーマのファイルへ直接追加したコードは、更新時に上書きされて消える可能性があります。子テーマを使うか、コード管理用のプラグインを利用するなど、更新の影響を受けにくい場所で管理しましょう。どこへ追加したかを記録しておくと、後の確認が楽になります。
Q. API連携が必要になるのはどのような場合ですか？
A. 会員情報、注文状況、予約、在庫など、外部システムのデータをその場で参照または更新したい場合です。「注文番号を伝えると配送状況が返ってくる」応対は、埋め込みコードだけでは実現が難しい代表例です。登録済みのFAQと資料をもとに回答するだけなら、埋め込みコードで対応できます。
Q. AIチャットボットの設置でサイト表示は遅くなりますか？
A. 外部のJavaScriptやiframeを読み込む仕組み上、実装方法とサービスの仕様によっては影響する可能性があります。ただし、すべてのケースで遅くなるわけではありません。設置前後の速度を測定して比較し、影響が確認できた場合は読み込みタイミングの調整を提供元に相談してください。
Q. 複数のページにまとめて表示できますか？
A. 多くのサービスが対応しています。同じ埋め込みコードを各ページへ追加する方法のほか、共通テンプレートやサイト全体のコード管理機能へ1回追加するだけで済む場合もあります。表示対象ページの指定方法と、複数ドメインでの利用可否はサービスごとに異なるため、契約内容とあわせて確認しましょう。
9. AIチャットボットのサイト設置まとめ
サイトへの設置方法は、WordPressへのコード追加、HTMLへの埋め込み、API連携の3つです。外部システムのデータを使わないなら、埋め込みコードを貼り付ける方法で足ります。
WordPressではunfiltered_html権限とキャッシュ、HTMLでは貼り付け位置とファイルのバックアップがつまずきやすいポイントです。API連携では、連携範囲の絞り込みと異常系のテストを丁寧に行いましょう。公開前には、回答の正しさ、スマートフォン操作、表示速度、個人情報の扱い、有人窓口への切り替え、キーボード操作の6項目を確認しましょう。
設置はゴールではなく、公開後の分析と改善が成果を決めます。ナレッジの整備から回答精度の改善まで一緒に進めたい方は、GMO即レスAIへご相談ください。
▶ サイトへのAIチャットボット導入についてのご相談はこちら
最後までお読みいただきありがとうございました。