L42：UI要件テンプレ（動き・状態・例外・アクセシビリティ）＋レビュー観点（TRAINING ONLY／流用禁止）

【重要：本レッスンは訓練専用】

• このレッスンで作る UI要件テンプレ／仕様（State表・例外表・A11yチェック）は訓練専用です。通常業務でそのまま使用することは禁止します（コピペ流用禁止）。
• 実データ・個人情報・未公開情報は禁止（実URL、実ページID、実案件名、実在の取引先や条件などは書かない）。
• 本番で必要になった場合は、訓練成果物を流用せず、情報を取り直し、別途のレビュー/承認を経て新規作成してください。

本レッスンでは、UIを「見た目」ではなく、要件（動き・状態・例外・アクセシビリティ）として定義する練習をします。
L38（UIパターン）で扱った「動き」や、L40（サイト制作SOP）で必要になる「検収」、L41（FBルール）で整えた「差戻し」につながる基礎の型です。

このページの使い方

1レッスン＝1LP（1ページ）です。上から順に当日の時間割に沿って進めてください。
各項目の冒頭に EC事業部／文房具カフェ事業部・準備室 の実施時間を併記しています。
※本レッスンはダミーのみで行います（実データ・個人情報・未公開情報は入力しない）。

このレッスンの狙い（到達状態）

• UI要件を 動き／状態／例外／アクセシビリティ の4点で説明できる
• UIをState表（状態遷移）で定義できる（どの状態があり、何がトリガーか）
• 例外（エラー・未入力・通信失敗など）を「想定内」に落とし込める
• アクセシビリティ（キーボード/フォーカス/読み上げ/動き抑制）を要件として書ける
• レビューで差戻しが起きないように、完了条件（採点可能）を置ける

受講ルール（共通）

• 実データ禁止：顧客情報、注文情報、契約条件、未公開企画、実URLなどは禁止
• 訓練成果物の流用禁止：訓練で作ったテンプレ/要件を通常業務へコピペしない
• 通常業務をしない：訓練日は講義・演習・レビュー・理解度確認に専念する
• 命令系統の具体化をしない：役割は「作成担当」「レビュー担当」「承認担当」など抽象ロール
• 相互レビュー2件以上：前日までの他者成果物に2件以上コメント（本ページの観点を使用）

今日の目標（できた範囲でOK）

受講者のレベル差があるため、強制の提出物は設けません。今日の目標を選び、できた範囲を「今日進めたこと」に記録してください。

1. （A）TRN-UI42 Specヘッダ（v0.1）：目的/範囲/入力/出力/完了条件
2. （B）State表（v0.1）：最低8状態（例：default/hover/active/disabled/loading/success/error/empty）
3. （C）例外表（v0.1）：検知→表示→復帰→記録（ダミー）
4. （D）A11y要件（v0.1）：キーボード/フォーカス/読み上げ/動き抑制
5. （E）品質ゲート（v0.1）：OK/差戻し/要相談（停止）

UI要件の基本（結論：UIは「状態×トリガー×例外×A11y」で仕様になる）

UI要件がないと起きること（手戻りの典型）

• 「読み込み中」がなく、連打・二重送信・表示崩れが起きる
• エラー時の復帰が決まっておらず、現場判断で分岐が増える
• フォーカスが飛び、キーボード操作で詰む（アクセシビリティ事故）
• 「どこまでできたら完了か」が曖昧で、レビューが返せない（差戻し）

今日の型（最小の4ブロック）

1. 動き：何がトリガーで、何が変わるか（アニメ/遷移/表示切替）
2. 状態：defaultだけでなく、loading/error/empty/disabledなどを定義
3. 例外：入力不備、通信失敗、権利/安全に触れる表示の禁止など
4. A11y：キーボード、フォーカス順、読み上げ、動き抑制（reduced motion）

標準テンプレ（TRAINING ONLY）

