UI and screen design

Checkout screen flow (Cart → Address → Payment → Confirmation → Complete)

Checkout flow, five steps and where errors return to

This drawing comes from one YAML file. No shape was moved by hand.

Notes in the source (in Japanese)

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

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

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