このスキルは、ユーザーが明示的に選択した場合、または確認されたプロジェクト構成で指定された場合にのみ使用してください。説明のない新しいUIリクエストには、ユーザーの好みをここで決める代わりに、スタイルセレクタ（例： ）を使用してください。既存のブランド、アクセシビリティ、ユーザーのオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始する許可を与えるものではありません。
スタイルパック: エンタープライズ / データファースト
ID: enterprise
シグネチャ: 情報密度の高いオペレーショナルコックピット、表形式データの整列、セマンティックステータストークン、キーボード生産性、信頼性の高いワークフローアーキテクチャ。
これはスタイルパックであり、必須のデフォルトではありません。 明示的な選択または確認された該当プロジェクトスタイルの後にのみロードしてください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。3つの偽のKPI数値と装飾的な円グラフを含むコンシューマーカードテンプレートは、エンタープライズデータファーストとして認定されません。
適合性とトレードオフ
- 適している: B2B SaaSプラットフォーム、運用管理コンソール、クラウドインフラ監視ツール、フィンテック・トレーディングポータル、物流・サプライチェーンバックエンド、データ集約型プロダクティビティツール。
- 注意が必要: ナラティブなテンポと感情的なビジュアルブランディングが密度の高い表形式スキャンよりも優先される、消費者向けマーケティングランディングページ。
- 参考方向性:
- モダンクラウドコンソール (Linear / Stripe / Vercel スタイル): シャープなスレートニュートラルベース（ダーク
#0F1117またはライト#F9FAFB）、コンパクトな36pxテーブル行、タブラーニュメラル（font-variant-numeric: tabular-nums）、控えめなヘアラインディバイダー（#E5E7EBまたは#262933）、セマンティックステータストークン。 - 高密度オペレーションデスク: クリーンなホワイトデスク、コンパクトな32px行、キーボードショートカット（
⌘K）を備えた検索フィルターバー、固定テーブルヘッダー、レスポンシブなマスター/詳細ペイン。
- モダンクラウドコンソール (Linear / Stripe / Vercel スタイル): シャープなスレートニュートラルベース（ダーク
エンタープライズデータ忠実度ゲート — 必須
エンタープライズページを完了と呼ぶ前に、開始ビューポートが機能的で密度が高くプロフェッショナルなデータコックピットとして視認できる必要があります。 ユーザーがこのスタイルを選択した場合、装飾的なメトリクスカードとスキャン可能な表構造がゼロの特大コンシューマーテンプレートは直接 不合格（FAIL） です。
成功するエンタープライズデータファースト実装は、すべて の以下を示す必要があります。
- 情報密度の高い表形式アーキテクチャ: コアレコードとエンティティは、構造化されスキャン可能なデータテーブルまたはコンパクトなマスター/詳細リストで提示され、一貫した行の高さ（32px–40px）と明示的な列ヘッダーを持ちます。
- タブラーニュメラルとフラッシュ配置: すべての数値、金融金額、メトリクス、タイムスタンプは
font-variant-numeric: tabular-numsを適用します。数値列は厳密に右揃えに配置し、テキスト列は左揃えに配置します。 - 判読可能なコントラストを持つセマンティックステータストークン: ステータスインジケーター（正常、低下、失敗、保留中）は、調整されたセマンティックトークンピルを使用し、暗いアクセシブルテキストをソフトな背景色に重ねます（例：成功: 背景
#ECFDF5にテキスト#065F46、WCAG AA 4.5:1 をパス）。 - 生産性向上のためのアフォーダンスとショートカット: 検索バーにはキーボードトリガーヒント（
⌘Kまたは/）があり、テーブルヘッダーにはソートインジケーター（▲/▼）があり、レコード選択時にバッチアクションバーが表示されます。 - 真実の状態完全性: テーブルには実際のページネーションバー（
1–25件 / 全1,420件 を表示を表示）、レスポンシブな水平スクロール処理、専用の空/ローディング/エラー状態が含まれます。
ファーストビューポートテスト: デスクトップスクリーンショットで、ページタイトルを読まずに、密度の高いデータテーブル、ソート可能なヘッダー、フィルターバー、タブラーニュメラルを特定します。大きな空のカードがあるコンシューマーマーケティングページのように見える場合は、機能的な運用ビューとして再構築してください。
明示的なエンタープライズ密度例外 — データテーブルは必須
エンタープライズ固有のオーバーライド: ダッシュボードの乱雑さや複数のメトリクスボックスに対するユニバーサルアンチスロップの注意事項は、ここではデータテーブル、フィルターツールバー、ステータスインジケーターを隠すための指示として解釈してはなりません。本物のエンタープライズソフトウェア（Stripe、Datadog、AWS、Bloomberg）では、密度の高いスキャン可能なデータが主要なインターフェース要件です。
- 許可されるエンタープライズ処理: コンパクトなデータテーブル（32px–40px行）、複数列メタデータグリッド、フィルターツールバー、キーボードショートカットバッジ付き検索バー、バッチアクションバー、セマンティックステータスピル。
- アンチスロップ境界: 偽の収益メトリクス、軸スケールのない装飾的なミニスパークライン、またはゼロの運用データを伝えるアニメーション円グラフを決して発明しないでください。実際のデータフィールド、空の状態、真のステータスインジケーターは必須です。
- アンチスロップ解釈: エンタープライズレイアウトは、スキャン可能性、情報密度、タスク効率 で評価し、必要な運用コントロールを剥ぎ取ろうとしないでください。作業を高速化する表形式の密度は、本物のデザインです。
タイポグラフィとタイプライティング
ニュートラルで判読性の高いUIサンセリフ: Inter、Source Sans 3、SF Pro、またはシステムサンセリフ。識別子とハッシュ用のモノスペース: JetBrains Mono またはシステムモノスペース。ボディ＆テーブルセル: 13–14 px（行間 1.45）; 列ヘッダー: 12 px 大文字（ウェイト 600、トラッキング 0.05em）; メトリクス: 20–28 px、タブラーフィギュアを使用。
カラーディレクション
- ライトモード（モダンクラウドコンソール）:
- キャンバスベース: ソフトニュートラルスレート (
#F9FAFB)。 - サーフェス/テーブル: ピュアホワイト (
#FFFFFF)。 - プライマリインク/タイポグラフィ: ディープスレート (
#111827)。 - セカンダリ/マイルドテキスト: バランススレート (
#6B7280)。 - ヘアラインボーダー:
#E5E7EB。 - ホバー行ハイライト:
#F8FAFC。
- キャンバスベース: ソフトニュートラルスレート (
- ダークモード（クラウドコックピット）:
- キャンバスベース: ディープスレート (
#0F1117)。 - サーフェス/テーブル: エレベーテッドチャコール (
#161922)。 - プライマリインク/タイポグラフィ: クリスプスレート (
#F9FAFB)。 - セカンダリ/マイルドテキスト: バランスグレー (
#9CA3AF)。 - ヘアラインボーダー:
#232733。 - ホバー行ハイライト:
#1F2430。
- キャンバスベース: ディープスレート (
- プライマリブランド: ディープエンタープライズブルー（ライト
#2563EB/ ダーク#3B82F6）。 - セマンティックステータストークン（両モードでWCAG AA調整済み）:
- 成功（正常）: ライト:
#065F46を#ECFDF5に（境界線#A7F3D0）; ダーク:#34D399をrgba(16, 185, 129, 0.15)に（境界線rgba(16, 185, 129, 0.35)）。 - 警告（低下）: ライト:
#92400Eを#FEF3C7に（境界線#FDE68A）; ダーク:#FBBF24をrgba(245, 158, 11, 0.15)に（境界線rgba(245, 158, 11, 0.35)）。 - エラー（失敗）: ライト:
#991B1Bを#FEE2E2に（境界線#FECACA）; ダーク:#F87171をrgba(239, 68, 68, 0.15)に（境界線rgba(239, 68, 68, 0.35)）。 - ニュートラル（保留中 / 非アクティブ）: ライト:
#374151を#F3F4F6に（境界線#E5E7EB）; ダーク:#9CA3AFをrgba(156, 163, 175, 0.12)に（境界線rgba(156, 163, 175, 0.25)）。
- 成功（正常）: ライト:
- テーマ結合ルール: キャンバス、テーブル、テキストインク、セマンティックバッジはすべて一緒に適応する必要があります。ダークモードのテキストをライトテーブルに、またはライトモードのダークグリーンテキストをダークコンソール背景に表示しないでください。
レイアウトとジオメトリ
4pxベースリズム、8/12/16pxの密度インクリメント、控えめな4px–6pxの角丸、一貫したテーブル行の高さ（デフォルト36px、コンパクト32px）。マスター/詳細レイアウトはデスクトップで柔軟に分割され、モバイルでクリーンにスタックします。
サーフェス、奥行き、テクスチャ
サーフェスはクリーンでフラット、境界線駆動です。エレベーションシャドウは、フローティングメニュー、ツールチップ、モーダルダイアログに厳密に予約されます（0 4px 12px rgba(0, 0, 0, 0.08)）。データグリッドに装飾的なガラスやクレイエフェクトは使用しません。
コンポーネントのアナトミーとインタラクション
- データテーブル: 固定ヘッダー行、ゼブラまたはホバー行ハイライト（
#F8FAFC）、数値列は右揃え、テキスト列は左揃え。 - フィルター＆検索バー:
⌘Kバッジ、複数選択フィルタードロップダウン、日付範囲ピッカーを統合した検索入力。 - セマンティックステータスバッジ: 色付きインジケータードットとアクセシブルテキストを備えたコンパクトな角丸ピル。
- ページネーションフッター: 現在のページ範囲、ページあたりのアイテム数セレクター、次へ/前へボタン。
モーション
最小限の100–140ms線形フィードバックトランジション。データ更新やテーブルフィルタリング中は、強固な安定性とモーションゼロを優先します。
オプションのAnime.js v4レシピ
- モーション決定: データ更新時またはドロワースライディングトランジション時の、控えめな行ハイライトフラッシュ。
- 開始時間: 120ms（0 = 即時）。タスクとユーザー設定に合わせて調整。
- 避けるべきもの: 装飾的なページトランジション、跳ねるようなチャート、クエリー高速時のスピニングローダー。
- 依存関係: デフォルトではCSS/ネイティブ。利用可能な場合はTaste Engineの
references/motion-engine.mdに従い、スタンドアロンスキルは上記の動き抑制と装飾ループ禁止の原則に従います。
UIライティングとマイクロコピー
客観的で正確、監査に適したもの。例: 「1,420件のレコードが見つかりました」、「ステータスでフィルター」、「CSVをエクスポート」、「最終更新: 2分前」。曖昧な会話型AIスローガンは避けてください。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ライトモードデフォルト | ダークモードデフォルト |
|---|---|---|
--taste-ent-bg | #f9fafb | #0f1117 |
--taste-ent-surface | #ffffff | #161922 |
--taste-ent-ink | #111827 | #f9fafb |
--taste-ent-muted | #6b7280 | #9ca3af |
--taste-ent-border | 1px solid #e5e7eb | 1px solid #232733 |
--taste-ent-radius | 6px | 6px |
--taste-ent-row-height | 36px | 36px |
--taste-ent-accent | #2563eb | #3b82f6 |
--taste-ent-font-body | Inter, -apple-system, system-ui, sans-serif | Inter, -apple-system, system-ui, sans-serif |
--taste-ent-motion-duration | 100ms | 100ms |
トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストが保証されているわけではありません。--taste-ent-* をプロジェクトレベルで定義し、カラーコントラストを確保し、リテラル値を散らかすのではなくテーマトークンを介して適応させてください。
ヒーローコンポジション（フルファーストビューポート）
公開ポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面のヘッダー+ヒーローコンポジションを使用します。ベースの高さは min-height: 100svh とし、100vh フォールバックを使用し、実際の ヘッダーが通常フローにある場合のみその高さを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張できるようにします。これをプライベートダッシュボードや他のタスク画面に適用しないでください。直接のユーザーオーバーライドが優先されます。スタイル固有の方向性: 開口ビューを作業用コックピットサマリーで固定します: 主要フィルターバー、ライブデータ概要、即時の運用アクション。コンシューマーカードの膨張と空のギャップを避けてください。ルーターの references/hero-layout.md があれば参照してください。スタンドアロン使用でも同じレスポンシブとアンチスロップの原則に従います。
スタイル固有の品質ゲート
- すべきこと: タブラーニュメラル（
tabular-nums）と数値データの右揃えを確認する。セマンティックバッジがライトモードとダークモードの両方でWCAG AAコントラストを満たしていることを確認する。完全なページネーションと検索フィルターバーを提供する。固定テーブルヘッダーをテストする。ダーク/ライトモードの切り替えを確認し、すべての行、境界線、テキストが同期ペアで切り替わるようにする。 - してはいけないこと: データテーブルをコンシューマーカードグリッドに置き換えない。拡大縮小されていない装飾的なスパークラインを避ける。バックエンドの対応物がない偽のメトリクス数値を発明しない。ダーク背景にダークグリーンテキスト、またはダークテーブル行にダークテキストなどのテーマコントラストの衝突を避ける。
- デスクトップとモバイルの一貫性、可視のキーボードフォーカス（
:focus-visible）、ローディング、空、無効、エラー、成功状態、動き抑制動作（prefers-reduced-motion）を確認する。 - スタイル固有の仮定を無関係なプロジェクトに注入しない。スタイルを組み合わせる場合、プライマリスタイルと借用した機能を明示的に名前付ける。
ユニバーサルアンチスロップゲート（自己完結型）
すべての要素はその場所を獲得しなければなりません。装飾よりもコンテンツ。不確実性を装飾しない。 残高、メトリクス、お客様の声、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、成功確認を発明しないでください。代わりに、正直な空/ローディング/エラー状態を使用してください。デモデータは、要求され、かつ明示的にラベル付けされている場合にのみ許容されます。
装飾的なカード内カードレイヤーを追加しないでください: ネストされたサーフェスは、明確なインタラクションまたは情報境界を表す必要があります。自動生成された3機能グリッド、4統計ダッシュボード、偽のヒーロークレーム、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、ビューポートを埋めるためだけのランダムなループを避けてください。タイポグラフィ、スペーシング、配置、分割線でグループ化することを優先してください。同等のピアには意図的な視覚的バランスが必要です。
アンチスロップコピーライティング: 一般的な「あなたの可能性を引き出す」、「未来を体験する」、「ワークフローを強化する」、「シームレス」などの主張、またはそれらの翻訳同等物は使用しないでください。見出しは実際の内容を伝え、CTAはアクションを名付け、空/エラー/成功テキストは実際の状態と次のステップを説明する必要があります。偽の緊急性、でっち上げられた数値、漠然としたAI誇大広告、不必要な絵文字、アクセス不能なオールキャップスの壁を避けてください。表現をこのスタイルとユーザーの言語に適応させ、真実を変えないでください。
テーマとモードのコントラスト整合性: ユーザーがダークモードまたはライトモードを要求した場合（またはテーマスイッチャーを構築した場合）、背景色と前景色は、すべてのサーフェス、テキスト、境界線、入力、セマンティックバッジにわたって同期ペアで反転する必要があります。黒のテキストを暗い背景に、白のテキストを白の背景に、または読み取り不可能な低コントラストのステータスピルを決して残さないでください。すべての状態はWCAG AAコントラスト（本文/通常テキストは最低4.5:1、大きな見出しとインタラクティブ境界は3:1）を満たす必要があります。
レスポンシブとモーション: モバイルを意図的に構成し、長いラベル、フォーカス状態、アクセシブルなコントラストを確認します。流行のレイアウトに合わせてテキストをクリップしないでください。デフォルトでは静的。意味のあるインタラクションにモーションを使用し、動き抑制設定を尊重し、実際の状態なしでバウンス/フローティング/パルス装飾を避けてください。
致命的/高重要度の所見ブロック完了: 偽造されたステータス/データ、壊れたアクション、アクセス不能/クリップされたコントロール、誤解を招くコピー、テーマコントラストの衝突、または重大なモバイル障害は修正する必要があります。実際に検証されたものを報告し、実行されなかったテストを主張しないでください。
美学の拒否権ではありません: 表現力豊かな色、影、グラデーション、カードレイアウト、装飾的な処理は、選択された美学の意図的な一部であり、ユーザビリティチェックに合格する場合、正当なものです。選択されたスタイルと矛盾しない限り、装飾を禁止しないでください。
[元のドキュメントはここで切り捨てられていますが、翻訳された内容は、上部の指示に従って、指定されたJSON構造でレンダリングするために提供された情報の完全で正確な表現です。]