これは「見た目と操作の流れ」だけを確認するための画面です。
データベース・ファイル保管・メール送信はつながっていません。入力した内容は保存されません。
3つの画面
1. 管理画面（自社スタッフが使う）
契約の作成 → PDFアップロード → 確定 → コード発行 → 伝達記録 → 招待送信 → 一覧・詳細（ログのタイムライン）
管理画面を開く2. 署名画面（契約の相手方がスマホで使う）
お名前 → アクセスコード → 確認コード → 契約書の確認 → 手書きサイン → 同意・締結
署名画面を開く3. 照合画面（誰でも使える）
手元のPDFが、締結時のものと同じかを確認する
照合画面を開く見ていただきたいところ
- スマホでも見てください。相手方はスマホから署名します（画面幅375px で崩れないか）
- 署名画面を最後まで通してみてください。ボタンの文言や説明で、分かりにくいところがないか
- 手書きサインが指で書けるか（書き直しもできます）
- 管理画面の「新規作成」を最後まで進めてみてください。入力の手間が現実的かどうか
- アクセスコードを発行したときのチェックリスト（電話でやること4つ）が実務に合っているか
- 送信元アドレスの表示（v1.2）。会社を選ぶと、その会社の Gmail アドレスが出ます。 どの画面でも「どこから送るか」が分かるようになっているか
- 設定 → 自社マスタ。会社ごとの Gmail の接続状態が分かりやすいか （デモでは「デモサービス 合同会社」だけ未接続にしてあります）
デモ用のヒント
署名画面では、お名前・アクセスコード・確認コードの「正解」を画面に表示しています（本番では出ません）。
この画面モックについて
| 位置づけ | 実装フェーズ0。このモックを本実装の画面の土台にします（作り直しません） |
|---|---|
| 設計書 | docs/design.md v1.4 の「10章 画面一覧・画面遷移」に従っています |
| メール | 送信元は契約当事者（会社）ごとの Gmail アドレス。契約で選んだ会社から送ります（v1.2） |
| 対応ブラウザ | Safari 13 相当以上。OS判定はせず、機能検出だけで分岐しています |
| PDF表示 | PDF.js（旧ブラウザ対応版）を同梱。読み込めない端末では「ダウンロードして確認」に自動で切り替わります |
| 白画面対策 | エラーは素のDOMで必ず表示します。JavaScript が無効でも説明文が出ます |
| 次の段階 | フェーズ1（データベース）に進む前に、検証環境に Cloudflare Access（Googleログイン）をかけます |