UI・画面設計

画面遷移図（ワイヤーフレームつき）— Login → Home → Product → Cart

画面遷移図（ワイヤーフレームつき）

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

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

画面をただの箱にしない。小型のワイヤーフレームのまま遷移でつなぐ。1 枚で「流れ」と「画面の構造」が同時に読める。破線の分岐は操作の結果（成功・失敗）。

箱に画面名だけを書いた遷移図は、実装の役に立たない。「Cart へ行く」と分かっても、Cart に何が載るかが書いていなければ、画面を作る側は結局デザインを待つことになる。

小さくても中身を描くと、その場で決まっていないことが見える ——空の箱は「まだ決めていない」ことの印になり、遷移図が要件の抜け漏れ表になる。