大小マスで機能を見せるベントー

大小異なるマスで6機能を見せるダーク背景のベントーグリッド。KPI/バッジ/小さなビジュアルを混在させ、1スクロール内でプロダクトの主役と脇役を視覚的に差別化するSaaS向けのFeature節。

更新日: 2026年4月23日

プレビューを開く

概要

ベントー・フィーチャーは、「全機能を平等に並べる」Featureグリッドへのアンチテーゼ。主役マスを大きく、脇役マスを小さくすることで、スクロールせずに「この製品のコアはどこか」が視覚的に伝わる。

なぜ効くのか

従来の3列グリッドはすべての機能を等価に見せてしまう。だが実際のプロダクトにはコアvsサポートの濃淡が存在する。ベントーグリッドは、その濃淡をマスの面積で翻訳する手法。Apple・Linearなどが採用した結果、2023年以降B2B SaaSの業界標準的な”伝え方”になりつつある。

構造

6セル/6列グリッド: 6×6のマスで、wide×2, tall×1, med×2, small×1 を組み合わせる
cell tag: 全セルの左上に番号+カテゴリ名のタグを置き、情報の粒度を揃える
KPIセル: 巨大数値＋緑のΔ表示。数値は装飾でなく情報として扱う
ピル群: 統合・自動化のように個数を見せたい機能で、色でクラスタを示唆
radial blur orb: スクショが無くてもセルに「動きの印象」を与える安価な装飾
レスポンシブ三段階: 6→4→1カラム。モバイルでもタグとKPIは残す

使いどころ

6〜9個の機能を並列に並べたいが、序列をつけて読ませたいとき
スクショをまだ作り込めない段階で、抽象ビジュアルだけでも「動き」を感じさせたいとき
AppleやLinearのようなプロダクトマーケのトーンを踏襲したいB2B SaaS

適した技術スタック

カテゴリ: 機能紹介
スタイル: ベントー / SaaS / ダーク / グラデーション / ボールド
想定用途: SaaS向け
SPA: No
Hosting: any
Notes: CSS Gridのみ。モダンブラウザで`grid-column: span`と`grid-row: span`が動けば再現できる。JSなし。

AIへの指示文

Build a bento-grid feature section for a B2B SaaS marketing page.
Canvas:
- Dark background (#0b0b12) with two soft radial accents:
  top-right in lavender rgba(139,124,255,0.15),
  bottom-left in mint rgba(84,224,196,0.10).
- Inter / system sans, line-height 1.55, text color #ebeaf4, muted #95939d.
Header above the grid:
- Eyebrow pill "Product · Capabilities" in lavender on a tinted pill.
- H2 (clamp 2.1/5.5/3.2rem) max 22ch: "Every piece of the workflow, in one board."
- 1 sentence lede explaining the bento metaphor.
Bento grid:
- 6-column CSS Grid, 200px auto-rows, 0.85rem gap, max-width 1180px.
- 6 cells with different spans. Each cell: 20px radius, 1px border
  rgba(255,255,255,0.08), dark panel background (#141421), 1.4rem padding.
- Each cell has a tiny uppercase tracked tag in the top-left ("01 · Realtime sync", etc.),
  an H3 title at the bottom, and — depending on the cell — a decorative visual.
Cells, in order:
1. Wide (span 4x2, "Realtime sync"): conic-gradient blur "orb" decoration, H3 + lede.
2. Tall (span 2x2, "Uptime"): big KPI "99.99%" with a green delta below; H3.
3. Medium (span 3x1, "Integrations"): a row of rounded pills with some colored
   (Slack=lavender, Notion=mint, +42=pink); H3 under.
4. Small (span 2x1, "Audit"): a row of 6 small chips; 2 are highlighted pink;
   H3 below: "SOC 2 II from day one."
5. Medium (span 3x1, "Automations"): rule-style pills (if X then Y, schedule…); H3.
6. Wide (span 3x2, "Migration"): radial pink accent glow in the top-right; H3 + lede.
Responsive:
- ≤900px: switch to 4-column grid; wide cells become full-width.
- ≤560px: single-column stack, every cell min-height 200px.
Pure HTML/CSS. No JS.

バリエーション

ライトテーマ版

Background #f7f6fb with identical structure. Cell background white
with a 1px #e6e4ee border and subtle shadow (0 10px 30px -20px rgba(25,30,80,0.15)).
Accent pills keep their colors but desaturated 30%.

より密度高め

Expand to 9 cells on 8-column grid. Add: "Versioning", "Roles & SSO",
and "Analytics dashboard". Keep the same rhythm of wide/tall/small,
don't break the alternation.

よくある質問

マス数はいくつが適正？

6〜9個が扱いやすい。10を超えると「Bentoらしさ」が薄れ、普通のグリッドになる。主役1〜2マスを必ず設けて、そこに視線が最初に落ちるサイズ差をつくる。

スクショが無くても成立する？

成立する。このプロンプトはスクショゼロ前提で、conic-gradient・ピル・小さなチップ行などの**抽象ビジュアル**でマスを埋めている。スクショが用意できた段階で差し替えればよい。

モバイルで「ベントー感」は残る？

1カラムに崩れるので、厳密には"Bento"らしさは弱まる。代わりに各マスの左上タグと右端KPI/ピルは保持されるので、**視覚的リズム**は残る。モバイルでもセル間に明確な帯（背景色差）を入れると寂しくなりにくい。