ファイル作成上級

管理画面ダッシュボードの作成

KPI やメトリクスを可視化する管理画面ダッシュボードを生成するプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

ビジネスの KPI をリアルタイムで確認できるダッシュボードが欲しいが、チャートライブラリの選定やレイアウト設計に時間がかかる。

プロンプト

Claude Code に入力

以下の管理画面ダッシュボードを作成してください。

## ダッシュボード要件
- 目的: [サービス名]の運営状況を一目で把握

## ウィジェット構成
1. **KPI カード**（4枚横並び）
   - 月間売上（前月比 % 付き）
   - アクティブユーザー数
   - 新規登録数
   - チャーン率

2. **売上推移グラフ**（折れ線、過去12ヶ月）

3. **ユーザー属性**（円グラフ、プラン別分布）

4. **最近のアクティビティ**（テーブル、直近20件）

## 技術要件
- React + Tailwind CSS
- チャート: Recharts
- データ: REST API からフェッチ（React Query）
- レスポンシブ: 2カラム → 1カラム
- ローディング: スケルトン UI

実行結果の例

Claude Code が以下を生成します: - Dashboard.tsx: メインレイアウト - KPICard.tsx: KPI カードコンポーネント - SalesChart.tsx: 売上推移グラフ - UserDistribution.tsx: ユーザー属性円グラフ - ActivityTable.tsx: アクティビティテーブル - hooks/useDashboardData.ts: データフェッチ

コツ・ポイント

実際のデータ構造（API レスポンス）のサンプルを渡すと型定義まで正確
ダークモード対応が必要な場合は明記する
リアルタイム更新が必要な場合は WebSocket/SSE を指定