このスキルは、ユーザーが明示的に選択した場合、または確認されたプロジェクト設定で指定された場合にのみ使用してください。説明のない新しいUIリクエストの場合は、ここでユーザーの好みを決定する代わりに、スタイルセレクターなどを使用してください。既存のブランド、アクセシビリティ、ユーザーのオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始するための許可ではありません。
スタイルパック: Bento Grid
ID: bento
シグネチャ: 厳格な視覚的重み付け階層、多様な内部タイル構造、統一された空間リズムを持つ非対称なモジュラータイル構成。
これはスタイルパックであり、必須のデフォルトではありません。明示的な選択または確認された該当プロジェクトスタイルの後にのみ読み込んでください。プロジェクトの指示は個別の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。同一の機能カードによる統一された3x2グリッドは、Bento Gridとはみなされません。
適している場合 / トレードオフ
- 適している場合: 製品概要、ポートフォリオランディングページ、開発者機能発見、ダッシュボードサマリー、ハードウェア/ソフトウェアエコシステムショーケース。
- 注意が必要な場合: グリッドの非対称性が順次進行を妨げる大量の線形表形式データやステップバイステップのトランザクションフロー。
- 参考方向性:
- モダンマットダークBento: 黒曜石/スレート背景 (
#0B0D10) に微妙に浮き上がったグラファイトカード (#15191E)、1px半透明ボーダー (rgba(255, 255, 255, 0.08))、そして一つの鮮やかなアクセントカラー。 - クリーンアーキテクチュアルライトBento: 鮮明なオフホワイトキャンバス (
#F8F9FA) に純白の磁器タイル、ヘアラインディバイダー (rgba(0, 0, 0, 0.06))、そして深いチャコールタイポグラフィ。
- モダンマットダークBento: 黒曜石/スレート背景 (
Bentoグリッド品質ゲート — 必須
Bentoグリッドページを完成と呼ぶ前に、最初のビューポートが厳選された非対称なモジュラ構成として視覚的に読み取れる必要があります。 ユーザーがこのスタイルを選択した場合、同一カード（アイコン+タイトル+段落）による均一なグリッドは直接的な不合格であり、汎用的なテンプレートの手抜きを表します。
成功したBentoグリッド実装は、以下のすべてを示します:
- 明確な非対称な視覚的重み: グリッドは明確な焦点階層を持ちます: 主要メッセージを伝える正確に1つの支配的なヒーロータイル（2x2または2x1列にまたがる）、1〜2つの中程度のセカンダリタイル、および2〜3つのコンパクトなターシャリタイル。
- 多様な内部タイル構造: すべてのタイルは、特定のコンテンツに合わせた独自の内部レイアウトを持ちます。タイル1はインタラクティブなコードブロック、タイル2はアクティブなトグルウィジェット、タイル3はビジュアルプレビューや図、タイル4はライブメトリック読み出しである可能性があります。タイル間で同一の繰り返しレイアウトは不合格です。
- 統一された空間リズムとガター配置: タイルの境界線は、一貫したCSS Grid（例: 3列または4列）に沿って厳密に配置され、均一なガター（16px〜24px）と一致するコーナー曲率（20px〜28px）を持ちます。
- 意図的なモバイル再構成: モバイルビューポートでは、マルチカラムBentoが、コンテンツをクリップしたり不自然な水平オーバーフローを引き起こしたりすることなく、論理的でコンテンツ優先のシングルカラムに折りたたまれます。
- 読み取り可能な内部階層: 各タイルには明確で簡潔な見出し（18px〜24px）と高コントラストのコンテンツがあり、小さなボックスに圧縮された小さなテキストの壁を避けます。
最初のビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読まずに、支配的なヒーロータイル、多様な内部タイル表現、および統一されたグリッド配置を特定します。すべてのタイルが同一に見える場合は、グリッド階層を再設計します。
明示的なBentoレイアウト例外 — 非対称タイルが推奨されます
Bento固有のオーバーライド: 過剰なカードやダッシュボードの乱雑さに対する普遍的な手抜き防止警告は、ここではマルチタイルレイアウトの禁止として解釈されてはなりません。本物のBentoグリッドは基本的にモジュール式で区画化されており、各コンパートメントが異なる料理を提供する日本の弁当箱のように機能します。
- 許可されるレイアウト処理: 非対称グリッド列/行スパン (
grid-column: span 2; grid-row: span 2;)、微妙なカードホバー浮上、埋め込みインタラクティブミニコントロール（トグル、コードタブ）、アクティブタイル上のアンビエントエッジグロー。 - 手抜き防止境界: Bentoタイル内でのカード内カードのネストは禁止。タイルはすでに情報コンテナです。内部構造には、別のカードをネストするのではなく、タイポグラフィ階層、ディバイダー、スペーシングを使用します。
- 手抜き防止の解釈: Bentoレイアウトは、カードの数ではなく、コンテンツの多様性、情報密度、読み取り階層で評価します。均一な機能グリッドは手抜きです。厳選された非対称なBento構成は本物のデザインです。
タイポグラフィとタイプライティング
現代的で洗練されたサンセリフ: DM Sans、Manrope、Inter、またはシステムサンセリフ。プライマリヒーロー見出し: 28〜44 px（ウェイト700）。タイルタイトル: 18〜22 px（ウェイト600）。本文: 14〜15 px。キャプション/タグ: 12〜13 px。本文は簡潔でスキャン可能に保ちます。
カラー方向性
- ダークモード（デフォルトモダンマット）:
- キャンバスベース: 黒曜石ディープスレート (
#0B0D10)。 - タイル背景: 浮上スレート (
#15191E)。 - プライマリタイポグラフィ: 鮮明なポーセリン (
#F4F4F6)。 - セカンダリ/ミュートテキスト: バランスの取れたクールグレー (
#9CA3AF— WCAG AA 4.5:1合格)。 - ヘアラインボーダー: 半透明白色ストローク (
rgba(255, 255, 255, 0.08))。
- キャンバスベース: 黒曜石ディープスレート (
- ライトモード（クリーンアーキテクチュアル）:
- キャンバスベース: 鮮明なオフホワイト (
#F8F9FA)。 - タイル背景: 純白磁器 (
#FFFFFF)。 - プライマリタイポグラフィ: 深いチャコールインク (
#111827)。 - セカンダリ/ミュートテキスト: スレートグレー (
#6B7280— WCAG AA 4.5:1合格)。 - ヘアラインボーダー: 半透明ダークストローク (
rgba(0, 0, 0, 0.08))。
- キャンバスベース: 鮮明なオフホワイト (
- ブランドアクセント: ハイコントラストなシグネチャカラー（例: エレクトリックバイオレット
#8B5CF6、シアン#06B6D4、エメラルド#10B981）で、ダークおよびライトのタイル塗りつぶしの両方に対して最低3:1のコントラストを満たします。 - テーマ結合と衝突防止ルール: キャンバス、タイル表面、タイポグラフィ、ボーダーは、同期したペアで適応する必要があります。ダークモードに切り替えるときはテキストを明るくし、ライトモードに切り替えるときはテキストを暗くする必要があります。暗いタイルに暗いテキスト (
#111827) や、明るいタイルに白いテキスト (#FFFFFF) を許可しないでください。
レイアウトとジオメトリ
CSS Grid: grid-template-columns: repeat(3, 1fr) または repeat(4, 1fr)。ギャップ: 16px〜24px。カード半径: 20px〜28px。すべてのタイル境界は、水平および垂直のグリッドトラックに沿ってフラッシュに配置する必要があります。
表面、奥行き、テクスチャ
- Bentoタイル: 微妙なヘアラインストローク (
1px solid var(--taste-bento-border)) とソフトなアンビエントドロップシャドウ (0 8px 24px rgba(0, 0, 0, 0.12)) を備えたソリッド背景。 - ホバーインタラクション: 微妙な浮上 (
transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18))。
コンポーネント構造とインタラクション
- ヒーロータイル (2x2 または 2x1): 主要な価値提案、リッチなビジュアルまたはライブコードプレビュー、目立つCTA。
- インタラクティブアクションタイル: 統合トグル、クイックフィルター、またはコピー可能なコマンドブロック。
- メトリック/ステータスタイル: 具体的なラベルと実際のデータを持つクリーンな表形式の数値。
- ショーケースタイル: 高忠実度スクリーンショット、アセットプレビュー、またはアーキテクチャ図。
モーション
140〜220 msのスムーズなイーズアウト。ホバー時に控えめなタイル浮上。複数のタイルにわたって同時に気を散らす競合するアニメーションはありません。
オプションの Anime.js v4 レシピ
- モーションの決定: 段階的な微妙なタイルエントランスまたはスムーズなホバー浮上。
- 開始時間: 180ms（0 = 即時）。タスクとユーザー設定に合わせて調整。
- 避けるべきこと: タイルの反転、不安定なスケーリング、フローティングループによる気晴らし。
- 依存関係: デフォルトはCSS/ネイティブ。要求されたインタラクションが正当化される場合のみ、Anime.js v4を使用。可能な場合はTaste Engineの
references/motion-engine.mdに従う。スタンドアロンスキルは上記のモーション低減および装飾的ループ無しの原則に従う。
UIライティングとマイクロコピー
直接的で、パンチがあり、情報豊かに。例: 「Instant deployment」「Zero configuration」「48ms latency」。漠然としたバズワード（「Next-gen synergy」など）は避ける。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ダークモードデフォルト値 | ライトモードデフォルト値 |
|---|---|---|
--taste-bento-bg | #0b0d10 | #f8f9fa |
--taste-bento-surface | #15191e | #ffffff |
--taste-bento-text | #f4f4f6 | #111827 |
--taste-bento-text-muted | #9ca3af | #6b7280 |
--taste-bento-border | 1px solid rgba(255, 255, 255, 0.08) | 1px solid rgba(0, 0, 0, 0.08) |
--taste-bento-radius | 24px | 24px |
--taste-bento-gap | 20px | 20px |
--taste-bento-shadow | 0 8px 24px rgba(0, 0, 0, 0.25) | 0 8px 24px rgba(0, 0, 0, 0.06) |
--taste-bento-accent | #8b5cf6 | #7c3aed |
--taste-bento-font-body | DM Sans, Manrope, system-ui, sans-serif | DM Sans, Manrope, system-ui, sans-serif |
--taste-bento-motion-duration | 180ms | 180ms |
トークンは方向性を表し、すべてのパレット/プラットフォームにコピーペーストで保証されるものではありません。プロジェクトレベルで --taste-bento-* を定義し、カラーコントラストを確保し、リテラル値を散りばめるのではなく、テーマトークンを介して適応させます。
ヒーロー構成（最初のビューポート全体）
公開ポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面分のヘッダー+ヒーロー構成を使用します。ベースの高さは min-height: 100svh で 100vh フォールバックを使用し、実際のヘッダーがノーマルフローにある場合のみそれを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張させます。これをプライベートダッシュボードや他のタスク画面に適用しないでください。ユーザーの直接オーバーライドが優先されます。スタイル固有の方向性: 上部セクションをヒーローBentoグリッドとして配置し、主要な製品ストーリーが主要な2x2タイルを占有し、それをサポートする証拠が周囲を取り囲むようにします。単に高さを埋めるために、最初のビューポートに8つの小さなカードを強制しないでください。ルーターの references/hero-layout.md が存在する場合はそれに従います。スタンドアロン使用も同じレスポンシブおよび手抜き防止の原則に従います。
スタイル固有の品質ゲート
- すべきこと: ヒーロータイルの明確な視覚的優位性を確認。すべてのタイルが異なる内部レイアウトを持っていることを確認。モバイルでのグリッド崩壊をチェック。一貫したギャップ間隔を維持。ダーク/ライトモード切り替えのコントラストを確認: キャンバス、タイル表面、タイポグラフィ、ボーダーが結合ペアで切り替わり、WCAG AA（最低4.5:1）に合格することを確認。
- すべきでないこと: 同一の繰り返し3カードまたは4カードテンプレートを生成しない。タイル内でのカードのネストを避ける。読み取れない小型チャートや偽のメトリックラベルを避ける。暗いタイル上の暗いテキスト、白いタイル上の白いテキスト、または見えないボーダーなどのテーマ衝突を許可しない。
- デスクトップとモバイルの一貫性、可視キーボードフォーカス (
:focus-visible)、ローディング、空、無効、エラー、成功状態、モーション低減動作 (prefers-reduced-motion) を確認。 - スタイル固有の仮定を無関係なプロジェクトに注入しないでください。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に名前付けします。
普遍的な手抜き防止ゲート（自己完結型）
すべての要素はその場所に値する必要があります。装飾よりもコンテンツ。不確実性を装飾しないでください。 残高、メトリック、 testimonial、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、成功確認を発明しないでください。代わりに、正直な空/ローディング/エラー状態を使用してください。デモデータは、要求され、明示的にラベル付けされている場合にのみ許容されます。
装飾的なカード内カードレイヤーを追加しないでください。ネストされた表面は、明確なインタラクションまたは情報境界を表す必要があります。自動生成された3機能グリッド、4統計ダッシュボード、偽のヒーロークレーム、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、単にビューポートを埋めるためのランダムループを避けてください。タイポグラフィ、スペーシング、配置、ディバイダーを使用してグループ化することを優先します。同等のピアには意図的な視覚的バランスが必要です。
手抜き防止コピーライティング: 汎用的な「Unlock your potential」「Experience the future」「Supercharge your workflow」「seamless」という主張や、翻訳された同等物は使用しないでください。見出しは実際のコンテンツを伝え、CTAはアクションを名前付け、空/エラー/成功テキストは実際の状態と次のステップを説明する必要があります。偽の緊急性、でっち上げられたカウント、曖昧なAI誇大広告、不必要な絵文字、アクセスできないすべて大文字の壁を避けてください。真実を変更せずに、このスタイルとユーザーの言語に合わせて表現を適応させてください。
テーマとモードのコントラスト整合性: ユーザーがダークモードまたはライトモードを要求した場合（またはテーマスイッチャーを構築した場合）、背景色と前景色は、すべての表面、テキスト、ボーダー、入力、セマンティックバッジにわたって同期ペアで反転する必要があります。暗い背景に黒いテキスト、白い背景に白いテキスト、または読み取れない低コントラストのステータスピルを決して残さないでください。すべての状態はWCAG AAコントラスト（本文/通常テキストは最低4.5:1、大きな見出しとインタラクティブ境界は3:1）を満たす必要があります。
レスポンシブとモーション: モバイルを意図的に構成し、長いラベル、フォーカス状態、アクセシブルなコントラストをチェックします。流行のレイアウトに合わせてテキストをクリップしないでください。デフォルトは静的。意味のあるインタラクションにモーションを使用し、モーション低減設定を尊重し、実際の状態なしにバウンス/フローティング/パルス装飾を避けてください。
クリティカル/高重要度の調査結果は完了をブロック: 偽造されたステータス/データ、壊れたアクション、アクセスできない/クリップされたコントロール、誤解を招くコピー、テーマコントラストの衝突、または重大なモバイル障害は修正する必要があります。実際に検証されたものを報告し、実行されなかったテストを主張しないでください。
美学拒否ではない: 表現力豊かな色、影、グラデーション、カードレイアウト、装飾処理は、選択された美学の意図的な部分であり、ユーザビリティチェックに合格する場合、正当です。サイレントにミニマリズムを強制しないでください。
手抜き防止: スタイル固有
厳選された構成であり、自動生成されたカードグリッドではない。
- 拒否: 同一カードの均一グリッド、カード内のネストされたカード、単位のない偽のメトリック、明確な意味のないプレースホルダーアイコン、CSSグリッドのバランスを取るためだけに追加された空のタイル、およびテキストがタイル表面に対して読み取れないままになるダーク/ライトモードのカラー衝突。
- 代わりに: 非対称の重みとスキャン可能な見出しを使用して、実際の個別の機能またはユーザーアクションに基づいて各タイルを設計します。
- コピーチェック: すべてのタイル見出しは、実際の機能的な情報を伝える必要があります。説明はタイルの目的を明確に述べる必要があります。CTAテキストはアクションに名前を付けます。
品質保証チェックリスト
- 明確な非対称なヒーロータイル優位性
- すべてのタイルで異なる内部レイアウト
- 一貫したCSS Grid配置とガター
- モバイルビューポートでのシングルカラム崩壊
- ダーク/ライトモードのカップリングとコントラスト（WCAG AA 4.5:1）
- キーボードフォーカス (
:focus-visible) - ローディング、空、エラー、無効、成功状態
-
prefers-reduced-motionに従ったモーション低減 - 偽装データやメトリックなし
- すべてのCTAは実際のアクションを記述
- スタイルは選択された場合のみ適用