GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

【コピペOK】ベントグリッド 今どきのLPパーツ9選

· Godrich · 9種 · 8分で読める

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

ベントグリッドは、日本の弁当箱のように大きさの異なる区画を隙間なく組み合わせ、ランディングページ全体を一枚の格子に見せるレイアウト手法です。ヒーローから料金表まで、すべてのセクションが同じ角丸と影の強さの上に乗ります。

2025年ごろからSaaSのランディングページで急速に広まり、プロダクト系のスタートアップサイトやポートフォリオのカバーでもよく見かける並びです。特徴は主に五つで、角丸の半径を全タイルで統一すること、影の濃さだけで階層を作ること、タイル間のgutterを揃えること、強調したいタイルだけを大きくすること、写真をほとんど使わず色面だけで見せることです。まずは実際に組んだ一枚のページを眺めてください。 画面を暗くして組みたい場合はダークモード デザインシステムのLPパーツ9選が同じ格子の感覚を黒い背景へ移しており、タイルの文面がメールへ流れ込む仕事ならメルマガ デザイン 9種がその受け渡しを扱います。

ページを新しいタブで開く
ベント型ヒーロー(2×2)01 bento-grid-hero 丸ピル型ナビ02 bento-grid-nav コアとなるベントカードグリッド03 bento-grid-card-grid アイコン+数字の機能カード04 bento-grid-features サイズで差をつけたプラン05 bento-grid-pricing 引用カードを混在配置06 bento-grid-testimonials 横長CTAタイル07 bento-grid-cta-band リンク群をタイル化08 bento-grid-footer radius12のピルボタン09 bento-grid-buttons-inputs

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01ベント型ヒーロー(2×2)

何が起きるか

ヒーロー領域を一枚の大きな塊ではなく、大きさの異なる複数のタイルに分けて配置します。

ベント型ヒーロー(2×2)
新しいタブで開く

01 · ベント型ヒーロー(2×2) — 計測 累積面積 53.267% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

2x2radius 24호버 확대

向いている場面

SaaSランディングの最初の画面や bento grid portfolio のカバーでよく使われ、見出しの隣に小さな実績タイルを添えるだけで情報量を増やせます。

.hero {
  width: clamp(240px, 82vw, 380px);
  height: clamp(160px, 46vw, 210px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 2.4vw, 12px);
}
.hero__tile {
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-raised;
  animation: heroIn $duration $easing infinite;
}

02丸ピル型ナビ

動きの内容

メニュー全体が一つのピル型に収まり、現在地を示す内側のチップが選択中の項目まで滑らかに追従します。

丸ピル型ナビ
新しいタブで開く

02 · 丸ピル型ナビ — 計測 累積面積 4.193% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

radius 999padding 6px그림자 얕게

使う場面

LP上部のバーやアプリ内のタブ切り替えに向いていて、線ではなく面の移動で位置を伝えます。

.navbar__indicator {
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc(25% - 4px);
  border-radius: $r-pill;
  background: $color;
  animation: navSlide $duration $easing infinite;
}
.navbar__item {
  position: relative;
  z-index: 1;
  text-align: center;
  color: $subject-ink;
  font-weight: 600; font-size: clamp(9.5px, 2.3vw, 11.5px); line-height: 1;
  padding: clamp(6px, 1.6vw, 8px) 2px;
}

03コアとなるベントカードグリッド

どんな動きか

このスタイルの核となる部分で、マスごとに列・行の幅を変えることで一目見たときに視線が一番大きなマスに止まるように誘導します。

コアとなるベントカードグリッド
新しいタブで開く

03 · コアとなるベントカードグリッド — 計測 累積面積 17.204% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

grid-template-columnsgap 16px2열→1열

bento grid layout の使いどころ

機能紹介グリッドやダッシュボードの要約カードに向いていて、優先度の高い情報を自然に大きく見せられます。

