# ベントー格子 — Style Reference > 白い紙の上の大小のタイル。乗せた 1 枚が広がり、まわりが滑って場所を譲る **Theme:** light **Series:** PARTS 081 **World:** 架空の書体「Sato Grotesk」の見本帳。9 スタイルを 8 枚のタイルで見せる。 ## Concept 6 列の CSS grid に、`span` の違うタイルを `grid-auto-flow: dense` で詰める。カーソルを乗せたタイルは `grid-column: span 3; grid-row: span 2` になり、格子が組み直される。組み直しは FLIP(前の矩形 → 後の矩形を transform で補間)で動かすので、広がるタイルだけでなく押し出されたタイルも滑る。広がったタイルだけ説明文が現れる。 色は白と墨。朱・黄・桃のタイルは書体のアクセント色の見本として存在し、UI の色ではない。 ## Signature Technique - grid: `grid-template-columns: repeat(6, 1fr)`、`grid-auto-rows: minmax(120px, 1fr)`、`gap: 10px`、`grid-auto-flow: dense`。タイルは `.c2`(span 2)、`.c3`(span 3)、`.r2`(row span 2)。 - 拡大: `.big{grid-column: span 3; grid-row: span 2; z-index: 2}`。 - FLIP: `expand(t)` で (1) 全タイルの `getBoundingClientRect()` を記録、(2) クラスを付け替えて再レイアウト、(3) 新しい矩形との差 `dx, dy, sx, sy` を求め、`t.animate([{transform: translate(dx,dy) scale(sx,sy)}, {transform: none}], {duration: 520, easing: cubic-bezier(.2,.8,.2,1)})` を `transform-origin: 0 0` で再生。差が 0.5px 未満のタイルは動かさない。進行中のアニメーションは `cancel()` してから。 - 説明文 `p` は `.big` のときだけ opacity 1 / translateY 0(.35s、.1s 遅れ)。 - 入力: hover 端末は `pointerenter` で拡大、格子から離れると元に戻る。タッチ端末はタップでトグル。`focus` でも拡大(キーボード対応、`tabindex=0`)。 - 読み込み時は 5 枚目(Width)を開いた状態にし、静止画でも「1 枚が広い格子」に見せる。 - `prefers-reduced-motion`: クラスの付け替えだけ行い、FLIP は再生しない。 ```js const before=tiles.map(t=>t.getBoundingClientRect()); current.classList.remove('big'); t.classList.add('big'); tiles.forEach((el,i)=>{const b=before[i],a=el.getBoundingClientRect(); el.animate([{transform:`translate(${b.left-a.left}px,${b.top-a.top}px) scale(${b.width/a.width},${b.height/a.height})`},{transform:'none'}],{duration:520,easing:'cubic-bezier(.2,.8,.2,1)'});}); ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --paper | #ffffff | 地、タイルの地 | | --paper2 | #f6f5f2 | 沈めたタイル(Numerals) | | --ink | #111111 | 文字、図形 | | --slate | #5d5d5d | ラベル、説明文 | | --line | #e6e4df | タイルの 1px 枠 | | --red | #ff4d2e | 見本のアクセント色(朱)、focus ring | | --yellow | #ffd23f | 見本のアクセント色(黄) | | --pink | #ffb3c1 | 見本のアクセント色(桃) | ## Typography - タイル見出し: Inter 600、`clamp(15px, 1.3vw, 19px)`、letter-spacing -.01em。 - 説明文: Zen Kaku Gothic New 300 13px、line-height 1.7。 - ラベル: Inter 11px、大文字、letter-spacing .08em。 - 見本: Noto Serif JP 700 の「あ」`clamp(84px, 14vw, 220px)`、Inter の A × 5 ウェイト(300〜800)、Archivo 800 の「WIDE」を wdth 85 / 105 / 125 の3段に積み、各段の右に軸の値を 11px で添える(`clamp(36px, 8.6vw, 136px)`、スマホ 40px)。幅のタイルの上部を空けない、数字は Inter 500 tabular-nums。 - ヘッダー: 書体名 Inter 600 14px、右に 12px のラベル。 ## Spacing & Layout - ページは `min-height: 100svh` の 3 行グリッド(ヘッダー / 格子 / タグ)、余白 `clamp(16px, 4vw, 56px)`、行間 18px。 - タイル: 角丸 14px、padding 18px、内容は下寄せ(見出し + 説明文)、ラベルは左上に絶対配置、見本は右上または中央に絶対配置。 - 760px 未満: 2 列、行高 `minmax(190px, auto)`、span は 2 列に丸める。見本の文字を縮める。 ## Motion - FLIP 520ms、`cubic-bezier(.2,.8,.2,1)`。説明文は 350ms、100ms 遅れ。 - 連続でホバーしたときは前のアニメーションを cancel して、現在位置から次の矩形へ。 - `prefers-reduced-motion: reduce`: 即時に並び替え。 ## Components - tile: 枠 1px、角丸 14px、ラベル / 見本 / 見出し / 説明文。`tabindex=0`、focus-visible は朱 2px。 - tile.big: span 3×2、説明文表示。 - head: 書体名と「Specimen / 9 styles」。 - tag: 左下に操作説明、右下に `VALE / PARTS 081 / ベントー格子`。 ## Do / Don't - Do: 拡大はクラスの付け替え + FLIP にする。transform: scale だけでは隣が動かず、格子が崩れて見える。 - Do: 常に 1 枚を開いておく。全部同じ大きさだと「格子」であって「ベントー」にならない。 - Do: 色のタイルは 2〜3 枚まで。多いと広告に見える。 - Don't: タイルに影を付けない。1px の枠と白だけで浮かせる。 - Don't: 格子の gap を 10px より広げない。詰まっているから弁当箱に見える。 ## References - Sociotype: 「紙白の地に 1px の罫だけで区切り、巨大な字形の見本が唯一の見せ場」という構成を借りた。写真は使わず、字形と数字を見本にした。 - Lamanna: 「彩度の高い 3 色が帯のリズムを作る」配色の考え方を借りた。タイル 3 枚に縮め、朱・黄・桃を書体のアクセント色として置いた。 ## Usage 1. HTML: `.grid` の中に `.tile` を並べる。横に広いものに `.c2`/`.c3`、縦に長いものに `.r2`。各タイルに `tabindex="0"`。 2. CSS: `.grid`、`.tile`、`.tile.c2/.c3/.r2`、`.tile.big`、`.tile p` の 6 ルールと、760px のメディアクエリを移植。列数を変えるときは `repeat(6,1fr)` と `.big` の span を合わせる。 3. JS: `