# 7〜9段階：モダンなUIへの仕上げと検証

実施日：2026-09-13。元の `before.html` と1〜6段階目を維持し、6段階目を起点に3段階を追加。

[比較ページ](index.html#7) / [使ったプロンプト](../finish-prompts.md)

## 採用した方向

タスク一覧に集中できる、余白のある作業画面。淡い背景と白い面、抑えた青、そろった部品、短い操作の反応で仕上げた。保存・API・認証などの機能は追加していない。外部ビルドや外部素材への依存がないHTML。

| 段階 | 変更 | 主な確認 |
| --- | --- | --- |
| [7. レイアウト](07-composition.html) | 一覧を広く、進捗は上部に集約。準備中の機能は下部へ。スマホの集計を1行に圧縮 | PC・スマホの表示、チェック、今日の絞り込み |
| [8. 細部](08-refinement.html) | 線・角丸・濃淡・アイコンを統一。共通の担当を1か所に表示し、通常の優先度の見た目を控えた | 44pxのチェック操作範囲、Spaceキーとフォーカス、長文追加。担当が異なる場合は各行に表示される |
| [9. 操作感](09-interaction.html) | 完了行・進捗バー・入力への反応。入力欄直下のエラー。短い動きと動きを減らす対応 | 追加・完了・解除・絞り込み・空入力・0件からの復帰とCSSの動作 |

## 確認した結果

- 初期4件のタスク名・期限・担当・分類は、元データとの一致を全3段階で確認。通常の優先度のデータとスクリーンリーダー向けテキストも保持。
- 1280pxと390pxで全3段階の表示を確認し、画像を保存。最終版は768pxと320pxでも確認した。
- 390×844pxの最終版は、初期4件と追加ボタン全体が初期画面内に入る。320pxで長いタスク名を追加しても横はみ出しなし。
- 追加ボタンとEnterキーで追加できる。HTML風の文字列は実行されず文字として表示される。
- 空入力では件数を増やさず、入力欄の直下にエラーを表示してフォーカスを移す。正しい入力で解除される。
- チェックとSpaceキーで完了・解除できる。4件中1件完了で25%、追加後の全件数にも連動する。
- 重要で絞り込んだまま普通のタスクを追加しても、条件を維持し、すべてで確認できる旨を表示する。
- 全0件と絞り込み0件は一時的な検証用HTMLで確認。最初の追加と「すべて表示」への復帰を確認した。
- 共通担当の表示は、担当が異なる検証用HTMLで各行へ戻ることを確認。共通担当のまま追加した場合も集約を維持する。
- 進捗バーは通常220ms。速度を10分の1にした検証用HTMLで、目標25%の途中にある幅を観測し、段階的に伸びることを確認した。
- `prefers-reduced-motion` のCSSを強制適用した検証用HTMLではtransitionが0秒、追加行のanimationがnoneになり、追加・完了が動作することを確認。OS設定そのものの切り替えは行っていない。
- 主な文字14.62:1、補足6.02:1、入力欄とチェック枠3.65:1、エラー6.57:1のコントラストを確認。全状態の網羅的な適合認証ではない。
- 3段階と比較ページのJavaScript構文確認を通過。独立した画面レビュー1回を受け、モバイル密度・重複情報・エラーの位置と枠をまとめて改善した。

- 25%の縮小表示でも一覧・主要操作・進捗の主従を確認。比較ページの7→8→9の切り替えと最終段階の次ボタン無効化も確認した。

## 残る範囲

- 保存機能は元と同じくない。再読み込みで初期状態に戻り、その旨を画面に表示する。設定・通知等の未実装機能は準備中として無効化している。
- 実機タッチ、他ブラウザ、スクリーンリーダーの音声は未確認。
- ブラウザに `MutationObserver.observe` のエラーログを1件観測した。作成したHTMLに同APIの使用はなく、発生元は未特定。確認した主要操作の失敗はない。
- 画像レビューの点数は修正前の主観評価であり、万人の嗜好や実ユーザーでの効果を保証するものではない。

比較用の画像は `screenshots/07-*.png` 〜 `09-*.png`。`09-desktop-complete.png` と `09-mobile-complete.png` はブラウザで1件にチェックを入れた状態で、HTMLの初期データは未完了4件を維持している。