本書は、本アプリケーションの操作手順をまとめた利用者向けマニュアルです。画面・ボタン名は実装に準拠しています。

• 対象アプリ: 中小企業AI事務員システム（Office Clerk）
• 構成: フロントエンド（React + TypeScript + Vite）＋ バックエンド（Express REST API / インメモリ）
• 設計トレース: 業務シナリオ → ユースケース図 / クラス図 / 状態マシン図 → 実装

01はじめに

本アプリは、中小企業のバックオフィス業務（経理・人事・営業事務・一般事務）をデジタル化するためのシステムです。主な機能は次のとおりです。

代表的なアクター（利用者像）：経理担当 / 人事担当 / 営業事務 / 一般事務 / 承認者（管理職）/ システム管理者。

02起動と終了

2.1 必要環境

• Node.js 20.x 以降

2.2 起動手順

2つのサーバーを起動します。ターミナルを2つ使います。

# ① バックエンド（REST API / ポート 4000）
cd app/backend
npm install        # 初回のみ
npm run dev

# ② フロントエンド（画面 / ポート 5173）
cd app/frontend
npm install        # 初回のみ
npm run dev

ブラウザで http://localhost:5173/ を開きます。

rm -rf node_modules && npm install   # backend / frontend の両方で実行

2.3 終了手順

各ターミナルで Ctrl + C。または以下で停止します。

lsof -ti:4000,5173 | xargs kill

03画面構成

画面左のサイドバーから各機能へ移動します。先頭が「ダッシュボード」、以下は業務グループごとにメニューが並びます。

各機能は共通して 一覧 → 詳細 → 新規/編集 の3画面で構成されます（全72機能が同じ操作体系です）。

• 一覧画面 /{機能}: 検索・並び替え・ページ送り。行クリックで詳細へ。右上「新規作成」で新規登録。
• 詳細画面 /{機能}/{id}: 内容表示・状態遷移操作・関連データへの移動。
• 新規/編集画面 /{機能}/new、/{機能}/{id}/edit: 入力フォーム。

04ダッシュボード

トップ画面（/）に表示されます。売上・未回収の状況を把握し、各機能への入り口として利用します（UC-27）。

• 件数サマリカード（9種）: 請求書・入金・契約・見積・受注・発注・勤怠・承認申請・顧客。カードをクリックするとその一覧画面へ移動します。
• 最近の請求書: 請求日の新しい順に5件。行クリックで請求書詳細へ。
• 滞留（未回収）請求書: 状態が「滞留（Overdue）」の請求書を5件。支払期日と金額を赤字で表示。行クリックで詳細へ。

05一覧画面の使い方

例として「請求書」一覧（サイドバー「経理」→「請求書」）で説明します。操作方法は全機能で共通です。

関連データによる絞り込み表示

詳細画面の「関連データ」から移動すると、一覧が関連レコードだけに絞り込まれ、画面上部に青い帯で「〜に関連する〇〇：N件」と表示されます。「絞り込み解除」を押すと通常の一覧に戻ります。

06詳細画面の使い方

詳細画面は上から順に次の要素で構成されます。

1. タイトルと右上の操作ボタン: 「一覧へ」「編集」「削除」。
2. 現在の状態: 状態を持つ機能のみ、日本語のバッジで表示（例: 作成中）。
3. 操作（状態遷移）: 状態を持つ機能のみ表示。→ 8章
4. 詳細情報: 全項目と登録日時・更新日時。他データへの参照項目は青いリンクで表示され、クリックすると参照先の詳細へ移動します。
5. 関連データ: この記録を参照している機能へのリンク。クリックすると絞り込み済みの一覧が開きます。

上図は顧客マスタの詳細です。「関連データ」から、この顧客の請求書・見積・受注・入金などへワンクリックで移動できます。

07新規作成・編集画面の使い方

一覧右上の「新規作成」、または詳細・一覧の「編集」から開きます。

• 項目名の 赤い * は必須項目です。未入力のまま保存しようとするとブラウザの入力チェックで止まります。
• 入力欄は項目の型に応じて自動的に切り替わります（テキスト / 数値 / 日付 / 日時 / チェックボックス / プルダウン / 参照先の選択）。
• 状態などの選択項目は日本語のプルダウンで選びます。
• 画面下部の「作成」（編集時は「更新」）で保存し、詳細画面へ移動します。「キャンセル」で破棄して戻ります。
• 保存に失敗した場合は画面上部に赤いエラーメッセージが表示されます。

08状態遷移（ワークフロー）操作

状態を持つ 16機能（請求書・見積・受注・発注・契約・入金・支払予定・仕訳・勤怠・休暇申請・給与計算・文書・申請・タスク・OCR処理・データ移行）では、詳細画面に「操作（状態遷移）」セクションが表示されます。

8.1 操作方法

ボタンを押すと、その操作が実行され、画面上部の「現在の状態」バッジが新しい状態に更新されます。

8.2 実行できない操作を押した場合

