SELF-INITIATED DEMO / 自主制作
RELAY — 問い合わせ自動化ワークフロー
OVERVIEW
分類から下書き、人の確認まで。確認した内容はそのまま記録に残る。
Live Demoを操作するAI導入を想定したローカルシミュレーションです。固定ルール・定型文を使用し、AI API接続やメール送信は行いません。記録はお使いのブラウザにだけ残ります。
- AI
- 未接続（ルール処理）分類と返信の下書きは決まった規則で行います。公開版はAIのAPIに接続していません。
- 保存先
- このブラウザ確認済みにした案件を、SMART INBOX・ADMIN と共通の記録としてこのブラウザに保存します。
- 外部送信
- なしメールは送信しません。入力した問い合わせ文は外部のAIにも送りません。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 要件確定後に提示
- PRICE GUIDE / 参考価格
- 要件により見積
WORKING VERSION / 操作できる版
画面を動かして試せます
この制作例には、同じ実行基盤を契約の粒度で見る技術画面があります。抽出の根拠が原文のどこか、実行計画のハッシュと冪等キー、承認が何に紐づくか、失敗と「結果が分からない」の違い、再実行がどう扱われるかを、同じ 1 回の実行で追えます。
実行は端末内の模擬アダプターに対して行います。メール送信や予約確定など外へ出る操作は、計画と承認までで実行されません。任意のコード実行も、任意のURL取得もありません。
01THE PROBLEM
自動化の範囲と人の判断を明確にし、送信事故を防ぐこと。
- 想定したクライアント
- 問い合わせ窓口を少人数で回している会社（架空）
- 想定依頼
- 問い合わせを分類し、返信下書きを作り、担当者の確認後に対応する仕組みを検討したい。
- 起きていること
- 問い合わせを読んで分類し、返信の下書きを書き、上長が確認してから返す。毎日同じ判断が繰り返される。
- 困りごと
- 全部を自動化すると、確認していない返信が送られる事故が怖い。どこまで任せてよいかが分からない。
- 制作コンセプト
- 自動化のブラックボックスをなくす、説明できるワークフロー。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
分類と下書きは仕組みに。送ってよいかは、人が決める。
受付→分類→下書き→人の確認を操作でき、確認済みにした案件だけが同じ番号で問い合わせ管理に届き、顧客台帳では人が選んで紐づけられるようにしました。
問い合わせを入れる
お客様名と問い合わせ文を入れて実行。サンプル文のままでも試せます。
分類と下書きが出る
キーワードの規則でカテゴリと緊急度を判定し、要約と返信の下書きを作ります。判定の理由も表示します。
人が直して、確認済みにする
下書きを編集して「確認済み」に。確認したあとで一文字でも直すと、確認は外れます。
受信箱と台帳に引き継ぐ
確認済みの案件だけが T- から始まる番号で記録され、SMART INBOX に届き、ADMIN の「未紐づけ」に並びます。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
承認は内容に結びつく
確認したあとに下書きを編集すると、確認済みが外れます。確認していない文面が「確認済み」のまま残りません。
差し戻し
差し戻すと、記録されていた確認も取り消されます。空の下書きは確認済みにできません。
同じ番号で3つの画面へ
RELAY・SMART INBOX・ADMIN は同じ案件番号（T-）を表示し、同じ記録を読みます。
仕組みの技術画面
/automation では、実行計画・承認・冪等キー・失敗と「結果が分からない」の違いを、同じ1回の実行で追えます。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- 案件（番号・本文・カテゴリ・緊急度・下書き・確認日時・履歴）
- 顧客との紐づけ（人が選んだときだけ設定）
- 案件ごとの操作の履歴
状態の流れ
- 受付
- 分類・下書き
- 人の確認
- 確認済み
- 受信箱で対応
安全のための決まりごと
- 確認していない下書きは、受信箱にも台帳にも記録しない
- 編集すると確認が外れ、確認し直すまで次へ進めない
- 顧客との紐づけは自動で推測しない（同名の別会社を取り違えないため）
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- 規則による分類・緊急度・要約・返信下書き
- 下書きの編集・確認済み・差し戻し
- SMART INBOX・ADMIN への同じ記録での引き継ぎ
- 技術画面（実行計画・承認・再実行の扱い）
デモ限定
見せ方のために簡略化していること
- 分類と下書きは決まった規則と定型文
- 記録はこのブラウザの中だけで、ほかの人とは共有されない
未接続
公開版では接続していないもの
- AIのAPI（公開版）
- メールの受信・送信
- 社内のチャットやチケット管理ツール
本番化に必要なこと
実案件で追加で設計・実装するもの
- AIを使う場合は、費用の上限・送ってよい個人情報の範囲・鍵の管理を先に決める
- 認証と権限（誰が確認済みにできるか）、サーバー側の監査ログ
- メール送信は、人の確認を通った文面だけに限る仕組み
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 要件により見積／納期目安 要件確定後に提示。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
要件確定後に提示
要件により見積
- 入力内容のルール分類
- 返信下書きの編集と、人の承認・差し戻し
- 確認済みの案件が問い合わせ管理へ届く
- 編集すると確認済みが外れる
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- 問い合わせの経路（フォーム・メール・チャット）と件数
- AIを使うか、規則で足りるか（使う場合は費用と情報の扱い）
- 既存の受信箱・チケット管理との連携
- 確認する人の人数と権限
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「RELAYを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。