Bento Grid UI（ベントーグリッドUI）

ページを最もスキャンしやすくするには、すべてのアイデアをそれぞれのコンパートメントに収め、それらのコンパートメントをきつく整ったグリッドに敷き詰めます。

混合スパンの角丸長方形セルで構成されるグリッド。各セルに1つのアイデアが収められ、セル間には均等な小さなギャップが設けられています。Appleのフィーチャーページが2022年からこれをデフォルトのプロダクトレイアウトにしました。

期間: 2022年～現在 · 時代: コンテンポラリー＆スペーシャル · 分野: グラフィック＆UIデザイン · 別名: Bento Layout、Bento Box Grid、Modular Card Grid

このスキルを読み込むタイミング

ユーザーが次のように要求したときに読み込んでください：「ベントー」「ベントーグリッド」「ベントーボックスレイアウト」「カードグリッド」「フィーチャーグリッド」「モジュラーカード」「アップルスタイルのフィーチャー」「タイルレイアウト」「ダッシュボードタイル」。

適している用途：プロダクトのフィーチャーページ、SaaSのランディングページ、個人ポートフォリオ、アプリのダッシュボード、リリースノートページ。

使用すべきでない場合：

コンテンツが長文の散文の場合（セル内の最大30語では議論が断片化するため）。
項目に厳格な順序やランキングがあり、ユーザーが上から下へたどる必要がある場合。
コンテンツが不均一またはまばらな場合（5個未満のセルでは目に見える穴が残るため）。

システムディレクティブ

Bento Grid UIでUIまたはグラフィックレイアウトを生成する際は、以下を必ず守ってください：

ページを4カラムまたは12カラムのグリッドに分割し、各セルを1、2、または3カラム、1または2行にまたがらせます。
すべてのセル間に12〜16pxの均一なギャップを1つ設け、ギャップサイズを混在させないでください。
すべてのセルに20〜28pxの角丸を付け、ページ上のすべてのセルで同じ角丸を使用します。
各セルに1つのメッセージを入れます：最大8語の見出し、1つのビジュアル、または1つの数字。
フィーチャーセルを2×2とし、その他のセルを1×1または2×1で埋め、サイズで重要度の順序を示します。
セルを1つのファミリーの2〜4つの色合いで塗りつぶし、1つまたは2つのセルをアクセントカラーにします。
セル内のコンテンツを同じ内側パディング24pxに揃え、テキストを左上または左下に固定します。

ガードレール

以下の各行はスタイルを破ります。出力を返す前に、リストと照らし合わせて確認してください。

絶対にしないこと: 1つのグリッド内でセル間のギャップサイズが異なる。
絶対にしないこと: 長方形を壊すグリッド内の空の穴。
絶対にしないこと: 1ページ内で異なる角丸を持つセル。
絶対にしないこと: 1つのセルに複数のメッセージやコールトゥアクション。
絶対にしないこと: 最初のビューポートに8個以上のセル。
絶対にしないこと: タイル張りと競合する太い枠線や硬い影。
絶対にしないこと: セル内に30語を超える段落。

ベクタープロファイル

軸	スコア	1の意味	5の意味
装飾	`■■□□□` 2/5	純粋なミニマル	マキシマリスト
奥行き	`■■□□□` 2/5	厳密な2D	フル3D / 空間的
グリッドの硬さ	`■■■■■` 5/5	混沌 / 有機的	厳密な数学的グリッド
スキューモーフィックなリアリズム	`■■□□□` 2/5	抽象的なデジタル	フォトリアリスティックな素材
タイポグラフィの表現力	`■■■□□` 3/5	ニュートラル / 不可視	実験的 / イラスト的

これらのスコアを維持してください。リクエストによって軸が2ポイント以上動いた場合、スタイルから逸脱しています：「系統フォールバック」に移動してください。

空間＆グリッドロジック

グリッドの仕組み: デスクトップでは4カラムグリッド、16pxのギャップ、200〜280pxの行。セルは1〜3カラム、1〜2行にまたがり、グリッドは768px未満で1〜2カラムに折りたたまれます。
ホワイトスペース比率: ギャップは領域の5〜8％を占めます。オープンスペースはセル内部に移動し、パディングは24〜32px。スペーシングスケールは8、12、16、24、32、64pxです。
配置ルール: セルの端は両軸でグリッドに揃います。セル内のテキストは左揃えで、上部または下部に固定されます。ベントーブロック全体は1120〜1280pxのコンテナ内で中央揃えになります。
コンテナ形状: セルは24pxの角丸を持つ角丸長方形で、外側マージンはありません。セルのアスペクト比は1:1、2:1、1:2で、内部のビジュアルも同じ角丸でクリップされます。

タイポグラフィ

