ダッシュボードデザインとは？
ダッシュボードデザインは、分析、収益、指標のインターフェースに関する実践的なデザインガイダンスをコーディングエージェントに提供するClaude Codeのスキルです。新しいダッシュボードの構築、既存画面の再設計、スクリーンショットの批評を行い、問題を深刻度順にランク付けできます。
このガイダンスは、リリース済みのダッシュボード画面127件、収益分析プロダクトの詳細な分解分析、実際の再設計プロセスから抽出されました。コード品質だけに焦点を当てるのではなく、エージェントがユーザーに実際に見えるものを評価できるよう、スクリーンショットによるQAまで含めて一連の作業を完了します。
このスキルは、KPIタイル、チャート、比較期間、順位付きリスト、フィルター、日付範囲ピッカー、インサイト、空の状態、レスポンシブレイアウト、スマートフォン向けナビゲーションなど、一般的なダッシュボード要素をカバーしています。仕様ではWebプロジェクト向けにTailwindとReactの用語を使用し、別のリファレンスではSwiftUIとSwift Chartsに相当するパターンを説明しています。
デザインの基本原則
このプロジェクトでは、推奨事項を次の4つの原則に基づいて整理しています。
- 第一印象: 各画面は、約3秒以内に1つの主要な問いに答えられるようにします。
- 静かさ: アクセントカラーは1色にし、補助要素はグレーで保ち、意味を伝える場合にのみ色を使います。
- 正直さ: インターフェース全体で値の整合性を保ち、推定値にはラベルを付け、サンプルが小さいのに劇的なパーセント変化を示すことは避けます。
- テキストより形: すぐに理解できるよう、チャート、バー、チップを優先し、定義はツールチップに配置します。
これらの原則は、具体的な変更につながります。選択中のKPIタイルには、単純な下線ではなく、淡い色付きの塗りと薄いリングを適用します。順位付きの行には、大きな色付き背景ではなく、細いシェアバーを使います。チャートの軸には、1,402のような扱いにくい値ではなく、0、1k、2kのような読みやすい丸めた目盛りを使います。
固定カラムではなくレスポンシブレイアウト
狭い中央カラムを基準に設計されたダッシュボードは、大型ディスプレイのスペースを無駄にします。ダッシュボードデザインは、ビューポートが広がったときに有用なカラムを追加し、小さな画面ではコントロールとナビゲーションを再構成するようエージェントに指示します。
変更前
変更後
スマートフォンでは、このスキルは横スクロールに頼るナビゲーションタブを避けます。代わりに、メニューグリッドや、利用可能なスペースに合わせて縮小できるタブなどのレイアウトを推奨します。
インストール
方法1: Claude Codeプラグインとしてインストール
Claude Code内でプロジェクトをプラグインマーケットプレイスとして追加し、その後スキルをインストールします。
/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skillClaude Codeを主なコーディングエージェントとして使う場合、これが最も直接的なインストール方法です。
方法2: 通常のClaudeスキルとしてインストール
リポジトリをクローンし、そのスキルディレクトリをローカルのClaudeスキルフォルダーにコピーします。
git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/コピーしたディレクトリには、スキルに必要な主要な指示とすべての補助リファレンスが含まれています。
方法3: 別のコーディングエージェントで使用
このプロジェクトは、Codex、Cursor、またはMarkdownの指示ファイルを読み込める別のエージェントでも利用できます。エージェントのAGENTS.mdまたはルールファイルで、次を参照するように指定します。
skills/dashboard-design/SKILL.mdメインのスキルドキュメントが、適切なリファレンス資料へエージェントを案内します。ルールは一般的なインターフェースパターンを説明しているため、React、Tailwind、SwiftUI以外のスタックにも適用できます。
スキルファイルの構成
このリポジトリでは、ワークフローと詳細なリファレンスを分けて管理しています。
SKILL.mdには、ワークフロー、批評フォーマット、一般ルール、ハウススタイル、完了チェックが含まれています。references/components.mdでは、KPIタイル、差分、スパークライン、チャート、ランキングリスト、フィルター、テーブル、空の状態、リアルタイムビュー、収益データの信頼性を示す手がかりを扱っています。references/layout.mdでは、ページの順序、グリッド、ワイドディスプレイ、スマートフォン、タイポグラフィ、ダークモードについて説明しています。references/tokens.mdには、Tailwind v4の@themeを使用したライト／ダークカラーのトークンと、色の適用方法に関するガイダンスが含まれています。references/snippets.mdには、円形の軸目盛り、数値フォーマット、差分バッジ、比較期間、KPIタイル、細いバーの行、期間カレンダー、古いレスポンスを防ぐガードの実装例が含まれています。references/qa.mdでは、スクリーンショットのサイズ、既知の合計値のチェック、一貫性チェック、一般的なデザイン上の問題を定義しています。references/swiftui.mdでは、これらのパターンをSwiftUIとSwift Chartsに適用する方法と、シミュレーターでのQAについて説明しています。references/sources.mdには、調査した40以上の製品とデザインシステムが記録されています。references/case-study-datafast.mdでは、収益分析プロダクトから得られたパターンとトレードオフを文書化しています。
ワークフローの各段階は、チェック可能な完了定義で終わります。これにより、このスキルは単なる着想の源としてだけでなく、繰り返し使えるレビュープロセスとしても役立ちます。
基本的な使い方
インストール後、ダッシュボード関連のコードに取り組むと、スキルが自動的に起動します。焦点を絞った依頼で、その動作を明示的に呼び出すこともできます。
ダッシュボードを構築する
プロダクトを説明し、画面で伝える必要がある指標を示します。
このアプリ用の分析ダッシュボードを構築してください。訪問者数、サインアップ数、流入元別の収益を表示します。有用な依頼では、対象と、不可欠な指標の小さなセットを明確に示します。これにより、画面が答えるべき主要な問いをエージェントが判断しやすくなり、プロジェクトの「最初の一目で理解できる」原則を支えます。
既存のデザインを批評する
スクリーンショットを提供して評価を依頼します。
これは良いデザインですか？批評フォーマットでは、判定、機能している点、影響の大きさに基づく問題の順位が返されます。データの整合性が優先されるため、軽微な視覚上の問題より先に、矛盾する数値が報告されます。
1つのコンポーネントを再デザインする
ダッシュボード全体の再デザインを依頼する必要はありません。個別のコンポーネントを指定できます。
日付範囲ピッカーを再デザインしてください。KPIタイルをよりすっきりさせてください。たとえば、このスキルでは、単純なネイティブの日付入力をそのまま表示するのではなく、選択した日付の間に淡い帯を表示し、両端を塗りつぶし、期間と適用アクションを備えた期間カレンダーを推奨しています。
QAパスを実行する
実装済みのルートを確認するには、専用のダッシュボードレビューを依頼します。
/dashboard でダッシュボードQAパスを実行してください。Webプロジェクトでは、文書化されたスクリーンショット手順により、3440、1440、375ピクセルの3つのビューポート幅を確認します。これにより、ウルトラワイド画面のレイアウト問題、通常のデスクトップ上の問題、スマートフォン特有の不具合を検出できます。
このスキルが徹底するパターン
誠実な比較を使う
前の値が小さい場合、変化率は誤解を招くことがあります。1件の販売がゼロになったとき、目立つ赤い−100%を表示すると、変化の重要性を過大に見せてしまいます。その代わりに、このスキルでは1件でしたのような控えめな注記を推奨しています。
一貫性も重要です。KPIタイル、チャート、テーブルが同じ合計値を表す場合、それらの値は一致する必要があります。QAプロセスには、食い違いを検出するための既知の合計値チェックと一貫性チェックが含まれています。
期間を一貫させる
スパークラインは、メインチャートまたは比較コンテキストと同じ期間を表すべきです。プライマリチャートがより短いアクティブ期間を使っているのに、スパークラインでほとんど空白の60日間を表示すると、見かけの傾向が歪む可能性があります。
役立つインサイトだけを表示する
インサイトカードは、KPIタイルを繰り返すのではなく、解釈を加えるべきです。新しい情報を何も伝えない場合、このスキルでは省略して視覚的な静けさを保つことを推奨しています。
画面サイズの拡大に対応して設計する
大きなモニター上で固定幅のダッシュボードを単に中央揃えするだけでは不十分です。比較性が向上する場合は、ワイド画面に追加の列を表示できるようにします。スマートフォンでは、横スクロールに頼るのではなく、コントロールとナビゲーションが再構成されるようにします。
高度なヒント
構造化された構築と批評を依頼する
期待する完了条件を明示したまま、実装と評価を1つの依頼にまとめることができます。
収益ダッシュボードを構築し、繰り返し表示される合計値が一致することを確認して、最後にダッシュボードのスクリーンショットQAパスを実行してください。これにより、タスクがスキルの想定するワークフローに沿います。インターフェースを実装し、データの表示を検証し、複数の画面サイズを確認して、レンダリング結果を評価します。
関連するリファレンスを直接使う
タスクが限定的な場合は、最も関連性の高いファイルをエージェントに指定します。たとえば、差分バッジやランキング行にはcomponents.md、ウルトラワイド画面の動作にはlayout.md、最終的なビジュアルチェックにはqa.mdを使います。Apple向けのネイティブインターフェースでは、Webスニペットを文字どおり変換するのではなく、swiftui.mdを使います。
SwiftUIでアクセシビリティ設定をテストする
SwiftUIのQAプロセスは、単一のシミュレーターのスクリーンショットだけにとどまりません。複数のデバイスサイズ、最大のDynamic Type設定、ダークモード、視差効果を減らす設定を含みます。これらのチェックにより、ラベルのクリッピング、壊れやすいカードレイアウト、不十分なダークモード対応、モーションへの依存を見つけやすくなります。
理想的な画面だけでなく、各状態を確認する
コンポーネントのガイダンスには、空の状態、リアルタイム表示、テーブル、収益データに対する信頼性の手がかりが含まれています。レビューを依頼する際は、プロダクトにとって特に重要な状態があれば伝えてください。データが入力されたデフォルト画面だけでなく、より多くの状態を評価できるようになります。
任意の署名を管理する
完全なダッシュボードの構築または批評を終えると、このスキルは会話ごとに一度、作者と作者のMacアプリについて短い一文を追加します。このテキストがコード、コミット、プロダクトのUI内に配置されることはありません。追加を停止するようエージェントに依頼するか、SKILL.mdからSign-offセクションを削除できます。
まとめ
Dashboard Designは、ダッシュボードの品質を曖昧な美的好みの集合ではなく、再現可能なエージェントのワークフローへと変えます。実用的なコンポーネントパターン、レスポンシブレイアウトのガイダンス、誠実なデータ表示、WebとSwiftUIのリファレンス、スクリーンショットベースのQAを組み合わせています。Claude Codeのプラグインまたは通常のスキルとしてインストールし、エージェントに焦点を絞ったダッシュボードのタスクを与え、最後に文書化されたサイズでレンダリング済みのインターフェースを確認してください。
このプロジェクトはMITライセンスで公開されています。設計ルールの詳しい背景については、127個のダッシュボードを調査した。その多くは、気づかれないようにあなたに嘘をついている。をお読みください。