使い方
画面設計レビューの直前に、設計者本人が一度通してください。 指摘が「好み」ではなく「標準への適合」に変わり、レビューの往復が減ります。 自社に合わない項目は削り、足りない項目は追記して育てる前提のリストです。
🗂 画面レイアウト
- ヘッダー・サイドメニュー・本文領域の役割が全画面で一致している
- 主要な操作ボタンの位置が画面間でぶれていない
- 1画面の情報量は「1スクロール以内に主要情報が収まる」を基準にしている
- 余白は 4px / 8px の倍数で統一されている
- 画面タイトルとブラウザタブのタイトルが一致している
- 1280px 幅・1920px 幅の両方でレイアウトが破綻しない
🧭 ナビゲーション
- 現在位置がメニュー上でハイライトされている
- 階層が3段を超えていない（超える場合は検索を用意している）
- パンくずが全下層画面に存在する
- ブラウザの戻るボタンで業務が壊れない
- 未保存の変更がある状態で離脱すると警告が出る
✍️ 入力フォーム
- ラベルは入力欄の上（または左揃え）で位置が統一されている
- 必須／任意の表示ルールが1つに統一されている
- 入力欄の幅が入力内容の桁数を示唆している
- プレースホルダーをラベル代わりに使っていない
- 全角／半角の自動変換や桁区切りなど入力補助がある
- Tabキーの移動順が業務の入力順と一致している
- Enterキーの挙動（送信するか否か）が全画面で統一されている
- 入力途中の一時保存または離脱警告がある
- エラーは項目の直下に、原因と対処をセットで表示している
- 送信ボタンは二重送信を防止している
📊 一覧・テーブル
- 初期表示の並び順が業務上の優先順と一致している
- 検索条件が再表示時に保持される
- 列幅・列の折り返しルールが決まっている
- 数値は右揃え、日付は固定書式で揃っている
- 0件時に「条件を変えて再検索」を促す文言が出る
- 件数と現在のページ位置が常に見えている
- 一括操作の対象件数が実行前に明示される
- 横スクロール時にキー列が固定される
💬 アクションと通知
- 主ボタン（Primary）は1画面に1つだけ
- 破壊的操作は色・文言・確認ステップで区別されている
- 確認ダイアログの文言が「何が起きるか」を具体的に書いている
- 処理中はボタンが無効化され、進行状態が見える
- 成功メッセージは操作の結果（件数など）を含む
- トーストは自動で消え、重要な失敗は消えない領域に出す
🎨 デザイントークン
- 色は役割名（primary / danger / surface など）で定義されている
- 警告・エラー・成功の色が全画面で同じ意味を持つ
- 本文は14px以上、行間は1.6以上
- 角丸・影の値が2〜3種類に絞られている
- ハードコードされた色コードがコード上に残っていない
♿ アクセシビリティ
- テキストと背景のコントラスト比が4.5:1以上
- マウスを使わず、キーボードだけで一連の業務が完了できる
- フォーカスリングを消していない
- 色だけで状態を伝えていない（アイコンや文言を併用）
- すべての入力欄に label が関連付けられている
- 画像・アイコンボタンに代替テキストがある
🛠 運用
- コンポーネント名が設計書と実装で一致している
- 標準からの逸脱を申請・記録する場所が決まっている
- 標準の改訂履歴とバージョンが管理されている
- レビューのタイミングと担当者が定義されている
チェックが多く外れたときは
外れた項目が多いカテゴリから記事を読むのが近道です。 特にフォームと一覧は、業務システムの操作時間の大半を占めるため、 入力フォームと一覧・テーブルの2カテゴリを優先してください。