Bento構成ヒーロー

見出しの大カードを中心に、画像・数値・CTAの小カードを敷き詰めたBento（弁当箱）型ヒーロー。情報を区画で見せられるため、機能の多いSaaSやプロダクトの第一画面で人気の構成です。

#hero#title#bento#grid

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSのBento構成ヒーロー -->
<section class="thb">
  <div class="thb-grid">
    <div class="thb-card thb-card--main">
      <p class="thb-kicker">PROJECT OS</p>
      <h1>段取りを、<br>ひと箱に。</h1>
      <p class="thb-lead">タスク・ドキュメント・予定をひとつの画面へ。</p>
      <button class="thb-btn" type="button">無料で始める</button>
    </div>
    <div class="thb-card thb-card--img" aria-hidden="true"><span class="thb-orb"></span></div>
    <div class="thb-card thb-card--stat"><b>1,200<i>+</i></b><span>導入企業</span></div>
    <div class="thb-card thb-card--cta">
      <span class="thb-cta-emoji">⚡</span>
      <span class="thb-cta-txt">連携100種<br>すぐ繋がる</span>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：Bento構成ヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.thb { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 26px; background: #0a0f1e; }
.thb-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 150px; gap: 14px; width: min(860px, 92vw); }
.thb-card { border-radius: 18px; padding: 22px; position: relative; overflow: hidden; }

.thb-card--main { grid-column: 1 / 2; grid-row: 1 / 3; background: linear-gradient(150deg, #4338ca, #3b82f6); color: #fff; display: flex; flex-direction: column; }
.thb-kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: .26em; opacity: .85; font-weight: 700; }
.thb-card--main h1 { margin: 0; font-size: 32px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; }
.thb-lead { margin: 14px 0 auto; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.88); max-width: 240px; }
.thb-btn { align-self: flex-start; font: inherit; font-size: 13.5px; font-weight: 700; color: #1e1b4b; background: #fff; border: none; padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: transform .15s ease; }
.thb-btn:hover { transform: translateY(-2px); }

.thb-card--img { grid-column: 2 / 4; grid-row: 1 / 2; background: linear-gradient(135deg, #0f172a, #0ea5e9); display: grid; place-items: center; }
.thb-orb { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0f2fe, #38bdf8 55%, #0369a1); box-shadow: 0 18px 40px rgba(3,105,161,.5); animation: thb-float 5s ease-in-out infinite; }
@keyframes thb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.thb-card--stat { grid-column: 2 / 3; grid-row: 2 / 3; background: #121a2e; color: #fff; display: flex; flex-direction: column; justify-content: center; border: 1px solid #20294a; }
.thb-card--stat b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.thb-card--stat b i { font-style: normal; color: #38bdf8; }
.thb-card--stat span { font-size: 12px; color: #97a0c4; margin-top: 4px; }

.thb-card--cta { grid-column: 3 / 4; grid-row: 2 / 3; background: linear-gradient(135deg, #06b6d4, #4f6bff); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.thb-cta-emoji { font-size: 24px; }
.thb-cta-txt { font-size: 13px; font-weight: 700; line-height: 1.4; }

@media (max-width: 600px) { .thb-grid { grid-template-columns: 1fr 1fr; } .thb-card--main { grid-column: 1 / 3; grid-row: 1 / 2; } .thb-card--img { grid-column: 1 / 3; grid-row: 2 / 3; } .thb-card--stat { grid-column: 1; grid-row: 3; } .thb-card--cta { grid-column: 2; grid-row: 3; } }
@media (prefers-reduced-motion: reduce) { .thb-orb { animation: none; } .thb-btn { transition: none; } }

実装ガイド

使いどころ

機能の多いSaaSやプロダクトの第一画面に。見出しの大カードを中心に、画像・数値・CTAの小カードを区画で敷き詰めたBento型ヒーローです。

実装時の注意点

CSS grid で大カードを2×2に、残りを小カードに割り当てます。各カードは役割ごとに配色を変え、画像カードのオーブだけ浮遊アニメで動かします。グリッド領域はブレークポイントで組み替えます。

対応ブラウザ

CSS grid（grid-column/row 指定）・transform は全モダンブラウザ対応。JS 不要です。

よくある失敗

カードを増やしすぎると情報が散漫になるため4〜5枚まで。モバイルではグリッドを1〜2列へ確実に組み替えること（はみ出し防止）。角丸・余白・配色のトーンを揃えると“弁当箱”の統一感が出ます。

応用例

小カードを実スクリーンショットや動画に、数値をカウントアップ化、カードのホバーで拡大、ダーク/ライト切替などに展開できます。

コード