機能紹介 · 機能紹介セクション
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/bento-features/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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 のリズムを保ち、同じサイズを連続で並べない。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。6枚のカードで機能を紹介する表示見本です。稼働率・認証・連携・移行時間は架空の設定で、同期・自動化・インポートは実装していません。外部素材やライブラリは不要です。
コードを表示
<!doctype html>
<!-- Vibehaus — CC0。外部素材・ライブラリ不要の1ファイル版。製品・性能値・認証は架空の表示見本です。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>タイル型グリッドの機能紹介 — Vibehaus プレビュー</title>
<style>
:root {
--bg: #0b0b12;
--panel: #141421;
--panel-2: #1b1b2c;
--border: rgba(255, 255, 255, 0.08);
--fg: #ebeaf4;
--muted: #95939d;
--accent: #8b7cff;
--accent-2: #54e0c4;
--accent-3: #ff7b9d;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
background: radial-gradient(900px 600px at 80% -10%, rgba(139, 124, 255, 0.15), transparent 60%),
radial-gradient(700px 500px at -10% 110%, rgba(84, 224, 196, 0.1), transparent 55%),
var(--bg);
color: var(--fg);
line-height: 1.75;
min-height: 100dvh;
}
header.intro {
max-width: 1180px;
margin: 0 auto;
padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem) 2rem;
}
.eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
padding: 0.3rem 0.8rem;
border-radius: 999px;
background: rgba(139, 124, 255, 0.14);
margin-bottom: 1.2rem;
}
header.intro h2 {
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: 0;
margin: 0 0 0.6rem;
line-height: 1.35;
max-width: 22ch;
}
header.intro p {
max-width: 54ch;
color: var(--muted);
font-size: 1.05rem;
margin: 0;
}
.bento {
max-width: 1180px;
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
}
.cell {
position: relative;
padding: 1.4rem 1.4rem 1.2rem;
border: 1px solid var(--border);
background: var(--panel);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 0;
}
.cell h3 {
font-size: 1.05rem;
margin: 0 0 0.3rem;
letter-spacing: 0;
line-height: 1.55;
}
.cell p {
color: var(--muted);
font-size: 0.9rem;
margin: 0;
max-width: 38ch;
}
.cell .tag {
position: absolute;
top: 1.2rem;
left: 1.4rem;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
/* Column spans */
.c-wide { grid-column: span 4; grid-row: span 2; background: linear-gradient(160deg, #1d1b3c 0%, #141421 70%); }
.c-tall { grid-column: span 2; grid-row: span 2; background: linear-gradient(200deg, #1b2b2b, #141421 70%); }
.c-med { grid-column: span 3; grid-row: span 1; }
.c-sm { grid-column: span 2; grid-row: span 1; }
.c-wide2 { grid-column: span 3; grid-row: span 2; background: radial-gradient(400px 220px at 90% 0%, rgba(255, 123, 157, 0.25), transparent 60%), var(--panel); }
/* Decorative visuals inside cells */
.sparkline {
position: absolute;
left: 1.4rem; right: 1.4rem; top: 40%;
height: 80px;
}
.orb {
position: absolute;
inset: 0;
background: conic-gradient(from 210deg at 70% 40%,
rgba(139, 124, 255, 0.35) 0deg,
rgba(84, 224, 196, 0.35) 120deg,
rgba(255, 123, 157, 0.35) 240deg,
rgba(139, 124, 255, 0.35) 360deg);
filter: blur(30px);
opacity: 0.6;
}
.pills {
position: absolute;
top: 2.8rem;
left: 1.4rem;
right: 1.4rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.pill {
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
color: var(--fg);
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
}
.pill.ok { color: var(--accent-2); border-color: rgba(84, 224, 196, 0.3); }
.pill.warn { color: var(--accent-3); border-color: rgba(255, 123, 157, 0.3); }
.pill.hi { color: var(--accent); border-color: rgba(139, 124, 255, 0.35); }
.kpi {
font-size: clamp(2.2rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--fg);
}
.kpi .unit { font-size: 1rem; color: var(--muted); margin-left: 0.2rem; }
.delta { color: var(--accent-2); font-size: 0.85rem; font-weight: 600; }
.chip-row {
position: absolute;
top: 2.8rem;
left: 1.4rem; right: 1.4rem;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
height: 48px;
}
.chip-row span {
border-radius: 6px;
background: rgba(139, 124, 255, 0.15);
border: 1px solid rgba(139, 124, 255, 0.25);
}
.chip-row span.hot { background: rgba(255, 123, 157, 0.25); border-color: rgba(255, 123, 157, 0.4); }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(4, 1fr); }
.c-wide { grid-column: span 4; grid-row: span 2; }
.c-tall { grid-column: span 2; grid-row: span 2; }
.c-med { grid-column: span 4; }
.c-sm { grid-column: span 2; }
.c-wide2 { grid-column: span 4; grid-row: span 2; }
}
@media (max-width: 560px) {
.bento { grid-template-columns: 1fr; }
.cell { min-height: 200px; }
.c-wide, .c-tall, .c-med, .c-sm, .c-wide2 { grid-column: 1 / -1; grid-row: span 1; }
}
/* 配布前の実幅監査: 内容を切らず、デモの行き先を示す */
.bento { grid-auto-rows: minmax(200px, auto); }
.cell { padding-top: 3.2rem; min-width: 0; }
.pills { position: relative; inset: auto; margin-bottom: 1.2rem; }
.demo-note { max-width: 1100px; margin: 0 auto 2rem; padding: 0 1rem; color: var(--muted); }
.demo-note { font-size: 0.85rem; line-height: 1.8; letter-spacing: 0; }
</style>
</head>
<body>
<header class="intro">
<span class="eyebrow">プロダクト機能</span>
<h2>ワークフローのすべてを、ひとつのボードで。</h2>
<p>
6マス、重複なし。ベントーグリッドは、機能ごとに必要な面積を与える設計です。主役には大きく、脇役には小さく。
</p>
</header>
<section class="bento">
<!-- 1. Wide hero cell -->
<div class="cell c-wide">
<div class="tag">01 · リアルタイム同期</div>
<div class="orb" aria-hidden="true"></div>
<h3 style="position:relative">すべての変更が、その瞬間に届く。</h3>
<p style="position:relative">
裏側ではオペレーショナル・トランスフォームで衝突を吸収。表ではマージコンフリクトがゼロ。同じ部屋でも、時差があっても動きます。
</p>
</div>
<!-- 2. Tall cell with KPI -->
<div class="cell c-tall">
<div class="tag">02 · 稼働率</div>
<div style="margin-top:auto">
<div class="kpi">99.99<span class="unit">%</span></div>
<div class="delta">▲ +0.01 今四半期</div>
<h3 style="margin-top:1rem">監視しなくても、動いている安心感。</h3>
</div>
</div>
<!-- 3. Medium cell with tags -->
<div class="cell c-med">
<div class="tag">03 · 連携</div>
<div class="pills">
<span class="pill hi">Slack</span>
<span class="pill">Linear</span>
<span class="pill">GitHub</span>
<span class="pill">Figma</span>
<span class="pill ok">Notion</span>
<span class="pill">Zapier</span>
<span class="pill warn">+42</span>
</div>
<h3 style="margin-top:auto">毎日開いているツールに、そのまま繋がる。</h3>
</div>
<!-- 4. Small cell -->
<div class="cell c-sm">
<div class="tag">04 · 監査</div>
<div class="chip-row" aria-hidden="true">
<span></span><span></span><span class="hot"></span><span></span><span></span><span class="hot"></span>
</div>
<h3 style="margin-top:auto">初日から SOC 2 Type II。</h3>
</div>
<!-- 5. Another medium cell -->
<div class="cell c-med">
<div class="tag">05 · 自動化</div>
<div class="pills">
<span class="pill">もし X なら Y</span>
<span class="pill hi">スケジュール</span>
<span class="pill ok">ラベルで起動</span>
<span class="pill">webhook</span>
</div>
<h3 style="margin-top:auto">日本語で読めるルール設定。</h3>
</div>
<!-- 6. Wide gradient cell -->
<div class="cell c-wide2">
<div class="tag">06 · 移行</div>
<h3 style="margin-top:auto">半日で、引っ越しが終わる。</h3>
<p>
CSV と JSON のガイド付きインポーター、各ステップはすべてロールバック可能。多くのチームは、最初のコーヒーブレイクより先に終わります。
</p>
</div>
</section>
<aside class="demo-note" aria-label="表示見本について"><p>表示見本です。稼働率・認証・連携先・移行時間は架空の設定です。同期・自動化・インポート機能は含みません。</p></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
「ベントー（弁当）グリッド」という名は、日本の弁当箱に由来します。仕切られた箱に大小さまざまなおかずが過不足なく収まる——あの構成原理を機能紹介のレイアウトに応用したものです。Apple のプロダクトページや Linear が採用したことで、2023年以降のB2B SaaSで定番化しました。
等価に並べることの弊害
従来の3列グリッドは、すべての機能を同じ大きさのカードで並べます。整然としていますが、これはどの機能も同じ重要度だという嘘をついています。実際のプロダクトには、必ずコア機能と補助機能の重みの差があります。ベントーグリッドは、その差を「タイルの面積」に翻訳します。大きいタイルは主役、小さいタイルは脇役——説明文を一字も読まなくても、製品の重心が視覚的に伝わるのです。
崩れる形すべて同じ大きさのカード
整然として見えますが、読み手はどれを先に見ればいいかを教えてもらえません。結果として全部を読むか、何も読まずに離脱するかの二択になります。
効く形重みの差をタイルの面積へ
大きいタイルが主役、小さいタイルが脇役。説明文を一字も読まなくても製品の重心が伝わります。大小差を弱めるとベントーである意味が消えます。
面積で語るということ
このレイアウトの本質は、情報の階層をテキストではなくサイズで表現する点にあります。訪問者は流し読みでも「この製品が何を一番大事にしているか」を受け取れる。逆に、すべてのタイルを似た大きさにしてしまうと、ベントーである意味が消えます。大胆な大小差をつける勇気が、この様式の成否を分けます。
仕上げの判断軸
6列程度のグリッドに、wide×2・tall×1・medium×2・small×1 のように異なる比率のタイルを組み合わせます。各タイルの左上に番号＋カテゴリのタグを置くと情報の粒度が揃う。KPIタイルは大きな数値と変化量（Δ）で「装飾ではなく情報」として扱い、放射状のブラーはスクリーンショットがなくてもタイルに動きを与える安価な手段です。レスポンシブは6列→4列→1列の3段階で、モバイルでもタグとKPIは残します。
6列基準のグリッド。ここに異なる比率のタイルを噛ませる
wide×2 / tall×1主役の比率。面積そのものが重要度の宣言になる
6→4→1レスポンシブの段数。モバイルでもタグとKPIは残す
機能紹介の構成要素
使いどころ
- 6〜9 個の機能を並列で並べつつ、序列をつけて読ませたいとき
- スクリーンショットをまだ作り込めない段階で、抽象ビジュアルだけで動きを感じさせたいとき
- Apple や Linear のようなプロダクトマーケティングのトーンを踏襲したい B2B SaaS
このデザインの分類
背景と狙いどころ
よくある質問
タイル数はいくつが適正？
6〜9 個が扱いやすい範囲です。10 個を超えると「タイル型らしさ」が薄れ、普通のグリッドに近づきます。主役となる 1〜2 タイルを必ず大きく取り、視線が最初に落ちる位置を作ります。
スクリーンショットがなくても成立しますか？
成立します。このプロンプトはスクリーンショット 0 前提で、conic-gradient のオーブ、ピル、小さなチップ行などの**抽象ビジュアル**でタイルを埋めています。スクリーンショットが用意できた段階で差し替え可能です。
モバイルで「タイル型らしさ」は残りますか？
1 カラムに崩れるので、厳密な「タイル型」の印象は弱まります。代わりに各タイルの左上タグと KPI やピルは保持されるため、**視覚的なリズム**は残ります。モバイルでもタイル間に明確な区切り(背景色の差など)を入れると寂しくなりにくいです。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。