秩序の光は3層にあり

1. 配置と装飾

画面を作っていて、いつも混乱するのは「このclassは位置のためか、見た目のためか」という点だった。
いま主流のグリッドシステムに乗っかるのは必然として、Tailwindを使うと、class 指定が長くなり、少しでも見やすくわかりやすくと並び順を気にしている。
他の人の順序と自分の順序が違うとモヤっとしたり、順序を気にしない人がいるとイラっとしたりする。
標準化していくことになるんだけど、完全には対応できないよね。

それで、分類してみた。

• 配置（Layout）：要素をどこに置くかを決める。
  → grid, flex, gap, place-content, justify-*, align-*, など。
• 装飾（Decoration）：見た目を整える。
  → background-*, border-*, shadow-*, rounded-*, p-*, text-* など。

必要な指定なのだから、クラスの数は減らない。でも、思考の数が減った。
「今、自分はどっちの仕事をしているのか？」が明確になるだけで、コードの見通しが一気に良くなった。

2. 構造と印象

ここまで分けてみて気づいたのは、配置を決めるclassは機能的で、装飾を決めるclassは感覚的だということ。

配置は「何列に並べる」「どこに余白を取る」など、構造を定義するもの。
装飾は「どんな質感にする」「どの程度の影をつける」など、印象を決めるもの。

つまりこの二つは、性質そのものが違う。配置は数学的、装飾は芸術的。
混ぜて書くと、構造が感情に引っ張られる。
だから、分けるだけでCSSの扱いが穏やかになる。

3. 配置は骨格　ー Gridの役割 ー

グリッドシステムを使う上で、感覚的に配置だけならシンプルな指定になるのは想像できる。

<div class="grid grid-cols-3 gap-4">
  <div>BLOCK-A</div>
  <div>BLOCK-B</div>
  <div>BLOCK-C</div>
</div>

ここでは「並び方」と「間隔」しか決めていない。背景も色も余白も影もない。
それでも、情報がどう流れるか、どこが強調されるかは見える。

4. 装飾は表情　ー Cardの役割 ー

当然、装飾すると印象はまるで変わる。

<div class="bg-white border rounded shadow p-4">
  <h3 class="text-lg font-bold">タイトル</h3>
  <p class="text-sm text-gray-600">説明文です。</p>
</div>

これらのかたまりを「カード」と見なして中身に焦点を当てることで、情報の単位がはっきりする。

配置が構造なら、装飾は表情。
構造の上に表情を載せると、画面に「意味」が生まれる。

5. カードを束ねる“もう一つ上の層”　ー Panelの登場 ー

関連する要素はまとめて入力/表示するように設計する方が、利用者にとって自然に見えるので、
カードという単位は必然でもある。
カードが増えると、カード同士も関連してどう並べ、どう関係づけるかを決める必要がある。
それは配置でもなく、装飾でもない。

複数のカードを一つのグループとしてまとめたい。
まとめ方には、「ラベルをつける」「折りたたむ」「一括操作する」など、
文脈が関わってくる。

そこで、カードをまとめて扱う仕組みが必要になる。
自然に出てきたのがカードにカードを乗せるという考え方。
カードを包み込み、関係を保ち、必要ならラベルを持つ。

<section>
  <article>Card A</article>
  <article>Card B</article>
</section>

しかし、装飾はせず、配置も決めない。新たな役割のパネルの登場。
Panelは、装飾の一部ではなく、意味のまとまりを表す。
だからこそ、GridとCardの間にあるべき存在だと思った。

6. Grid・Card・Panelでは長くて呼びにくいので…

気づけば、
「配置」「装飾」「グルーピング」の三つで
大体の整理がつくようになっていた。

ただ、書くときに “Grid／Card／Panel” を毎回並べるのは少し長い。
自然と、頭文字を取って GPC と略していた。

深い意味はない。
でも、そう呼ぶようになってから、
自分の中でようやくこの考え方が定着した気がする。

そして、Gridの奥にある“もう一段上の秩序”を探ることになる。