ダッシュボード · ダッシュボード
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。
プレビュー
概要
ダッシュボードは本来、速度と正確さが最優先される画面です。だから多くの管理画面は、装飾を削ぎ落とした無機質な白地になります。しかしサイバー調のダッシュボードは、あえて逆を行く——「管理画面も世界観の一部だ」という立場を取ります。
「仲間だ」というシグナル
Web3、セキュリティ、開発者ツール、ゲーミング——これらのプロダクトでは、世界観こそが選ばれる理由になります。ユーザーがログインして最初に見る画面が白地の事務的なダッシュボードだったら、その世界観との約束は途切れる。暗背景・ネオンの発光色・モノスペースフォントの3点セットは、ログインの瞬間に「このプロダクトは自分の側のものだ」というシグナルを返します。機能は同じでも、所属感が変わります。
世界観と可読性の綱引き
ただし、ダッシュボードの本分は情報を正確に速く伝えることです。サイバー演出はこの本分と常に綱引きの関係にある。発光や走査線に酔って肝心の数値が読みにくくなったら本末転倒です。世界観は「味付け」であって「主菜」ではない——この優先順位を見失わないことが鍵になります。
仕上げの判断軸
サイドバーはセクション見出し＋記号アイコンで情報密度を上げつつ、スキャンしやすい段組みに。上部のステータスバッジ（緑の丸＋「ALL SYSTEMS GREEN」）が画面全体に「動いている感」を与えます。KPIは auto-fit グリッドで並べ、各指標にデルタ表示を添えて変化の向きを即座に把握させる。チャートはシアン→マゼンタの統一グラデで、アクセント色を画面全体で一貫させます。CRT走査線と格子背景は repeating-linear-gradient でJSなしに質感を足せますが、本文や数値のコントラストは必ず確保します。
使いどころ
- 開発者向け SaaS やセキュリティ系プロダクトの観測系ダッシュボードで、世界観の強さをユーザー体験の一部にしたいとき
- Web3 / インフラ / ゲーミング系の管理画面で「退屈な管理画面UI」を避けたいとき
- 社内向けでも、操作していて楽しい計測ツールにしたいとき
このデザインの分類
- カテゴリ
- ダッシュボード
- スタイル
- サイバー / ダーク / ネオン / SaaS
背景と狙いどころ
AIへの指示文
開発者向けSaaSの観測系ダッシュボード(Overview画面)を、サイバーパンク調で作ってください。
画面の基調:
- 近黒 (#05060a) の背景に、CRTの走査線と、中心から外へフェードする格子を重ねる。
- 右上にマゼンタ (#ff4bcf)、左下にシアン (#6ef3ff) の放射状アクセント発光。
- モノスペースフォント(JetBrains Mono / Fira Code / ui-monospace) をタイトル・ラベル・表で使用。本文は Inter / system sans。
- 文字色は明るめのブルーグレー (#d7e2ff)、ミュートは (#6b7a9e)。
レイアウト:
- 2 ペイン構成。左に 240px のサイドバー、右に可変幅のメインパネル。
- 880px 未満ではサイドバーを非表示にして 1 カラム。
サイドバー:
- 上部にブランド表記("◎ 0x NIGHT/STACK")。ドットは発光する緑、"0x" はマゼンタ。
- 3 セクション(Observe / Ops / Account)に分けて、セクション見出しは uppercase のモノスペース小文字。
- ナビアイテムは大文字記号(◆/▲/▼/●/▣/⎔/⏚/⚒/∆/$/⚙)をアイコン代わりに。アクティブ項目はシアン色の左ボーダー + シアンのテキスト。
- ナビ項目の右端に時折 kbd 表示(⌘1、数値バッジなど)。
メインパネル:
- トップバー: 左に "~/overview" のパス表記 H1 + 緑の "● ALL SYSTEMS · GREEN" バッジ。右に "search… ⌘K" のダミー検索ボックス。
- KPI 行(4 つ、auto-fit grid):
- Requests / min = 148,203(緑の▲+4.8%)
- Error rate = 0.043%(赤の▼−0.11)
- p95 latency = 87ms(緑の▲+2ms)
- Active users = 9,412(緑の▲+312)
- トラフィックチャートパネル:
- パネル見出し "> traffic.last_24h"、右に 1H/6H/24H/7D のタブ(24H がアクティブ)。
- 180px 高の折れ線グラフ。塗りはシアンの半透明グラデーション、ストロークはシアン → マゼンタのグラデーション、終点にマゼンタのドット。うっすらした水平の補助線 3 本。
- 下段 2 カラム:
- 左: events.live テーブル(time / service / level / message の 4 列、5 行程度、level は OK / WARN / ERR で色分け)。
- 右: regions の p95 バーチャート(5 リージョン)。バーはシアン → マゼンタのグラデーションで塗る。
すべてのパネルは 6px の border-radius、1px の (#1a1f2e) ボーダー、(#0a0c14) の暗パネル背景。JS不要。
バリエーション
ライト版
同じ構造のまま、明るい配色に: - 背景を (#fafbff) のオフホワイト、格子は淡いブルーグレーのまま。 - パネル背景を白、ボーダーを (#e4e8f0)。 - シアンとマゼンタのアクセントはそのまま残し、走査線は削除。 - テキストは (#0a0d18)、ミュートは (#6b7a9e)。
コマンドパレット版
トップバーの "search… ⌘K" をクリックすると、画面中央にコマンドパレットが出現するよう拡張: - モーダル幅 560px、パネル背景より 1 段明るい色、1px のシアン縁取り。 - 検索入力の下に、セクション区切り付きのコマンドリスト(Recent / Navigation / Actions)。 - Esc で閉じ、↑↓ で選択、Enter で実行。
よくある質問
チャートは SVG のままでいい？
アクセシビリティで注意点は？
モノスペースは何のフォントを読み込む？
関連するデザイン
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
Discord/Slack風の3ペイン・チャットインターフェイス
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。