全体像
顧客
ECサイト右下のウィジェット
AI 対話・操作完了
事業者
Shopify 管理画面内のアプリ
設定・モニタリング
エスカレーション時の運用方針: ウィジェット内で人間が直接対応することはしない。AI が対応不能と判断した場合、顧客にメアドを取得 → 事業者にメール通知 → 事業者は メールで顧客に返答する。管理画面は記録閲覧のみで返信機能なし。
顧客側ウィジェット
EC サイト全ページに埋め込まれる。SDK/タグ 1 行で導入。Polaris 採用（admin 側、顧客側ウィジェットは独自デザイン）。
画面・コンポーネント一覧 (C-*)
| ID | 名称 | 役割 |
|---|---|---|
| C-1 | フローティングランチャー | 右下に常駐するピル型ボタン。虹色オーブ +「AI エージェントに相談」ラベル。クリックでウィジェット展開 / 通知バッジあり |
| C-2 | 初回挨拶バブル | ランチャー上に展開前から表示される吹き出し |
| C-3 | ウィジェット本体（チャットビュー） | 対話のメイン画面。メッセージ表示 + 入力欄 + ヘッダー |
| C-4 | クイックアクション | 初回表示時の「よくある質問」ショートカット |
| C-5 | 本人認証（OAuth ボタン） | 「Shopify でログイン」ボタン。クリックで OAuth 認証ページが別タブで開く |
| C-6 | 本人認証（callback 待機） | callback でアクセストークン受領 → 認証済みに切替 |
| C-7 | 注文一覧カード（リッチ UI） | 注文を選択可能なカード形式で表示 |
| C-8 | 注文詳細カード（リッチ UI） | 個別注文の商品・金額・配送状況等を構造化表示 |
| C-9 | アクション確認カード | 「この注文をキャンセルしますか？」等の最終確認 UI |
| C-10 | アクション完了カード | 「キャンセル完了」「配送先を変更しました」等の結果 UI |
| C-11 | 入力フォーム埋め込み | 新住所入力等、定型フォームをチャット内に埋め込み |
| C-12 | エスカレーションフロー | 「担当者に引き継ぎます」→ メアド入力 → 完了通知 |
| C-13 | AI 応答中インジケーター | 「考え中…」「実行中…」のローディング表示 |
| C-14 | エラー表示 | ネット切断・API 失敗時のフォールバック UI |
| C-15 | セッション終了確認 | 「解決しましたか？」のフィードバック取得（任意） |
| C-16 | 履歴復元 | 再訪時に過去会話を復元 |
シナリオ別ジャーニー
顧客側ウィジェットで対応する 9 シナリオ。それぞれ個別ページに iframe で mockup 埋め込み + 仕様詳細 を配置。
| 段階 | シナリオ | 詳細ページ |
|---|---|---|
| L2 | キャンセル（決済確定前） | customer/cancel.html |
| L2 | 配送先変更 | customer/address-change.html |
| L2 | 会員情報の住所変更 | customer/account-change.html |
| L4 | 返品リクエスト | customer/return-request.html |
| L4 | 交換リクエスト | customer/exchange.html |
| L1 | 注文照会 | customer/order-inquiry.html |
| L1 | 配送状況（WISMO） | customer/wismo.html |
| L1 | FAQ（未認証） | customer/faq.html |
| L3 基盤 | エスカレーション | customer/escalation.html |
事業者管理画面 / Shopify アプリ
Shopify 管理画面内にネストされたアプリとして提供。Shopify OAuth 認証。Polaris（Shopify 公式 UI ライブラリ）採用（詳細は admin-ui-strategy）。
想定ユーザー: EC サイトの CS 部門スタッフ。技術リテラシーはほぼないことを前提（Markdown 不可、特殊記法ゼロ、Word/メモ感覚で操作できることが必須）。
画面一覧 (A-*)
| ID | 名称 | 役割 | 詳細ページ |
|---|---|---|---|
| A-1 | 会話ログ | AI と顧客の対話履歴の一覧 + 詳細 + エスカレーション状態管理 | admin/a1-conversation-log.html |
| A-2 | ナレッジ管理 | FAQ / ポリシー / SOP の Notion 風エディタ + AI 提案 + サンドボックス | admin/a2-knowledge.html |
| A-2 | ナレッジインポート | Excel/Word/PDF を一括取り込み（4 画面ウィザード） | admin/a2-import.html |
| A-3 | ウィジェット設定 | 顧客側ウィジェットの見た目・口調・ツール制御 + プレビュー連動 | admin/a3-widget-settings.html |
| A-4 | 全般設定 | エスカレーション通知メアド（Phase 1 はこれ 1 項目） | admin/a4-general-settings.html |
| A-5 | 会話設定 | AI が会話で使う構造化データ（Phase 1 は返品理由 enum 8 種） | admin/a5-agent-settings.html |
| A-6 | お知らせ | システム通知の集約（AI 提案・エスカレーション・編集ログ・インポート完了等） | admin/a6-notifications.html |
Phase 1 で外したもの
- オンボーディングウィザード — Shopify アプリインストール時の標準画面で代替
- ダッシュボード（KPI 表示） — 初期は不要。ニーズが見えてから Phase 2 以降に追加
- 業界別テンプレート — お客さんは既にマニュアルを持っているのでインポート機能で代替
- 「Powered by BreX」表記の有無 — 後で検討（無料/有料プランでの消去オプション等）
- ウィジェット詳細カスタマイズ（フォント、ダークモード、営業時間外メッセージ、ページ別表示制御、多言語）— Phase 2 以降
- 会話ログの絞り込み・検索 — Phase 1 ではシンプルに保つ
- AI による自動ナレッジ修正提案 — Phase 1 は会話ログの閲覧のみ
- 対話のリアルタイム監視・介入機能 — 「AI が完了する」が売りであり、介入 UI を強調すると AI への信頼を損なうリスク