ui-craft-dense-dashboard

UI Craft — 高密度ダッシュボード

あらかじめ定義された高密度スタイル：データ優先、キーボード優先、オペレーター向けツール。Bloomberg、Retool、Linear の課題ビュー、管理パネルが参考です。すべてのピクセルに役割を持たせます。

調整項目（固定）

• CRAFT_LEVEL = 7 — 洗練されていますが、過度に飾り立てません。オペレーターにとっては、見栄えより速度が重要です。
• MOTION_INTENSITY = 3 — マイクロモーションのみ。行のホバー、行のアクティブ時の色合い、インライン確認。テーブル領域でのスクロール表示アニメーションはありません。
• VISUAL_DENSITY = 9 — 4/8px の緊密なグリッド。余白にも役割を持たせます。

これらを Discovery で再度確認しないでください。ブランドアクセントとダーク／ライトの設定だけを確認してください。

スタイルの基準

• UI 用サンセリフ体と等幅フォントを組み合わせます。ID、ハッシュ、タイムスタンプ、コードにはすべて等幅フォントを使用します。
• セマンティックなパレットが必須です：成功、警告、危険、情報、およびブランドアクセント 1 色。
• すべての数値列に tabular-nums を指定し、識別子には等幅フォントを使用します。
• 4/8px の緊密なスペーシンググリッド。テーブルセルは px-3 py-2、ツールバーは gap-2。
• スパークラインを随所に使用します。カテゴリデータには横棒、時系列データには面グラフを使います。円グラフと 3D は使用しません。
• キーボードショートカットをインラインで表示します（⌘K、J/K、編集するには E）。
• 密度の高い UI 要素が適しています。パンくずリスト、タブ、ツールバー、フィルターチップを組み合わせて構いません。
• マイクロモーションのみ。行のホバー、行のアクティブ状態、インライン保存。表示時の段階的アニメーションは使用しません。

基本ルール（継承）

../ui-craft/SKILL.md のすべてのルールが適用されます。このファイルでは調整項目のデフォルト値を上書きし、以下にスタイル固有の指針を追加します。アンチスロップとクラフトのテストも引き続きすべて適用されます。

スタイル固有の上書き

タイポグラフィ

• UI：IBM Plex Sans または Inter、400 / 500。
• 等幅：ID、ハッシュ、タイムスタンプ、コード、バージョン番号、kbd には IBM Plex Mono または Geist Mono。
• 本文サイズ：デフォルトは 13-14px。高密度のテーブルでは 12px でも構いません。
• すべての数値列、メトリックカード、タイムスタンプ、所要時間に tabular-nums を指定します。
• ID とコードには font-variant-numeric: tabular-nums slashed-zero を指定します。
• 見出しはコンパクトにします。ページタイトルは 18-20px、セクション見出しは 14-15px、ウェイトは 500 です。

色（セマンティックなパレットが必須）

• ブランドアクセント：1 色。主要アクション、アクティブなタブ、選択行のアクセント色に使用します。
• セマンティックカラーには、彩度を抑えた OKLCH を使います（明度 50-60、彩度 ≤ 0.15）。
  • success oklch(60% 0.12 150)
  • warning oklch(72% 0.13 75)
  • danger oklch(58% 0.15 25)
  • info oklch(62% 0.12 240)
• 高彩度の色相は使用しません。ダッシュボードは画面上に 8 時間表示されるものです。
• ステータスドット、バッジのテキスト、チップのテキストにはセマンティックカラーを使い、背景はニュートラルな色に保ちます。

スペーシングとレイアウト

• 4/8px のスペーシングスケールを使います。5、7、9、10 は使用せず、4 / 8 / 12 / 16 / 24 に統一します。
• テーブルセル：デフォルトは px-3 py-2、超高密度の場合は px-2 py-1.5。
• ツールバー行：gap-2、コントロールは h-9、text-sm。
• サイドバー：細め（200-240px）にし、控えめな背景色とアイコン＋ラベルを使います。全面を暗色にしないでください。
• カード：p-4、角丸 8px。シャドウではなく 1px のボーダーを使います。

