ベントーグリッド

様式名: ベントーグリッド / レイアウト

レイアウトグリッドダッシュボードLP

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

弁当箱のように、大きさの違うカードを隙間なく敷き詰める
セルの大小そのものが情報の優先順位になる（見出しを足さずに階層が作れる）
1枚に情報を詰めても散らからない。要素が増えるほど効く
Apple の製品ページ以降に定着。今は「モダンな見た目」の記号として消費されている面もある

実装メモ — 踏んだ罠

grid-template-columns: repeat(4,1fr) を基準に、grid-column/row の span で大小を作る
重要な1枚を span 2 / row 2 にすると視線の入口が決まる。全部同じ大きさにすると意味が消える
SPは grid-template-columns:1fr へ落とし、span を全部 auto に戻す（span を残すと崩れる）
gap は 12〜16px。詰めすぎると窮屈、空けすぎると「ベントー」に見えない
カードの角丸は 12〜16px で統一。1枚でも違うと弁当箱に見えなくなる
grid-auto-rows で行高を固定すると隙間なく詰まるが、中身がその高さを超えるとはみ出す。長めの文字を入れるセルは span row で高さを与える

使いどころ / 使ってはいけない場面

使う: 性質の違う情報を1画面に並べたいとき。実績数・スキル・連絡先など、粒度がバラバラなものを1枚に収める
使う: 各項目の重要度に差があるとき。差が無いなら普通のグリッドで足りる
避ける: 順番に読ませたいとき。ベントーは視線の順路を決めない。手順や物語には向かない
避ける: 項目が3つ以下のとき。大小の差が作れず、ただの不揃いなカードに見える
避ける: 中身の分量が予測できないとき。1枚だけテキストが長いとセルが破綻する

壊れる条件

全セルを同じ大きさにする → 大小＝優先順位という仕組みが消え、ただのカード一覧になる。ベントーである意味が無くなる
SPで span を戻し忘れる → 1カラムに落としても span 2 が残り、レイアウトが崩れる
角丸・余白・枠線をセルごとに変える → 「詰め合わせ」に見えなくなる。統一されているから弁当箱に見える
強調セルを2枚以上作る → 入口が複数になり、どこから見ればいいか分からなくなる
セルに長文を入れる → 固定行高からはみ出す。ベントーは「短い情報の詰め合わせ」の形式

コントラスト実測

対象	文字色	背景	実効背景	比	判定
数値（白セル）	`#18181b`	`#ffffff`	`#ffffff`	17.72:1	AA 合格
小見出し（白セル）	`#3f3f46`	`#ffffff`	`#ffffff`	10.44:1	AA 合格
補足テキスト（白セル）	`#71717a`	`#ffffff`	`#ffffff`	4.83:1	AA 合格（余裕なし）
小見出し（黒セル）	`#a1a1aa`	`#18181b`	`#18181b`	6.91:1	AA 合格
大字（マルーンセル）	`#ffffff`	`#7b1418`	`#7b1418`	10.74:1	AA 合格
小見出し（マルーンセル）	`#f2d5d6`	`#7b1418`	`#7b1418`	7.81:1	AA 合格

アクセシビリティ

補足テキスト #71717a は白の上で 4.83:1。AA は通るが余裕が無い。これ以上薄くすると落ちる
セルの大小は視覚的な優先順位でしかない。読み上げには DOM 順でしか伝わらないので、重要なセルは HTML でも先頭に置く
セル全体をリンクにするなら、リンクの言葉は「→」ではなく行き先が分かる語にする。「→」だけでは読み上げで意味を成さない
視覚順と DOM 順がずれると、キーボードのフォーカスが画面上を飛び回る。order で並べ替えて見た目を作らない

スマホへの落とし方

SPは 1fr に落とし、span を全部 auto に戻す。span を残したままだと列が足りずに崩れる
grid-auto-rows の固定高は SP では外す。縦積みになると必要な高さが変わるため
中間幅（タブレット）は2列が収まりが良い。4→1 で飛ばすと、中間幅で1枚が横長になりすぎる

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ベントーグリッド デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;background:#e9e9ec;padding:16px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:88px;gap:12px}
.cell{background:#fff;border-radius:14px;padding:16px;display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid #dcdce1}
.cell h3{font-size:13px;letter-spacing:.02em;color:#3f3f46}
.cell .big{font-size:26px;font-weight:700;letter-spacing:-.02em;color:#18181b}
.cell small{font-size:11px;color:#71717a}
/* 大小が階層そのもの。ここを全部同じにすると意味が消える */
.hero{grid-column:span 2;grid-row:span 2;background:#18181b;border-color:#18181b}
.hero h3{color:#a1a1aa}
.hero .big{color:#fff;font-size:34px;line-height:1.25}
.wide{grid-column:span 2}
.accent{background:#7b1418;border-color:#7b1418}
.accent h3,.accent small{color:#f2d5d6}
.accent .big{color:#fff}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .hero,.wide{grid-column:auto;grid-row:auto}
}
</style></head><body>
<div class="bento">
  <div class="cell hero">
    <h3>PRIMARY</h3>
    <div class="big">見た目は、<br>思考である。</div>
  </div>
  <div class="cell"><h3>WORKS</h3><div class="big">08</div></div>
  <div class="cell accent"><h3>YEARS</h3><div class="big">3</div></div>
  <div class="cell wide"><h3>SKILL</h3><div class="big">HTML / CSS / JS</div><small>制作実務</small></div>
  <div class="cell wide"><h3>CONTACT</h3><div class="big">→</div><small>お問い合わせ</small></div>
  <div class="cell"><h3>AWARD</h3><div class="big">02</div></div>
  <div class="cell"><h3>BLOG</h3><div class="big">14</div></div>
</div>
</body></html>

出典・参考: Apple 製品ページ / Vercel・Linear 等のLPで定着したパターン。自作の再現実装