なぜ Shell Grid はレイアウトを一箇所へ集約するのか

はじめに

AIがコードを書く時代になった。

コードを書く速度は、人間より速い。

しかし、完成までの速度は、必ずしも速くならない。

理由は単純だ。

見た目の修正は、まだ人間の目視確認に大きく依存している。

AIが修正し、人間が確認し、またAIが修正する。

この修正ループが、開発速度の新しいボトルネックになり始めている。

私は、Shell Gridを「CSS Gridの書き方」として導入したのではない。

修正ループを減らすための設計として導入した。

この記事をお勧めしない人

• CSS Gridの基本文法だけ知りたい人
• レイアウト実装のサンプルだけ欲しい人
• AIを使わずに開発している人

もし一つでも当てはまらないなら、読み進める価値があるかもしれません。

思想衝突

• [主軸：例 Technical Control vs DX]
• [副軸：例 Browser Native vs Framework Magic]

① 問題提起：見た目の修正は、なぜ終わらないのか

AIはコードを書くのが速い。

しかし、見た目の修正では同じ修正を何度も繰り返すことがある。

例えば、

• 親要素を修正したら子要素が崩れる
• 子要素を直したら別の画面が崩れる
• 修正したら元のレイアウトまで変わる

こうした問題は珍しくない。

FlexboxやGridそのものが悪いわけではない。

問題は、ページ全体のレイアウト構造が一箇所に存在しないことだった。

② なぜ皆そう作るのか

多くのWebアプリでは、レイアウトはコンポーネントごとに定義される。

Header。

Sidebar。

Main。

Footer。

それぞれが、自分の中でFlexやGridを持つ。

この設計は自然だ。

責務をコンポーネントへ閉じ込められる。

小さな画面では十分に機能する。

しかしページ全体を見ると、

「外殻」がどこにも存在しなくなる。

ページ全体のレイアウトは、人間もAIも複数のコンポーネントを行き来しながら頭の中で組み立てるしかない。

③ Shell Grid は何を優先したのか

Shell Gridが優先したのは、CSS Gridではない。

ページ全体のレイアウトを読む入口を一つ作ることだ。

ページを開いたとき、

まずどこを見ればいいのか。

その答えを一箇所へ集約する。

優先した価値は次の二つだった。

優先した価値

• Cognitive Simplicity：ページ全体のレイアウトを一箇所から把握できること。
• Delivery Speed：修正ループを減らし、完成までの総時間を短くすること。

意図的に後退させた価値

• Codebase Lightness：ファイル数や命名規約は増える。
• Initial Implementation Cost：最初の設計には時間がかかる。

④ 実装でどう解決しているか

Shell Gridでは、ページ全体の構造だけを一箇所へ集約する。

Header。

Main。

Footer。

Sidebar。

これらの配置ルールだけを外殻として定義する。

各コンポーネントの中身は従来どおりコンポーネント側が責務を持つ。

つまり、

ページ全体の構造と、

部品の構造を分離した。

守りたかったのは、探索範囲を固定することである。

⑤ 何を捨てたか

Shell Gridは万能ではない。

採用には明確なコストがある。

• 理解コスト：何を知っていないと使えないか
• 自由度の低下：この設計を採用すると捨てることになる選択肢は何か
• 学習・移行コスト：既存の資産からの乖離

つまり、

整理するための「収納家具」を増やす設計である。

収納家具そのものも管理対象になる。

このコストを払う価値があるかどうかは、プロジェクト次第だ。

⑥ ClaudeMixへの適用

ClaudeMixでも、ページ全体のレイアウトは複数のコンポーネントへ分散していた。

その結果、

AIも人間も、ページ全体の構造を把握するために複数の場所を読む必要があった。

そこで、ページ外殻だけを独立したレイアウトとして扱う方針へ変更した。

目的はGridを使うことではない。

ページ全体のレイアウトを読む入口を一つ作ることだった。

⑦ この設計は誰向けか

向いている

• AIエージェントを前提に開発しているチーム
• 長期間保守するプロダクト
• レイアウト修正が多いサービス
• ページ構造が複雑なWebアプリ

向いていない

• 数ページで終わる小規模サイト
• 短期間で作るプロトタイプ
• AIをほとんど利用しない開発

⑧ 思想の衝突

従来は、

コードを書く速さが開発速度だった。

AIエージェント時代では、

修正ループを終わらせる速さが開発速度になる。

Shell Gridは、

CSS Gridを採用した設計ではない。

AIと人間が、ページ全体をどこから理解するかを設計した結果である。

設計とは、コードを減らすことではない。

探索コストを、どこへ配置するかである。

⑨ あなたはどちらを選ぶか

ページ全体のレイアウトは、

必要になった場所へ少しずつ書き足しますか。

それとも、

最初に一箇所へ集約して、探索範囲を固定しますか。

どちらにも理由があります。

大切なのは、

あなたが何を速くしたいのかを説明できることです。