問い合わせmini V1.0 WEB UI 仕様

問い合わせmini V1.0 Web UI仕様

1. 本仕様の目的

本仕様は、問い合わせmini V1.0におけるWeb UI周りの設計方針をまとめるものである。

先に定義した問い合わせmini V1.0仕様では、Googleフォーム、Googleスプレッドシート、GAS、Gmail下書き作成、受付完了メール自動送信などの基本機能を中心に整理した。

本仕様では、利用者が実際に操作する画面、画面構成、操作ボタン、表示項目、SPA風の画面切り替え、GASとの連携方式を定義する。

2. 基本方針

問い合わせmini V1.0では、スプレッドシートを裏側のデータ保存場所として利用し、利用者の日常操作はWeb UIから行う。

スプレッドシートを直接編集する運用も可能だが、零細企業・店舗向けの無料ツールとしては、できるだけ画面上のボタン操作で完結することを目指す。

Web UIは、GASのHTMLサービスを利用して作成する。

ファイル構成は以下とする。

Code.gs
index.html

GASファイルを細かく分割せず、V1.0ではCode.gsに処理を集約する。
HTML、CSS、JavaScriptもindex.htmlにまとめる。

これにより、配布・コピー・修正・保守を簡単にする。

3. Web UIの位置づけ

問い合わせminiのWeb UIは、以下の目的で利用する。

• 問い合わせ一覧の確認
• 未対応問い合わせの確認
• 問い合わせ詳細の確認
• 対応ステータスの変更
• 担当者メモの保存
• 受付メールの再送
• Gmail正式回答下書きの作成
• 重複問い合わせの確認
• 基本設定の確認
• ログの簡易確認

一方、V1.0では高度なマスター編集画面までは作り込まない。

返信テンプレート、受付メール設定、資料マスター、基本設定の詳細編集は、原則としてスプレッドシート側で行う。

4. 画面起動方法

V1.0では、以下の2方式に対応できる設計とする。

4-1. スプレッドシートメニューから起動

スプレッドシートを開き、上部メニューから以下を選択する。

問い合わせmini
→ 管理画面を開く

この操作により、HTML画面を表示する。

初期版では、サイドバー表示またはダイアログ表示のどちらでもよい。

ただし、一覧管理を行うため、将来的にはWebアプリ表示を優先する。

4-2. WebアプリURLから起動

GASをWebアプリとしてデプロイし、専用URLから管理画面を開く。

STOCKminiやTECN NEWSと同じく、ブラウザ上で専用画面として操作できる形を想定する。

V1.0では、WebアプリURL起動を主軸としつつ、必要に応じてスプレッドシートメニューからも画面を開けるようにする。

5. UI構成

問い合わせmini V1.0のWeb UIは、SPA風の1画面構成とする。

ページ遷移を増やさず、index.html内で表示内容を切り替える。

主な画面は以下とする。

1. ダッシュボード画面
2. 問い合わせ一覧画面
3. 問い合わせ詳細画面
4. 設定確認画面
5. ログ確認画面

V1.0では、すべてを完全な別ページとして作らず、同一HTML内で表示エリアを切り替える方式とする。

6. 共通レイアウト

Web UIの基本レイアウトは以下とする。

6-1. ヘッダー

画面上部に以下を表示する。

• システム名：問い合わせmini
• バージョン：V1.0
• 店舗名または会社名
• 更新ボタン

表示例：

問い合わせmini V1.0
サンプル店舗 お問い合わせ管理

6-2. ステータスカード

ヘッダー下に、問い合わせ状況を示すカードを表示する。

表示するカードは以下とする。

• 未対応
• 下書き作成済
• 要確認
• 返信済
• 完了
• 重複あり

各カードには件数を表示する。

例：

未対応：5件
下書き作成済：3件
要確認：1件
重複あり：2件

ステータスカードをクリックすると、そのステータスで問い合わせ一覧を絞り込めるようにする。

