D-Watch UI差分まとめ — モックから変わった画面の中身
作成日: 2026-09-15 対象: ブランチ develop 範囲: 画面に見える差分のみ（API・DB・型・テストなど内部の変更は対象外。それらは docs/変更点まとめ_20260914.md を参照） 突き合わせ方法: d-watch-mock.jsx と components/features/ 配下の実装を1行ずつ照合
総括
- 画面の数は10対10で一致しています。モックにある画面はすべて存在し、余計な画面も増えていません（ログイン画面のみ新規追加）。
- 差分は画面の中身に集中しています。大別すると次の4種類です。
| 種別 |
件数 |
代表例 |
| モックにあるが実装していない |
18 |
点検記録の中身、システム管理の8タブ、グループ・会社フィルタ、未対応件数バッジ |
| モックに無いが追加した |
16 |
ログイン画面、ページ送り、連続日数の表示上限、空状態の文言 |
| 見た目・文言を変えた |
34 |
判定基準の「以上」→「超」、エラー種別が英語生値、接続状態3値→2値 |
| モック側の飾りを機能させた |
6 |
日付入力、検索欄、CSVボタン |
★重要★ このうち約20件は、変更した記録が docs/ のどこにも残っていません。 第4章にまとめています。
第1章 — 画面別 UI差分
凡例: 削 モックにあるが実装していない ／ 追 モックに無いが追加 ／ 変 見た目・文言を変えた ／ 実 モック側の飾りを機能させた 「根拠」欄の 記録なし は、変更理由が資料に残っていないことを意味します。
1-1. 共通の器（サイドバー・ヘッダ・ログイン）
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
メニューの未対応件数バッジ |
「アラート」「D-Secアラート」に赤い件数バッジ |
無し（バッジの受け口自体が無い） |
★記録なし★ |
| 削 |
点検記録のメニュー項目 |
サイドバーに表示 |
非表示（URL直打ちでのみ到達） |
中身が未実装のため一時的に隠している |
| 追 |
ログイン画面 |
存在しない |
新設（トークン入力＋「社内利用のみ。接続元IPも制限されています。」） |
認証方式の確定 |
| 削 |
ログアウトの導線 |
（ログイン自体が無い） |
無し（処理は実装済みだが画面から呼べない） |
★記録なし★ |
| 追 |
ページ送り |
1つも無い |
一覧6画面に共通部品として追加 |
D-120（ユーザー承認済み。モック準拠ルールの例外） |
| — |
メニューの並び・アイコン・ラベル |
— |
完全一致 |
— |
| — |
テーマ切替（☀/🌙）・言語切替（EN/JP） |
— |
完全一致（既定ダーク、保存されないのも同じ） |
— |
1-2. ダッシュボード
|
UI要素 |
モック |
実装 |
根拠 |
| 変 |
ヘッダの未解消件数バッジ |
2枚（事前チェック=赤／D-Sec=橙） |
D-Secの1枚のみ |
★記録なし★（件数を返す項目がAPIに無い） |
| 変 |
清掃ログ表の列数 |
8列（機種・シリアルのみ省略） |
4列（施設名／予定／完了率／判定） |
★記録なし★ 仕様書も8列と書いている |
| 削 |
表の行展開アドバイス |
△×行をクリックで展開 |
クリックできない（▼も出ない） |
★記録なし★ |
| 削 |
「判定 ?」ボタン |
押すと判定基準の凡例が開く |
ボタンは出るが押しても何も起きない |
★記録なし★ |
| 削 |
「失敗の内訳」パネル |
常時表示・4項目 |
表示されない |
D-048（分類元のデータが無い） |
| 変 |
「失敗」カードの補助文 |
「ロボット7／セキュリティ2／制御盤1」 |
補助文なし |
D-048 |
| 変 |
下段カードの並び |
常に2列 |
内訳が無いとき1列（進捗が全幅に伸びる） |
D-048 の帰結 |
| 変 |
「成功」カードの補助行 |
「/ 300施設」 |
「/ N件」（当日の清掃ログ行数） |
1施設2台なら2行になるため。★「300施設」は出典なし★ |
| 変 |
スケジュール進捗 |
常にバーを表示 |
予定0件なら「本日の清掃予定はありません」 |
0%バーは誤読を招く |
| 変 |
セキュリティ警告バナー |
1件固定 |
全件表示。★ただし現在は該当データを出さない方針なので実際には出ない★ |
D-091／D-097（保留） |
| 追 |
表の空状態 |
無し |
「該当するログはありません」 |
★記録なし★ |
| 削 |
表示設定によるブロックON/OFF |
4ブロックを個別に隠せる |
表示設定タブごと未実装。常時表示 |
D-083（P1後半の宿題） |
1-3. 清掃詳細ログ
|
UI要素 |
モック |
実装 |
根拠 |
| 変 |
エラー種別・ロボット状態の表示 |
日本語7分類で色分け |
英語の識別子がそのまま（EmergencyStop 等）。色分けは全部グレーに落ちる |
D-077（推測で翻訳しない） |
| 削 |
グループ・会社の絞り込み |
選択メニューあり |
削除 |
D-053（選んでも何も起きないUIは置かない） |
| 実 |
日付入力2つ |
固定値の飾り（絞り込みに効かない） |
当日を既定にして実際に絞り込む |
— |
| 実 |
CSVボタン |
押せない飾り |
実際にダウンロードできる |
— |
| 追 |
CSVの注意文 |
無し |
「CSVは絞り込み条件に一致する全件を出力します（表示中のページだけではありません）」を常時表示 |
★記録なし★ |
| 追 |
期間31日上限のチェック |
無し |
サーバーに投げる前に画面側で弾く |
— |
| 変 |
検索の反応 |
入力と同時に絞り込み |
少し待ってから問い合わせ |
打鍵ごとの問い合わせを防ぐため |
| 変 |
件数表示 |
「N件 / 全M件」 |
「全N件中 X〜Y件」＋ページ送り |
D-120 |
| 変 |
判定凡例「△ 10-69%」 |
固定文字 |
設定値から生成 |
閾値のハードコード禁止 |
| 変 |
アドバイスカードの中身 |
見出し＋本文1行 |
見出し＋推定原因＋推奨アクションの箇条書き |
該当ルールを全件返す方針（D-037） |
| 追 |
アドバイス0件時 |
（△×は必ず何か出る） |
「該当するアドバイスはありません」＋エリア別ボタンも出ない |
★記録なし★ |
| 変 |
エリア別モーダルの完了率 |
常に「n%」 |
未実施は「-」 |
「0%しか清掃できなかった」と「そもそもやっていない」は別物（D-107） |
| 変 |
エリア別モーダルの空状態 |
1種類 |
2種類に分岐（エリア0件の場合を分けた） |
★記録なし★ |
1-4. アラート（事前チェック）
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
対応状況の更新 |
クリックで 未対応→対応中→解消 と変わる |
表示のみ。押せない |
DBの更新用アカウントが未発行のため |
| 変 |
種別バッジ |
「1h前異常」「出発失敗」の固定2種 |
「{n}分前異常」「出発失敗」「事前チェック異常」 |
D-105（事前チェックの間隔は設定で変わりうる） |
| 変 |
対応状況バッジ |
2値（解消／未解消） |
3値（解消／対応中／未解消） |
仕様が3状態のため |
| 変 |
サマリーカードの見た目 |
専用の小型カード（数字28px・色帯なし） |
共通カード（数字36px・左端に色帯・ラベル大文字） |
★記録なし★ |
| 変 |
「合計」カードの色 |
グレー |
アクセント色 |
★記録なし★ |
| 変 |
日付の既定値 |
固定日付（飾り） |
空＝全期間 |
★記録なし★ |
| 変 |
「解消」バッジの時刻 |
時刻のみ「解消 (01:45)」 |
日付＋時刻「解消 (3/27 01:45)」 |
★記録なし★ |
| 追 |
バッテリー残量の行 |
無し |
「残量 N%」を表示する作り |
★記録なし★ ただし残量は恒久的に空欄と決まったため、実際には出ません（D-114） |
| 追 |
空状態 |
無し |
追加 |
★記録なし★ |
1-5. レポート
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
日付範囲の入力欄2つ |
あり |
週次／月次の切替＋期間の前後移動ボタンに一本化 |
二重の期間指定になるため |
| 実 |
施設名・シリアル・ステータスの絞り込み |
入力も検索ボタンも飾り |
実動作（検索ボタン押下で反映） |
★記録なし★ |
| 削 |
CSVエクスポート |
押せるボタン |
ボタンは置くが押せない状態 |
対応する処理がAPI仕様書に無く、契約に無いものを勝手に足さない方針 |
| 変 |
施設別パフォーマンスのセル色 |
80／90 を直接埋め込み |
既存の閾値（90／75）を流用 |
D-069（同じ行の「ステータス」列と矛盾していた） |
| 追 |
ステータスの4値目「判定なし」 |
3値（良好／要注意／要改善） |
4値 |
D-110（予定が1件も無い施設まで赤色だった） |
| 変 |
連続問題施設の補助文 |
「完了率 n%」 |
事実のみの説明文（「3日連続で△以下」等） |
D-068／D-111／D-116 |
| 変 |
連続問題施設のバッジ |
「Lv2 / 3日」 |
上限到達時は「Lv3 / 30日以上」 |
D-130 |
| 変 |
エラー種別内訳の見出し |
「今週」固定 |
週次／月次の切替に連動 |
モック側のバグを修正 |
| 変 |
エラー種別バーの色数 |
7色 |
5色 |
共通部品が5色しか持たず、7色に意味づけする仕様も無かった |
| 変 |
「上位10件に戻す」の色 |
グレー文字（ラベルに見える） |
隣のボタンと同じリンク色 |
D-121（モック準拠ルールの意図的な例外） |
| 変 |
「上位10件に戻す」の出現条件 |
11件以上のときだけ |
全件表示中なら10件以下でも出る |
★記録なし★ |
| 変 |
「全N施設を表示 →」の出現条件 |
11件以上（10を直書き） |
総件数と表示件数の比較 |
★記録なし★ |
| 変 |
KPIカードの前期比行 |
常に表示（差0なら「→0%」） |
前期のデータが無ければ行ごと非表示 |
無い数字を捏造しないため |
| 変 |
KPI値・表の各率 |
常に「N%」 |
分母0のときは「-」 |
「予定が1件もない」と「全部失敗」を区別するため |
| 追 |
空状態 |
無し |
「該当なし」「該当施設なし」 |
★記録なし★ |
1-6. D-Secログ
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
「トークン期限」「残日数」列 |
表の列として存在 |
列ごと削除 |
D-030（仕様から除外済み） |
| 変 |
接続状態 |
3状態（正常／通信断／異常） |
2状態（正常／異常） |
D-065／D-076（DBの値が0/1の2値で、異常＝通信断と同一） |
| 変 |
絞り込みボタン |
「全て／異常・通信断／正常」 |
「全て／異常／正常」 |
同上 |
| 追 |
備考欄 |
読むだけの列 |
クリックでその場で編集・保存（200字まで） |
D-065／D-076（DBに無く「運用担当のメモ」と判明したため独自機能化） |
| 変 |
1列目の列名 |
「ID」 |
「シリアル」 |
値は同じ |
| 変 |
h1の文言 |
「D-Sec ログ」（半角スペースあり） |
「D-Secログ」 |
★記録なし★ 副作用で英語表示の対訳が当たらない |
| 追 |
h1下のサブタイトル |
無し |
「D-S制御盤の稼働状況」 |
★記録なし★ |
| 変 |
統計カードのラベル |
「D-Sデバイス総数／正常稼働／異常・通信断」 |
「合計／正常／異常」 |
★記録なし★ |
| 変 |
統計カード1枚目の色 |
青 |
シアン |
共通部品に青のトーンが無い |
| 変 |
画面内の並び順 |
見出し → フィルタ → 統計カード → 表 |
見出し → 統計カード → フィルタ → 表 |
★記録なし★ |
| 変 |
検索欄の案内文 |
「施設名 / デバイスID」 |
「施設名・シリアルで検索」 |
★記録なし★ |
| 変 |
備考セルの色 |
備考ありはアンバー、無しはグレー |
常にグレー（有無で変わらない） |
★記録なし★ |
| 追 |
空状態・読み込み中・エラー表示 |
無し |
追加。★英語表示に未対応★ |
★記録なし★ |
1-7. D-Secアラート
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
種別「トークン期限」 |
3値目として存在 |
2値のみ（セキュリティ無効／通信断）。日本語の文言自体はモックと完全一致 |
D-030 |
| 変 |
「通信断」バッジの色 |
赤 |
アンバー |
★記録なし★ |
| 削 |
対応状況の更新 |
クリックで循環 |
押せないバッジ（色は3状態ともモックと一致） |
更新用アカウントが未発行のため |
| 削 |
カード内の説明文 |
「清掃終了後もセキュリティが復帰していない」等を1行表示 |
無し |
該当する項目がAPI・DBに存在しない |
| 削 |
期間の絞り込み（日付2つ） |
あり |
無し |
★記録なし★ |
| 変 |
施設名の行 |
施設名のみ |
施設名（清掃エリア名） |
— |
| 変 |
サブタイトル |
「…トークン期限のアラート管理」 |
「セキュリティ無効・通信断のアラート管理」 |
D-030 の帰結 |
| 追 |
空状態 |
無し |
追加 |
★記録なし★ |
★なお現在は「セキュリティ解除されたまま」の検知を出さない方針で保留中のため、この画面には実質「通信断」しか出ません（D-091／D-097）。
1-8. 施設ロボットマスタ
|
UI要素 |
モック |
実装 |
根拠 |
| 追 |
未対応機種のバッジ |
無し（Keenon T5 等もそのまま表示） |
メーカーと機種名の間に「未対応」バッジ |
D-087（隠すとロボットが静かに消えて誰も気づけない。色だけでなく必ず文字を出す） |
| 削 |
「インポート」「新規追加」ボタン |
あり（モックでも押せない飾り） |
置かない |
登録・更新はD-Security側で行うため参照のみ |
| 削 |
グループ・会社の絞り込み |
あり |
削除 |
D-053 |
| — |
契約フラグ列（監視 ○/ー、D-Sec ○/ー） |
— |
色を含めて完全一致 |
D-080 |
| — |
検索欄 |
入力1つで6項目を横断 |
1つのまま維持（サーバー側で吸収） |
入力を3つに割るのはモック逸脱になるため不採用 |
| 変 |
メーカーPillの見た目 |
太字＋専用色 |
共通部品（太字なし） |
★記録なし★ |
| 変 |
任意項目が空のとき |
空欄 |
「-」を表示 |
— |
| 変 |
フッタの件数 |
「全n施設」 |
「全N件中 X〜Y件」＋ページ送り |
D-120 |
| 追 |
空状態 |
無し |
追加 |
★記録なし★ |
1-9. スケジュール
|
UI要素 |
モック |
実装 |
根拠 |
| — |
列構成（シリアル／施設名／曜日／時間／有効） |
— |
完全一致 |
— |
| 変 |
時間の表示 |
「02:00 - 03:00」 |
終了が24時以降なら「02:00 - 翌04:30」 |
D-060（「28:30」を運用担当に読み替えさせない） |
| 変 |
曜日の表示 |
「毎日」「月水金」の2パターン |
「毎日」「平日のみ」「土日のみ」「なし」も出る |
★記録なし★ |
| — |
有効/無効の見た目（●/○、無効行は薄く） |
— |
完全一致 |
— |
| — |
見出しが「スケジュール管理」でメニュー名と違う |
不一致 |
意図的にそのまま踏襲 |
モック準拠 |
| 追 |
空状態 |
無し |
追加 |
★記録なし★ |
1-10. システム管理
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
9タブ構成 |
表示設定／運用設定／通知設定／顧客管理／グループ管理／ユーザー管理／権限管理／監査ログ |
タブUI自体が無く「運用設定」1画面 |
通知・顧客・グループはD-Security側を流用／ユーザー・権限・監査ログはP2以降／表示設定は未着手 |
| 変 |
各設定の入力欄 |
すべて編集可能な入力欄 |
読み取り専用＋「編集不可」バッジ |
触れるのに保存できないUIは事故のもと |
| 変 |
判定基準の文言 |
「◎ 90%以上」 |
「◎ 90%超」。×に「または未実施」を追記 |
モックの文言が誤り。そのまま出すと誤った説明になる |
| 追 |
丸めについての注記 |
無し |
「判定は丸める前の生値で行います…境界値ちょうどは下位の判定になります」 |
端数処理の仕様を明示 |
| 変 |
エスカレーションの説明 |
「問題が連続した場合」 |
「問題（出発失敗 または △以下）が連続した場合」 |
発火条件の仕様に合わせた |
| 追 |
連続日数の表示上限 |
無し |
新設。この画面で唯一編集できる（入力＋保存＋既定値に戻す＋「編集済み」バッジ） |
D-130 |
| 追 |
アドバイス文言の一覧 |
無し |
新設（ルール名・レベル・Phase・推奨アクション・発火条件） |
D-083 |
| 変 |
サブタイトルの位置 |
カード見出しの中 |
見出し直下に昇格 |
★記録なし★ |
1-11. 点検記録
|
UI要素 |
モック |
実装 |
根拠 |
| 削 |
画面まるごと |
一覧・統計3枚・フィルタ4つ・8列の表・詳細モーダル（Before/After × 7項目の写真）・新規登録モーダル |
見出し＋「準備中」の2行のみ |
写真の保管場所が未決。サービス展開自体も保留中 |
| 削 |
メニュー項目 |
サイドバーに表示 |
非表示 |
同上（復活はコメントを外すだけ） |
第2章 — 英語表示（EN切替）の抜け
モックには対訳がありましたが、実装で辞書に登録されていない文言があります。英語に切り替えても日本語のまま出ます。
| 対象 |
状況 |
| D-Secログの文言全般 |
「接続状態」「最終通信」「備考」「合計」「正常」「異常」等がすべて未登録 |
| D-Secアラートの文言 |
「対応中」「対応済み」「セキュリティ無効」「通信断」「全種別」等がすべて未登録 |
| 「読み込み中…」 |
4画面（D-Secログ／D-Secアラート／施設マスタ／スケジュール）で未対応 |
| ログイン画面 |
全文言が未対応。テーマ切替ボタンも無い |
| ★「未対応」★ |
対訳キーが衝突しています。 施設マスタの「未対応（機種）」用に Unsupported と登録されており、D-Secアラートの対応状況「未対応」が英語で Unsupported と誤訳されます（正しくは Open） |
第3章 — 今回の突き合わせで見つかった要確認事項
いずれも実害が出うるもので、資料に根拠が見つかりませんでした。
| # |
内容 |
なぜ問題か |
| 1 |
「未対応」の対訳キーが衝突している |
D-Secアラートの「未対応」が英語表示で「Unsupported（非対応）」になる。状態の意味が変わってしまう |
| 2 |
ダッシュボードの「判定 ?」ボタンが押しても何も起きない |
「動かないUIは置かない」という本プロジェクトの方針（D-053）に、この1箇所だけ反している |
| 3 |
ダッシュボードの清掃ログ表が4列（モックも仕様書も8列） |
日付・1時間前の状態・30分前の状態・出発の4列が落ちている。仕様書との不一致であり、意図的かどうか記録が無い |
| 4 |
サイドバーの未対応件数バッジが丸ごと無い |
「何件未対応か」を一目で知る導線が消えている。翌朝確認型の運用で効く要素 |
| 5 |
D-Secアラートの「通信断」の色が赤→アンバーに変わっている |
重要度の見え方が変わる。意図的なら記録が必要 |
| 6 |
ダッシュボードのコンパクト表で行展開アドバイスが無効 |
モックでは展開できた。ダッシュボードから理由を確認する導線が消えている |
| 7 |
D-Secアラートの期間フィルタが無い |
過去分を絞り込めない |
| 8 |
アラート画面のバッテリー残量行 ★要確認ではありませんでした★ |
★2026-09-16 訂正★: 記録は残っていました。★D-105 項5（docs/decisions.md:5602）が「fixtures には値が入ったまま（画面の残量表示の経路を残すため）」と明記★しており、★D-114 で null が恒久確定★。★行ごと消さず、空欄のまま残すのが正★。本章の「資料に根拠が見つかりませんでした」は★この1件については誤り★でした（D-143 項3） |
第4章 — 記録が残っていない差分の一覧
★★2026-09-17 訂正 — 本章26件は全件振り分け済みです（D-149）★★
| 判定 |
件数 |
備考 |
| ★「記録なし」が誤りだった★ |
★4件★ |
#8 CSVの注意文（D-120 項14 ③）/ #16 絞り込み（D-069 項8）/ #18 空状態の文言（D-069 項6）/ #10 エリアモーダル（D-119） |
| 本章作成後に決着した |
6件 |
メニューのバッジ / ★清掃ログ表の列（5列で確定。8列に戻さない）★ / 行展開 / 判定?ボタン / 通信断の色 / D-Sec の期間フィルタ |
| ★仕様として確定★ |
★12件★ |
★「作り忘れ」ではない。親切心で直さないこと★ |
| ★不具合（ただし保留）★ |
★2件★ |
#19 D-Secログの h1 / #26a t() 未経由10箇所。★どちらも JA 表示は変わらない★。★英語配布を決めた時点でまとめて直す★ |
★本章の「理由が一切記録されていません」という前提は、4件について誤りでした★。 ★「記録が無い」と書く前に必ず grep すること★（第3章でも同じ見落としが1件ありました）。 詳細は docs/handoff/UI差分第4章_調査_20260917.md。
以下は実装がモックから外れていますが、理由が docs/decisions.md などに一切記録されていません。 多くは軽微（空状態の文言追加など）ですが、意図を残しておかないと次の担当者が「不具合か仕様か」を判断できません。
| 画面 |
内容 |
軽重 |
| 共通 |
メニューの未対応件数バッジが無い |
中 |
| 共通 |
ログアウトの導線が無い |
中 |
| ダッシュボード |
清掃ログ表が4列（モック・仕様書は8列） |
中 |
| ダッシュボード |
行展開アドバイスが無効 |
中 |
| ダッシュボード |
「判定 ?」ボタンが機能しない |
中 |
| ダッシュボード |
未解消件数バッジが1枚だけ |
小 |
| ダッシュボード |
表の空状態の文言 |
小 |
| 清掃詳細ログ |
CSVの注意文を常時表示 |
小 |
| 清掃詳細ログ |
アドバイス0件時の文言とボタン非表示 |
小 |
| 清掃詳細ログ |
エリアモーダルの空状態を2種に分岐 |
小 |
| アラート |
サマリーカードの見た目（色帯・文字サイズ） |
小 |
| アラート |
「合計」カードの色 |
小 |
| アラート |
日付の既定値が空 |
小 |
| アラート |
「解消」バッジに日付を追加 |
小 |
| アラート |
バッテリー残量行の追加 ★記録あり（D-105 項5 / D-114）。2026-09-16 訂正★ |
小 |
| レポート |
絞り込みを実動作にした |
小 |
| レポート |
「上位10件に戻す」「全N施設を表示」の出現条件 |
小 |
| レポート |
空状態の文言 |
小 |
| D-Secログ |
見出しの表記ゆれ（英語対訳が当たらない） |
中 |
| D-Secログ |
統計カードのラベル短縮／並び順／案内文／備考セルの色 |
小 |
| D-Secアラート |
「通信断」バッジの色 |
中 |
| D-Secアラート |
期間フィルタが無い |
中 |
| 施設マスタ |
メーカーPillの見た目 |
小 |
| スケジュール |
曜日に「平日のみ」「土日のみ」「なし」を追加 |
小 |
| システム管理 |
サブタイトルの位置 |
小 |
| 全画面 |
空状態・読み込み中・エラー表示の追加（EN未対応を含む） |
小 |
付記
- 本書は画面に見える差分のみを扱います。内部の変更（判定ロジック・API・DB）は
docs/変更点まとめ_20260914.md を参照してください。
- モック
d-watch-mock.jsx は資料として書き換えません。実在の住所・電話・店舗名が残っていますが、実装側はダミー値に置換済みです。
- 第3章・第4章の項目は、意図的な変更であれば
docs/decisions.md に決定として記録し、そうでなければ修正対象になります。
