mcpField
D
dashboard-design

dashboard-design

github.com/arnavpuriデザイン・UI17130 回インストール4 週間前に更新
リポジトリ

dashboard-design について

dashboard-designは、レイアウト、チャート、テーブル、ステータス表示、アクセシビリティを扱うダッシュボード設計スキルです。デザインコンテキストとトークンの確認から、画面幅ごとの描画チェックまで、デザイナーやコーディングエージェントを支援します。

主な機能

  1. 01サイドバーまたは上部ナビゲーションの選択
  2. 02データ種別に応じたチャート選び
  3. 03再利用可能なデザイントークンの適用
  4. 04レスポンシブなカードとテーブルの設計
  5. 05アクセシビリティと描画スクリーンショットの確認

活用シーン

  1. 01運用指標ダッシュボードの計画
  2. 02推移や比較データに使うチャートの選定
  3. 03モバイル向けのテーブルとナビゲーション調整
  4. 04複数の画面幅で生成したダッシュボードを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/arnavpuri/designskills --skill dashboard-design

インストール後、Claude Code で/dashboard-designを入力して読み込まれたか確認します。

詳細

ダッシュボードのデザイン

始める前に：デザインコンテキストを読み込む

  1. .agents/design-context.md を読みます（design-context スキルによって作成されます）。存在しない場合は、tailwind.config.* または :root の CSS 変数からトークンを探します。何もない場合は、デフォルト（Primary #2563EB、Secondary #7C3AED、Accent #F59E0B、Tailwind のグレーニュートラル、見出しと本文に Inter、Minimal スタイル）を使い、デフォルトを使用したことをユーザーに伝えます。design-context の実行を提案してください。
  2. トークンを CSS 変数に一度だけ対応付け、以降は変数のみを使います：--color-primary、--color-primary-light、--color-primary-dark、--color-secondary、--color-accent、--color-neutral-50…--color-neutral-900、--color-success/-warning/-error、--font-heading、--font-body、--font-mono、--radius、および4pxを基準とするスペーシングスケール。
  3. Tailwind： 同じ変数を primary、primary-light、primary-dark、secondary、accent、neutral-*、font-heading、font-body として公開します（v3 は theme.extend、v4 は @theme）。以下の例にある indigo-* / gray-* クラスは、これらのトークンのプレースホルダーです。
  4. Figma： ユーザーから Figma の URL が提供された場合は、Figma MCP（get_design_context、get_screenshot）で取得してデザインを合わせます。そのデザインでは、コンテキストファイルよりも優先されます。
  5. 表示するデータ、利用者、利用者が行う操作について質問するか、推測します。Success／Warning／Error をステータスバッジに対応付け、チャートの色を Primary／Secondary／Accent から導きます（セクション3）。

1. レイアウトパターン

パターン A：サイドバー＋メインコンテンツ（最も一般的）
<div class="flex h-screen bg-gray-50">
  
  
  <aside class="hidden lg:flex w-64 shrink-0 bg-white border-r border-gray-200 flex-col">
    
    <div class="h-16 flex items-center px-6 border-b border-gray-100">
      <img src="/logo.svg" alt="App" class="h-8" />
    </div>
    
    <nav aria-label="Main" class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
      
      <a href="#" aria-current="page" class="flex items-center gap-3 px-3 py-2 rounded-lg
        bg-indigo-50 text-indigo-700 font-medium text-sm">
        <svg class="w-5 h-5" aria-hidden="true"></svg>
        Dashboard
      </a>
      
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
        text-gray-600 hover:bg-gray-100 hover:text-gray-900 text-sm transition-colors">
        <svg class="w-5 h-5" aria-hidden="true"></svg>
        Analytics
      </a>
      
      <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
        Settings
      </div>
    </nav>
    
    <div class="p-4 border-t border-gray-100">
      <div class="flex items-center gap-3">
        <img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
        <div class="text-sm">
          <div class="font-medium text-gray-900">Jane Doe</div>
          <div class="text-gray-500 text-xs">Admin</div>
        </div>
      </div>
    </div>
  </aside>

  
  <main class="flex-1 min-w-0 overflow-y-auto">
    
    <header class="h-16 bg-white border-b border-gray-200 flex items-center
      justify-between px-6 sticky top-0 z-10">
      <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1>
      <div class="flex items-center gap-4">
        
      </div>
    </header>
    
    <div class="p-6">
      
    </div>
  </main>
