# UIを6段階で改善した検証記録

確認日：2026-09-13。Codex内ブラウザで、新しく作った各HTMLの表示と操作を確認。

[比較ページ](index.html)で段階・表示幅を切り替えられる。各HTMLは独立したファイルで、前段階の修正を引き継いでいる。

## 変更と確認

| 段階 | 主な変更 | 確認結果 |
| --- | --- | --- |
| [1. 情報の順番](01-structure.html) | 一覧と絞り込みを先に、追加と補助情報を後に配置 | 元の画面内文言とJSを維持。追加・完了・解除・今日／重要の絞り込みを確認 |
| [2. 余白と整列](02-spacing.html) | 間隔を整理し、操作部品の高さと整列を統一 | 入力欄・追加ボタン48px、チェック操作範囲44×44px。PC・スマホで横はみ出しなし |
| [3. 文字](03-type.html) | 見出し28px、タスク名16px、補足14px。項目単位で折り返し | 長い日本語タスク名を追加して表示確認。期限・担当・分類のラベルと値が分断されない |
| [4. 装飾](04-decoration.html) | 太い枠、強い影、傾き、文字の影を整理 | パネルの影がないこと、情報の区切り、Tabキーでのフォーカス表示を確認 |
| [5. 色](05-color.html) | 背景・文字・主要操作・重要状態の役割を分離 | 文字・操作要素のコントラストを計測。PC・スマホで横はみ出しなし |
| [6. 文言と状態](06-feedback.html) | 入力ラベル、選択状態、エラー、完了、0件表示、未実装表示 | 下記の操作シナリオをブラウザで確認 |

1〜4では変更範囲を絞るため、派手な配色を残している。5で配色を整え、6で実際の動作と表示を合わせた。

## 最終版の操作シナリオ

- 初期状態：タスク4件、今日3件、重要2件、完了0件。
- 追加：Enterキーと追加ボタンで追加できる。HTML風の文字列は文字として表示される。
- 空入力：件数が増えず、入力欄にエラーとフォーカスを表示。正しく入力して追加すると解除される。
- 完了・解除：チェックとSpaceキーで切り替わり、完了件数・達成率・取り消し線が連動する。
- 絞り込み：選択中の条件を維持し、見出しと表示件数が連動する。進捗は全タスクを集計する。
- 絞り込み中の追加：条件に合わないタスクを追加しても絞り込みを維持し、「すべて」で確認できる旨を表示する。
- 0件：一時的な検証用HTMLで、全タスク0件と絞り込み結果0件を確認。それぞれ入力欄への移動、すべて表示への復帰を確認。検証用HTMLは削除済み。
- 未実装機能：準備中と表示して操作を無効化。関連操作を折りたたみにまとめた。
- 再読み込み：初期4件に戻る。画面上にも変更が消えることを明記。

## 表示・読みやすさ

- 全6段階：1280pxと390pxで表示を確認し、スクリーンショットを保存。
- 最終版：追加で320pxと768pxを確認。320pxで長いタスク名を追加しても横はみ出しなし。
- 最終版：期限・担当・分類を項目単位で折り返すよう調整し、320pxの追加タスクと390pxの初期タスクで再確認。
- チェックボックスは周囲を含め44×44px。見えている四角の外側もラベルとして押せる。
- 通常文字16.19:1、補足7.54:1、追加ボタン6.70:1、重要ラベル6.77:1、普通ラベル6.83:1、入力欄の枠3.65:1。これは主要な組み合わせの測定値で、全状態の網羅的な適合認証ではない。
- 最終版単体の操作検証時はブラウザのエラー・警告ログなし。各段階と比較ページのJavaScript構文確認も通過。
- 独立した画像レビューを2回実施。スクリーンショットの撮影不具合を修正したうえで、未実装操作の目立ち方とスマホの項目折り返しを改善。

比較ページも、1→2の送り操作、6への切り替え、390px幅への切り替え、プロンプトの展開を確認。390pxの画面でページ全体の横はみ出しなし。

## 残る範囲

- 保存・同期・エクスポート・通知・カレンダーなどの新機能は実装対象外。元々動いていたタスク追加・完了・絞り込みを中心に検証した。
- 実機のiOS／Android、他ブラウザ、スクリーンリーダー音声の確認は未実施。
- 比較ページの表示・操作後、ブラウザに `MutationObserver.observe` のエラーを1件観測した。作成したHTMLにこのAPIの使用はなく、発生元は未特定。段階切り替え・表示幅変更・プロンプト展開は動作している。
- これはこの画面での実行結果。別の画面では情報量・ブランド・必要機能に合わせてプロンプトを調整する。

## ファイルの保全

元の `before.html` は変更していない。初期4件のタスク名と期限・担当・分類は、全段階で元データとの一致を確認した。スライド・特典・元の1発プロンプトも変更していない。

元ファイルのSHA-256：`8d28900a12b8e56aa71f03fd0f421a01fe0f6928247ec1ea7bd38132643be789`

画面画像は `screenshots/01-desktop.png` 〜 `06-desktop.png`、`01-mobile.png` 〜 `06-mobile.png` に保存。最終版のフォーム付近は `screenshots/06-mobile-form.png`。