Layout

いつ使うか

/impeccable layout は技術的には何も間違っていないが、何も息をしていないページ向けです。どこも同じパディング、単調なカードグリッド、端から端まで走るコンテンツ、サイズだけで階層を作ろうとしている。レイアウトが「何かが違う」と感じるが理由を説明できない時に使ってください。

適切なトリガー：「すべてが窮屈に感じる」「壁のように読める」「最初にどこを見ればいいか分からない」。

仕組み

スキルは5つのレイアウト次元を検査します。

1. スペーシング：スペーシングスケールが一貫しているか、ランダムな13pxギャップがないか、関連要素が密にグループ化されグループ間に十分なスペースがあるか、リズムが存在するか。
2. 視覚的階層：目が2秒以内に主要アクションに到達するか、階層が実際に機能しているか、すべてが叫んでいるか。
3. グリッドと構造：基盤となるグリッドがあるか、レイアウトがランダムか、要素がベースラインに整列しているか。
4. リズム：密なスペーシングとゆとりあるスペーシングが交互に来るか、すべてが均一か。
5. 密度：レイアウトが詰まりすぎているか、無駄が多いか、密度がコンテンツタイプに合っているか。

修正には通常、スペーシングスケールの再構築、非対称性の導入、単調なグリッドをヒーローと補助要素の混在レイアウトに崩すこと、主要アクションに本当のスペースを与えることが含まれます。

試してみる

/impeccable layout the settings page

典型的な変更：

• スペーシングスケールを8 / 16 / 24 / 48 / 96pxに統一
• セクション区切り48px、行間16px、フォームフィールドグループ8px
• 主要アクションを32pxのバッファでフォームフローから引き出し
• 装飾的なボーダーを削除し、スペーシングによるグループ化に置き換え
• サイドバーとメインカラムの比率を再調整（280 / flex vs 25 / 75）

注意点

• arrangeとdistillを混同すること。 問題が「多すぎる」なら、まず /impeccable distill を実行してください。Layoutはすでに正しいセットであるものを配置するためのものです。
• 壊れたグリッドを救えると期待すること。 ページにグリッドがまったくない場合、arrangeはグリッドを構築します。ただしdiffが予想より大きくなることを知っておいてください。
• 階層の判定を無視すること。 arrangeが「主要なものがない」と言った場合、スペーシングの作業だけでは解決しません。レイアウトの調整ではなく、コンテンツの決断が必要です。