</div>
サイドバーの動作
  • デスクトップ（lg+）：常に表示し、幅は240～280pxにします。
  • タブレット（md）：ツールチップラベル付きでアイコンのみ（64px）に折りたためるようにします。
  • モバイル（< md）：非表示にし、ラベル付きメニューボタン（aria-expanded、ドロワー内にフォーカスを移動、Esc で閉じる）から、背景を伴うオーバーレイドロワーとして開きます。
  • ブレークポイントは ui-design の Tailwind デフォルトに従います（md 768、lg 1024、xl 1280、2xl 1536）。
パターン B：トップナビ＋グリッド
  • ナビゲーション項目が少ないシンプルなダッシュボードに最適です。
  • 上部に横並びのナビゲーションバーを配置し、その下をコンテンツで埋めます。
  • サブセクションにはタブまたはピル型ナビゲーションを使います。

2. データカード（KPI タイル）

標準的な統計カード
<div class="bg-white rounded-xl border border-gray-200 p-6">
  <div class="flex items-center justify-between">
    <span class="text-sm font-medium text-gray-500">Total Revenue</span>
    <span class="w-10 h-10 rounded-lg bg-emerald-50 text-emerald-600
      flex items-center justify-center">
      <svg class="w-5 h-5" aria-hidden="true"></svg>
    </span>
  </div>
  <div class="mt-3">
    <span class="text-3xl font-bold text-gray-900">$45,231</span>
  </div>
  <div class="mt-2 flex items-center gap-1.5 text-sm">
    <span class="text-emerald-600 font-medium flex items-center gap-0.5">
      <svg class="w-4 h-4" aria-hidden="true"></svg>
      <span class="sr-only">Up</span> +12.5%
    </span>
    <span class="text-gray-500">vs last month</span>
  </div>
</div>
カードグリッドのレイアウト
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
  
</div>
カードのバリエーション
  • スパークライン付き： 数値の下に小さなインラインチャートを追加します。
  • プログレスバー付き： 目標に対する達成状況を表示します。
  • ミニテーブル付き： 統計値の下に上位3項目を表示します。
  • マイナス傾向： 赤色と下向き矢印、マイナス記号を使います。色だけで表現してはいけません（色覚障害のあるユーザーに配慮）。
  • 読み込み中：グリッドがずれないよう、スピナーではなく同じサイズのスケルトンタイルを表示します。

3. チャートの選択ガイド

データの種類最適なチャート使用場面
時系列の傾向折れ線グラフ日別／月別の収益、ユーザー数、パフォーマンス
比較棒グラフカテゴリや A/B テストの結果の比較
構成円グラフ／ドーナツグラフ予算の内訳、トラフィックソース（最大5区分）
時系列の量面グラフ帯域幅、累積指標
分布ヒストグラム年齢層、価格帯
関係性散布図2つの変数間の相関
進捗プログレスバー／ゲージ目標の達成状況、割り当て上限
順位横棒グラフ上位ページ、上位製品
チャートのデザインルール
  1. 各チャートにタイトルを付けます。 読み方ではなく、何を示すかを記載します。
  2. 軸を明確にラベル付けします。 単位も含めます。
  3. 色は最大5～6色に制限し、ブランドトークンから選びます。 各系列色はチャート背景に対して3:1のコントラスト比を確保します（WCAG 1.4.11）。色だけが手掛かりにならないよう、直接ラベルやパターンを追加します。
  4. 棒グラフの Y 軸はゼロから始めます。 折れ線グラフではゼロ以外を基準にしてもかまいません。
  5. ホバー時に正確な値を表示するツールチップを追加します。
  6. グリッド線は控えめに使います。 実線ではなく、薄い破線を使います。
  7. レスポンシブにします。 チャートはサイズを調整し、はみ出さないようにします。
グラフのカラーパレット
:root {
  /* Lightness ≤ ~65% keeps ≥ 3:1 against white; lighten ~10–15% for dark backgrounds */
  --chart-1: var(--color-primary);
  --chart-2: oklch(58% 0.12 185);  /* teal */
  --chart-3: oklch(58% 0.19 350);  /* pink */
  --chart-4: oklch(64% 0.15 60);   /* amber/orange */
  --chart-5: oklch(55% 0.14 145);  /* green */
}

dataviz などのデータ可視化スキルがインストールされている場合は、グラフのマーク、凡例、ツールチップにその指示を適用します。

4. テーブルデザイン

