ホームページに「お問い合わせボット」を設置しよう
Webサイトに来てくれた人が、手軽に「質問・お問い合わせ」できるボット（チャットウィジェット）があると親切だしコンバージョンにも繋がるよ。今回はその設置手順を 無料のチャットボットAPI を使って解説します。
1. ボット用APIを選ぶ
まず、外部チャットボットAPI／サービスから無料プランまたは低コストのものを選びましょう。以下、候補です：
- Dialogflow（Google）
- Voiceflow — 無料プランあり。チャットボット構築が簡単にできます。 voiceflow.com
- BotPress（オープンソース）／ Rasa（オープンソース） — 自分でホストするなら無料で使えるもの。 edenai.co
- 他にもチャットボットAPIをまとめて紹介した記事あり。 Zendesk+2Tidio+2
今回は「設定が簡単」「すぐ使える」ものとして Voiceflow（または Dialogflow） を例に進めるのがおすすめ。
2. ボットの設計をしよう
ボットにどんな役割を持たせるかを考えます。例えば：
- よくある質問（FAQ）に自動で答える
- お問い合わせフォームの代替（名前・メール・内容を聞く）
- サービス案内、料金表提示
設計メモとして：
質問 | ボットの応答 |
「サービス内容を教えて」 | 「当社では〜を提供しています。詳しくはこちら→〜」 |
「料金はいくらですか？」 | 「料金プランは…」 |
「お問い合わせをしたい」 | 「お名前を教えてください／メールアドレスを教えてください」 |
こうしておくことで、API構築時に“どのようなフロー”か決まりやすい。
3. ボットをサービス上に構築／API取得
例えば Voiceflow を使う流れ：
- Voiceflow に登録（無料プラン）
- 新しいプロジェクト／チャットボットを作成
- 会話フローを作る（ユーザーの質問 → 応答パターン）
- Webチャットウィジェット（Embed）またはAPIキーを取得
- ボットを Webページに埋め込むウィジェットが準備されていることが多い
- または「REST API エンドポイント」が発行される場合も
※ Dialogflowの場合も同様に「Intents（意図）」と「Responses（応答）」を設定して、Web向けインテグレーションを有効化します。
4. HTML／CSS／JSでボットウィジェットを設置
ホームページ側（例：index.html）にチャットボットウィジェットを埋め込みます。
🔧 サンプルコード（簡易版）
※ウィジェットではなく「REST API を自分で呼び出す」設置も可能です。以下はその例。
5. 動作チェック＆レスポンシブ対応
- PC／スマホ両方でウィジェット位置が崩れないか確認
- ボットの応答が期待通りかテスト（名前・メールを聞く／応答パターン）
- ボットが表示されるまでの読み込み速度もチェック
6. 発展機能：さらにリッチにするコツ
ボット設置だけでも十分ですが、さらにユーザー体験を高めるためのアイデア：
- チャット開始時に「まずはこちらを選んでください」メニューを出す
→ 例「料金」「サポート」「採用」などボタン選択
- ユーザー入力を Googleスプレッドシート／Slack／メールに転送
- 一定時間応答がないと“オペレーターに引き継ぐ”フローを追加
- ヒントとしてFAQのリンクを提示
- ユーザーの滞在時間や使われたキーワードを分析して改善
7. 注意点・よくあるトラブルと対策
- 無料プランでは 月あたりの利用回数制限 や 応答速度の制限 があることがあります。
- ボットが誤回答する場合、意図（Intent）や応答パターンを増やして精度を上げる必要あり。
- プライバシー・個人情報扱いに注意。ユーザーの名前・メールを聞く場合は SSL通信（HTTPS） や データの取り扱いポリシーを明示しましょう。
- モバイルでチャットウィジェットが画面をふさぎすぎないよう 閉じる／最小化ボタン を設けると親切。
まとめ
今回は、ホームページにお問い合わせボットを設置する方法を「無料チャットボットAPIを利用する」という観点でご紹介しました。
AIやチャット技術を使って、ユーザーとの対話を可能にすることで、サイトの利便性・信頼性を高めることができます。
大切なのは、 ただ設置するだけでなく“ユーザーが使いやすい設計”を意識すること。
チャットボットも、あなたのWebサービスの一部として丁寧に作り込みましょう。
次のステップとして、「ボットの会話内容を日本語化」「多言語対応」「過去のやりとりを保存して次回に活かす」などにも挑戦してみてください。
もし良ければ、具体的な Voiceflow（または Dialogflow）での設定手順とコードサンプルも出せるよ。やってみる？