Style · ベント
ベントWebデザインの参考例とAIプロンプト
お弁当箱のように大小のマスで情報を並べるベントーグリッドのAIプロンプト集。Apple・Linearの機能紹介で流行。
ベントーについて
お弁当箱のように大小のマスで情報を並べる設計。Apple、Linear、Raycast、Arc などが牽引し、機能紹介セクションで定番化しました。情報の優先度をマスの面積で表現できるのが最大の強みです。すべて同じ大きさのカードは、どの機能も同じ重要度だという嘘をつく。ベントーはその差を面積に翻訳し、説明文を一字も読ませずに製品の重心を伝えます。大小差を弱めると、ベントーである意味が消えます。レスポンシブは列数だけでなく、各タイルの span も同時に縮めてください。
ベントーの視覚パラメータ
- #0B0B0C 地
- #17171A タイル
- #E8E8EA 文字
- #7C5CFF アクセント
- 書体
- サンセリフ。タイル左上に小さなタグを置く
- 形
- 角丸16〜20px。1pxの境界、影は薄く
- 動き
- hoverでタイルがわずかに持ち上がる
よく使われる場面
- SaaSの機能紹介セクション
- プロダクトのOverview/Feature
- モバイルアプリの特徴訴求
- ハードウェアのスペック提示
- ポートフォリオの実績ショーケース
成功のポイント
- マスサイズは2-3種類までに絞る
- 最重要機能を最大マスに配置
- 角丸は大きめ(16-24px)
- 各マス内でも余白を確保
- モバイルでは1カラムに崩す