UI・画面設計

Checkout の画面遷移（カート → 住所 → 支払い → 確認 → 完了）

Checkout の画面遷移（5 段・エラーの戻り先つき）

この図は、下の 1 枚の YAML から描かれています。手で図形を動かしてはいません。

正本に書いてある決まりごと

完成デザインではなく UI 構造の正本。買い物かごから完了までの 5 画面と、途中で分かれる道（在庫切れ・決済失敗）を 1 枚に。実線＝進む、破線＝操作の結果。戻れる／戻れないが読めることが要点。

確認画面が 1 枚要るのは、押したら取り消せない操作の直前だから。住所や支払い方法は何度でも直せるが、決済は 1 回きり ——その境目がどこかを、図の上で指させることが、この 1 枚の仕事。

在庫切れと決済失敗は、戻る先が違う。在庫切れはカートまで戻るが、決済失敗は支払い画面に留まる ——「失敗したら戻る」とだけ書いた図では、この違いが実装に伝わらない。