A) TRN-UI42 Specヘッダ（v0.1）

【TRN-UI42 Specヘッダ（v0.1：訓練専用・流用禁止）】
Spec-ID：TRN-UI42
版：v0.1
状態：DRAFT / REVIEW / FINAL（訓練内の状態）

UI対象（ダミー）：

* 画面/コンポーネント名：
* 想定デバイス：PC / SP（両方 or 片方）
* 目的（1行）：
* 想定ユーザー（ダミー）：

範囲（やる/やらない）：

* やる：動き・状態・例外・A11yを要件として定義する
* やらない：実装、実サイト更新、実データ反映、実運用の承認

入力（Input：ダミー）：

* 画面説明（テキストでOK）
* 表示要素（ボタン/入力/リスト等：ダミー）
* ルール（必須/任意/禁止：ダミー）

出力（Output：訓練用）：

* State表（状態遷移）
* 例外表（検知→表示→復帰→記録）
* A11y要件（キーボード/フォーカス/読み上げ/動き抑制）
* 品質ゲート（OK/差戻し/要相談）

完了条件（採点可能：例）：

* Stateが最低8状態あり、トリガーが書かれている
* error/empty/loadingが定義され、復帰手順がある
* A11y要件が4点（キーボード/フォーカス/読み上げ/動き抑制）揃う
* 実データが混入していない（訓練専用の明記あり）

B) State表（状態遷移：v0.1）

※上表をベースに、hover / active / disabled / empty / success / focus などを追加して最低8状態にします。

C) 動き（Interaction）定義（v0.1）

D) 例外表（v0.1：想定外を想定内にする）

E) A11y要件（v0.1：最低ライン）

F) 品質ゲート（OK/差戻し/要相談：v0.1）

ダミー課題（1つ選べばOK）

UI-42A（易）：タブ切替＋内容表示（状態中心）

状況（ダミー）：
- 3つのタブがあり、クリック/キーボードで切り替える
- 選択中タブが分かる必要がある
- 取得中（loading）と空（empty）を持つ

要求：

* State表（default/hover/active/focus/loading/empty/error/disabled）
* A11y要件（Tab順、矢印キーの扱い、読み上げラベル）

UI-42B（中）：モーダル＋フォーム送信（例外中心）

状況（ダミー）：
- 「問い合わせ（ダミー）」ボタンでモーダルを開く
- フォーム送信でloading→success/errorになる
- 必須未入力、通信失敗、二重送信を想定

要求：

* 例外表（E-01〜）を最低5件
* フォーカス（初期/閉じ込め/閉じた後の戻り先）を要件化

UI-42C（中）：リスト＋フィルタ（empty/errorの復帰設計）

状況（ダミー）：
- フィルタ条件でリストを絞り込む
- 該当なし（empty）時の表示と復帰が必要
- 通信エラー時は再試行導線が必要

要求：

* empty/errorの復帰手順（次状態）が採点可能に書けていること

ChatGPTに投げるプロンプト（コピペ用）

1) UI要件（State/例外/A11y）を骨子化する

【L42 プロンプト①：UI要件 骨子（訓練用）】

前提（安全）：

* 教育訓練用ダミー。実データ・個人情報・未公開情報は禁止。
* 訓練成果物は流用禁止。
* 不明は推測で埋めず、UNKNOWN（要確認）として残す。

入力：

* ダミー課題（UI-42A/B/C）の本文

出力形式（必須）：

* TRN-UI42 Specヘッダ（v0.1）
* State表に入れるべき状態リスト（最低8）
* 例外候補（最低5）
* A11y要件（キーボード/フォーカス/読み上げ/動き抑制）

2) State表を完成させる（状態遷移）

【L42 プロンプト②：State表（状態遷移）】

前提：

* 状態は「名詞」ではなく「UIの振る舞い」が分かるように。
* それぞれにトリガーと次状態（復帰）を書く。

入力：