分類: ネオグロテスクサンセリフ · ジオメトリックサンセリフ
トラッキング: ディスプレイサイズは-0.03em。本文は0。小さなキャプションは+0.01em。
行送り（リーディング）: ディスプレイ1.05〜1.15。本文1.45。キャプション1.3。
階層ルール:
- フィーチャーセルの見出しは40〜56px。その他の見出しは20〜28px。キャプションは14px。
- 見出しにはウェイト600、キャプションには400を使用。副次的な行には4.5:1の控えめな色を使用。
- 見出しは8語、キャプションは20語に制限（セルにスペースが少ないため）。
- 各主要メトリクスには、64px以上の大きな数字と14pxのキャプションを組み合わせます。

フォントペアリング

ディスプレイ	本文	備考
Inter Tight	Inter	短いセル見出しにタイトなディスプレイサイズ。
Geist	Geist	ウェイト400、500、600を使用した単一ファミリー。
Plus Jakarta Sans	Inter	コンシューマー向けプロダクトに温かみのあるディスプレイ用書体。

カラー＆ライティング

パレット構造: ニュートラルなページ。低彩度の1ファミリーの2〜4色合いのセル。グリッドの約15％をカバーする1〜2個のアクセントセル。
コントラストルール: インク（Ink）とセル（Cell）のコントラスト比は約17:1。グラファイト（Graphite）とセル（Cell）は約5:1。アクセントブルー（Accent Blue）上の白いテキストは約4.7:1で、本文テキストのWCAG AAに適合。すべてのセルペアを4.5:1以上に保ってください。
表面処理: 平面またはほぼ平面の塗りつぶし。セルには写真、プロダクトレンダリング、または2つの近い色合いのグラデーションを使用できます。セルに複数の表面タイプを混在させないでください。
光と影: ほとんどなし。オプションで 0 1px 2px rgba(0, 0, 0, 0.06) の影、または 1px の rgba(0, 0, 0, 0.06) 枠線で白いセルをページから分離します。

パレット

名前	16進数	役割
Page	`#F5F5F7`	ページ背景
Cell	`#FFFFFF`	デフォルトのセル塗りつぶし
Cell Tint	`#E8E8ED`	セカンダリセル塗りつぶし
Ink	`#1D1D1F`	テキスト
Graphite	`#6E6E73`	セカンダリテキスト
Accent Blue	`#0071E3`	アクセントセルとリンク
Night	`#000000`	ダークセル塗りつぶし

マテリアリティ＆テクスチャ

表面シミュレーション: なし。セルは漆塗りの弁当箱のコンパートメントとして読み取られますが、表面はフラットカラーまたは画像で、素材を模倣しません。
枠線ルール: デフォルトでは枠線なし。白いセルが白いページ上にある場合、1pxの rgba(0, 0, 0, 0.06) の実線枠線が表示されます。ダークモードでは 1px rgba(255, 255, 255, 0.1) を使用します。
ぼかしと立ち上がり: ぼかしはデフォルトで0px。立ち上がりはページ上の 0 1px 2px の影と、ホバー時の 0 12px 32px rgba(0, 0, 0, 0.12) のリフトに制限されます。

装飾＆アイコン

アイコン: 1.5〜2pxのストロークとラウンドキャップを持つシンプルなアイコン。サイズは24〜32px。インクカラー、またはアクセントセル上では白。セルあたり最大1つのアイコン。
イラストレーション: プロダクトレンダリング、UIスクリーンショット、大きな数字。セルの角丸にクリップされます。空のセルには抽象的なグラデーションが入ります。
装飾要素: 2×2のフィーチャーセル · 特大のメトリクス数字 · UIスクリーンショットの切り抜き · ピルタグ · グラデーションセル

モーション＆インタラクティビティ

画面上で生まれたもの: はい
トランジション物理: セルは40〜60msのスガーでエントリーし、フェードインして12px上昇します。ホバー時にセルは1.02にスケールし、影が深くなります。隣接セルは動きません。
イージング: cubic-bezier(0.25, 0.1, 0.25, 1)
持続時間（ms）: 350
ホバーとアクティブ: ホバー時にセルを1.02にスケールし、0 12px 32px rgba(0, 0, 0, 0.12) の影を追加。アクティブ時に0.98にスケール。フォーカス時に2pxのアクセントブルー（Accent Blue）リングを2pxオフセットして追加。

コード＆トークンプライマー

ルート要素に data-style="bento-grid-ui" を設定し、トークンを貼り付けてください。ファイル tokens.css には同じトークンと一連のリファレンスルールが含まれています。

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Tailwindパターン：

要素	クラス
ページ	`bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8`
グリッド	`mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]`
カード	`rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]`
フィーチャーカード	`rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2`
見出し	`font-semibold text-2xl leading-[1.1] tracking-[-0.03em]`

ビジュアルパック

このスタイルの画像とアイコンはファイルです。そのまま使用するか、仕様として読み取り、同じ言語で独自に描画してください。

ファイル	内容
`pack/hero.svg`	ヒーロープレート、800x600。スタイルのビジュアル言語による抽象的な画像。
`pack/pattern.svg`	パターンタイル、80x80。両方向に繰り返します。
`pack/icons.svg`	アイコンスプライト：home、search、heart、star、bell、user、mail、calendar、image、bolt、play、check、close、sliders。

