01
状態保持6 items
6 items入力中のフォームが消えない
必須 記入途中で誤って閉じても、再訪時に内容が復元される。
→ 入力途中で閉じた・リロードした → 全部消えた → 二度と書きたくない、を防ぐ。
リロードしても同じセクションのまま
必須 ブラウザでF5/Cmd+Rしてもページの「現在のタブ・セクション」が維持される。
→ 初期状態に戻る → 何度も開き直し → ストレス。SPA全般で必須の体験品質。
展開状態の復元
推奨 アコーディオンやツリーの開閉状態を localStorage に保存。
→ 毎回同じ場所を開き直すのが面倒。
フィルタ条件を URL で保持
推奨 検索・フィルタ条件を URL クエリに反映。共有可能・履歴対応。
→ リロードでフィルタ消える → 設定し直し → ストレス。共有もできない。
スクロール位置の復元
推奨 一覧 → 詳細 → 戻るで、元のスクロール位置に戻る。
→ 長い一覧の途中で詳細を見て戻った時、最上部に飛ぶと探し直しになる。
タブ切替の状態保持
推奨 タブを切替えても各タブのフォーム入力やスクロール位置を保持。
→ タブAで入力 → タブB → タブAに戻ると初期化、を防ぐ。
02
入力UX12 items
12 itemsクリックで編集モード（インライン編集）
必須 テキスト・数値・選択肢など、クリックすると編集できる。Esc取消・Enter確定。
→ 「編集ボタン → 編集画面」のクリック数を減らす。Notion 風の操作感。
日付は必ずカレンダー選択
必須 日付入力は手打ちさせず、カレンダーUIで選択。フォーマット統一。
→ 手打ちは「2025/5/5」「2025-05-05」「2025年5月5日」とブレる → DB揺れ。
必須フィールドの視覚表示
必須 必須項目は ※ または * で明示。フォーカス時にも教える。
→ 送信ボタン押してエラーで初めて気づく → ストレス。事前明示が必須。
オートコンプリート（候補表示）
推奨 過去に入力した値や選択肢を候補表示。タイポ防止 + 入力高速化。
→ 同じ値を毎回手打ち → タイポ → DB揺れ。候補から選ばせれば確実。
一括編集モード
推奨 複数行を一気に編集できるモード。CSV のように行列で書き換え。
→ 個別編集だと10件編集に10クリック。一括だと1分で終わる。
タグ式マルチセレクト
推奨 複数選択肢を「タグ」として表示し、× で削除可能。
→ チェックボックス10個より、タグの方が見やすい・操作しやすい。
数値は自動カンマ区切り
推奨 金額入力時に「1234567」→「1,234,567」と表示。
→ 桁数の認識ミスを防ぐ。¥1億と¥10億を見間違えない。
ペーストで一括入力
推奨 テキストエリアに改行区切りでペースト → 自動的に複数行に分割。
→ スプレッドシートからコピーしたデータをそのまま貼れる。
リアルタイムバリデーション
推奨 入力中にエラーをチェックして即時表示。送信時まで待たせない。
→ メアド全部入力後に「形式不正」より、@ が無いタイミングで気づける方が早い。
検索付きプルダウン
推奨 選択肢が多い場合（社員50人など）、ドロップダウン内で検索可能に。
→ 50人スクロールは無理。「お」と打てば「大串」が出る。
時刻もピッカーで選択
推奨 時刻入力もピッカー化。15分刻みなど業務に合わせた粒度。
→ 日付と同じく手打ちはブレる。15分単位なら選択肢が現実的。
削除・編集はUndo可能に
推奨 誤削除しても「元に戻す」で復活できる。トースト + 5秒タイマー方式。
→ 削除確認ダイアログを出すと頻度が高い操作で疲れる。Undo方式が主流。
03
認証6 items
6 itemsログイン画面
必須 メール+パスワード or マジックリンク or OAuth ログイン。
→ 社内システムでも認証は必須。情報漏洩防止。
パスワード再設定フロー
必須 「パスワード忘れた」リンク → メール送信 → リセット画面。
→ 忘れた時に管理者対応 → 業務停止 → 機会損失。セルフサービス化必須。
セッション永続化（Remember me）
必須 タブ閉じてもログイン状態維持。Cookie or localStorage。
→ 毎回ログインさせると面倒。1ヶ月程度は維持が標準。
初回ログイン オンボーディング
推奨 初回ログイン時に簡単なツアー or プロフィール入力を表示。
→ 初見で「何ができるか分からない」→ 離脱。3分の導入で定着率UP。
ログアウト確認 + 全タブ同期
推奨 ログアウト時、他タブも自動的にログアウト状態に。
→ 1タブだけログアウトされてもセキュリティ意図に反する。
ロール権限（RBAC）
推奨 admin / manager / member 等の役割で機能・データアクセス制御。
→ 全員に全権限あると事故・情報漏洩リスク。最小権限原則。
04
ブランド4 items
4 itemsアプリ名・社名の一元管理
必須 社名・アプリ名・ロゴパス等を1箇所（config.ts）で管理。
→ 改名時に全ファイル grep する → 漏れる。1箇所変更で完結する設計が必須。
ロゴ・ファビコン設定
必須 ヘッダーロゴ + favicon + apple-touch-icon を統一設定。
→ ブラウザタブで自社のシステムだと一目で分かる。ブックマーク時も。
ページタイトル + メタタグ
必須 各ページに固有の <title> と <meta description>。OG画像も。
→ ブラウザタブで区別できない。Slack/X 共有時に綺麗な OG カードが出る。
テーマカラーの CSS 変数化
必須 プライマリカラーは CSS 変数で。後から色変更1箇所で完結。
→ 直接色コードを書きまくると、ブランド色変更時に絶望する。
05
UI標準7 items
7 items404・500 エラーページ
必須 存在しないURL・サーバエラー時の専用ページ。ホーム導線必須。
→ デフォルトの真っ白404 → 離脱率UP。優しい案内ページで救済。
危険操作は確認ダイアログ必須
必須 削除・データリセット等の危険操作は必ず確認ダイアログ。
→ 誤クリックでデータ消失 → 信頼喪失。確認1ステップで防げる。
エラーバウンダリー（クラッシュ防止）
必須 コンポーネントの予期せぬエラーで全画面真っ白を防ぐ。
→ 一部のエラーで全体が落ちる → ユーザーが何もできなくなる。
グローバルトースト通知
必須 保存成功・エラー・コピー完了など、操作結果を画面下に通知。
→ ボタン押した結果が分からないとユーザーは不安になる。視覚フィードバック必須。
ローディング状態の標準化
必須 API 呼び出し中はスケルトンorスピナー。完了後にコンテンツ表示。
→ 「画面真っ白」だと「動いてない？」と不安。読み込み中の視覚化が必須。
全画面でパンくずナビ
推奨 深い階層でも「どこにいるか」が一目で分かる。戻る導線にもなる。
→ URL だけだと階層が分かりづらい。パンくずで認知負荷を下げる。
キーボードショートカット + ヘルプ表示
推奨 よく使う操作にショートカット（⌘K で検索など）+ ? でチートシート表示。
→ パワーユーザーは10倍速くなる。ヘルプがあると初心者にも優しい。
06
操作7 items
7 items一覧の絞込 + ソート + 検索
必須 全一覧画面に「検索ボックス + フィルタチップ + カラムソート」を装備。
→ 100件以上ある一覧でこれが無いと、目視で探す → 数分かかる。
ページング or 無限スクロール
必須 100件以上は分割表示。少数派なら全件、多数派なら無限スクロール。
→ 全件表示は重い・遅い。分割で初期表示を高速化。
一括選択 + 一括操作
推奨 チェックボックスで複数選択 → 一括削除・一括ステータス変更等。
→ 個別操作だけだと10件処理に10アクション。1アクションで済む。
一覧は CSV 出力可能
推奨 どの一覧画面も右上に「CSV出力」ボタン。Excel互換で BOM 付き。
→ 経営層は Excel で見たい派。エクスポートが無いとシステム外で操作できない。
マスタ系は CSV 取込可能
推奨 社員・取引先・商品マスタなどは CSV 一括登録できる。
→ 初回導入時に1件ずつ手入力 → 1時間。CSVなら3分。
グローバル検索（⌘K）
推奨 どの画面でも ⌘K で検索ダイアログ。データ・ナビ・アクション全部対象。
→ 探す行為が一番の時間のロス。1キーで全部にアクセスできれば爆速。
印刷対応の CSS
推奨 印刷時にナビ・ボタン非表示・余白調整・ページ分割。
→ 印刷した紙が見づらい・ナビごと印刷される → 読みづらい。
07
セキュリティ4 items
4 itemsCache-Control ヘッダ
必須 デプロイ後も古いHTMLが表示される問題を防ぐ。public/_headers で設定。
→ 新版デプロイしたのに、ユーザーが旧版を見続ける = 改修が反映されない。
CORS 設定（API用）
必須 API は CORS を統一ヘルパで処理。OPTIONS preflight 対応。
→ 別ドメインから呼ぶ時に CORS で詰む。最初から正しく設定。
CSP（Content Security Policy）
推奨 XSS 対策。許可されたソースからのみリソース読込。
→ 万が一 XSS 起こされても、外部サイトへのデータ送信を防げる。
レート制限
推奨 同一 IP / ユーザーから短時間に大量アクセス → ブロック。
→ ボット攻撃・誤実装による暴走から守る。
08
運用9 items
9 itemschangelog 必須記載
必須 機能変更・修正は必ず changelog ファイルに追記。
→ 何が変わったか追跡できないと、退化の原因特定不可能。
環境変数の一元管理
必須 API key・接続情報を .env / wrangler secret で管理。コミット禁止。
→ 誤って .env をコミット → 流出 → 損害賠償。必ず .gitignore。
デプロイ前 自動バックアップ
必須 デプロイ前に必ず tar.gz を取って、即時ロールバック可能に。
→ 退化が起きた時、事前バックアップがあれば30秒で復元。無いと数時間溶ける。
操作監査ログ
推奨 誰がいつ何を変更したかを全件記録。コンプラ対応 + 原因究明。
→ ISMS / SOC2 等の監査で求められる。問題発生時の原因特定にも必須。
詳細監査ログ（変更前/変更後）
推奨 変更時に「誰が」「いつ」「何を」「変更前→変更後」を全件記録。
→ コンプライアンス対応・調査時に必須。「誰がやった」が分からないと対応不能。
エラー追跡（Sentry風）
推奨 クライアント・サーバの全エラーを集約。スタックトレース付き。
→ ユーザーから「エラー出た」報告だけだと再現不可。自動収集が必須。
フィーチャーフラグで段階リリース
推奨 新機能は最初 1% のユーザーだけに公開 → 問題なければ拡大。
→ 全員に一気にリリース → バグ → 全員影響。段階リリースで影響限定。
ヘルスチェック + 死活監視
推奨 /api/health エンドポイント + UptimeRobot 連携で 24時間監視。
→ 本番落ちてるのを翌日気づく → 1日売上ゼロ。即時通知で5分以内対応。
スナップショット復元システム
推奨 全データ定期スナップショット → 過去時点へ1クリック復元。
→ データ事故・誤一括更新時の救済。バックアップだけでは復元手順が大変。
09