Component Gallery

Screen Pattern

ダッシュボード画面（Dashboard Screen）UIの作り方

ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

最終更新日: 2026-07-20 / レビュー状態: 未レビュー

30秒でわかる要点

ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

Screen Preview

画面構成が分かる自前UI実例

ダッシュボード画面の情報配置と主要コンポーネントを確認するための自前HTML/CSSプレビューです。外部サービスのスクリーンショットではなく、構成理解と実装判断に使える参考UIとして作成しています。

主なユースケース

  • ・KPIを確認する
  • ・重要なアラートを確認する
  • ・一覧や詳細へ遷移する

レイアウトの考え方

  • ・最重要指標を上部に置く
  • ・カードと表の役割を分ける
  • ・空状態と読み込み状態を用意する

アクセシビリティ

  • ・数値に単位を付ける
  • ・色だけで増減を表さない
  • ・表見出しを適切に使う

よくある失敗

  • ・カードが多すぎて優先度がない
  • ・更新日時が分からない
  • ・空状態の説明がない

構成コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。
バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。
ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
スケルトン（Skeleton）スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。

AI実装プロンプト

ダッシュボード実装

SaaSダッシュボード画面をReact + Tailwind CSSで実装してください。KPIカード、テーブル、空状態、読み込み状態、レスポンシブを含めてください。

運営・更新・参照元

最終更新日
2026-07-20
レビュー状態
未レビュー

参照元

FAQ

ダッシュボード画面で最初に配置するべき情報は？

ユーザーが最初に判断したいKPIや異常状態です。装飾カードを増やすより、行動につながる情報の優先度を決めます。

ダッシュボード画面で最初に決めるべきことは何ですか？

この画面でユーザーが完了したい主目的を1つに絞り、card、table、badgeなどの構成要素を優先度順に配置します。

ダッシュボード画面でよくある失敗は何ですか？

カードが多すぎて優先度がない