アイコン: アウトライン、ストローク1.75、24pxフィールド上、ラウンドキャップ、ラウンドジョイン、コンテナ：角丸。使用法：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。アイコンは currentColor を継承します。
アイコンファミリー: スプライトはLucide ContributorsによるLucide (Regular) から切り出されています。ライセンスはISC。理由：1つのウェイトでプレーンな丸い線。セル内で静かで、現在のプロダクトインターフェースのデフォルト。デモ用のオープンソースの代用品です。プロダクトにはブランドのアイコンライブラリを使用し、以下のルールでファミリーを選択してください。
表示タイプ: ウェイト600、トラッキング-0.03em、リーディング1.05、大文字小文字変換：なし。
ウェイト: ディスプレイ600、サブヘッド500、本文400、テキスト内の太字600、ラベルとボタン500。スタイルは3つのウェイト（400、500、600）のみを使用し、それ以外は使用しません。ディスプレイは本文よりも200重くなっています。アクセントはサイズです。大きな単語がアクセントになるため、ウェイトは少数に保たれます。
本文タイプ: 16px、リーディング1.5。
ページ: ヒーロー積み重ね、左揃え、コンパクト密度、アクセント傾き0°。
テキストカラー: --color-text は主要なリーディングフィールド専用です。各フィールドでは、対応するトークン（--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent）を使用します。

アイコンパックの選び方

アイコンパックは画像のための書体です。テキスト書体と同じ注意を払って選択してください。これらのルールは、オープンソースセットとライセンスライブラリの両方に適用されます。

ストロークがステム（縦線）に一致する。 アイコンを本文テキストのサイズで横に並べて配置します。アイコンの線と文字のステムが同じウェイトであること。
端末とコーナーは角丸トークンに従う。 バットキャップとマイタージョインは半径0と組み合わせます。ラウンドキャップとラウンドジョインはソフトな半径と組み合わせます。
塗りつぶしモードは時代のテクノロジーに従う。 印刷時代はソリッドな形状を切り抜きます。奥行きのあるスクリーン時代は形状を塗りつぶし、陰影を付けます。現在のプロダクトインターフェースはアウトラインを描画します。
メタファーはスタイルより新しいものであってはならない。 各画像はその時代が知っていたオブジェクトです。後の時代のメタファーを持つアイコンは時代を壊します。
1ファミリー、1グリッド。 すべてのアイコンは1つのファミリーと1つのバリアントから、1つのフィールドに描画されます。1つの画面上でファミリーを混在させないでください。
ファミリーはプロダクトをカバーする。 コミットする前に、プロダクトが必要とする各コンセプトをリストアップしてください。それらの1つに対するアイコンがないファミリーは間違ったファミリーです。
カラーはトークンである。 アイコンは currentColor を継承します。2つ目のトーンはファイルではなくトークンから来ます。
ライセンスが使用を許可している。 セットのライセンスを読んでください。ライセンスが求める場合はクレジットを記載してください。ブランドを持つプロダクトは、ライセンスされたライブラリを使用し、同じルールを適用してファミリーを選択します。

系統フォールバック

ユーザーがバリエーションを求めてきた場合、即興で対応しないでください。ここに記載された隣接スタイルに近づけ、そのスキルを読み込んでください。

ユーザーがより整然としたものを求めた場合：swiss-international（スイスインターナショナルスタイル）に近づけてください。角丸を0pxに設定し、セルの塗りつぶしを削除し、1pxのルールでセルを分割します。12カラムグリッドとタイプスケールは維持します。
ユーザーがよりガラス質のものを求めた場合：glassmorphism（グラスモーフィズム）に近づけてください。セルを rgba(255, 255, 255, 0.18) と backdrop-filter blur(20px) でグラデーションページ上に塗りつぶします。ギャップと角丸は維持します。
ユーザーがより大胆なものを求めた場合：neo-brutalism-ui（ネオブルータリズムUI）に近づけてください。3pxの黒い枠線と 4px 4px 0 0 #000000 の影を追加し、セルを派手なフラットな色合いで塗りつぶします。グリッドと16pxのギャップは維持します。
ユーザーがよりフラットなものを求めた場合：flat-design（フラットデザイン）に近づけてください。影と枠線を削除し、写真のないソリッドなセル塗りつぶしを使用します。24pxの角丸とギャップは維持します。
由来（より正統なバージョンが必要な場合はこちらへ）： flat-design、swiss-international
相性の良いスタイル： glassmorphism、swiss-international
ベクタープロファイルが最も近いスタイル： bauhaus、material-design、swiss-international

感情的なターゲット

秩序だった好奇心：見る人は、プロダクトが整理され、コンパクトで、数秒でスキャンできると感じます。

キーワード

…

[翻訳のために切り詰められました]

ベントーグリッドUI