* TRN-UI42 Specヘッダ（v0.1）
* 状態リスト（最低8）

出力形式：

* State表（列：State/トリガー/UIの振る舞い/ユーザー行動/復帰/次状態/A11yメモ）

3) 例外表＋A11y要件＋品質ゲートを作る

【L42 プロンプト③：例外・A11y・品質ゲート】

前提：

* 例外は「検知→表示→復帰→記録」まで。
* A11yは「気をつける」禁止。採点可能に書く。

入力：

* State表（v0.1）

出力形式：

1. 例外表（例外ID/例外/検知/表示/復帰/記録）
2. A11y要件（4観点：キーボード/フォーカス/読み上げ/動き抑制）
3. 品質ゲート（OK/差戻し/要相談の基準）

4) UI要件の不足を自己評価（差戻し観点で）

【L42 プロンプト④：UI要件 自己評価（差戻し防止）】

入力：

* あなたのTRN-UI42（Specヘッダ＋State表＋例外表＋A11y＋品質ゲート）

出力：

* 不足している状態トップ5（足すべきState）
* 例外が弱い点トップ3（復帰が曖昧 等）
* A11yが曖昧な点トップ3（採点不能）
* v+0.1の改善案（何を/なぜ/どう直す）

相互レビュー観点（L42専用）

• 訓練専用の担保：流用禁止が明記され、実在情報が混入していないか
• State表：最低8状態、トリガーと復帰（次状態）が書けているか
• 例外：検知→表示→復帰→記録が揃い、復帰が曖昧でないか
• A11y：キーボード/フォーカス/読み上げ/動き抑制が採点可能に書けているか
• 品質ゲート：OK/差戻し/要相談の基準が具体で、曖昧語がないか

レビューコメントテンプレ（コピペ用）

【L42 相互レビューコメント】
対象（TRN-UI42）：
版：

1. 良い点（1つ）：

*

2. State表は回る？（8状態以上＋復帰が明確）

* OK / 要改善
  不足している状態（1つ）：
*

3. 例外は想定内になってる？（検知→表示→復帰）

* OK / 要改善
  曖昧な復帰（1つ）：
*

4. A11y要件は採点可能？

* OK / 要改善
  曖昧な記述（1つ）：
*

5. 次の一手（v+0.1で直すなら）：

* 

本日の流れ（タイムライン）

目次（クリックで移動）

1. 出席・当日選択カリキュラムの内容確認
2. 時間差相互評価（2件以上コメント）
3. 休憩
4. 自分への受領レビュー確認・改善方針メモ
5. L42 レクチャー本編（講師説明・質疑込み）
6. 昼休憩
7. 個人演習①：Specヘッダ＋State表
8. 休憩
9. 個人演習②：例外表＋A11y＋品質ゲート（できた範囲でOK）
10. 休憩
11. 復習：共有できる形に整形（できた範囲でOK）
12. 質問・コメント・感想の提出（指定スレッド）

1) 出席・当日選択カリキュラムの内容確認

【実施時間】

この時間にやること

1. 今日の目標（A〜E）を選ぶ（できた範囲でOK）
2. ダミー課題（UI-42A/B/C）を1つ選ぶ
3. 注意点を1行で書く（例：loading/error/emptyを落とさない／A11yを曖昧にしない）

セルフ棚卸し（コピペ用）

【L42 セルフ棚卸し】
1) 今日選ぶダミー課題：
- UI-42A / UI-42B / UI-42C

2. 自分が弱い点（1つ）：

* （例：状態の洗い出し／例外／フォーカス設計／完了条件）

3. 今日の目標（1行）：

* 

2) 時間差相互評価（前日までの他者成果物に2件以上コメント）

【実施時間】

この時間にやること

• 前日までの他者成果物を2件選び、L42レビュー観点でコメントする
• 「見た目」より、状態/例外/A11y/完了条件が揃っているかを見る

3) 休憩