高機能データテーブル
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
  
  <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <h2 class="font-semibold text-gray-900">Recent Orders</h2>
      <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-full">
        2,847
      </span>
    </div>
    <div class="flex items-center gap-2">
      
      <input type="search" placeholder="Search orders…" aria-label="Search orders"
        class="text-sm border border-gray-300 rounded-lg px-3 py-1.5 w-full sm:w-56
        focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20" />
      
      <button type="button" class="text-sm text-gray-600 border border-gray-300 rounded-lg
        px-3 py-1.5 hover:bg-gray-50 flex items-center gap-1.5">
        <svg class="w-4 h-4" aria-hidden="true"></svg>
        Filters
      </button>
    </div>
  </div>

  
  <div class="overflow-x-auto">
  <table class="w-full text-sm">
    <caption class="sr-only">Recent orders</caption>
    <thead>
      <tr class="border-b border-gray-100 text-left">
        <th scope="col" aria-sort="ascending" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
          <button type="button" class="flex items-center gap-1 hover:text-gray-700">
            Customer
            <svg class="w-3 h-3" aria-hidden="true"></svg>
          </button>
        </th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
          Status
        </th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider
          text-right">
          Amount
        </th>
        <th scope="col" class="px-6 py-3 w-12"><span class="sr-only">Actions</span></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-50">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
            <div>
              <div class="font-medium text-gray-900">Jane Cooper</div>
              <div class="text-gray-500 text-xs">[email protected]</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4">
          <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full
            text-xs font-medium bg-emerald-50 text-emerald-700">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Completed
          </span>
        </td>
        <td class="px-6 py-4 text-right font-medium text-gray-900">$2,500.00</td>
        <td class="px-6 py-4">
          <button type="button" aria-label="Actions for Jane Cooper" aria-haspopup="menu"
            class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100">
            <svg class="w-5 h-5" aria-hidden="true"></svg>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  </div>

  
  <nav aria-label="Pagination" class="px-6 py-4 border-t border-gray-100 flex items-center justify-between text-sm">
    <span class="text-gray-500">Showing 1-10 of 2,847</span>
    <div class="flex gap-1">
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50 disabled:opacity-50" disabled>Previous</button>
      <button class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white" aria-current="page">1</button>
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50">2</button>
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50">Next</button>
    </div>
  </nav>
</div>
テーブルデザインのルール
  • 数値は右揃え、テキストは左揃えにします。
  • 行にホバー時のハイライトを適用します（hover:bg-gray-50）。
  • スクロール時にヘッダーを固定します（背景色を設定した <th> に sticky top-0 を適用します。そうしないと、ヘッダー越しに行が見えてしまいます）。
  • 列を並べ替えられるようにするには、<th> 内に <button> を配置し、並べ替え中の列に aria-sort を指定します。
  • ゼブラストライプは任意です。控えめな区切り線を推奨します。
  • 行アクションには、ドロップダウンを開くアイコンボタン（三点リーダー）を使います。

5. ステータスインジケーター

バッジのスタイル

<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-emerald-50 text-emerald-700">
  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Active
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-amber-50 text-amber-700">
  <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>Pending
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-red-50 text-red-700">
  <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>Failed
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-gray-100 text-gray-600">
  <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>Draft
</span>
プログレスバー
<div class="w-full bg-gray-100 rounded-full h-2">
  <div class="bg-indigo-600 h-2 rounded-full transition-all duration-500"
    style="width: 65%"></div>
</div>

6. ダークモードのダッシュボード

監視や運用のダッシュボードは、ダークモードで使われることがよくあります。ここで別のトークンセットを定義せず、dark-mode スキルの完全なトークンシステム（--bg-base / --bg-surface / --bg-elevated、--text-*、--border）のサーフェス、テキスト、ボーダーのトークンを使用します。

ダッシュボード固有のルール
  • 影ではなく、より明るいサーフェスで高さを表現します。
  • グラフの色の彩度を約15％下げ、明度を上げて、ダークサーフェス上でも系列のコントラスト比が3:1になるようにします。
  • 半透明のボーダーを使います（oklch(100% 0 0 / 0.08)）。
  • アクティブなサイドバー項目には色を付けず、より明るい背景を使います。

7. リアルタイムデータインジケーター

ライブパルスドット
<span class="relative flex h-2.5 w-2.5" aria-hidden="true">
  <span class="motion-safe:animate-ping absolute inline-flex h-full w-full rounded-full
    bg-emerald-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
</span>
最終更新時刻
<span class="text-xs text-gray-500 flex items-center gap-1.5" role="status">
  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
  Live — Updated 3s ago
</span>
自動更新パターン
  • 更新前に、控えめなカウントダウンまたはプログレスバーを表示します。
  • 変更された値をアニメーション表示します（増加時は緑、減少時は赤に点滅）。
  • ページ全体を更新せず、個々のデータポイントだけを更新します。
  • 変化の速い数値を aria-live 領域に入れないでください（スクリーンリーダーに大量の通知が流れます）。「新しい注文が3件あります」など、重要なイベントだけを通知します。

