Web Chat 紹介総覧
本ページでは、Web Chat のインタラクティブ機能とインターフェースのカスタマイズについてご紹介し、企業スタイルに合った Web Chat サービスを構築できるよう支援します
一、Web Chat とは？
MaiAgent で作成した AI アシスタントを自社のウェブサイトに埋め込み、リアルタイムのカスタマーサポートやその他の対話サービスを提供できます。Web Chat はレスポンシブデザインを採用しており、デスクトップ・タブレット・スマートフォンのいずれにも完璧に対応します。
現在、MaiAgent では以下の 3 種類の埋め込み方法を提供しています。
1. ウェブサイト右下への埋め込み
公式サイトのサービスに埋め込み、サイト標準搭載のインテリジェントアシスタントとして機能します
ユーザーの通常のブラウジングを妨げず、必要なときにいつでも利用できます
一般的なカスタマーサポートや問い合わせ対応に適しています
2. フルスクリーン埋め込み
充実した対話体験を提供します
複雑な問い合わせやサービスフローに適しています
企業のニーズに合わせてカスタマイズデザインが可能です
3. MaiGPT ウィンドウモード埋め込み
ChatGPT スタイルのフル対話インターフェース（左側に対話履歴リスト + 右側にメイン対話エリア）をページに直接埋め込み、メイン UI として使用できます
指定したコンテナに常駐表示するか、右下の浮動ボタンをクリックしてフルスクリーンで展開できます
AI ポータルサイト、社内ナレッジポータル、または製品のメイン対話インターフェースとして最適です
このような設計により、次のメリットが得られます。
即時性：訪問者は待つ必要がなく、すぐに専門的な回答を得られ、ユーザー体験が向上します
利便性：右下に浮かぶデザインは通常のブラウジングを妨げず、必要なときにいつでも利用できます
コスト効率：AI アシスタントが 24 時間 365 日対応し、人件費を大幅に削減します
プロフェッショナルな印象：企業の技術力とサービス品質をアピールできます
二、企業スタイルに合った Web Chat サービスの構築
MaiAgent では、LOGO・アバター・問答のテーマカラーなどをカスタマイズできる機能を提供し、企業スタイルに合った Web Chat サービスの構築を支援します。
以下の機能を通じて、
アシスタントの表示名を選択する
自社の企業 LOGO をアップロードする
AI アシスタントの表示アバターを選択する
Web Chat のテーマカラーを選択する
AI アシスタントが回答する際のメッセージ背景色を選択する
など、自社ならではの Web Chat の外観を構築できます。
このように、企業のカラーニーズに応じて、企業スタイルに合った Web Chat サービスを構築できます。
ダークモードの最適化
MaiAgent の Web Chat はダークモードを全面的に最適化し、より快適な視覚体験を提供します。
動的なカラー調整
テーマカラーの明暗を自動調整し、暗い背景でもはっきりと視認できるようにします
文字のコントラストをインテリジェントに調整し、最適な可読性を保ちます
アイコンとボタンの色を最適化し、ダークモードでより際立つようにします
コントラストカラーの最適化
メッセージの吹き出しの背景色を入念に設計し、視覚的な疲労を防ぎます
リンクや重要な情報には高コントラストの色を使用し、明確に識別できるようにします
入力欄やボタンの枠線の色を最適化し、操作体験を向上させます
シームレスな切り替え体験
ユーザーはいつでもライトモードとダークモードを切り替えられます
切り替え時にも対話内容や操作状態を保持します
システムがユーザーのテーマの好みを記憶します
ダークモードは特に次のような場面に適しています。
夜間の利用や低照度の環境
長時間の対話における目の疲労の軽減
企業ブランドに合ったダーク系のデザインスタイル
三、メッセージのカスタマイズ
Web Chat サービスに初めてアクセスした際に、以下のようなシーンに応じて、自社ならではの AI アシスタントの挨拶メッセージを自由に設定できます。
1. 挨拶メッセージのカスタマイズ
ブランドに合わせた挨拶
「当サイトへようこそ！私はあなた専属のカスタマーサポートアシスタントです」と設定することで、企業のプロフェッショナルな印象と親しみやすいサービス姿勢をアピールできます。
誘導型の挨拶
「製品情報の照会、利用上の問題への回答、注文処理のお手伝いができます」と設定することで、提供可能なサービス範囲をユーザーに明確に伝え、サービス能力への信頼感を築けます。
2. 誘導型の開始質問
「対話開始質問」をクイック選択肢として設定します
ユーザーはよくある質問を直接クリックでき、入力する必要がありません
質問例：
「注文済みの商品を確認するには？」
「注文方法について」
「会員ポイントのルール」
「営業時間」
ユーザーは開始質問をクリックして対話を始められ、問答の進行をスピードアップできます。
生成中の回答を停止する
質問を送信した後に内容の誤りに気づいた場合でも、AI アシスタントが回答全体を生成し終えるまで待つ必要はありません。回答の生成中は、入力欄の右側にある送信ボタンが四角い停止ボタンに変わります。クリックすると現在の回答を停止し、修正した質問を入力して再送信できます。
たとえば、カスタマーサポート担当者が AI アシスタントに年間の製品発表会を企画するよう依頼した後で、イベント予算を伝え忘れたことに気づいたとします。AI アシスタントが回答を生成している間に停止をクリックし、予算と参加人数を追加して質問し直すことで、要件に合わない内容の生成が完了するまで待たずに済みます。
回答を停止する
四、多様な問答コンテンツ
1. 多言語対応
ユーザーの使用言語に応じて回答し、コミュニケーションの障壁を取り除きます。
自動検出：ユーザーが入力した言語に基づいて、アシスタントの回答言語を選択します
手動切り替え：
Web Chat のインターフェースで使用言語を選択します。詳しくは多言語対応：Web Chat チャット設定をご覧ください。
Web Chat の初期化スクリプト（javascript）で AI アシスタントの回答言語を指定します。詳しくは技術者向けマニュアル—Web Chat 初期化をご覧ください。
2. マルチモーダル問答
テキストでの問答に加えて、AI アシスタントはさまざまな種類のファイルのアップロードにも対応しています。
スプレッドシート：.xls, .xlsx, .csv, .ods
文書ファイル：.doc, .docx, .odt, .pdf, .md, .txt
プレゼンテーションファイル：.ppt, .pptx, .odp
ウェブファイル：.html, .htm
データ形式：.json, .jsonl
音声ファイル：.wav, .mp3, .m4a, .aac
動画ファイル：.mp4
画像コンテンツの処理
画像の認識と分析
アップロード画像の分析：ユーザーが製品画像をアップロードすると、AI が自動的に認識し、関連情報を提供します
スクリーンショットの処理：画面のスクリーンショットの分析に対応し、利用上の問題の解決を支援します
画像の説明：画像内容の説明と関連する提案を自動生成します
画像での回答機能
製品画像の表示：回答に製品の実物画像を含めます
操作ガイド図：ステップごとの操作スクリーンショットを提供します
例：
ユーザーが MaiAgent アシスタントの設定場所を尋ねると、アシスタントが設定画面を画像で回答します
ユーザーがスクリーンショットを送ってそのパスが正しいかをアシスタントに確認し、アシスタントが正しく解析して回答します
ファイル処理能力
対応ファイル形式
PDF ファイル：PDF の内容を自動解析し、関連する質問に回答します
Word ファイル：.doc / .docx 形式のファイルを処理します
Excel 表：スプレッドシートのデータを分析し、インサイトを提供します
PowerPoint プレゼンテーション：プレゼンテーションの内容を抽出し、質問に回答します
ファイルインタラクション機能
ファイル内容の照会：アップロードされたファイルに基づいて特定の質問に回答します
データ分析：表のデータを自動分析し、統計情報を表形式で提供します
ファイルの要約：長いファイルの重要な内容の要約を生成します
例 1：AI アシスタントにデータ内容を表形式で提示し、参考資料のリンクを提供するよう依頼します
例 2：アシスタントに売上内容を分析し、表で解析するよう依頼します
例 3：docx ファイルを送信し、アシスタントに CV 作成上の問題の分析を依頼します
AI アシスタントは回答時にすべて Markdown 形式で回答し、整然と回答内容を構成します。
五、履歴の記憶と対話の共有
1. 対話履歴の記憶
連続性のあるサービス体験を提供するため、Web Chat はユーザーの対話履歴を自動的に記憶し、毎回の対話を以前の内容の上に積み重ねられるようにします。
記憶する内容の範囲
対話内容：テキスト・画像・ファイルなどを含む完全な問答記録
サービス状態：未完了の照会、未処理の問題
ユーザーは Web Chat の左側の対話リストで過去の対話記録を確認したり、新しい対話を開始したりできます。
対話記憶機能は次のような場面で活用できます。
連続した問い合わせ：ユーザーが「前回おすすめしてもらったテントの型番は何でしたか？」と尋ねると、AI がすぐに思い出して回答できます
進捗の追跡：ユーザーが「前回の注文照会の続きを」と言うと、AI が自動的に関連情報を呼び出します
パーソナライズされたサービス：過去の対話に基づいて、より的確なおすすめや提案を提供します
2. 対話の共有
AI アシスタントに相談した後、対話を友人や同僚に共有したい場合や、社内チームで協力して顧客の問題を検討する必要がある場合は、MaiAgent のサービスで対話共有リンクを生成できます。
共有される内容
完全な対話記録：すべてのテキスト・画像・ファイルなどの内容を含みます
対話の要約：対話の要点の要約を自動生成します
関連リソース：対話中で言及された製品リンクやファイルなど
対話記録の共有は次のような場面で活用できます。
顧客への共有：「このキャンプ用品のおすすめはとても良いので、登山サークルに共有しよう」
社内協力：カスタマーサポート担当者が複雑な問題を技術サポートチームに共有する
トレーニング用途：典型的な対話事例を従業員研修の教材として共有する
3. 対話タイムアウトの管理
対話品質とシステムパフォーマンスを確保するため、Web Chat はインテリジェントな対話タイムアウト管理の仕組みを備えています。
インテリジェントなフィルタリングの仕組み
挨拶メッセージの自動フィルタリング：システムが挨拶メッセージを識別してフィルタリングし、対話タイムアウトの計算に含めません
メッセージカウントの正確なリセット：対話が再開されると、メッセージカウンターが正しくリセットされます
タイムアウト判定の最適化：実質的な対話内容のみを対象にタイムアウトを計算し、より正確な対話管理を提供します
対話の継続性の保証
ユーザーが通常の対話の途中で意図せずタイムアウトしないようにします
長時間の検討や中断の後でも対話を続けられます
システムが対話が進行中かどうかをインテリジェントに判断します
実際の動作
対話の開始：ユーザーが挨拶メッセージ（例：「こんにちは」）を送信しても、システムはタイムアウトに含めません
対話への移行：ユーザーが実質的な質問を始めると、タイムアウトのタイマーが起動します
対話の一時停止：ユーザーが一時的に離れても、システムは対話状態を保持します
再開：ユーザーが戻って対話を続けると、メッセージカウントが正しく更新されます
この最適化により、対話体験がより滑らかで自然になり、ユーザーは検討時間が長くなって対話が中断されることを心配する必要がなくなります。
六、使用ツール・引用ファイル一覧の表示有無の選択
1. 使用ツール一覧の表示
AI アシスタントが推論時に使用したツールの一覧をユーザーに表示するかどうかを選択できます。表示を許可した場合、AI アシスタントが回答を生成する際に以下の画面が表示されます。
この一覧を通じて、AI アシスタントが使用したツールの内容が正しいかどうかを追跡できます。
2. 引用ファイル一覧の表示
各 AI の回答には引用ファイルの一覧が自動生成され、情報の出典を明確に示すことで、回答の信頼性とトレーサビリティを高めます。
表示設定
企業はニーズに応じて、引用したツール一覧や参考ファイル名の内容をユーザーに表示するかどうかを設定できます。表示を許可した場合、AI アシスタントの回答の下部に以下の一覧が表示されます。「引用ノード」をクリックすると、参考にしたファイルの断片を確認できます。
利用シーンに応じて、引用情報を公開するかどうかを選択できます。
公開カスタマーサポート：すべての引用情報を表示し、信頼感を築きます
社内サポート：機密ファイルを非表示にし、機密情報を保護します
教育機関：学習リソースを表示し、学生が参照しやすくします
七、対話権限の保護 - 安全で管理可能な対話環境
1. ログイン機能の設定
強制ログインの仕組み
対話内容のセキュリティと管理可能性を確保するため、企業はログイン機能を有効にし、ユーザーが AI アシスタントサービスを利用する前に必ずログインするよう求めることができます。設定が完了すると、訪問者が Web Chat をクリックした際にまずログインページが表示され、ログインに成功したユーザーのみが AI アシスタントとの対話を開始できます。
セキュリティ上のメリット
本人認証：対話するすべてのユーザーが明確な身元を持つようにします
権限制御：ユーザーの身元に応じて対応するサービス内容を提供します
対話の追跡：各ユーザーの対話履歴を完全に記録します
データ保護：未認可のユーザーによる機密情報へのアクセスを防ぎます
2. 3 種類のログイン方法
AD (Active Directory) ログイン
適用シーン：社内従業員の利用、既存の AD システムとの統合
特徴：シングルサインオン (SSO) により、追加のアカウント管理が不要です
設定方法：AD サーバーの接続情報と同期ルールを構成します
実際の活用例：従業員が会社のアカウントで直接ログインし、対応する権限を自動的に取得します
Keycloak ログイン
適用シーン：複雑な ID 管理が必要な企業、複数の ID プロバイダーに対応
特徴：OAuth2、SAML、OpenID Connect などの標準プロトコルに対応します
設定方法：Keycloak サーバー、ユーザープール、ID プロバイダーを構成します
実際の活用例：複数システムのユーザー ID を統合し、権限を一元管理します
MaiAgent ログイン
適用シーン：シンプルなユーザー管理のニーズ、迅速な導入
特徴：ユーザー管理システムを標準搭載しており、操作がシンプルで直感的です
設定方法：MaiAgent プラットフォーム上でユーザーアカウントと権限を作成します
実際の活用例：特定のユーザー層向けに専用のログインシステムを構築します
有効にすると、対話を開始する前に以下の画面が表示され、ログインを求められます。
8、データ収集（Pre-chat フォーム）
データ収集を有効にすると、訪問者は対話を開始する前にフォームが表示され、入力を完了すると対話に進めます。入力内容はその訪問者の連絡先に保存され、カスタマーサービス担当者は対話ページで直接確認できます。例えば、販売代理店向けサービスで会社名と法人番号を収集する、イベントの問い合わせで氏名と Email を収集するなど、「対話前に相手が誰かを把握したい」シーンに適しています。
1. データ収集フォームの設定
パス：カスタマーサービス対話 → 対話プラットフォーム → Web Chat 対話プラットフォームを選択 → データ収集タブ。
フィールドを追加する
フィールドを追加をクリックします。各フィールドで次の項目を設定できます。
フィールドタイプ
テキスト、Email、電話、ドロップダウンの 4 種類
フィールドラベル
訪問者に表示されるフィールド名で、言語ごとに入力できます
プレースホルダー
フィールド内に表示されるグレーのヒント
必須
選択すると、訪問者は入力しなければ送信できません
Contact フィールドとの対応付け
データの保存先を決定します：氏名（Contact.name）、Email（Contact.email）、電話（Contact.phoneNumber）、または カスタムフィールド（Metadata）
ドロップダウンタイプには、別途 選択肢リストがあります。「その他」のカスタム入力を許可を選択すると、訪問者は「その他」を選択後に独自の内容を入力できます。
フィールドはドラッグして並べ替えられます。1 つのフォームに最大 10 個のフィールドを設定できます。右側のプレビューエリアにフォームの外観がリアルタイムで表示されます。プレビュー言語を切り替えて、各言語版を確認できます。
2. 訪問者の入力フロー
訪問者が Web Chat を開くと、まずフォーム画面が表示されます。画面には、タイトル、サブタイトル、設定したフィールド、および右上の言語切り替えが表示されます。入力後、対話を開始をクリックすると対話に進みます。
必須フィールドが未入力の場合、または Email や電話番号の形式が正しくない場合は、フィールドの下にエラーが表示され、送信できません。
同じブラウザーで一度入力すると、以後同じ Web Chat を開いても再入力を求められません。
訪問者がデータを修正する場合は、Web Chat 右上の ⋮ メニューから データを再入力をクリックすると、フォームが再表示されます。
3. ログイン機能との併用：データをログインアカウントに対応付ける
同じ Web Chat でログイン機能とデータ収集の両方を有効にした場合、フローは ログイン → フォーム入力 → 対話開始 となります。ユーザーが入力したデータは、ブラウザーではなくログインアカウントに関連付けられます。
アカウントの初回利用で、まだフォームに入力していない
ログイン後にフォームが表示されます。送信後、そのアカウントに対応する連絡先が 1 件作成されます。
同じアカウントで別のデバイスまたはブラウザーからログインする
フォームは再表示されず、アカウントの既存データを使用してすぐに対話が開始されます。
このデバイスで以前に未ログインのまま入力したデータがあり、アカウント自体にはデータがない
「このデータはあなたのものですか？」という確認画面が表示されます（以下の説明を参照）。
アカウントにすでにデータがあり、このデバイスにも未ログイン時に入力した別のデータがある
アカウントのデータが優先されます。確認も統合も行われません。
ログイン済みユーザーが データを再入力をクリックする
アカウントに対応する既存の連絡先が更新され、新しい連絡先は作成されません。
確認画面：このデータはあなたのものですか？
このデバイスで以前に誰かが未ログインのままフォームに入力し、現在ログインしたアカウントにデータがない場合、ログイン後すぐにフォームは表示されません。まず確認画面が表示され、このデバイスで以前に入力された内容（一部はマスク処理）と、2 つのボタンが表示されます。
はい、私のデータです：そのデータを現在のアカウントに関連付けます。以後、同じアカウントであれば、どのデバイスからログインしても再入力は不要です。
いいえ：統合しません。元のデータはそのまま保持され、続いてフォームが表示されるため、ユーザーが自分のデータを入力します。
対話を開始すると、AI アシスタントとカスタマーサービスの管理画面には、どちらもアカウントに対応付けられた同じ連絡先が表示されます。
4. 収集したデータを管理画面で確認する
対話内で確認する：カスタマーサービス対話 → すべての対話 → 対話を開くと、右側の 連絡先データセクションに、フォームで収集した内容が項目ごとに表示されます。Email と電話に対応付けられたフィールドは「メールアドレス」「電話番号」と表示され、カスタムフィールドは設定したフィールドラベルで表示されます。
連絡先ページで確認する：カスタマーサービス対話 → 連絡先 → 連絡先を開くと、基本データタブに氏名と電話番号が表示され、カスタム属性タブにその他のフォームフィールドが表示されます。
ログイン済みユーザーが入力したデータは、そのアカウントに対応付けられ、所有者のいない匿名の連絡先にはなりません。連絡先名はフォームの設定によって異なります。氏名フィールドが「氏名（Contact.name）」に対応付けられている場合は、フォームに入力した氏名が表示されます。氏名フィールドがない場合は、ログインアカウント名が表示されます。
接続に失敗した場合の対処方法
たとえば、Web Chat を開いた際に接続できないと訪問者からウェブサイト管理者へ報告があったとします。訪問者は、まずシステムによる自動再試行を待ちます。エラー画面が引き続き表示される場合は、失敗した段階、エラー分類、発生時刻を含む画面全体のスクリーンショットを撮り、管理者へ送付してください。管理者が問題をより迅速に判断できるようになります。
Web Chat が AI アシスタントの設定を読み込んでいるときにネットワーク接続が切断されると、自動的に再試行します。その間、画面には読み込み中の状態が表示されます。再試行後も接続できない場合、エラー画面には次の情報が表示されます。
読み込みに失敗した段階
エラー分類（HTTP ステータスコードがある場合は、そのコードも表示されます）
エラーが発生した現地時刻
HTTP エラーステータスコードを受信している場合は、サーバーがすでに応答したことを示します。この場合、自動再試行は行われず、診断エラー画面がすぐに表示されます。
最終更新
役に立ちましたか？