機能紹介 · 機能紹介セクション

タイル型グリッドの機能紹介

大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。

PUBLISHED — 2026年4月23日 UPDATED — 2026年4月23日 CATEGORY — 機能紹介 LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/bento-features/

概要

「ベントー（弁当）グリッド」という名は、日本の弁当箱に由来します。仕切られた箱に大小さまざまなおかずが過不足なく収まる——あの構成原理を機能紹介のレイアウトに応用したものです。Apple のプロダクトページや Linear が採用したことで、2023年以降のB2B SaaSで定番化しました。

等価に並べることの弊害

従来の3列グリッドは、すべての機能を同じ大きさのカードで並べます。整然としていますが、これは「どの機能も同じ重要度だ」という嘘をついている。実際のプロダクトには、必ずコア機能と補助機能の重みの差があります。ベントーグリッドは、その差を「タイルの面積」に翻訳します。大きいタイルは主役、小さいタイルは脇役——説明文を一字も読まなくても、製品の重心が視覚的に伝わるのです。

面積で語るということ

このレイアウトの本質は、情報の階層をテキストではなくサイズで表現する点にあります。訪問者は流し読みでも「この製品が何を一番大事にしているか」を受け取れる。逆に、すべてのタイルを似た大きさにしてしまうと、ベントーである意味が消えます。大胆な大小差をつける勇気が、この様式の成否を分けます。

仕上げの判断軸

6列程度のグリッドに、wide×2・tall×1・medium×2・small×1 のように異なる比率のタイルを組み合わせます。各タイルの左上に番号＋カテゴリのタグを置くと情報の粒度が揃う。KPIタイルは大きな数値と変化量（Δ）で「装飾ではなく情報」として扱い、放射状のブラーはスクリーンショットがなくてもタイルに動きを与える安価な手段です。レスポンシブは6列→4列→1列の3段階で、モバイルでもタグとKPIは残します。

使いどころ

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

カテゴリ: 機能紹介
スタイル: ベントー / SaaS / ダーク / グラデーション / ボールド

背景と狙いどころ

Context

Category · 機能紹介セクション

機能紹介

プロダクトの機能を並べるセクション。

カテゴリ一覧を見る →

Style · ベント

ベントー

大小のマスで情報を整理するグリッド。

スタイル一覧を見る →

Style · SaaS

SaaS

SaaSらしい機能ファースト。

スタイル一覧を見る →

AIへの指示文

B2B SaaSのマーケティングページ向けに、タイル型グリッド (ベントーグリッド) の機能紹介セクションを作ってください。

キャンバス:
- 暗背景 (#0b0b12) に、2 つの柔らかい放射状アクセントを重ねる。
  右上はラベンダー rgba(139,124,255,0.15)、左下はミント rgba(84,224,196,0.10)。
- Inter / system sans、line-height 1.55、文字色 #ebeaf4、ミュートは #95939d。

グリッド上部の見出し:
- eyebrow ピル "Product · Capabilities"。ラベンダー色、ピル状の半透明背景。
- H2 (clamp 2.1/5.5/3.2rem)、最大 22ch、"Every piece of the workflow, in one board."
- グリッドの意図を説明するリード文を 1 文。

タイルグリッド:
- 6 列の CSS Grid、200px の auto-rows、0.85rem の gap、最大幅 1180px。
- 6 つのタイルは span が異なる。各タイル: 20px の radius、1px のボーダー rgba(255,255,255,0.08)、暗パネル (#141421)、padding 1.4rem。
- 各タイルは左上に小さな大文字のタグ("01 · Realtime sync" など)、下部に H3、内容によって装飾を配置。

タイル(順番):
1. Wide (span 4x2, "Realtime sync"): conic-gradient のブラーな "orb" 装飾 + H3 + リード文。
2. Tall (span 2x2, "Uptime"): 大きな KPI "99.99%" と下に緑色のデルタ、下部に H3。
3. Medium (span 3x1, "Integrations"): ピル行(Slack=ラベンダー、Notion=ミント、+42=ピンク) + 下部 H3。
4. Small (span 2x1, "Audit"): 6 個の小さなチップ(2 個がピンクでハイライト) + H3 "SOC 2 II from day one."
5. Medium (span 3x1, "Automations"): ルール風のピル(if X then Y、schedule…) + H3。
6. Wide (span 3x2, "Migration"): 右上にピンクの放射状発光 + H3 + リード文。

レスポンシブ:
- 900px 以下では 4 列グリッドに切り替え、wide タイルは全幅になる。
- 560px 以下では 1 カラムに積み、各タイルは min-height 200px。

純粋な HTML/CSS のみ、JS 不要。

バリエーション

ライトテーマ版

背景を #f7f6fb に。構造は同じ。
タイル背景は白、1px の #e6e4ee ボーダー + 控えめな影(0 10px 30px -20px rgba(25,30,80,0.15))。
アクセントピルの色は残しつつ、彩度を 30% 落とす。

密度高め版

タイル数を 9 個に拡張、8 列グリッドに。追加: "Versioning"、"Roles & SSO"、"Analytics dashboard"。
wide/tall/small のリズムを保ち、同じサイズを連続で並べない。

よくある質問

タイル数はいくつが適正？

6〜9 個が扱いやすい範囲です。10 個を超えると「タイル型らしさ」が薄れ、普通のグリッドに近づきます。主役となる 1〜2 タイルを必ず大きく取り、視線が最初に落ちる位置を作ります。

スクリーンショットがなくても成立しますか？

成立します。このプロンプトはスクリーンショット 0 前提で、conic-gradient のオーブ、ピル、小さなチップ行などの**抽象ビジュアル**でタイルを埋めています。スクリーンショットが用意できた段階で差し替え可能です。

モバイルで「タイル型らしさ」は残りますか？

1 カラムに崩れるので、厳密な「タイル型」の印象は弱まります。代わりに各タイルの左上タグと KPI やピルは保持されるため、**視覚的なリズム**は残ります。モバイルでもタイル間に明確な区切り(背景色の差など)を入れると寂しくなりにくいです。

アイソメトリック投影の機能紹介セクション

30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。

機能紹介アイソメトリックグラデーション

B2Bコーポレートの機能紹介セクション

B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。

機能紹介コーポレートSaaS

建築設計図風の機能紹介

建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。

機能紹介ブループリントモノクロ