6-3. メインエリア

メインエリアには、問い合わせ一覧、詳細、設定、ログを切り替えて表示する。

V1.0では、左メニューを必須とせず、上部タブまたはボタンで切り替える。

表示切り替えボタン例：

• 一覧
• 未対応
• 要確認
• 設定
• ログ

7. ダッシュボード画面

7-1. 目的

問い合わせ状況を一目で確認するための画面。

7-2. 表示項目

ダッシュボードには以下を表示する。

• 未対応件数
• 下書き作成済件数
• 要確認件数
• 返信済件数
• 完了件数
• 重複あり件数
• 本日の問い合わせ件数
• 直近の問い合わせ一覧

7-3. 操作

ダッシュボード上では、以下の操作を可能とする。

• 最新状態に更新
• 未対応一覧を表示
• 要確認一覧を表示
• 直近問い合わせの詳細表示

8. 問い合わせ一覧画面

8-1. 目的

問い合わせを一覧で確認し、対応が必要な問い合わせを探しやすくする。

8-2. 表示項目

問い合わせ一覧では、以下の項目を表示する。

• 問い合わせID
• 受付日時
• お名前
• 会社名・店舗名
• 問い合わせ種別
• 対応ステータス
• 重複フラグ
• 受付メール送信結果
• 下書き作成結果
• 操作ボタン

8-3. 一覧の並び順

初期表示では、受付日時の新しい順に表示する。

未対応の問い合わせが上に来るようにすることも検討できるが、V1.0では新着順を基本とする。

8-4. 絞り込み

V1.0で用意する絞り込みは以下とする。

• 全件
• 未対応
• 下書き作成済
• 要確認
• 返信済
• 完了
• 重複あり

8-5. 検索

V1.0では簡易検索を実装する。

検索対象は以下とする。

• お名前
• メールアドレス
• 会社名・店舗名
• 問い合わせ内容

検索はHTML側で取得済みデータを絞り込む簡易検索でもよい。

8-6. 操作ボタン

問い合わせ一覧には、各行に以下の操作ボタンを表示する。

• 詳細
• 下書き作成
• 要確認
• 完了

V1.0では、一覧上での操作を増やしすぎない。

詳細確認が必要な操作は、問い合わせ詳細画面で行う。

9. 問い合わせ詳細画面

9-1. 目的

1件の問い合わせ内容を確認し、対応操作を行う。

9-2. 表示項目

問い合わせ詳細画面では、以下を表示する。

• 問い合わせID
• 受付日時
• お名前
• メールアドレス
• 会社名・店舗名
• 電話番号
• 問い合わせ種別
• 希望資料
• 問い合わせ内容
• 対応ステータス
• 受付メール送信日時
• 受付メール送信結果
• 正式回答下書き作成日時
• 下書き作成結果
• 重複フラグ
• 同一メール過去件数
• 担当者メモ
• 次回対応日
• 完了日

9-3. 操作ボタン

詳細画面では、以下の操作ボタンを表示する。

• 受付メール再送
• Gmail下書き作成
• ステータスを未対応にする
• ステータスを要確認にする
• ステータスを返信済にする
• ステータスを完了にする
• メモ保存
• 一覧に戻る

9-4. メモ保存

担当者メモは、詳細画面上で編集できるようにする。

保存ボタンを押すと、問い合わせ台帳の担当者メモ列に反映する。

9-5. ステータス変更

ステータス変更ボタンを押すと、問い合わせ台帳の対応ステータスを更新する。

完了にした場合は、完了日を自動入力する。

返信済にした場合は、V1.0では実際のGmail送信済み確認は行わず、担当者の手動判断による更新とする。

10. 設定確認画面

10-1. 目的

基本設定シートの内容をWeb UI上で確認できるようにする。

10-2. 表示項目

設定確認画面では、以下を表示する。

