UI and screen design

Admin screen UI structure (Desktop with sidebar, Tablet compressed, Mobile with drawer)

The same admin screen at desktop, tablet and mobile, where the sidebar turns into a drawer rather than simply shrinking

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

Notes in the source (in Japanese)

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

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

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