こんにちは。
前回は、AIにサイトの構造を伝えるとき、名前のあるレイアウトパターンを使うと骨格がしっかりする という話を書きました。
今回はその中でも特にニーズの多い「ダッシュボード」に絞って深掘りします。
ダッシュボードには固有の構成要素があり、それを名前で伝えるとAIの出力精度が大きく上がります。
構成要素の語彙と、用途別のプロンプト例をまとめていきます。
「ダッシュボード作って」だけだとなぜ微妙になるのか
AIに ダッシュボードを作ってください と頼むと、それっぽい画面は返ってきます。カードが並び、グラフが入り、色も整っている。
ですが、何を見せたいのか、どこを強調したいのかが定まっていない画面 になりやすいです。
たとえば同じ「ECダッシュボード」でも、売上状況を俯瞰したいのか、在庫状況を監視したいのかで、画面の構造は全然違います。売上なら数値カードとグラフが主役ですし、在庫ならテーブルとステータス表示が中心です。
AIはこの「何のためのダッシュボードか」を勝手には決めてくれません。だから、構造を伝える語彙が要るわけです。
ダッシュボードを構成する5つのパーツ
ダッシュボードは、いくつかの定番パーツの組み合わせでできています。まずはこの5つを覚えてしまいましょう。
1. KPIカード（KPI Card）
画面の上部に、主要な数値カードを横並びで並べるエリアです。売上、ユーザー数、コンバージョン率など、いちばん見たい指標をここに置きます。
各カードには ラベル（何の指標か）、数値（現在の値）、前期比（増減と方向）を入れるのが基本です。AIには KPI Cardを4枚横並びで配置してください のように伝えると通りやすいです。
2. フィルターバー（Filter Bar）
期間選択、カテゴリ絞り込み、検索ボックスなどを1行にまとめるエリアです。KPIカードの直上か直下に置くことが多いですね。
AIには フィルターバーを配置し、期間選択（7日/30日/90日）とカテゴリのドロップダウンを横並びにしてください のように、何を絞り込むかも一緒に伝えると精度が上がります。
3. グラフエリア（Chart Area）
折れ線グラフ、棒グラフ、円グラフなど、データの可視化を置くゾーンです。1つのカードに1つのグラフを入れ、横に並べたりグリッドで並べたりします。
グラフエリアに、左にPV推移の折れ線グラフ、右に流入元の円グラフを配置してください のように、グラフの種類とデータの内容をセットで書くのがコツです。
4. データテーブル（Data Table）
一覧データを表形式で見せるエリアです。注文一覧、ユーザー一覧、ページ別のPVランキングなど。ソート、ステータスバッジ、ページネーションといった要素を含むことが多いです。
AIに伝えるときは データテーブルに、注文ID・顧客名・金額・ステータス・日時の列を作り、5行分のサンプルデータを入れてください のように、列名とデータ例を書くと確実です。
5. アクティビティフィード（Activity Feed）
最近の動き、通知、タスクリストなど、時系列で追いたい情報をまとめるエリアです。メインコンテンツの右側やチャートの横に配置するのが一般的です。
右側にアクティビティフィードを配置し、直近のアクションを時系列で5件表示してください と伝えればOKです。
この5つを知っていれば、たいていのダッシュボードの構造を言葉で説明できます。次は、これらの組み合わせパターンを見ていきましょう。
用途別ダッシュボードの型 4選
5つのパーツを覚えたら、あとは用途に合わせて組み合わせるだけです。ここでは代表的な4つの型を紹介します。それぞれにレイアウト例とコピペ可能なプロンプトを付けました。
アナリティクス型（Analytics Dashboard）
PV、コンバージョン、流入元分析など、数値の推移を俯瞰したいときに向いています。KPIカード + フィルターバー + グラフエリア + データテーブルの組み合わせが定番です。
レイアウト例：
プロンプト例：
1Webサイトのアクセス解析ダッシュボードをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Sidebar Layoutで、左にナビゲーション（ダッシュボード / レポート / ユーザー / 設定）、右にメインコンテンツの構成にしてください。
6- メインエリアの構成は上から順に以下の通りです。
7 - フィルターバー: 期間選択（7日 / 30日 / 90日）のボタン切り替えを右寄せで配置。
8 - KPI Card: 4枚のカードを横並び（PV: 45,200 +12%、ユーザー: 8,340 +8%、直帰率: 42.1% -3%、平均滞在: 2:45 +15%）。
9 - グラフエリア: 左にPV推移の折れ線グラフ（大きめ）、右に流入元の円グラフ。
10 - データテーブル: 人気ページ一覧（ページ名、PV、直帰率、平均滞在時間）を4行表示。
11
12デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。管理画面型（Admin Dashboard）
ブログ管理、CMS、ユーザー管理など、日常的に操作する管理画面です。KPIカードで状況を把握し、データテーブルで操作し、アクティビティフィードで最近の動きを確認する、という流れになります。
レイアウト例：
プロンプト例：
1ブログ管理画面のダッシュボードをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Sidebar Layoutで、左にナビゲーション（ダッシュボード / 投稿一覧 / メディア / コメント / 設定セクション: 外観 / プラグイン / ユーザー）、右にメインコンテンツの構成にしてください。
6- メインエリアの構成は上から順に以下の通りです。
7 - ヘッダー: 「ダッシュボード」タイトルと「新規投稿」ボタン。
8 - KPI Card: 4枚のカードを横並び（公開記事: 128 +5今月、今月のPV: 34.5K +12.3%、コメント: 24 +3、下書き: 12 変動なし）。
9 - 横並び2カード: 左に「最近の投稿」データテーブル（タイトル、ステータスバッジ、PV、更新日）4行、右に「アクティビティ」パネル（タイムライン形式で4件）。
10
11デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。モニタリング型（Monitoring Dashboard）
サーバー稼働率、レスポンスタイム、エラーログなど、リアルタイムの状態監視に使います。KPIカードにステータスインジケータ（緑/黄/赤）を付けるのが特徴です。異常があればひと目でわかるように。
レイアウト例：
プロンプト例：
1サーバー監視ダッシュボードをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Sidebar Layoutで、左にアイコンのみの細いナビバー（64px幅）、右にメインコンテンツの構成にしてください。
6- メインエリアの構成は上から順に以下の通りです。
7 - ヘッダー: 「サーバーモニタリング」タイトルと稼働ステータスインジケータ（緑の丸 + 正常稼働）。
8 - KPI Card: 4枚のカードを横並び。各カード上部にステータスカラーバーを付けてください（稼働率: 99.97% 緑、レスポンス: 142ms 緑、エラー率: 0.3% 黄、アクティブ: 1,204 緑）。
9 - グラフエリア: 左にCPU使用率のリアルタイム折れ線グラフ、右にメモリ使用率の折れ線グラフ。
10 - アラートリスト: 「直近のアラート」としてseverity色（緑/黄/赤）、メッセージ、時刻を4件表示。
11
12デザインはMaterial Designを踏襲して、落ち着いた業務UIにしてください。ECダッシュボード型（E-commerce Dashboard）
売上推移、注文管理、在庫状況など、ECサイトの運営に使うダッシュボードです。KPIカードに売上と注文数を並べ、チャートでトレンドを可視化し、データテーブルで最新注文を管理する構成です。
レイアウト例：
プロンプト例：
1ECサイトの売上ダッシュボードをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Sidebar Layoutで、左にナビゲーション（ダッシュボード / 商品管理 / 注文管理 / 顧客 / レポート）、右にメインコンテンツの構成にしてください。
6- メインエリアの構成は上から順に以下の通りです。
7 - フィルターバー: 期間切り替えボタン（今日 / 今週 / 今月）を右寄せで配置。
8 - KPI Card: 4枚のカードを横並び（今日の売上: ¥342,800 +18%、注文数: 47件 +12%、平均単価: ¥7,293 +5%、カート放棄率: 68% -2%）。
9 - グラフエリア: 左に売上推移の棒グラフ（大きめ）、右にカテゴリ別売上の横棒グラフ。
10 - データテーブル: 最新注文一覧（注文ID、顧客名、金額、ステータスバッジ、日時）を4行表示。
11
12デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。プロンプトの精度を上げる3つのコツ
ここまでで構成要素と型がそろいました。最後に、ダッシュボードプロンプト全般に使えるコツを3つまとめます。
(1) パーツ名で構成を指示する
「上にカードを並べて、その下にグラフを置いて…」と位置だけで説明するより、KPI Cardを4枚横並びで配置し、その下にグラフエリアを置いてください とパーツ名を使った方が、AIの解釈がブレにくくなります。
前回の記事で紹介したレイアウトパターンの語彙と同じ考え方です。名前があるだけで、伝わり方が変わります。
(2) ダミーデータを入れる
「KPIカードを4枚」だけだと、AIはラベルも値も適当に埋めます。PV: 45,200 +12% のように具体的な数値を渡すと、カードのサイズ感やフォントの大きさまで自然に調整してくれます。
プロンプトに入れるダミーデータは、実際の数値でなくてOKです。 桁数と文字数が近ければ、AIはそれを元に適切なレイアウトを組んでくれます。
(3) シリーズの概念を組み合わせる
このシリーズで紹介してきた概念は、重ねて使うとさらに効果的です。
- レイアウトパターン（前回の記事）: 画面全体の骨格を決める →
Sidebar Layout - ダッシュボード構成要素（本記事）: 中身のパーツを指定する →
KPI Card+Chart Area - デザインスタイル（デザインスタイル編）: 見た目の雰囲気を決める →
Material Design
この3つを1つのプロンプトに入れると、AIは骨格・中身・見た目のすべてを把握した上でUIを組めます。ここまで揃えれば、1回のプロンプトでかなり精度の高いダッシュボードが出てくるはずです。
「そこまで細かく書くのは面倒では？」と思った方もいると思います。ですが、一度書いたプロンプトはテンプレートとして使い回せます。最初だけ丁寧に書けば、次回以降はデータと用途を差し替えるだけで済みます。
まとめ
というわけで、AIにダッシュボードを作らせるときのプロンプト設計について解説しました。
ダッシュボードにはKPIカード、フィルターバー、グラフエリア、データテーブル、アクティビティフィードという定番の構成要素があります。これらを名前で指定し、用途に合わせて組み合わせることで、AIの出力はぐっと安定します。
まずは4つの型（アナリティクス / 管理画面 / モニタリング / EC）から近いものを選んで、プロンプトをコピーして試してみてください。データを自分のものに差し替えるだけで、かなり実用的なダッシュボードが手に入るはずです。
シリーズの過去記事もあわせてご覧ください。
