概要
管理画面のダッシュボードはコンポーネント数が多く設計が複雑ですが、v0 を使えばサイドバー・グラフ・データテーブルを組み合わせたレイアウト全体を一気に生成できます。
ダッシュボード生成の手順
- 「売上管理ダッシュボード。左サイドバー・KPIカード4枚・折れ線グラフ・最近の注文テーブルを含む」とプロンプトする
- サイドバーのナビゲーション項目を実際のページ構成に合わせて修正する
- グラフには「Recharts を使った棒グラフ・週次データ」のようにライブラリと種類を指定する
- DataTable に「検索・フィルター・ページネーション付き」と機能要件を追加する
- ダーク/ライトモードの切り替えスイッチも「テーマ切り替えボタンをヘッダーに追加して」で実装できる
実装品質を高めるコツ
- 実際のデータ型に合わせてサンプルデータをプロンプトに含めると精度が上がる
- レスポンシブ対応はスマホではサイドバーをドロワーに変えるよう明示指定する
- 空状態（データなし）のUIも「Empty State も実装して」と依頼しておく