データ表示

• すべての数値列に tabular-nums を指定し、右揃えにします。
• すべての ID / ハッシュ / コミット / タイムスタンプに等幅フォントを使用します。
• トレンドを把握できるよう、行内にスパークラインを配置します。高さは 24-40px、単色にします。
• カテゴリチャートには横棒を使用します。時系列には 15% → 0% のフェードを使った面グラフを使用します。円グラフは使用しません。
• 増減値はセマンティックカラーのプレーンテキスト +12.5% で表示し、ピル型にしません。
• 空の状態では、1 行のヒントと作成用のキーボードショートカットを表示します。

UI 要素とナビゲーション

• パンくずリスト、タブ、サブツールバーを組み合わせるのが一般的で、問題ありません。
• フィルターチップ：アウトラインスタイルにし、削除可能な × を付けます。ピル型の塗りつぶしは使いません。
• グローバルコマンドパレット：ヘッダーの検索欄に ⌘K を表示します。
• 行のアクション：ホバー時にインラインアイコンを表示し、キーボードでも実行できるようにします。
• ページネーション：Page 3 of 42 というテキストに tabular-nums を指定し、J/K によるナビゲーションも用意します。

モーション

• 行のホバー：背景色をライトでは oklch(96% 0.002 250)、ダークでは oklch(20% 0.005 250) に 80ms で変化させます。
• アクティブ／選択中の行：ブランドアクセントを約 6% の不透明度で色付けし、左側に 2px のアクセントボーダーを付けます。
• インライン保存／確認：150ms のフェードとチェックアイコンの切り替えを行います。
• テーブル領域ではスクロールをトリガーとする表示アニメーションを使いません。長いリストでちらつきます。
• ソート矢印、フィルターの展開、列幅の変更は即時、または 100ms 未満にします。

先に読むリファレンスファイル

../ui-craft/references/ から以下を読み込みます。

• dashboard.md — 主要なリファレンス。メトリックカード、チャート、サイドバー、テーブル
• typography.md — tabular-nums、モノスペースフォントとの組み合わせ、スケール
• motion.md Rendering Performance — コンポジターパイプライン、レイヤー昇格、スクロール連動モーション
• responsive.md — タブレットとノートパソコンのブレークポイント、ツールバーの折りたたみ

inspiration.md（ランディングページ向け）、sound.md は読み飛ばします。

このスタイルで避けるべきパターン

• クロームやデータにセリフ体フォントを使わないでください。エディトリアルは別のバリアントです。
• 数値列にプロポーショナル数字を使わないでください。必ず tabular-nums を使います。
• 彩度の高い色は使わないでください。オペレーターツールではなく、一般消費者向けアプリの印象になります。
• すべての増減値に色付きピルを使わないでください。意味に応じた色のプレーンテキストを使います。
• 円グラフ、ドーナツグラフ、3Dグラフは使わないでください。常に禁止です。
• 時系列に縦棒グラフを使わないでください。面グラフまたは折れ線グラフを使います。
• メトリックカードの上部に、すべて同じ色のボーダーを付けないでください。
• 余白が大きすぎるカードグリッドは使わないでください。ゆったりしすぎていると感じたら、このバリアントには不適切です。
• サイドバー全体をダークにしないでください（よくある AI のパターン）。控えめな色合いにとどめます。
• テーブル領域でスクロールをトリガーにした表示や、順番にずらして表示するアニメーションを使わないでください。
• キーボードショートカットを隠さないでください。⌘K、行のショートカット、ヘルプの起動方法は必ず表示します。
• あいまいなローディング状態にしないでください。汎用スピナーではなく、列構造に合わせたスケルトン行を表示します。