「ライブチャットを追加する」とは実際に何を意味するのか
マーケティング用語を取り除くと、ライブチャットとは小さな浮動式のチャットウィジェットで、チャットボックスやランチャーと呼ばれることもあり、ページの隅に配置されて訪問者がリアルタイムの会話を始められるようにするものです。それらの会話は、チームまたはAIエージェントが対応する受信箱にルーティングされます。
HubSpotはこれを、"visitors directly with members of your team… as a widget on your website pages, where visitors can start a real-time conversation"を接続することだと説明しています(HubSpotのライブチャットドキュメント)。Zendeskのメッセージングウィジェットも同じ考え方で、設定してから"on your website or help center"にインストールするウィジェットです(Zendesk Web Widgetガイド)。ほぼすべてのホスト型ツールがこのパターンに従います。アカウントを作成し、JavaScriptのスニペットを取得し、ウィジェットを表示させたいページに読み込ませるのです。
これがすべての仕組みです。ツール間で異なるのは、訪問者が送信ボタンを押した後に何が起こるかであり、このガイドの大部分はそこに焦点を当てています。
ライブチャットを追加する3つの方法
1. JavaScriptスニペットを貼り付ける(どのサイトでも動作)
これはほぼ普遍的な方法です。登録し、埋め込みスニペットをコピーし、サイトのHTMLに貼り付けて公開する。Crispの導入ドキュメントは、ほぼすべてのベンダーがこれをどう説明しているかの良い例です。設定からチャットボックスのスクリプトを取得し、全体のスクリプトをコピーします。なぜなら"if part of the script is missing, the chatbox will not load correctly"だからです(Crispの導入ドキュメント)。より広い視点が欲しい場合、Crispは親切なライブチャットの概要も公開しています。
配置は重要で、ベンダー間でわずかに意見が分かれます。Crispは<head>セクション内、閉じ</head>タグの前を推奨し、headを編集できない場合は</body>の前にフォールバックします。Zendeskは特にスニペットを"before the closing HTML </body> tag."に置くことを求めています。両者に共通するのは人々を引っかける規則です。ウィジェットを表示したいすべてのページにコードを追加すること、そしてZendeskは導入が"requires some basic familiarity with your website's code"だと警告しています(Zendesk Web Widgetガイド)。
シングルページアプリケーション(React、Next.jsなど)を運用している場合の罠が1つあります。スクリプトはアプリの起動時に一度だけ読み込んでください。Crispは、"reinject the script every time the visitor changes page inside your app,"をしないよう明確に警告しています。なぜならそれは"can create duplicate loads or unexpected behavior."だからです。
2. プラグインやアプリを導入する(コード不要)
サイトがホスト型のビルダーやCMS上にある場合は、生のHTMLを完全にスキップしてください。多くのベンダーは自社製アプリを提供しています。Crispだけでも、WordPress、Squarespace、Webflow、Wix、Notion向けのガイドに加え、Shopify、WooCommerce、Magento向けのECプラグインを掲載しています。あなたのプラットフォームに専用ガイドがある場合は、汎用スニペットの代わりにそれを使ってください。
HubSpotには知っておくべき癖があります。HubSpot以外のサイトにそのチャットを設置するには、まずHubSpotのトラッキングコードを導入する必要があり、"the live chat won't appear if the tracking code isn't installed"とされています(HubSpotのライブチャットドキュメント)。Google Tag Managerは、テンプレートを直接編集せずにこれらのスニペットのいずれかを配信する一般的なノーコードの方法です。
3. ヘルプデスクのネイティブチャットを有効にする(1クリック)
チャットがすでに使っているヘルプデスクの一部である場合、導入はほとんど手間がかからないことがあります。例えばZendeskのヘルプセンターでの導入は、ヘルプセンターにウィジェットを埋め込むためのチェックボックスによる"a simple, one-click process, no tech support needed"です。すでにZendesk、Freshdesk、HubSpot、Help Scoutを使っている場合、これが通常最も摩擦の少ない方法であり、チャットをチケットと同じ受信箱に保つことができます。
ツールの実際のコスト
料金体系は、購入者を戸惑わせる境界線で分かれます。一部のツールはシート/エージェント単位で課金し、他は会話やチケット単位で課金します。この2つのモデルは同じ量でも全く異なる請求額を生むので、金額の前に単位を確認してください。
こちらは、各ベンダー自身の料金ページに基づいた人気オプションの開始価格です(2026年7月確認):
| ツール | ライブチャットウィジェット? | 開始価格 | 課金モデル |
|---|---|---|---|
| Tidio | あり | 無料(月50会話); Starter 24.17ドル/月 | 課金対象会話ごと + Lyro AIアドオン |
| Crisp | あり | 無料; Mini ワークスペースあたり45ドル/月 | ワークスペースごと、シートごとではない |
| LiveChat | あり | Starter ユーザーあたり19ドル/月 | ユーザー/エージェントごと |
| Zendesk | あり(メッセージング) | Support Team 19ドル/エージェント/月 | エージェントごと |
| Help Scout | あり | 無料(5ユーザーまで); Standard 25ドル/ユーザー/月 | ユーザーごと |
| Gorgias | あり(EC向け) | Starter 10ドル/月から(50チケット) | チケット/解決ごと |
| Chatwoot | あり(オープンソース) | 無料(エージェント2名); Startups 19ドル/月 | エージェントごと、または無料のセルフホスト |
| HubSpot | あり | バンドル、無料CRM含む | Service/CRMプランにバンドル |
強調すべき点が2つあります。TidioとGorgiasはシート単位ではなく会話またはチケット単位で課金しますが、これは低ボリュームの小規模チームには最適で、スケールすると痛手になります。Tidioは人間のエージェントが返信した場合にのみ"billable conversation"としてカウントし、"responses from Flows and Lyro AI Agent are not counted as agent replies"と明記しています(Tidioのライブチャットページ)。Crispは例外で、エージェントごとではなくワークスペースごとに課金するため、チームが大きくなるほど割安になります。
そして表示価格が本当の価格であることはほとんどありません。AIによる解決はほぼ常に別途カウントされる仕組みが上乗せされるので、AIレイヤーがチャットを追加する理由であるなら、2回目の請求で驚くのではなく最初からその費用を計算に入れておいてください。ウェブサイト向けライブチャットソフトウェアについての当社の詳細な分析では、総コストの計算をさらに深く掘り下げています。
2026年にAIがどこで役立つか
2026年のライブチャットは実際には3つの重なり合うモードであり、どちらを設定しているのかを知ることで多くの混乱を防げます。
- 人によるライブチャット。 本物のエージェントがリアルタイムで回答します。難しい、または感情的な事柄における信頼のアンカーであることは変わりません。
- AIチャットボット/デフレクション。 AIエージェントが人が関与する前に繰り返しの質問を処理します。TidioのLyro、LiveChatのAI Agent、HubSpotのcustomer agent、そしてeeselのチャットボットはすべてこのレイヤーに位置します。
- ハイブリッド:AIが最初、人へエスカレーション。 AIが最初の対応を行い、問題を解決できない、または訪問者が人を求めた瞬間に引き渡します。
実際に機能するのはこの3番目のモードで、コミュニティはその理由について声高に語っています。誰もが感じたことのある失敗は、行き止まりのボットです。あるr/CustomerServiceのスレッドはこう表現しました。
"Bots are fine as a first layer but when there's no way to reach a real person it just turns into a frustrating loop."
その裏側にあるのが、きれいな引き渡しが生む価値です。同じサブレディットの別の運用者は、デザインの目標全体をこうまとめました。
"Speed is helpful, but being able to seamlessly talk to a real person when it gets tough is what actually builds trust."
私はこれが常に起きているのを見ています。実際に確認したあるチャットでは、SEOツールのウェブサイトで訪問者が2つの操作方法についての質問をし、ドキュメントに基づく即座の回答を得た後、"Can I talk to a human?"と入力し、AIは同じ秒でサポートチームへ引き渡しました。目指すべきパターンはこれです。AIが簡単な量を処理し、人間は「how do I reset my password」を千回目に答える必要がなくなります。落とし穴は、最初のAIレイヤーが実際のナレッジベースで学習している場合にしか機能しないことです。何もないところから答えるボットは単に堂々巡りになり、それこそが「AI ruined support」という不満の大半の背景にあるものです。デフレクションの背後にある数字については、ライブチャットのデフレクションにおけるAIの記事で詳しく解説しています。
実際に重要なセットアップの手順
ウィジェットの導入は、およそ8ステップのうちの2番目にすぎません。以下は、チャットがサポート上の負債にならないようにする手順です。
- 自社のスタックと課金の許容度に合ったツールを選ぶ。 すでにヘルプデスクを使っているならそこにネイティブなもの、そうでなければTidio、Crisp、Chatwootのようなスタンドアロン。
- **導入前にウィジェットを設定する:**アクセントカラー、チャット名とアバター、ウェルカムメッセージ。
- **上記3つの方法に従ってスニペットまたはプラグインを導入する。**表示したいすべてのページで行う。
- **ルーティングルールを設定する。**HubSpotではページ単位でルーティングできるため、価格ページでのチャットはセールスへ、ナレッジベースの記事はサポートへ送られます(HubSpotのライブチャットドキュメント)。
- **営業時間と離席時の挙動を設定する。**HubSpotは誰がオンラインかに基づく可用性、決まった営業時間、あるいは24時間対応、さらに明示的な離席・オフライン状態を提供しています。これは最も見過ごされがちなステップであり、チャットが壊れているように感じさせる原因です。
- **よくある質問への定型回答を追加する。**エージェントが同じ回答を毎回入力し直さなくて済むようにします。
- 行動に基づいてチャットを開いたり挨拶させたい場合は、プロアクティブなトリガーを設定する。(ページ滞在時間、離脱の意図、カートの金額など)
- **テストしてから公開する。**公開サイトを開き、ウィジェットが表示されることを確認し、テストメッセージを送信し、それが受信箱に届くことを確認します。ウィジェットはスマートフォンでは表示が異なり、壊れたモバイルチャットは何もないより悪いため、モバイルでのプレビューを確認してください。
AIレイヤーを追加する場合、ここがドキュメントと、できれば過去のチケットに接続するタイミングでもあります。そのうえで、実際の顧客と話す前に、実際の過去の会話履歴に対してシミュレーションします。この最後の部分こそが、信頼できるボットと、不安げに見守るボットの違いです。
ライブチャットを静かに台無しにする失敗
私は十分な数のロールアウトを見てきたので、ウィジェットが導入自体で失敗することはほとんどないと分かっています。失敗するのはその周辺のことです。
- **ウィジェットが表示されない。**Crisp自身のトラブルシューティングリストは、原因の典型的な一覧です。スクリプトが完全にコピーされていない、間違ったテンプレートに追加された、一部のページに存在しない、CMSのキャッシュが古い、サイトが再公開されていない、サードパーティのJavaScriptをブロックするプラットフォームである、など(Crispのトラブルシューティングドキュメント)。信頼する前にテストメッセージを送ってください。
- **誰も対応していない。**カバー体制もオフライン時のフォールバックもなくチャットを提供すると、訪問者は決して来ない回答を期待するようになります。営業時間を設定するか、営業時間外のチャットをAIやフォームへルーティングしてください。
- **応答が遅すぎる。**遅いライブチャットはその目的自体を損ないます。あるマネージャーがRedditでこう述べたように、"you should set chat response time expectations and hours. If you REALLY need someone available immediately, you staff that like a customer [service line]"です(r/managers)。
- **モバイルでテストしたことがない。**チャットの多くはスマートフォンから始まります。プレビューを確認してください。
- **AIが何にも接続されていない。**ヘルプセンターで学習していないAIレイヤーは、単に人々を壁に跳ね返すだけです。実際のナレッジに接続し、人間に到達できる明確な手段を与えてください。
セットアップは本当に簡単です。私が一緒に仕事をしたあるメドテックのチームは、当社のチャットスニペットをNetlifyのサイトに貼り付け、問題に遭遇し("I copied the snippet and it doesnt work in netlify")、それを解決し、同じ会話の中でConfluenceのドキュメントに支えられ、Jiraへエスカレーションする動作するウィジェットを手に入れました。かかった時間は合計で午後の数時間ほどでした。ツールが難しい部分になることは一度もありませんでした。
AIレイヤーにeeselを試してみる
ライブチャットを追加する理由が、採用せずにより多くの質問に対応することであるなら、ウィジェットは仕事の半分に過ぎず、その裏にあるAIがもう半分です。eeselは、すでに使っているヘルプデスクとサイトに接続するAIエージェントで、初日から過去のチケットとヘルプドキュメントで自ら学習し、難しい問い合わせをチームへ渡す前に顧客チャットに回答します。
私が最も指摘したい部分は、そのセーフティネットです。公開前に、エージェントをシミュレーションして数千件の実際の過去のチケットに対して試すことができ、それが実際に何を答え、どこでエスカレーションしたかを正確に確認できます。こうしてGridwiseはeeselが最初の1か月でTier-1リクエストの73%を解決するようになり、その結果は7日間のトライアル中に現れました。シート単位の料金なしで解決ごとに課金され、クレジットカード不要の無料トライアルもあります。すでにヘルプデスクを使っている場合、それを置き換えるのではなく、既存のチャットにAIを追加接続することができます。
よくある質問
ウェブサイトに無料でライブチャットを追加するにはどうすればいいですか?
ウェブサイトにライブチャットを追加する最も簡単な方法は何ですか?
ライブチャットソフトウェアの料金はどれくらいですか?
ウェブサイトにはAIチャットボットと人によるライブチャット、どちらを使うべきですか?
Article by
Rama Adi Nugraha
Rama is a software engineer at eesel AI with two years of experience writing about B2B SaaS, AI tools, and customer support technology. Based in Bali, Indonesia, he brings a developer's perspective to product comparisons — cutting through marketing copy to what the integrations and APIs actually do.
