yafa-ui-dashboard

Yafa-UI：ダッシュボード

精密な分析機器のように感じられるダッシュボードを作成します。落ち着きがあり、明るく、情報が豊富で、親しみやすく、すばやく情報を把握できるものにします。このシステムの階層構造、形状、色の配分、レスポンシブな動作を適用しながら、ホスト製品のブランドとフレームワークを維持します。

関連するリファレンスを読む

• シェル、タイポグラフィ、形状、カード、テーブル、インタラクションの作業については、references/dashboard-visual-system.md を読みます。
• ルートのアクセントカラー、KPI の色、チャートの系列、ステータスの色、サイドバーのアイコンカラーを選択または確認するときは、references/color-system.md を読みます。
• アイコンやスキルマークを追加、置換、サイズ変更、色変更するときは、references/icon-system.md を読みます。
• レイアウト、ナビゲーション、フィルター、チャート、テーブル、オーバーレイ、画面サイズに応じた動作を変更するときは、references/responsive-adaptation.md を読みます。
• デザインまたは実装のレビューを行う場合は、references/review-checklist.md も読みます。

これらの不変条件を維持する

• 新規に完全なダッシュボードを構築する場合、またはこのパターンに対応するホストシェルを構築する場合は、4 つのレイヤーを作成します。白いサイドバー、コンパクトな白いトップバー、コンパクトなページ識別／フィルターバー、そして淡い #f8fafd の分析キャンバスです。既存のホストシェル内では、その外観を維持し、許可なくナビゲーションを置き換えるのではなく、ページ識別、分析の階層、サーフェス、レスポンシブな動作に Yafa-UI を適用します。
• Yafa-UI のシェル全体を新規に構築する場合は、ナビゲーションを意味的に明確で、ひと目で確認できるものにします。グループごとのアクセントを一貫させ、遷移先の色付きアイコンを一元登録し、非アクティブなラベルにはニュートラルカラーを使い、アクティブなルートには色合いと 3px の左レールを適用します。アイコンのみのレールでは、アイコンとアクティブなレールの両方に、そのルートのコントラストに配慮した uiStrong バリアントを使用します。新規構築時は、サイズ変更可能な 300px のレール、折りたたみ時の 64px のレール、アクセシブルなモバイルドロワーをデフォルトとします。既存のホストにナビゲーションの仕様がある場合は、それに合わせて調整します。
• サイドバーのヘッダーは簡潔に保ちます。プロダクト名は短くし、プロダクトにチーム、プロジェクト、ワークスペースのスコープが実際にある場合に限り、値のみのコンパクトなコンテキストセレクターを続けます。セレクターを新たに作ったり、位置やアイコンですでに意味が伝わる値について、タグラインや画面上に見えるコンテキストの小見出しを繰り返したりしないでください。
• 新規またはブランド設定のないダッシュボードでは、セルフホストした Inter を使用し、本文をコンパクトな 13–14px、ページタイトルを 15–16px／800、カードタイトルを 14–15px／600、主指標を 26–32px／700 にします。ホストに確立されたプロダクト書体がある場合はそれを維持し、サイズとウェイトでこの階層を再現します。読み込まずに Inter と指定してはいけません。
• 標準的な分析サーフェスは、白、1px のニュートラルな境界線、8px の角丸、ごく弱い、または影なし、任意の 3–4px のアクセントライン、16–20px の内側余白で構成します。
• 標準の KPI カードは、ページヘッダーの直後に配置します。装飾目的の右上 KPI アイコンは追加しません。簡潔で点線の下線が付いたタイトルをホバー／フォーカス／タップ時の説明表示に使い、控えめな区切り線、主となる値、比較情報を配置します。
• 指標の説明ツールチップはタイトルの横に配置し、ビューポートに応じて左右を切り替えます。狭い画面では上側を優先します。ツールチップがカードの値を覆う配置をデフォルトにしないでください。
• ヘッダーのコンテンツ領域が約 720px 以上あり、ローカライズ後のラベルが収まる場合は、ページ識別を左側に、実際に存在するグローバルな表示／時刻／期間のレンズ一式を右側に置き、1 行にコンパクトにまとめます。これがデスクトップの標準的な配置です。プラットフォームのレンズを新たに作らないでください。まずレールを折りたたみ、任意のテキストを省略し、二次的なレンズを開示し、ルート固有のフィルターをコンテンツ内に移動します。表示領域が本当に狭い場合に限り、オーバーフローさせたりタッチ対象を縮小したりせず、全体表示のグローバルレンズ一式を識別情報の下に配置できます。
• ニュートラルな基盤に、一貫したルート識別用の色の組み合わせ、意図的な多色分析パレット、意味に応じた状態色を適用します。すべてのチャート、KPI、サイドバーアイコンを青にしないでください。
• 通常のインターフェース操作とルート識別には、Lucide の名前付きアイコンを使用します。アイコンセットを混在させたり、絵文字で代用したり、似せたコントロールを手描きしたり、ラスター形式のインターフェースアイコンを生成したりしないでください。
• 通常のアクションは角丸の長方形にします。Query、Generate、Search、Reset、Clear、Edit、Add、およびフィルターのコントロールには 0–8px の角丸と、一貫した 32／36／40px の高さを使い、ピル型にはしません。
• ステータスは、意味に応じた 6px のドット、または小さなアイコンと、ニュートラルな通常テキストで表示します。ドットとラベルを、境界線付きまたは色付きのカプセルで囲まないでください。
• 数値の増減はコンパクトなカプセルで表示できますが、背景は白または透明にし、ニュートラルな境界線を使います。意味に応じた色を適用するのは、矢印、符号、数値、パーセントのテキストだけです。
• コンテンツは概要から根拠へと並べます。識別情報とレンズ、KPI の概要、主要な分析、補足チャートまたはランキング、最後に詳細な表または根拠を配置します。
• 画面幅が変わっても重要な情報を維持します。レイアウトはビューポート幅だけでなく、外枠を除いたコンテンツ領域に基づいて決定し、ページ全体の横スクロールを発生させないでください。
• デフォルト、ホバー、フォーカス、アクティブ、無効、読み込み中、データなし、一部エラー、全体エラーの各状態を用意します。バックグラウンド更新中も表示済みデータを維持し、有用なデータがまだない場合に限って全体をスケルトン表示にします。

