v0でダッシュボードUIを作る方法

v0でダッシュボードUIを作るなら、先に決めるのはカードの見た目ではなく「誰が、どの数字を見て、次に何をするか」です。最初に利用者と判断を一つずつ書き、必要なデータと操作を結び付けます。数値を並べただけで次の行動が分からないなら、見た目が整っていてもダッシュボードとしては未完成です。

v0は文章の指示に加えて、スクリーンショットやモックアップを入力に使えます。複雑な画面は一度に完成させようとせず、情報の優先順位、画面の骨格、部品、状態、画面幅の順に分けると、どこを直せばよいか追いやすくなります。ここでは、架空の問い合わせ対応ダッシュボードを例に、依頼文から確認までの進め方を示します。実際の生成結果を測定した手順ではなく、画面設計を整理するための方法です。

生成前に「見る人」と判断を1組にする

同じ売上データでも、経営担当者が月次傾向を見る画面と、担当者が未対応問い合わせを処理する画面では必要な表示が違います。まず利用者を一人に絞り、その人が画面を開いたときに答えたい質問を一つ決めます。たとえば「先月より問い合わせが増えたか」なら傾向比較が必要です。「今日、先に処理すべき案件はどれか」なら未対応件数、期限、優先度、担当者の一覧が必要です。

次に、表示するだけで終わる数字と、その数字から操作につながる情報を分けます。KPIカードを押したときに絞り込み一覧へ移るのか、グラフの期間を変えるのか、詳細ページを見るのかを決めておきます。操作の行き先が決まっていないカードは、装飾として置く前に必要性を見直します。

画面に載せる情報を入力・判断・行動で整理する

生成前に、画面へ渡すデータを簡単な表にします。問い合わせ画面なら、例として次のように整理できます。

表は横にスクロールできます

役割	項目例	読者が決めること
状況把握	今週の新規件数、未対応件数	対応量が増えているか
変化の確認	前週比、日別件数	いつ変化したか
優先順位	期限、重要度、顧客区分	どの案件から着手するか
次の操作	担当者、状態、詳細リンク	誰が何を更新するか

この表は実データの仕様ではなく、画面設計用の例です。実装する場合は、各数値の集計期間、タイムゾーン、重複計上の扱いをデータ側で定義します。たとえば「今週」は月曜始まりか直近7日かで意味が変わります。指標名の横に期間を表示し、比較対象も同じ条件にしないと、カードとグラフの数値が食い違います。

最初の依頼文には完成画面より制約を書く

短い依頼文でも、利用者、目的、データ、操作、表示状態が入っていると確認しやすくなります。たとえば次のような骨格です。

問い合わせ担当者向けの管理画面を作る。目的は期限の近い未対応案件を見つけて処理すること。上部に未対応数と期限超過数を表示し、一覧には件名・顧客区分・期限・担当者・状態を出す。状態と担当者で絞り込める。案件を選ぶと詳細へ移動する。データは架空の値を使い、実APIにつながっているように見せない。0件、読み込み中、取得失敗も別々に表示する。

これはそのまま使う正解promptではありません。自分の仕事に合わせて項目を置き換えるための例です。情報が足りない場合は、最初からすべてを詰めず、まず画面の枠を生成し、次に一覧、絞り込み、詳細操作のように一つずつ依頼します。画面を見てから「もっと良くして」と頼むより、「未対応だけを表示する」「期限超過を文字とアイコンでも示す」のように、変更箇所と確認条件を指定します。

KPI・グラフ・一覧を同じ強さで並べない

上部のKPIは一目で状態を読むための要約です。グラフは期間変化の把握、一覧は具体的な案件処理に使います。3種類を同じ大きさのカードにすると、利用者はどこから見ればよいか分かりにくくなります。判断の順番に合わせ、まず異常や要対応を示し、その次に背景となる推移、最後に個別レコードを置く方法があります。

ただし、KPIの数を増やせば便利になるわけではありません。各カードについて「この値が変わったら、利用者は何をするか」と説明できない場合は削ります。増加を赤で示す場合も、増加が常に悪いとは限らないため、ラベルや説明で指標の意味を補います。割合だけでなく分母を示す、比較期間を明記する、データ更新時刻を見せる、といった表示が誤読を減らします。

グラフを生成するときは、系列名、横軸、単位、期間、欠損値の扱いを決めます。「問い合わせ件数の推移」だけでは、日次か週次か、未対応だけか全件かが曖昧です。値がない日をゼロとするのか、未取得として空欄にするのかも別の意味です。サンプルデータなら「サンプル」と画面内に表示し、実績と取り違えないようにします。

Empty・Loading・Errorは別の状態として依頼する

データがない画面を、空のカードだけで済ませないようにします。まだ問い合わせがない状態なら「新規問い合わせはありません」と示し、初回設定が必要なら次の操作を案内します。読み込み中は、画面全体を無反応に見せず、どの部分の情報を待っているか分かる表示にします。取得に失敗した場合は、空データとして扱わず、再試行や時間を置く判断を示します。

