サイトにチャットを設置する方法と返信までの手順

接客チャットを表示するには、設定 → チャット設定で「ライブチャットを表示する」を ON にして保存します。 計測タグが入っているサイトなら、追加のタグは不要です。公開前に、誰がいつ返信するかも決めておきます。 設定の目安は 10 分で、そのうち 5 分を文言の確認に使う想定です。

サイトに問い合わせの入口を置きたい。でも、ボタンを出した後に誰が返信するのか、会社の色に合わせられるのかが気になる。まずは、チャットを表示する準備と、届いた会話に対応する準備を分けて進めます。

下の画面例には、サンプルの設定を表示しています。自分の管理画面でも、同じ項目を確認できます。設定画面のプレビューで見た目を決め、保存した後に公開サイトで動作を確かめます。

1. サイトに表示されるチャット

公開サイトの右下か左下に、丸いチャットボタンを表示できます。 訪問者が押すと、会話を入力するパネルが開きます。まず、ボタンと開いた後の画面を確認します。

次は、設定 → チャット設定の右側にあるプレビューです。色は #4F46E5、位置は右下、アイコンは吹き出し、サイズは標準です。見出しは「お問い合わせ」で、初期設定の見た目を確認できます。

プレビューでは、設定を変えたときの見た目を保存前に確認できます。 公開サイトと同じチャットの表示処理を使っています。色や見出しを試すたびに、公開サイトの設定を変える必要はありません。

チャットは、サイト本体とは見た目の指定を分けて表示します。この仕組みを Shadow DOM と呼びます [4]。サイト本体の文字色や装飾が、チャットへそのまま入り込むのを防ぎます。

仕組みの名前を覚えなくても、設定は進められます。ただし、別のボタンに重なるか、スマホで押しやすいかは公開サイトで確認します。プレビューだけでは、サイト本体にある要素の配置までは分かりません。

2. 始める前の準備

計測タグが設置済みで、チャットを変更する権限があれば設定できます。 どちらかがまだなら、先に担当者へ依頼します。

必要なもの	補足
計測タグ (t.js) の設置	チャットボタンは計測タグが描画します。別のタグはありません。未設置なら 計測タグ (t.js) を設置する の手順で先に貼ってください [2]
チームの「接客」グループの閲覧・書き込み権限	閲覧のみのメンバーは設定画面を見られますが保存できません (画面上部に「閲覧のみ」の注記が出ます)。権限は チーム (/team) でオーナーが付与します [3]

タグの設置を制作会社へ頼み、チャットの文言は社内で決める進め方もできます。その場合は、先にタグの設置完了を確認します。文言の担当者は、接客の設定を保存できるかも確かめます。

設定を開く前に決めておくこと

設定を始める前に、次の 4 つを決めます。打ち合わせに 15 分ほど取り、担当者や返信時間を共有する進め方もできます。設定操作の目安は 10 分ですが、文言が未定なら、その検討時間も見込んでおきます。

決めること	決め方	決めていないと起きること
誰が返信するか (担当と時間帯)	7 章の運用の型から 1 つ選ぶ	会話が届いても誰も見ない
営業時間として書く時間	実際に返信できる時間。理想ではなく実態	不在時ヒントが嘘になり、信頼を落とす
アクセントカラーの 16 進値	ブランドガイドラインの値。無ければロゴの主色をカラーピッカーで拾う	「なんとなく青」で決めて、後からデザイン担当に差し戻される
見出しと質問例の文言	5 章のテンプレから業種の行を選び、自社の言葉に直す	既定の「お問い合わせ」のまま公開し、押されない

アクセントカラーは、チャットのボタンや見出しに使う色です。入力には #1E3A8A のような、色を表す記号を使います。# の後に 6 桁を書く形式で、HEX 値とも呼びます。

デザイン会社へは、「チャットのボタンに使う色を、# と 6 桁の文字で教えてください」と聞けます。Chrome の開発者ツールで色を選ぶ方法もあります。普段使わないツールを無理に操作せず、サイトを担当する人に確認できます。

3. 表示と見た目の7項目を設定する