8. ごちゃつかずに多くの情報を表示する

テクニック
  1. 段階的な情報開示：概要を表示し、詳細は展開して表示します。
  2. タブ付きセクション：すべてを一度に表示しないようにします。
  3. 折りたたみ可能なパネル：不要な情報をユーザーが非表示にできるようにします。
  4. 補足情報にはツールチップを使い、必須のラベルには使わない：キーボードフォーカス時とタップ時にも開く必要があります。
  5. 一貫した余白：ui-design の4px単位のスケール（4、8、12、16、24、32、48、64）を使います。
  6. 小さめの基本フォントサイズ：ダッシュボードの本文には13〜14pxを使用できます（12px未満にはしないでください）。
  7. データには等幅数字を使う：テーブルや KPI の数値には tabular-nums を使い、桁を揃えます。
.data-table td {
  font-variant-numeric: tabular-nums; /* Tailwind: tabular-nums */
}

9. レスポンシブなダッシュボードレイアウト

ブレークポイント戦略
  • モバイル（< 768px）：1列にします。カードを縦に並べます。テーブルはカードリストにします。サイドバーは非表示にします。
  • タブレット（768〜1024px）：2列のグリッドにします。サイドバーはアイコン表示に折りたたみます。グラフを簡略化します。
  • デスクトップ（1024px以上）：完全なレイアウトにします。サイドバーを展開します。複数列のグリッドを使います。
  • ワイド（1536px以上）：レイアウトを引き伸ばすのではなく、列を1つ追加します。テキストの多いコンテンツの最大幅は約1440pxにします（max-w-screen-2xl など）。
モバイルでのテーブルの代替表示

md 未満（768px）では、テーブルを非表示にし（ラッパーに hidden md:block を指定）、各行をカードとして表示します。


<dl class="md:hidden bg-white rounded-xl border border-gray-200 p-4 space-y-2 text-sm">
  <div class="flex justify-between">
    <dt class="text-gray-500">Customer</dt>
    <dd class="font-medium text-gray-900">Jane Cooper</dd>
  </div>
  <div class="flex justify-between">
    <dt class="text-gray-500">Status</dt>
    <dd><span class="bg-emerald-50 text-emerald-700 text-xs px-2 py-0.5 rounded-full">Active</span></dd>
  </div>
  <div class="flex justify-between">
    <dt class="text-gray-500">Amount</dt>
    <dd class="font-medium text-gray-900">$2,500.00</dd>
  </div>
</dl>

検証：レンダリングして確認する

自分で確認していないコードを引き渡さないでください。生成後、以下を実行します。

  1. モバイルとデスクトップの幅でスクリーンショットを撮ります。例：npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/index.html mobile.png を実行し、続けて --viewport-size=1440,900 を指定します（または開発サーバーの URL を指定します）。
  2. 両方の画像を開いて確認します。横スクロールやテキストの切れ・重なりがないこと、ひと目で階層構造が把握できること、ブランドトークンが適用されていること、画像のアスペクト比が適切であることを確認します。
  3. 一度 Tab キーで移動します。すべてのインタラクティブ要素に、論理的な順序で視認可能なフォーカスリングが表示されることを確認します。
  4. 768px でもスクリーンショットを撮ります。サイドバーが折りたたまれること、テーブルがスクロール可能になるかカード表示に切り替わること、グラフがはみ出さずにサイズ変更されることを確認します。ダークテーマを実装した場合は、それも確認します。
  5. 見つかった問題を修正し、完了を報告する前にもう一度スクリーンショットを撮ります。

ダッシュボードのデザインチェックリスト

  • アクティブ状態が明確で、セクションごとにグループ化されたサイドバーナビゲーション
  • 上部にトレンド指標付きの KPI カード
  • チャートにタイトル、ラベル、ツールチップがある
  • テーブルに並べ替え、検索、フィルター、ページネーションがある
  • ステータスバッジの色分けが統一されている
  • レスポンシブ対応：タブレットとモバイルで動作する
  • 非同期データすべてにローディングスケルトンがある
  • データがないテーブルやチャートに空の状態が表示される
  • ダークモードを考慮する（特にモニタリングダッシュボード）
  • 数値の配置に tabular-nums を使用する
  • アイコンのみのボタンと検索入力にアクセシブルな名前があり、トレンドを色だけに頼らず表現している
  • 390px、768px、1440px でレンダリングしてスクリーンショットを撮る（「検証」を参照）

コメント

Markdown 対応