Category · ダッシュボード
ダッシュボードのデザイン例とAIプロンプト
管理画面・分析画面・データビジュアライゼーションのAIプロンプト集。サイドナビ+メインパネルの基本から、B2B SaaSのプロフェッショナル配色まで。
ダッシュボードについて
ユーザーが日常的に作業する仕事場。情報密度とナビゲーション効率が命です。サイドバーとメインパネルの2ペイン構成が王道で、データ可視化、テーブル、フィルタ、アクションバー、通知センターなどが組み合わさります。ダークモード前提のB2B SaaS、医療・金融の情報過密型、SNSのフィード型など、文脈で表情が変わります。世界観を足すのは構わないものの、味付けであって主菜ではありません。演出で肝心の数値が読みにくくなったら本末転倒です。
よく使われる場面
- B2B SaaSの管理画面
- 社内ツール・業務アプリ
- データアナリティクス・BIツール
- 医療・金融の業務システム
- 開発者向けコンソール
成功のポイント
- 主要情報はスクロール不要の位置に配置
- テーブルは行高とフォントサイズで可読性を保つ
- ダークモードでグラフ色のコントラストを確認
- 通知・アラートは控えめな色と音量で
- キーボードショートカットを用意して作業を速くする
このカテゴリのデザイン
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。