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