GODRICH

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

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

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

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

2025年ごろからSaaSのランディングページで急速に広まり、プロダクト系のスタートアップサイトやポートフォリオのカバーでもよく見かける並びです。特徴は主に五つで、角丸の半径を全タイルで統一すること、影の濃さだけで階層を作ること、タイル間のgutterを揃えること、強調したいタイルだけを大きくすること、写真をほとんど使わず色面だけで見せることです。まずは実際に組んだ一枚のページを眺めてください。

ページを新しいタブで開く
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 07 bento-grid-cta-band 08 bento-grid-footer 09 bento-grid-buttons-inputs

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

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

ヒーロー領域を一枚の大きな塊ではなく、大きさの異なる複数のタイルに分けて配置します。SaaSランディングの最初の画面やポートフォリオのカバーでよく使われ、見出しの隣に小さな実績タイルを添えるだけで情報量を増やせます。

2x2radius 24호버 확대
.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丸ピル型ナビ

メニュー全体が一つのピル型に収まり、現在地を示す内側のチップが選択中の項目まで滑らかに追従します。LP上部のバーやアプリ内のタブ切り替えに向いていて、線ではなく面の移動で位置を伝えます。

radius 999padding 6px그림자 얕게
.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コアとなるベントカードグリッド

このスタイルの核となる部分で、マスごとに列・行の幅を変えることで一目見たときに視線が一番大きなマスに止まるように誘導します。機能紹介グリッドやダッシュボードの要約カードに向いていて、優先度の高い情報を自然に大きく見せられます。

grid-template-columnsgap 16px2열→1열
.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アイコン+数字の機能カード

機能ごとにアイコンと強調した数字を一つ、カードの中に大きく配置してスキャンしやすくします。料金表の上の機能まとめやプロダクト紹介セクションに向いていて、細い進捗バーを添えると数値の説得力が増します。

숫자 강조아이콘 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サイズで差をつけたプラン

おすすめプランのタイルだけを大きくすることで、表を組まなくても何を推しているかが一目でわかります。3段階の料金プランや無料と有料の比較に向いていて、バッジの位置とタイルの拡大率をそろえると視線の流れが崩れません。

강조 칸 1.4배border 2pxbadge 위치
.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引用カードを混在配置

レビューカードをグリッドの間に混ぜて配置し、広告のように並んで見えないようにします。顧客の声やパートナーロゴと一緒に置くのに向いていて、引用カードだけを縦に長く取ると発言者の重みが出ます。

따옴표 아이콘별점 옵션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タイル

グリッドの中で一枚だけ横幅いっぱいを占め、格子を一通り眺め終えた最後にそこへ視線が止まるようにします。登録誘導帯や無料トライアル開始のセクションに向いていて、内側の光の演出は控えめに保つのが要点です。

열 전체 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リンク群をタイル化

フッターのリンク群ごとに薄いタイルを一つ与え、ベントの様式をページの最後まで貫きます。マルチカラムフッターやサイトマップの整理に向いていて、区切り線を引かずタイルの余白だけでグループを分けます。

칸 배경 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のピルボタン

ボタンと入力欄の角をカードと同じ半径にそろえ、画面全体が一つの規格に見えるようにします。フォーム送信ボタンや検索・メール入力欄に向いていて、フォーカスリングの太さもタイルの影と同じ強さでそろえると統一感が出ます。

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

色のコントラストにも注意が必要です。accent(#2f6df6)の文字をcream(#fff7e6)の背景に直接乗せると、コントラスト比は約4.2:1になり、太字の小さな見出し(text-xsクラスの「CORE」「PRICING」のようなラベル)ではWCAGの4.5:1という基準にわずかに届きません。アイコンやボタンの背景色としてaccentを使う分には問題ありませんが、小さな文字の色として使う場合はinkに寄せて濃くするか、フォントサイズを一段階上げてください。

@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; }
}

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

FAQ

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

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

Tailwindを使わなくてもベントグリッドは組めますか？

はい、組めます。zipのtokens.cssには同じ色・角丸・影の値がCSS変数として入っていて、grid-template-columnsとgapを自分で書けばTailwindなしでも同じ見た目を再現できます。プロンプトのルールもクラス名の部分を読み替えるだけで通用します。

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

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

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

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