UI・画面設計

管理画面 UI 構造（Desktop は Sidebar、Tablet は圧縮、Mobile は Drawer）

管理画面（Sidebar → Drawer）

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

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

Breakpoint ごとに 同じ中身がどこへ行くかを示す。3 枚並べるのが目的ではなく、右の表で「何がどう変わるか」を言うのが目的。

縮小ではなく、構造が変わる。 Sidebar は Drawer になり、横並びは縦並びになり、Desktop にしか無い列は消える —— 絵を 2 枚並べただけでは、消えたのか隠れたのかが読めない。

消える要素があることを、表で明示する。 実装する側がいちばん困るのは「Mobile のこの項目は、どこへ行ったのか」で、それは絵からは絶対に読めない。