Bento グリッド型サービス紹介
このパーツは、大小さまざまな枠を組み合わせた Bento（弁当箱）レイアウトのサービス紹介です。 display:grid の3列に grid-auto-rows で行の高さを決め、一部のセルだけ --big で大きくして強弱を付けています。
このパーツの使いどころと実装ポイント
このパーツは、大小さまざまな枠を組み合わせた Bento（弁当箱）レイアウトのサービス紹介です。display:grid の3列に grid-auto-rows で行の高さを決め、一部のセルだけ --big で大きくして強弱を付けています。各カードは黒地に薄い金色の枠線を持ち、アイコン・小見出し・説明文を縦に積む統一フォーマットで、見せたい要素にメリハリを付けながら全体の一貫性も保てるのが特徴です。
向いている場面
- 強みや機能を複数並べて見せたい SaaS・プロダクトのトップ
- サービスの特徴を視覚的なグリッドで魅せたい制作会社
- 近年のトレンド感を出したいスタートアップの紹介セクション
カスタマイズと注意点
差し替えどころは、各カードのアイコン・見出し・説明、そして「どのセルを大きくするか」です。最も伝えたい1枠を --big にして視線を集めます。アイコンはインライン svg で自己完結させ、絵文字は使わないでください。実装上の注意は、固定の grid-auto-rows 高だと説明文が長いカードで内容がはみ出す点で、テキスト量を揃えるか最小高に余裕を持たせます。狭い画面では3列のまま縮めると窮屈なので、2列または1列に再構成し、大きい枠の特別扱いは解除して読みやすさを優先してください。
よくある質問
Bentoレイアウトとは何ですか
弁当箱のように大小の四角い枠を組み合わせて並べるグリッド構成のことです。すべて同じ大きさにせず、一部のセルを大きくして強調することで、見せたい情報にメリハリを付けつつ全体の統一感も保てます。近年のサービス紹介でよく使われる手法です。
スマホではどう並べ替えますか
3列のまま縮めると各枠が窮屈になります。スマホでは2列か1列に再構成し、大きい枠の特別扱いはいったん解除して、すべて読みやすい大きさで縦に積むのが無難です。行の高さを固定している場合は、長い説明文がはみ出さないよう余裕を持たせてください。