表示の ON / OFF と、見た目や文言の 7 項目を設定します。 初期値でも動きますが、見出しや返信の目安は、実際の対応内容に合わせて確認します。

項目	既定値	選択肢・制限	当社のおすすめ
ライブチャットを表示する	OFF	ON / OFF。OFF のときは一切描画されない	文言を決めてから ON にする
アクセントカラー	#4F46E5 (インディゴ)	16 進 6 桁 (#RRGGBB)	ブランドカラー。白文字との組み合わせでコントラスト比 4.5:1 以上を確認する [5]
表示位置	右下	右下 / 左下	右下。既存の「トップへ戻る」ボタンや Cookie バナーと重なるなら左下
ボタンのアイコン	吹き出し	吹き出し / メッセージ / 質問 / スマイル	問い合わせ窓口なら吹き出し、FAQ 中心なら質問
パネルサイズ	標準	小 / 標準 / 大	標準。スマホ主体のサイトは小
パネル見出し	お問い合わせ	60 字以内	「何を聞いていいか」が分かる一言 (4 章にテンプレ)
入力欄の案内	メッセージを入力…	60 字以内	質問の例を 1 つ入れる
不在時のヒント	担当者が確認次第ご返信します	120 字以内	返信までの目安時間を入れる

見出しと入力欄の質問例は 60 字以内、不在時のヒントは 120 字以内です。例文を使う場合も、社名や条件を足した後に上限を超えていないか確認します。

画面の「入力欄プレースホルダ」は、まだ何も入力していないときに薄く表示する案内です。ここへ質問の例を書くと、何を聞ける窓口かを示せます。

ボタンとパネルの見出しには白い文字が出ます。背景に明るい黄色や水色を選ぶと、文字との違いが小さくなり、読みにくくなることがあります。

文字と背景の明るさの差を、コントラスト比と呼びます。WCAG では、通常の文字に 4.5:1 以上を求めています [5]。この値は見た印象だけでは判断できないため、色の組み合わせを確認できるツールや、デザイン担当に確認します。

次の順に、使う色、白文字の読みやすさ、プレビューの見え方を確認します。