• 店舗名
• 送信者名
• 返信先メールアドレス
• 管理者メールアドレス
• 受付メール自動送信 ON/OFF
• Gmail下書き自動作成 ON/OFF
• 重複判定時間
• タイムゾーン
• 署名

10-3. 編集方針

V1.0では、設定編集は原則としてスプレッドシート側で行う。

Web UIでは設定内容の確認を中心とする。

ただし、将来的にはWeb UIから設定変更できるよう拡張する。

11. ログ確認画面

11-1. 目的

GAS処理結果やエラーを簡単に確認できるようにする。

11-2. 表示項目

ログ画面では、最新のログを新しい順に表示する。

表示項目は以下とする。

• ログ日時
• 処理区分
• 問い合わせID
• 結果
• メッセージ
• 詳細

11-3. 表示件数

V1.0では、最新50件程度を表示する。

詳細なログ確認はスプレッドシートのログシートで行う。

12. GASとHTMLの連携方式

Web UIからGAS処理を呼び出す場合は、google.script.run を使用する。

HTML側から呼び出す主なGAS関数は以下とする。

• getDashboardData()
• getInquiryList()
• getInquiryDetail(inquiryId)
• updateInquiryStatus(inquiryId, status)
• saveInquiryMemo(inquiryId, memo, nextActionDate)
• resendAutoReply(inquiryId)
• createReplyDraft(inquiryId)
• getSettingsForUi()
• getRecentLogs()

GAS側は、各関数でスプレッドシートを読み書きし、結果をHTML側に返す。

13. データ取得方針

問い合わせ一覧は、問い合わせ台帳シートから取得する。

V1.0では問い合わせ件数が少ない前提のため、問い合わせ台帳の全行を取得してHTML側で表示・絞り込みしてよい。

ただし、件数が多くなった場合に備えて、将来的にはGAS側でステータス別・件数制限付き取得に変更できる設計とする。

初期表示件数は、最新100件程度を想定する。

14. デザイン方針

問い合わせminiは、小規模事業者・店舗向けの業務ツールである。

そのため、派手な装飾よりも、分かりやすさ、見やすさ、押しやすさを優先する。

基本デザインは以下とする。

• 白背景
• 薄いグレーのカード
• ステータス別の色ラベル
• 大きめの操作ボタン
• 一覧は見やすいテーブル形式
• 詳細はカード形式
• スマホでも見やすい1カラム対応

15. ステータス表示色

対応ステータスは、ラベル表示とする。

初期の色分けは以下を想定する。

ステータス	表示イメージ
未対応	赤系
下書き作成済	青系
要確認	オレンジ系
返信済	緑系
完了	グレー系
対応不要	薄いグレー
重複あり	注意色

色はCSSで定義し、HTML内でクラスを切り替える。

16. スマホ対応

問い合わせminiのWeb UIは、スマホでも確認できるようにする。

ただし、V1.0ではスマホでの本格入力作業よりも、問い合わせ状況の確認を優先する。

スマホ表示では、一覧テーブルを横スクロールまたはカード形式に切り替える。

推奨は、スマホ時に問い合わせ一覧をカード形式で表示することである。

スマホカード表示では、以下を表示する。

• 問い合わせID
• 受付日時
• お名前
• 問い合わせ種別
• ステータス
• 詳細ボタン

17. 操作時の確認表示

誤操作を防ぐため、以下の操作では確認メッセージを表示する。

• 受付メール再送
• Gmail下書き作成
• 完了にする
• 対応不要にする

確認メッセージ例：

この問い合わせのGmail下書きを作成します。よろしいですか？

この問い合わせを完了にします。よろしいですか？

18. 処理中表示

GAS処理には数秒かかる場合があるため、ボタン押下時には処理中表示を行う。

例：

処理中です。しばらくお待ちください。

処理完了後は、以下のように結果を表示する。

• 受付メールを送信しました
• Gmail下書きを作成しました
• メモを保存しました
• ステータスを更新しました
• エラーが発生しました