【実施時間】

休憩：学習作業なし

4) 自分への受領レビュー確認・改善方針メモ（講師レビュー含む）

【実施時間】

改善方針メモ（コピペ用）

【L42 改善方針メモ】
受領した指摘の要点（最大3つ）：
1)
2)
3)

## 直す理由（状態不足／例外不足／A11yが曖昧／完了条件が採点不能 等）：

直し方（どこを改善する？）：

* Specヘッダ：
* State表：
* 例外表：
* A11y要件：
* 品質ゲート：

今日の最優先ルール（1行）：

* 

5) 当日選択カリキュラム実施：L42レクチャー本編（講師説明・質疑込み）

【実施時間】

ここからが「読む／聞く」パート

UI要件は「実装の指示」ではなく、テスト可能な合格条件です。
午後は、ダミー課題を使って「State表→例外→A11y→品質ゲート」まで作ります。

6) 昼休憩

【実施時間】

昼休憩：学習作業なし

7) 個人演習①：Specヘッダ＋State表

【実施時間】

演習①のやり方（必須）

1. ダミー課題（UI-42A/B/C）を選ぶ
2. TRN-UI42 Specヘッダ（v0.1）を埋める
3. State表を最低8状態まで埋める（トリガー＋復帰/次状態を必ず書く）

提出用フォーマット（演習①：コピペ用／できた範囲でOK）

【L42 演習① 提出（できた範囲でOK）】
ダミー課題：
Spec-ID：TRN-UI42

## (1) Specヘッダ（v0.1）：

(2) State表（v0.1：最低8状態）：

* 

8) 休憩

【実施時間】

休憩：学習作業なし

9) 個人演習②：例外表＋A11y＋品質ゲート（できた範囲でOK）

【実施時間】

演習②のやり方（必須）

1. 例外表（最低5件）を作り、復帰（次状態）を必ず書く
2. A11y要件（4観点）を「採点可能」に書く
3. 品質ゲートで自己判定（OK/差戻し/要相談）

提出用フォーマット（演習②：コピペ用／できた範囲でOK）

【L42 演習② 提出（できた範囲でOK）】
Spec-ID：TRN-UI42

## (1) 例外表（v0.1：最低5件）：

## (2) A11y要件（v0.1）：

(3) 品質ゲート判定：

* 判定（OK/差戻し/要相談）：
* 根拠（1行）：

(4) 任意：v+0.1で直すなら（改善ログ）：

* 

10) 休憩

【実施時間】

休憩：学習作業なし

11) 復習：共有できる形に整形（できた範囲でOK）

【実施時間】

最終チェック（コピペ用）

【L42 最終チェック】
- 訓練専用（流用禁止）が明記されている
- 実データ/実案件が混入していない
- State表が最低8状態で、トリガー＋復帰（次状態）がある
- loading/error/emptyが定義され、復帰が採点可能
- 例外表が「検知→表示→復帰→記録」になっている
- A11y（キーボード/フォーカス/読み上げ/動き抑制）が曖昧語なし

12) 講師への質問・コメント・感想の提出（指定スレッド）

【実施時間】

提出先（参考）

EC事業部・文房具カフェ事業部：ChatWork の指定スレッド／準備室：Slack の指定スレッド

提出テンプレ（コピペ用）

【L42 提出（本人レポート）】

1. 今日の学習内容（要約：3行）

*
*
*

2. 今日進めたこと（TRAINING ONLY：流用禁止）

* 選んだ課題（UI-42A/B/C）：
* Specヘッダ：
* State表：
* 例外表：
* A11y要件：
* 品質ゲート判定：

3. 一番工夫した点（1つ）
   -（例：loading/error/emptyの復帰を採点可能にした／フォーカス設計を明文化した 等）
   理由：

*

4. 次に改善したい点（1つ）

*

## 理由：

5. 質問（最低1つ）

* 

ページ先頭へ戻る