画面サンプル/ UI mockups
松葉 / Matsuba の主要画面を、HTML と CSS だけで再現したモックアップです。実装着手前のため、実際のスクリーンショットではありませんが、画面の構成・主要な要素・操作の導線をお確かめいただけます。
表示について: 実装ではダークなサイドバー + 紙色の作業領域という和モダンの配色で構成します。レイアウトは PC を主とし、タブレット・スマホは閲覧中心とします。
ホーム / Box 一覧P-HOME · /boxes
サインイン後の起点となる画面です。所属する Box を一覧表示し、最近アクセスしたファイルと、利用状況の主要指標を上に表示します。社外ユーザは社外向け Box のみが見え、社内ユーザは社内非メンバーでも閲覧可能な Box を別セクションで発見できます。
主な要素: サイドバー（ナビ）/ ヘッダ（パンくず・検索・通知ベル・アバター）/ 主要指標 3 枚 / 所属 Box カードグリッド（可視性バッジ + 新着・更新・Hold バッジ）/ 最近のファイル（直近 30 日、上位 10 件、F-BOX-14）
Box 詳細 — ファイルP-BOX-DETAIL-FILES · /boxes/[id]
Box の中心となる画面です。フォルダツリーとファイル一覧、各タブ（ファイル / メンバー / アクティビティ / 共有リンク / Drive アーカイブ / 設定）を横並びに配します。
主な要素: Box ヘッダ（名前 + 可視性 + 設定サマリ + 主要 CTA）/ タブ（6 種）/ 左ツリー / 右ファイル一覧（チェックボックスで複数選択 → 一括 DL）。バッジ NEW / UPDATED / HOLD はそれぞれ未読・差し替え・保持中を意味します。
ファイル詳細P-FILE-DETAIL · /boxes/[id]/files/[fileId]
左にプレビュー、右にメタ情報・世代・コメント・Hold（リーガルホールド）切替・タグ編集を配置します。PDF は @react-pdf-viewer/core でブラウザ内表示します。
主な要素: PDF プレビュー（左、レンジリクエストで部分ロード）/ メタ情報（サイズ・世代・UL者・スキャン状態・保持期限・タグ・説明）/ Hold スイッチ（理由必須）/ 世代タブ・コメントタブ。スキャン状態は pending / scanning / clean / infected / failed の 5 段階。
管理ダッシュボードP-ADM-DASHBOARD · /admin
system_admin（システム管理者）向けの起点画面です。6 観点のヘルスインジケータを信号機方式（緑 / 黄 / 赤）で表示し、未対応アラートを一覧で見せます。
主な要素: 6 観点ヘルスインジケータ（ストレージ / スキャン / Drive 同期 / 通知 / 共有リンク / 認証） / 主要 KPI 6 種 / アプリ独自判定の未対応アラート（critical / warning） + 個別操作の起点。Cloud Monitoring とは別に app_alerts テーブルで業務的な信号を保持します。
サインインフローP-AUTH-* · /sign-in & /two-factor
社外ユーザのサインインは「入口の選択 → 社外サインイン → メール OTP 入力」の 3 ステップです。社内ユーザは Google SSO（hd=example.com 強制 + サーバ側ドメイン再検証）のみで、MFA は Google Workspace の組織ポリシーに委任します。
主な要素: 入口画面で社内 / 社外を分岐 → 社外サインイン（Google or メール+パス） → メール OTP 6 桁 + 信頼デバイス記憶（30 日）。社外ユーザは全員 OTP MFA が必須です。バックアップコードは 10 桁 × 10 個発行され、各 1 回限り使えます。
右下のグラフ、数値確認後に再アップ予定です。
了解です、待ちます。