DesignLayer

【Next.js】ベントグリッドの作り方を解説

公開日: 2026年9月12日 · 読了目安 9 分

Next.js でベントグリッド（Bento UI）を組む方法。グリッドの比率、スマホでの崩れ、弱いモーション、完成セクションの流用。

先に結論：ベントは「大きいマス」が1つあれば足りる

ベントグリッドは、同じ大きさのカードを9枚並べることではありません。1つだけ大きく、残りは補足、という比率が今っぽく見えます。

CSS Grid の col-span / row-span で足ります。ライブラリは不要です。

動きは、マスごとの入場遅延か、大きいマスの中だけループする背景です。全部が同時に浮くと、グリッドが崩れます。

崩れて見える3つの理由

1つ目は、スマホでも同じスパンを使うことです。モバイルは1列に戻します。

2つ目は、大きいマスに長い文章を詰めることです。大きいマスは写真か数字です。

3つ目は、枠線と影を全部に付けることです。余白と背景差だけで区切ると軽いです。

方法1：Tailwind の grid だけ

md:grid-cols-4 のように列を決め、目玉カードに md:col-span-2 md:row-span-2 を付けます。gap は 16〜24px が扱いやすいです。

最小のベント

components/Bento.tsx
export function Bento() {
  return (
    <div className="grid gap-4 md:grid-cols-4">
      <article className="rounded-2xl bg-zinc-100 p-6 md:col-span-2 md:row-span-2">
        目玉
      </article>
      <article className="rounded-2xl bg-zinc-100 p-6">補足</article>
      <article className="rounded-2xl bg-zinc-100 p-6">補足</article>
      <article className="rounded-2xl bg-zinc-100 p-6 md:col-span-2">横長</article>
    </div>
  );
}

方法2：大きいマスだけ動かす

ループするグラデーションや、ゆっくりした写真のズームは大きいマスだけです。小さいマスは静止のまま入場だけ遅らせます。

方法3：完成しているベントを載せる

マスの比率、角丸、中のタイポ、弱いループまで揃った塊は、grid だけだと半日かかることがあります。

DesignLayer でライブプレビューしてから載せてください。https://design-layer.com/components

コピー後は、目玉マスの写真と数字だけ差し替えます。比率は触らない方が崩れません。

公開前チェックリスト

1. モバイルで1列に戻るか。2. 見出し階層がカードごとに飛ばないか。3. 大きいマスの LCP 画像が隠れないか。4. キーボードで全カードに入れるか。

【Next.js】ベントグリッドの作り方を解説 | DesignLayer