1. ブランドガイドラインの主色の HEX 値を入れる。
2. プレビューのボタンとパネル見出しで、白文字が楽に読めるかを見る。見た目だけで基準を満たすとは判断せず、コントラスト比も確認します。足りなければ、同じ色合いの濃い色を選びます (例: #60A5FA → #1D4ED8)。
3. 迷ったら既定の #4F46E5 に戻す。コントラスト比を満たす値として選んであります。

会社の色が黄色などの明るい色でも、ボタンを同じ色にする必要はありません。サイトの見出しやリンクで使っている濃い色も候補です。色を合わせることと、文字が読めることの両方を確認します。

4. 位置とサイズを選ぶ

位置は他のボタンと重ならない側を選び、サイズはスマホでも確認して決めます。 見た目の好みだけでなく、開く、入力する、閉じる操作を試します。

「小 / 標準 / 大」は、次の幅と高さに対応します。px は画面上の大きさを表す単位です。数値だけで決めず、プレビューと実際の端末で会話が読みやすいかを確かめます。

サイズ	幅 × 高さ (px)	向いているサイト
小 (compact)	300 × 380	スマホからの訪問が多い / 画面下部に他の要素がある
標準 (standard)	320 × 460	一般的なコーポレートサイト・サービスサイト
大 (tall)	340 × 560	長い質問が来る BtoB / 相談型のサービス

大きいパネルでは会話をまとめて読みやすくなりますが、スマホでは画面の広い範囲を使います。まず標準で確認し、入力欄や閉じるボタンが使いやすいかを見ます。長い質問が多い場合は、届いた会話を見てからサイズを見直せます。

チャットの位置を決める前に、サイトの画面下部を確認します。ページをスクロールしても同じ場所に残る電話ボタンや案内帯がある場合は、それらと重ならないかを見ます。

サイト側にある要素	起きること	対処
右下の「トップへ戻る」ボタン	チャットボタンと重なって押しにくい	表示位置を左下にする
画面下の Cookie 同意バナー	同意前はパネル下部が隠れる	同意後は解消する。バナーが常設なら左下 + 小
右下の別ツールのチャット	2 つ並ぶ	どちらか 1 つにする。併用は訪問者が混乱する
固定フッター (電話番号バーなど)	ボタンの下端が隠れる	左下に変えて確認。改善しなければフッターの高さを調整

プレビューには、自社サイトの電話ボタンや Cookie の案内は表示されません。位置を決めたら保存し、公開サイトでも 1 回確認します。Cookie の案内が画面幅いっぱいに出る場合などは、左右を変えるだけでは解決しないこともあります。

5. 見出しや案内文の例

見出しには、何を聞けるかを書きます。 「お問い合わせ」だけでも使えますが、「料金のご相談」のように用件が分かると、訪問者が迷いにくくなります。たとえば最初の 1 秒だけ見ても、窓口の用途が伝わるかという目安で読み直せます。

上限は、見出し 60 字、入力欄の案内 60 字、不在時のヒント 120 字です。次の文例は、自社の対応内容に合わせて書き換えて使います。返信時間や無料相談の条件は、実際に対応できる内容だけを残します。

業種	見出し	入力欄の案内	不在時のヒント
BtoB SaaS	導入・料金のご相談はこちら	例: 10 名で使う場合の料金は？	営業時間内は 30 分以内、時間外は翌営業日にご返信します
EC	商品・配送について聞く	例: 明日までに届きますか？	注文番号を書いていただければ、確認してご返信します
不動産	物件の空き状況を聞く	例: この物件は内見できますか？	営業時間 10〜18 時。時間外は翌日にご連絡します
クリニック・サロン	予約・施術のご質問	例: 初診で必要なものは？	診療中は返信が遅れます。お急ぎの方はお電話ください
士業・コンサル	初回相談 (無料) の受付	例: 相続の相談は可能ですか？	担当者が確認次第ご返信します。匿名でもご相談いただけます

入力欄には「例:」を付けて、質問の書き方を示せます。「メッセージを入力」だけよりも、料金や配送など、聞ける内容が分かります。

質問例は、実際に問い合わせが多い内容から選びます。説明を増やしすぎず、訪問者が自分の質問を書き始められる短い文にします。問い合わせが増えることを約束する設定ではなく、入力を助ける案内として考えます。

不在時のヒントには、返信できる目安を書きます。「確認次第」だけでは、今待てばよいのか、後で確認すればよいのかが分かりません。たとえば 5 分で返せない運用なら、その時間で返ると期待させる表現を避けます。

「翌営業日に返信します」と書く場合も、実際にその対応ができるかを担当者と確認します。急ぎの相談を電話で受けるなら、その案内も添えます。

よくある文言の失敗と直し方

次は、案内が伝わりにくい例と、直す方向です。訪問者の行動が必ず変わるという説明ではありません。何を聞けるか、いつ返事が来るかが分かる文に直すために使います。

失敗例	何が起きるか	直し方
見出し「チャット」	何のチャットか分からず押されない	「導入・料金のご相談はこちら」のように用件を書く
見出しに社名だけ	訪問者はすでに社名を知っている	用件 + 一言 (「〇〇のご質問はこちら」)
入力欄の案内「メッセージを入力…」のまま	最初の一言が「こんにちは」で止まる	「例: 〜」で質問の型を見せる
不在時ヒント「ただいま不在です」	待つ理由が無いので閉じる	返信の目安 + 代替手段 (電話・メール)
全部を敬語の長文にする	60 字・120 字の上限に当たる。スマホで読めない	1 文 20〜30 字。目安と行動を 1 つずつ
「24 時間対応」と書く (実際は営業時間内のみ)	深夜に送った訪問者が翌朝まで放置され、印象が悪くなる	AI 接客ボットを入れるまでは、営業時間を正直に書く

「24 時間対応」と書くなら、実際にどの対応ができるかを確かめます。たとえば深夜の質問が 3 件、翌朝まで未返信で残る運用では、人がいつでも返事をするような案内は合いません。これは対応時間を考えるための例です。

AI による自動回答を使う場合も、人が返信する時間と区別して書きます。「AI が回答し、担当者は営業時間内に確認します」のように、訪問者が待ち方を判断できる文にします。

6. 保存してサイトで確かめる

保存した内容は、訪問者が次にページを読み込んだときに使われます。 ブラウザに古い設定が残り、反映まで最長 30 分程度かかる場合があります。保存前のプレビューと、公開済みの設定を分けて確認します。

どこを見ているかによって、変更が見えるタイミングが違います。プレビューで変わっただけなら、公開サイトの設定はまだ保存されていない可能性があります。

場所	反映のタイミング
管理画面のプレビュー	変更した瞬間 (保存前でも)
訪問者のサイト	保存後、訪問者のブラウザが次にページを読み込んだとき。計測タグの設定はブラウザ側に最長 30 分程度キャッシュされる
自分のブラウザ	同じ。すでに開いているタブを再読み込みしても古い設定が残ることがある

次の順で、表示の設定、別のウィンドウでの見え方、反映待ちの時間を確認します。タグがないページではチャットも表示されないため、最後に対象ページのタグを確認します。

1. プレビューに出ているか。 出ていなければ「ライブチャットを表示する」が OFF です。ON にして保存してください。
2. シークレットウィンドウで実サイトを開く。 通常のウィンドウはキャッシュが残ります。シークレットで出れば設定は正しく、あとは時間の問題です。
3. 30 分待つ。 それでも出なければ、そのページに計測タグが入っているかを確認します。タグの無いページにはチャットも出ません (2 章)。

デフォルトに戻す を押すと、初期値に戻せます。やり直す場合は、必要な文言を控えてから戻します。5 章の文例も参考にしつつ、返信時間や用件を自社の運用に合わせて入力し直します。

7. チャットを受け取り、返信する

訪問者が最初のメッセージを送ると、接客 → チャット一覧（/chats）に会話が追加されます。 行を開くと、訪問者の画面を確認しながら返信できます。

一覧では、用件、最後のやり取り、どのサイトから届いたかを確認します。複数サイトで同じチームを使う場合は、返信前にサイトの列も見ます。

列	内容
最初のメッセージ	訪問者が最初に送った文。用件の判断に使う
最新のメッセージ	直近のやり取り。訪問者 / 対応者のバッジで誰の発言か分かる
件数	その会話のメッセージ数
サイト	どのサイトからの会話か (複数サイトを 1 チームで計測している場合)
最終更新	最後にやり取りがあった時刻

会話の行を開くと、訪問者の画面をライブで見る画面とチャットが開きます。「この商品の在庫はありますか」と聞かれたら、どの商品ページを見ているかを確認しながら答えられます。

画面を見て分かることでも、質問の意図が曖昧なら確認します。「表示されている商品の在庫についてでしょうか」のように聞けば、別の商品への質問だった場合にも行き違いを防げます。

メールや外部チャットへの通知は、現時点では提供していません。表示を ON にしただけで、担当者へ通知が届くと思わないようにします。営業時間内に一覧を見る担当を決め、不在時のヒントには返信の目安を書きます。

AI 接客ボットを使う場合は、8 章の準備を行います。自動回答を始める設定と、人が確認する担当や時間帯を、それぞれ決めておきます。

訪問者側では何が起きているか

訪問者は次の流れでチャットを使います。担当者も公開サイトで試すと、どの案内が見えるかを確認できます。

1. サイトを開くと、右下 (または左下) にアクセントカラーの丸いボタンが出ます。この時点ではパネルは閉じています。
2. ボタンを押すとパネルが開き、上部に見出し、下部に入力欄 (入力欄の案内付き) が出ます。担当者がオフラインなら不在時のヒントがここに表示されます。
3. 訪問者が最初の一言を送ると、チャット一覧に行が増えます。訪問者はパネルを開いたままページを移動できます。
4. 対応者が返信すると、訪問者のパネルに対応者の発言として表示されます。チャット一覧では「対応者」のバッジが付きます。

訪問者は、サイトを見ながら質問しています。ページ内の場所を案内するなら、「料金ページの下にある比較表」のように具体的に書きます。「該当箇所をご確認ください」だけでは、どこを見ればよいか分かりません。

ライブ視聴で画面を確認できる場合も、相手が操作しやすい言葉で案内します。長い説明を一度に送るより、最初に行う操作を短く伝え、進めたかを確かめます。

運用の型は 3 つ

チャットを公開する前に、誰がいつ一覧を見るかを決めます。次の 3 つは、担当者の人数や不在時間に合わせた運用例です。AI を使う場合も、人が確認する場面を残します。

型	向いている会社	設定	弱点
一人運用	担当者 1 名の小規模サイト	営業時間内はチャット一覧をタブで開いておく。不在時ヒントに「翌営業日」	席を外すと止まる。営業時間を正直に書く
交代運用	営業・CS が複数名いる	時間帯で担当を決め、担当者に接客の書き込み権限を付ける (9 章)	引き継ぎ漏れ。最新のメッセージ列で未返信を確認する
AI 一次回答 + 人	夜間・休日にも問い合わせが来る	AI 接客ボット (8 章) を FAQ 応答で有効化。人は日中にチャット一覧で拾う	取り込んだ情報に答えがない質問には対応できない。取り込み URL を増やす

最初の 2 週間は、「最初のメッセージ」を毎日確認する進め方ができます。訪問者がどんな言葉で質問するかを見ると、ページに足りない説明を探せます。

たとえば「料金はどこですか」が 3 件届いたら、料金へのリンクが見つけやすいかを確認します。原因をすぐに決めつけず、質問が来たページを開きます。チャットで同じ案内を繰り返す場合は、ページの案内を直すことも検討します。

8. AI接客ボットを準備する

AI ボット設定（/settings/ai_bot）では、公開ページの内容を取り込み、AI の回答に使えます。 画面では回答のもとになる情報を「ナレッジ」と呼びます。先に内容を確認し、必要なページを追加します。

設定するのは、自動応答を使うか、どう答えるか、何を根拠に答えるかです。取り込むページには、訪問者へ案内してよい情報を選びます。

設定	内容
AI 自動応答を有効にする	ON / OFF
動作モード	FAQ 応答 (おすすめ): 取り込んだナレッジからすべての質問に回答する。コールセンターのようなイメージ / 目的達成型: 入力した目的 (例: 有料プラン販売、資料請求) の達成に向けて、回答しながら会話を誘導する
ナレッジ（回答に使う情報）	AI の回答の根拠になる情報。サイトの URL を追加すると、ページを読み込んで回答に使える形に変換する。取り込み状況は 待機中 → 取り込み中 → 取り込み完了 (または 失敗) と自動更新され、情報を分けたまとまりの数（チャンク数）と容量 (約 KB) が表示される

最初の候補として、料金、よくある質問、サービス紹介の 3 URL を確認できます。FAQ は、よくある質問と答えのことです。FAQ 応答のモードでは、取り込んだ情報をもとに質問へ答えます。

URL を追加しただけでは準備完了ではありません。「取り込み完了」になったかを見て、 取り込み内容を見る で実際に使う内容を確認します。ページにない料金や条件を、AI が補って答えることを前提にしないようにします。

AI 接客ボットは、回答に応じてクレジットを使います。プランに含まれる分と、超えた分の従量料金があります。ここで使うのは、サイト訪問者への回答用です。

ヘッダー右上の AI に質問 は、管理画面を使う人向けの機能です。こちらのクレジットとは別なので、使用量を確認するときも、どちらを見ているかを確かめます。

9. 設定を変更できる人

保存や返信には、チームの「接客」で「閲覧・書き込み」が必要です。 「閲覧のみ」では、画面を確認できても設定を保存できません。

権限	できること
不可	接客メニュー自体が見えない
閲覧のみ	チャット設定・チャット一覧を見られる。保存はできない (画面上部に「閲覧のみ」の注記)
閲覧・書き込み	チャット設定の保存、AI ボット設定の変更、チャットへの返信

権限は チーム （/team）で、オーナーかメンバー管理を任されている人が変更します [3]。招待直後は「閲覧のみ」です。設定を担当する人が参加したら、接客の権限を確認します。

「保存できない」ときは、入力内容を何度も書き直す前に、画面上部の「閲覧のみ」の案内がないかを見ます。権限を頼むときは、チーム名と、チャット設定を保存したいことを伝えます。

10. 表示・送受信で困ったとき

まず、表示の設定、反映までの時間、対象ページのタグを確認します。 保存できない場合やボタンが隠れる場合は、別に権限や配置も確認します。

症状	原因	対処
プレビューに出ない	「ライブチャットを表示する」が OFF	ON にして保存
プレビューには出るが実サイトに出ない	キャッシュ (最長 30 分)	シークレットウィンドウで確認 → 30 分待つ
一部のページだけ出ない	そのページに計測タグが無い	ページのソースで t.js を確認。LP ツールや別テンプレートは要注意
色が想定と違う	16 進 6 桁以外を入れた / 明るすぎて白文字が見えない	#RRGGBB 形式で濃い色に。コントラスト比 4.5:1 [5]
スマホでボタンが隠れる	固定フッターや Cookie バナーと重なっている	位置を左下、サイズを小に
保存ボタンが押せない	接客グループの権限が閲覧のみ	オーナーに書き込み権限を依頼
会話が来ているのに気づかない	通知機能が無い (現時点)	営業時間内はチャット一覧を開く。AI ボットで一次回答

解決しなければ、ヘッダーの AI に質問 から問い合わせます。サイトの URL、設定を保存した日時、確認した端末を添えます。プレビューには出るのか、公開サイトだけ出ないのかも伝えると、確認する場所を絞れます。

届いた質問は、公開ページの見直しにも使えます。同じ条件について繰り返し聞かれるなら、その答えがページで見つかるかを確認します。

AI の回答に自社が出るかを調べる際も、実際に聞かれた言葉を質問の候補にできます。考え方は AIO とは で確認できます。専門用語だけの質問より、利用者が使う言葉から選ぶと、調べたい内容が明確になります。

設置後 2 週間の記録シート

公開した日から 2 週間、次の 5 つを記録する方法があります。会話数だけでなく、質問の内容や返信にかかった時間も見て、案内と対応が合っているかを確認します。

記録する項目	見る場所	見直しの判断
会話数 (日別)	チャット一覧の行数	0 が続くなら見出しを用件型に (5 章)
最初のメッセージの傾向	チャット一覧「最初のメッセージ」列	同じ質問が 3 件以上ならページ側を直す
「こんにちは」だけの会話の割合	同上	多ければ入力欄の案内に質問例を入れる
返信までの時間	最終更新 − 最初のメッセージ	目安を超えているなら不在時ヒントの文言を実態に合わせる
会話が始まったページ	ライブ視聴画面	特定ページに偏るなら、そのページの導線を見直す

2 週間分を確認したら、変える理由がある文言を 1 か所選びます。変更した日と内容を残し、さらに 2 週間の会話を見ます。一度に色、サイズ、見出しを全部変えるより、何を変えた後の記録かを確認しやすくなります。

会話数が少ない場合は、短い期間だけで効果を決めず、実際の質問と使いにくい箇所も見ます。数字が動いたことだけで、文言の変更が原因だと言い切らないようにします。

まとめ

チャットは、表示、文言、返信する担当を決めてから公開します。 保存後は実際のサイトで開き、テストの会話が管理画面に届くか確かめます。

• 接客チャットは 設定 → チャット設定 (/settings/chat) で ON にするだけ。計測タグが描画するので追加のタグは不要です
• 決めるのは 7 項目。色は #RRGGBB で濃いめ、位置は他の固定要素と重ならない側、サイズは標準から
• 文言は「何を聞いていいか」を先に。入力欄の案内に質問例、不在時ヒントに返信までの目安を入れる
• 反映は訪問者の再訪時、最長 30 分。「出ない」はシークレットウィンドウで確認してから待つ
• 会話は チャット一覧 (/chats) に届き、訪問者の画面をライブで見ながら返信できる。不在時間帯は AI 接客ボットに一次回答を任せる
• 設定変更には接客グループの書き込み権限が必要。招待直後のメンバーは閲覧のみ