19. エラー表示

エラーが発生した場合は、画面上に分かりやすく表示する。

V1.0では、専門的なエラーをそのまま表示しすぎず、利用者向けの簡単な説明を表示する。

例：

受付メールを送信できませんでした。メールアドレスやGmailの送信権限を確認してください。

Gmail下書きを作成できませんでした。テンプレート設定を確認してください。

詳細なエラー内容はログシートに記録する。

20. V1.0でWeb UIから操作できる範囲

V1.0でWeb UIから操作できる機能は以下とする。

• 問い合わせ一覧表示
• 問い合わせ詳細表示
• ステータス変更
• 担当者メモ保存
• 次回対応日保存
• 受付メール再送
• Gmail下書き作成
• 設定確認
• ログ確認

21. V1.0でWeb UIから操作しない範囲

V1.0では、以下はWeb UIから操作しない。

• Googleフォーム項目の編集
• 返信テンプレートの本格編集
• 受付メール本文の編集
• 資料マスターの本格編集
• 基本設定の本格編集
• シート構成の変更
• ユーザー権限管理
• 複数担当者管理
• 正式回答メールの直接送信

これらは、スプレッドシート側での編集、またはV1.1以降の拡張対象とする。

22. ファイル構成

問い合わせmini V1.0のGAS・HTML構成は以下とする。

Code.gs
index.html

Code.gsに含める主な処理

• onOpen()
• doGet()
• setupInquiryMini()
• showInquiryMiniUi()
• getDashboardData()
• getInquiryList()
• getInquiryDetail()
• updateInquiryStatus()
• saveInquiryMemo()
• resendAutoReply()
• createReplyDraft()
• getSettingsForUi()
• getRecentLogs()
• logMessage()
• その他共通処理

index.htmlに含める主な処理

• HTML構造
• CSS
• JavaScript
• ダッシュボード表示
• 問い合わせ一覧表示
• 詳細表示
• 設定表示
• ログ表示
• ボタン操作
• google.script.runによるGAS呼び出し

23. Web UIの初期表示

Web UIを開いたときは、以下の順で表示する。

1. 基本設定を取得する
2. ダッシュボード件数を取得する
3. 問い合わせ一覧を取得する
4. ダッシュボードと一覧を表示する

初期表示では、最新問い合わせを新しい順に表示する。

24. Web UIとシートの役割分担

問い合わせmini V1.0では、Web UIとスプレッドシートの役割を以下のように分ける。

Web UIで行うこと

• 日常的な問い合わせ確認
• 対応状況の確認
• ステータス更新
• メモ保存
• 下書き作成
• 受付メール再送

スプレッドシートで行うこと

• 初期設定
• 返信テンプレート編集
• 受付メール本文編集
• 資料URL登録
• ログ詳細確認
• データの直接確認・バックアップ

25. 将来拡張

V1.1以降では、以下のWeb UI拡張を検討する。

• 返信テンプレート編集画面
• 資料マスター編集画面
• 基本設定編集画面
• 問い合わせ種別別の集計グラフ
• 月次問い合わせ件数集計
• STEPmini連携ボタン
• 資料請求後フォロー登録
• WordPressフォーム取り込み状況画面
• 複数担当者対応
• 担当者別フィルター
• スマホ専用カードUIの強化

26. V1.0 Web UIの結論

問い合わせmini V1.0では、Web UIを導入することで、スプレッドシートを直接操作しなくても問い合わせ対応ができるようにする。

ただし、無料版としての分かりやすさと保守性を優先し、GASはCode.gs 1本、HTMLはindex.html 1本で構成する。

画面はSPA風に1画面内で切り替え、問い合わせ一覧、詳細、ステータス変更、メモ保存、受付メール再送、Gmail下書き作成を中心に実装する。

設定やテンプレート編集はV1.0ではスプレッドシート側に残し、日常業務で使う部分をWeb UI化する。