定義されていない遷移を実行すると、ボタンの上に赤いエラーメッセージが表示され、状態は変わりません。

上図は「入金済（Paid）」の請求書に対して issue（発行）を押した例です。次のように表示されます。

不正な状態遷移です (現在: Paid, 操作: issue)。許可された操作: なし

メッセージの「許可された操作」に、その時点で実行可能なイベント名が列挙されます。どの操作が可能か分からないときは、いずれかのボタンを押してこのメッセージを確認するのが確実です（データは変更されません）。

09主要業務の操作手順

9.1 請求書の発行と入金消込（UC-01 / BR-001）

1. サイドバー「経理」→「請求書」→ 右上「新規作成」。
2. 請求番号・請求日・支払期限・適格請求書番号・小計・消費税額・合計金額・顧客マスタ などを入力し「作成」。状態は「作成中（Draft）」のままにします。
3. 詳細画面で「issue」を押す → 発行済（Issued） になります。
4. 入金があったら金額に応じて押します。全額入金 → 「receiveFullPayment」→ 入金済（Paid）／一部入金 → 「receivePartialPayment」→ 一部入金（PartiallyPaid）、残額入金時に「receiveRemainder」→ 入金済。
5. 支払期日を過ぎた未入金は「passDueDate」→ 滞留（Overdue）。ダッシュボードの「滞留（未回収）請求書」に表示されます。期日後の入金は「receivePaymentAfterDue」→ 入金済。
6. 取り消す場合は「cancel」（作成中 または 発行済 のときのみ）。

9.2 見積から受注への変換（UC-14 / UC-15 / BR-011 / BR-012）

1. サイドバー「営業事務」→「見積」→「新規作成」で見積を登録（状態: 作成中）。
2. 詳細画面で「submit」→ 提出済（Submitted）。
3. 承認者が「approve」→ 承認済（Approved）。差し戻す場合は「returnToDraft」→ 作成中、失注は「reject」→ 失注（Rejected）。
4. 承認済の見積を「convert」→ 受注変換済（Converted）。
5. 有効期限切れは「expire」→ 期限切れ（Expired）（提出済・承認済から可能）。

9.3 申請と多段承認（UC-22 / BR-015〜017）

1. サイドバー「ワークフロー・タスク」→「申請」→「新規作成」（状態: 申請中）。
2. 「route」→ 承認中（InApproval）。ワークフロー定義に従って承認ステップへ回付されます。
3. 承認者の操作：承認 → 「approveStep」→ 承認済（Approved）／差し戻し → 「returnRequest」→ 差戻し（Returned）（申請者が「resubmit」で再申請 → 申請中）／却下 → 「reject」→ 却下（Rejected）。
4. 承認済の申請を「finalize」→ 確定（Finalized）。

9.4 勤怠の締め（UC-10 / BR-008）

1. サイドバー「人事・総務」→「勤怠」。対象月・勤務日数・勤務時間・残業時間などを確認します。
2. 従業員が「submit」→ 提出済（Submitted）。
3. 人事担当が「close」→ 確定（Closed）。修正が必要なら「reopen」→ 差戻し（Reopened）。
4. 差戻し後は「resubmit」→ 提出済に戻します。

10業務ルールと状態遷移表

10.1 請求書（Invoice）

        issue          receiveFullPayment
 作成中 ──────▶ 発行済 ──────────────────▶ 入金済
   │              │  │                       ▲
   │ cancel       │  │ receivePartialPayment │ receiveRemainder
   ▼              │  ▼                       │
 取消 ◀───────────┘ 一部入金 ────────────────┘
        cancel      │      │
                    │      │ passDueDate
          passDueDate      ▼
                    └──▶ 滞留 ──────────────▶ 入金済
                          receivePaymentAfterDue

10.2 見積（Quotation）

10.3 申請（ApprovalRequest）

10.4 勤怠（Attendance）

10.5 主な業務ルール

11メニュー一覧（全72機能）

太字は状態遷移（ワークフロー）操作を持つ機能です（計16）。

12よくある質問・トラブルシュート

13制約事項

• データはインメモリ保持です。バックエンドを再起動すると、登録したデータはシード（初期）状態に戻ります。
• ログイン認証はありません。「ユーザー」「ロール」「権限」はデータとして管理するのみで、画面アクセス制御は行いません。
• 状態遷移ボタンは現在の状態で出し分けされません。実行可否はサーバー側で検証されます（BR-018）。
• 一覧画面に状態などの絞り込みUIはありません（検索・並び替え・ページ送りのみ）。API はフィールド絞り込みに対応しています。
• 「OCR処理」「AI支援リクエスト」「CSV入出力」「RPA連携」「振込データ」などは、状態と項目の管理までを行う想定で、実際のOCR実行・AI推論・ファイル生成は本デモ範囲外です。
• 金額項目は詳細画面では数値をそのまま表示します（ダッシュボードのみ ¥ 区切り表示）。
• 本番運用では、永続化層を PostgreSQL（Prisma 等）へ差し替えることを想定しています。