権限不足と通信エラーも同じ画面にまとめない方がよいでしょう。前者は管理者への依頼、後者は再読込や運用担当への連絡が次の行動になるからです。これらの状態を作るように依頼するときは、見た目だけでなく、ボタンを押した場合の結果や、未保存変更がある場合の扱いも指定します。

まずは使ってみる

記事の文脈に合うToolへ進めます。報酬の有無で見た目は変えていません。

• 

  v0

  公式サイトを見るTool詳細を見る

PCとスマートフォンで情報の優先順位を変える

PCの一覧表をそのまま狭い画面へ縮めると、文字が読めず横スクロールだけが残りがちです。スマートフォンでは、期限と状態を先頭にし、件名と担当者を続け、補助情報を詳細画面へ移す方法があります。横幅に収まらない列を隠すなら、その情報をどこで確認できるかも決めます。表をカード化するときも、重要な項目がカードの下へ追いやられていないか確認します。

画面幅ごとに見るべき基準を用意します。PCでは同じ期間のKPIとグラフを同時に読み取れるか、一覧の列見出しが正しい値に対応しているかを確認します。スマートフォンでは、最優先案件を見つけるまで何回スクロールするか、ボタンを押し間違えないか、フィルターを閉じたり解除したりできるかを見ます。画面幅の指定だけでなく、「残す情報」「折りたたむ情報」「別画面へ移す情報」を依頼に含めます。

Previewで見る順番と修正の切り分け

生成後は、色の好みを先に直すのではなく、利用者の仕事が終わるかを確認します。まず代表的な案件を一つ選び、一覧で発見し、詳細を開き、状態を更新し、一覧へ戻る流れを追います。次に、期限超過、0件、長い件名、担当者なし、エラーという例外を確認します。その後で、画面幅、文字の折り返し、色や余白を調整します。

修正は一度に一種類にします。余白、情報の順序、色、操作を同時に変更すると、何が改善したか分かりません。依頼の前に「どの利用者が、どの状態で、何に困るか」を一文にし、変更後にその場面だけでなく別の状態も再確認します。v0のFigma連携やスクリーンショット入力は、見た目の情報を渡す助けになりますが、操作やデータの意味まで画像だけで伝わるとは限りません。behaviorや例外条件は文章で補います。

AIものさしの判断

ダッシュボードUIの完成は、KPIカードやグラフが表示された時点ではありません。利用者の問い、数字の定義、次の操作が一続きになり、欠損やエラーでも誤判断しないところまで確認できた状態です。v0へ渡すpromptには、画面の雰囲気よりも「誰が・何を見て・どう判断し・何をするか」を優先して書きます。

最初の試作では、架空データで一つの業務フローを通し、指標の意味と画面遷移を確かめます。データ接続や認証は、画面だけでなくアクセス権と保存先も決まってから追加します。実データを使う前に、サンプル値が残っていないか、権限のない人に見えないか、エラー時に誤った成功表示を出さないかを確認してください。

公開前の最低確認は、指標の集計条件、一覧からの操作、空・読み込み・失敗状態、画面幅、サンプル値の表示です。この確認を通せない画面は、見た目が完成していても利用者の判断を支える準備ができていません。

画面を公開前に判定する小さな受け入れ基準

作った画面を評価するときは、デザインの好みではなく利用者の行動で確認します。架空の問い合わせダッシュボードなら、期限超過案件を一つ選んで詳細を開けるか、対応済みにした後に一覧から消えるか、絞り込みを解除して全件へ戻れるかを試します。これは実際のv0出力で確認したという意味ではなく、画面を受け入れる際に使う確認例です。

判断材料になる数値には定義が必要です。「未対応」が担当者未設定を含むか、「期限超過」がどの時刻を基準にするか、「前週比」の対象期間は何曜日から始まるかを決めます。定義が未確定なら、UIで確定値のように見せないでください。サンプル値と本番値の見た目が同じなら、試作画面の共有先を限定するか、仮データ表示を目立つ場所に残します。

チェックを通らない場合は、原因を画面のどこに置くか決めます。指標の定義が不足しているならpromptではなくデータ仕様を直し、操作の行き先がないならrouteを決め、文字が読みにくいなら表示幅と情報優先度を調整します。問題を分類してから修正を依頼すると、画面全体の再生成を繰り返さずに済みます。

画面上で値を並べたあと、利用者がその値をどう使うかを短い説明文で確かめます。たとえば「未対応が12件」とだけ出すのではなく、期限超過が含まれるか、前日から何件変わったか、最初に開くべき一覧はどこかをつなげます。指標と操作の間に判断がなければ、KPIを増やすより説明や遷移を見直す方が効果的です。