Style · ベント

ベントWebデザインの参考例とAIプロンプト

お弁当箱のように大小のマスで情報を並べるベントーグリッドのAIプロンプト集。Apple・Linearの機能紹介で流行。

Designs002 Styleベントー Keywordベント

ベントーについて

お弁当箱のように大小のマスで情報を並べる設計。Apple、Linear、Raycast、Arc などが牽引し、機能紹介セクションで定番化しました。情報の優先度をマスの面積で表現できるのが最大の強みです。すべて同じ大きさのカードは、どの機能も同じ重要度だという嘘をつく。ベントーはその差を面積に翻訳し、説明文を一字も読ませずに製品の重心を伝えます。大小差を弱めると、ベントーである意味が消えます。レスポンシブは列数だけでなく、各タイルの span も同時に縮めてください。

ベントーの視覚パラメータ

  • #0B0B0C
  • #17171A タイル
  • #E8E8EA 文字
  • #7C5CFF アクセント
書体
サンセリフ。タイル左上に小さなタグを置く
角丸16〜20px。1pxの境界、影は薄く
動き
hoverでタイルがわずかに持ち上がる

よく使われる場面

  • SaaSの機能紹介セクション
  • プロダクトのOverview/Feature
  • モバイルアプリの特徴訴求
  • ハードウェアのスペック提示
  • ポートフォリオの実績ショーケース

成功のポイント

  • マスサイズは2-3種類までに絞る
  • 最重要機能を最大マスに配置
  • 角丸は大きめ(16-24px)
  • 各マス内でも余白を確保
  • モバイルでは1カラムに崩す

このスタイルのデザイン

他のスタイル