UI・画面設計

LP の UI 構造（Desktop / Tablet / Mobile で Section 構造が変わる）

レスポンシブ LP の UI 構造（節が消える・増える）

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

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

完成デザインではなく UI 構造の正本。右の表が主役 —— 絵を 3 枚並べるだけでは、何が変わるか言えない。レスポンシブは縮小ではなく、節そのものが消えたり増えたりすること。

LP は上から下へ読む 1 本道なので、節の順序そのものが情報。管理画面のように「どこから見てもよい」画面と違い、並べ替えると言いたいことの順序が変わる ——Mobile で節を入れ替えるなら、それは見た目ではなく話の順の変更。

消えた節は、表に書かないと実装側が困る。絵からは「消えたのか、下へ行ったのか」が読めない。