.grid {
  width: clamp(240px, 82vw, 380px);
  height: clamp(160px, 46vw, 210px);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 2.4vw, 12px);
}
.grid__tile {
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-press;
  padding: clamp(10px, 3vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  animation: tileWave $duration $easing infinite;
}
.grid__tile--a { grid-row: 1 / 3; animation-delay: 0s; }
.grid__tile--b { grid-column: 2; grid-row: 1; animation-delay: -0.5s; }
.grid__tile--c { grid-column: 3; grid-row: 1; animation-delay: -1s; }
.grid__tile--d { grid-column: 2 / 4; grid-row: 2; animation-delay: -1.5s; }

04アイコン+数字の機能カード

何が起きるか

機能ごとにアイコンと強調した数字を一つ、カードの中に大きく配置してスキャンしやすくします。

アイコン+数字の機能カード
新しいタブで開く

04 · アイコン+数字の機能カード — 計測 累積面積 0.728% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

숫자 강조아이콘 40px호버 살짝 뜸

向いている場面

料金表の上の機能まとめやプロダクト紹介セクションに向いていて、細い進捗バーを添えると数値の説得力が増します。

.feat__card {
  flex: 1;
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-raised;
  padding: clamp(12px, 3.4vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feat__icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: $color;
  margin-bottom: 4px;
}

05サイズで差をつけたプラン

動きの内容

おすすめプランのタイルだけを大きくすることで、表を組まなくても何を推しているかが一目でわかります。

サイズで差をつけたプラン
新しいタブで開く

05 · サイズで差をつけたプラン — 計測 累積面積 1.839% · 動いたフレーム 21/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

강조 칸 1.4배border 2pxbadge 위치

使う場面

3段階の料金プランや無料と有料の比較に向いていて、バッジの位置とタイルの拡大率をそろえると視線の流れが崩れません。

.pricing__tile--pro {
  position: relative;
  background: $subject-cream;
  box-shadow: $shadow-raised;
  padding-top: clamp(20px, 5vw, 26px);
  transform-origin: bottom center;
  animation: proBreathe $duration $easing infinite;
}
.pricing__badge {
  position: absolute;
  top: -10px;
  left: clamp(12px, 3.4vw, 16px);
  background: $color;
  color: $subject-cream;
  border-radius: $r-pill;
  padding: 3px 10px;
  font-weight: 700; font-size: clamp(9px, 2.2vw, 10.5px); line-height: 1.4;
  animation: badgeBounce $duration $easing infinite;
}

06引用カードを混在配置

どんな動きか

レビューカードをグリッドの間に混ぜて配置し、広告のように並んで見えないようにします。

引用カードを混在配置
新しいタブで開く

06 · 引用カードを混在配置 — 計測 累積面積 33.467% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

따옴표 아이콘별점 옵션1칸 폭

使いどころ

顧客の声やパートナーロゴと一緒に置くのに向いていて、引用カードだけを縦に長く取ると発言者の重みが出ます。

.testi {
  width: clamp(240px, 82vw, 360px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 2.4vw, 12px);
}
.testi__tile {
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-raised;
  padding: clamp(10px, 3vw, 14px);
  animation: driftIn $duration $easing infinite;
}
.testi__tile--quote {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  animation-delay: 0s;
}

07横長CTAタイル

何が起きるか

グリッドの中で一枚だけ横幅いっぱいを占め、格子を一通り眺め終えた最後にそこへ視線が止まるようにします。

横長CTAタイル
新しいタブで開く

07 · 横長CTAタイル — 計測 累積面積 19.051% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

열 전체 spanradius 24배경 대비

向いている場面

登録誘導帯や無料トライアル開始のセクションに向いていて、内側の光の演出は控えめに保つのが要点です。

.cta {
  position: relative;
  width: clamp(260px, 86vw, 400px);
  overflow: hidden;
  border-radius: $r-card;
  background: $subject-ink;
  padding: clamp(20px, 5.6vw, 28px) clamp(18px, 5vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 3vw, 14px);
}

08リンク群をタイル化

動きの内容

フッターのリンク群ごとに薄いタイルを一つ与え、ベントの様式をページの最後まで貫きます。

リンク群をタイル化
新しいタブで開く

08 · リンク群をタイル化 — 計測 累積面積 1.765% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

칸 배경 5%4열→2열구분선 없음

使う場面

マルチカラムフッターやサイトマップの整理に向いていて、区切り線を引かずタイルの余白だけでグループを分けます。

.footer {
  width: clamp(240px, 84vw, 380px);
  display: flex;
  gap: clamp(8px, 2.4vw, 12px);
}
.footer__tile {
  flex: 1;
  border-radius: $r-card;
  background: rgba($subject-ink, .04);
  padding: clamp(12px, 3.4vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tileReveal $duration $easing infinite;
}
.footer__tile:nth-child(2) { animation-delay: -0.66s; }
.footer__tile:nth-child(3) { animation-delay: -1.33s; }

09radius12のピルボタン

どんな動きか

ボタンと入力欄の角をカードと同じ半径にそろえ、画面全体が一つの規格に見えるようにします。

radius12のピルボタン
新しいタブで開く

09 · radius12のピルボタン — 計測 累積面積 2.1% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

radius 12포커스 링 2px높이 44px

使いどころ

フォーム送信ボタンや検索・メール入力欄に向いていて、フォーカスリングの太さもタイルの影と同じ強さでそろえると統一感が出ます。

.form {
  width: clamp(220px, 76vw, 320px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 14px);
}
.form__field {
  position: relative;
  display: block;
  border-radius: $r-control;
  background: $subject-cream;
}

tailwind.config のカスタム

9つの部品はすべて同じ4つの値の組み合わせでできています。角丸はtile(20px)とpill(999px)の2種類しかなく、影はbentoとbento-hoverの濃淡だけで階層を作り、色はcream・ink・accent・lineの4色に絞られています。プロジェクトに取り込むときはtheme.extendをそのまま貼り付けてください。

tailwind.config = {
  theme: {
    extend: {
      colors: {
        cream: "#fff7e6",
        ink: "#17141a",
        accent: "#2f6df6",
        line: "rgba(23,20,26,.08)",
      },
      fontFamily: {
        display: ["'Plus Jakarta Sans'", "system-ui", "sans-serif"],
        body: ["'Inter'", "system-ui", "sans-serif"],
      },
      borderRadius: {
        tile: "20px",
        pill: "999px",
      },
      boxShadow: {
        bento: "0 14px 24px rgba(23,20,26,.10)",
        "bento-hover": "0 20px 32px rgba(23,20,26,.16)",
      },
      spacing: {
        gutter: "14px",
      },
    },
  },
};

バイブコーディング用プロンプト

上のconfigを自分のプロジェクトに入れたあとは、Claude CodeやCursorに次のような指示を渡すだけで、既存のランディングページをベントグリッドへ組み替えられます。全文はzipのprompt.mdにあり、ここでは冒頭のルールだけを抜き出します。

私のランディングページを bento grid スタイルで組み直して。

ルール:
1. ヒーローは一つの大きなブロックではなく、大きさの違うタイル複数枚(2x2の非対称モザイク)に分ける。
   いちばん大きいタイルにヘッドライン + CTA、小さいタイルにバッジ一つ・数値一つ。
2. すべてのカードに rounded-tile(20px) と shadow-bento を使う。ホバー時は shadow-bento-hover に変え、
   影だけを大きくする — 位置は動かさない。

実際にこのプロンプトをrun/010/demo/page/index.htmlへ適用し、1280×800のビューポートでページ全体をスクリーンショットして確認しました。

結果

タイルの角丸・影・間隔がconfigの値どおりに出ているか、強調色がaccentひとつに絞られているかをこのスクリーンショットで確かめられます。

どこで壊れるか — 落とし穴

列数を減らす指定がない

一つ目の落とし穴は、実際に組んだ一枚のページ(demo/page/index.html)を見て気づいたものです。03のコア機能グリッドはgrid-cols-3 grid-rows-2のままで、狭い画面向けに列数を減らす指定が入っていません。スマートフォン幅で開くと3列のタイルが押しつぶされたように細くなり、大きいタイルに乗せたはずの見出しが折り返しだらけになります。

バッジがはみ出す

二つ目は05の推奨プラン(pro)タイルを組んでいるときに気づきました。バッジはleft: clamp(12px, 3.4vw, 16px)という固定位置で置かれていて、幅の制約がありません。プラン名を「プロフェッショナル」のように長くすると、バッジのテキストがタイルの右端を越えて隣のタイルに重なって見える瞬間がありました。バッジ側にmax-widthを足し、はみ出す分は省略記号ではなく文字サイズを一段階小さくする側で対処しています。実際に列数を切り替え、バッジの幅も直した版のコードを持っておきたい人は、その9ファイル一式を開く鍵になるj7zbg3efという文字列をここで確認してください。

タイルに載せた案内文を登録後に送るメールにも同じ姿で残したいときは、メールテンプレート デザイン9選がその文面の次の置き場所です。

アクセシビリティ

動きを減らす設定のとき

9つの部品はすべてprefers-reduced-motion: reduceで個々のtransformアニメーションが止まり、要素自体は消えずに静止した状態で残ります。01と03のタイルは浮き上がる動きが止まって最終位置のまま表示され、05のバッジは弾む動きをやめてバッジの文字だけが読める状態で止まります。詳しい仕組みはMDNのprefers-reduced-motionページにまとまっています。

色のコントラスト

色のコントラストにも注意が必要です。accent(#2f6df6)の文字をcream(#fff7e6)の背景に直接乗せると、コントラスト比は4.25:1にとどまり、太字の小さな見出し(text-xsクラスの「CORE」「PRICING」のようなラベル)ではWCAGの4.5:1という基準にわずかに届きません。そこでデモの小さなラベル(01のアイブロウ・06の星)は一段濃い青 #0a4fe8 に置き換え、cream の上で5.98:1、01のベージュ地(#f9f1e1)の上でも5.67:1を確保しています。アイコンやボタンの背景色としてaccentを使う分には問題ありませんが、小さな文字の色として使う場合はこのように濃い方へ寄せるか、フォントサイズを一段階上げてください。

@media (prefers-reduced-motion: reduce) {
  .hero__tile, .navbar__indicator, .grid__tile,
  .feat__bar, .pricing__tile--pro, .pricing__badge,
  .testi__tile, .cta__glow, .cta__btn,
  .footer__tile, .form__ring, .form__btn { animation: none !important; }
}

bento grid design 以外のCSSアニメーションはこちらのデザインカテゴリー一覧に、このサイトの成り立ちは紹介ページにまとめています。

FAQ

なぜ9つのタイルすべてで角丸や影の強さを揃える必要がありますか？

角丸(tile: 20px)と影(bento・bento-hover)の値を全タイルで固定しているのは、大きさの違うタイルが並んでも一つの規格でできていると感じさせるためです。タイルごとに角丸や影の濃さがばらつくと、格子ではなくただの寄せ集めに見えてしまい、視線が大きなタイルから自然に流れていきません。

Tailwindを使わなくても bento grid ui は組めますか？

はい、組めます。zipのtokens.cssには同じ色・角丸・影の値がCSS変数として入っていて、grid-template-columnsとgapを自分で書けばTailwindなしでも同じ見た目を再現できます。プロンプトのルールもクラス名の部分を読み替えるだけで通用します。 静止していたこのタイルにポインタを乗せたときの動きまで作り込みたい場合は、CSSベントグリッドホバーアニメーション9選がこのレイアウトの上にまさにその層を足します。

スマートフォンでもこのレイアウトはそのまま使えますか？

そのままでは崩れやすいです。落とし穴の項目で触れたとおり、03のコアグリッドは列数を減らす指定を持たないため、狭い画面では列が細くなりすぎます。@media (max-width: 640px)でgrid-template-columnsを1列に切り替える指定を自分のプロジェクト側で追加してください。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。