ダッシュボードを構築または改修する

1. ホスト製品に既存のトークン、コンポーネント、ナビゲーションモデル、データ階層、アクセシビリティの規約があるかを確認します。確立されたブランドアイデンティティ、用語、必須ワークフローを優先し、タスクでより広範な再設計が明示的に求められていない限り、階層、分析画面、形状、レスポンシブな挙動には Yafa-UI を適用します。
2. ページを標準的な概要、情報量の多いリスト／データベース、またはキャンバス優先の作業環境に分類します。
3. コントロールをスタイリングする前に、分析情報を提示する順序をスケッチします。各パネルは、明確な問いにひとつ答えるようにします。
4. ルートの識別情報、サイドバーグループの識別情報、アイコン、グラフカテゴリの色について、集中管理されたレジストリを作成します。レンダリング順に基づいて色を割り当てないでください。
5. 既存のプリミティブで意図した効果を得られる場合はそれを組み合わせて構成し、そうでない場合は、ページ全体の要素を上書きするのではなく、小さなセマンティックコンポーネントを作成します。
6. レスポンシブ対応のマトリックスを適用し、320px、375–390px、768px、1024px、1440px で確認します。変更したブレークポイントの両側もテストします。
7. キーボードフォーカス、ドロワー／オーバーレイの Escape キー操作とフォーカス復元、タッチターゲット、200% ズーム、動きを抑える設定、長いラベル、オーバーフロー、すべてのデータ状態をテストします。
8. ホストリポジトリの対象を絞った型チェック、テスト、ビジュアル検証を実行します。このシステムから意図的に逸脱した点があれば報告します。

このスキルを適用する際、無関係な製品領域のスタイルを黙って変更しないでください。共通シェルの変更がそれらの領域に影響する場合は、そのページをビジュアルの参考資料として扱わずに、影響を確認してください。