ダッシュボード · ダッシュボード
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/cyber-dashboard/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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 で実行。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の監視画面の表示見本です。グラフ・指標・期間タグ・検索欄は固定の表示で、監視・切替・外部取得は行いません。リンクはページ内の説明へ移動します。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空のデータを使う1ファイルの表示見本。外部依存・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>サイバー調のダッシュボード画面 — Vibehaus プレビュー</title>
<style>
:root {
--bg: #05060a;
--panel: #0a0c14;
--panel-2: #11141f;
--border: #1a1f2e;
--fg: #d7e2ff;
--muted: #6b7a9e;
--accent: #6ef3ff;
--accent-2: #ff4bcf;
--ok: #5effa6;
--warn: #ffb84a;
--danger: #ff6b88;
--mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, "Noto Sans JP", "Hiragino Sans", "Meiryo", monospace;
--sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--sans);
background:
radial-gradient(600px 400px at 85% -10%, rgba(255, 75, 207, 0.12), transparent 60%),
radial-gradient(500px 400px at -10% 110%, rgba(110, 243, 255, 0.08), transparent 60%),
linear-gradient(180deg, #03040a, #06081a);
color: var(--fg);
min-height: 100dvh;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(to right, rgba(110, 243, 255, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(110, 243, 255, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100dvh;
position: relative;
z-index: 1;
}
/* Sidebar */
aside.sidebar {
background: rgba(10, 12, 20, 0.85);
border-right: 1px solid var(--border);
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.brand {
font-family: var(--mono);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg);
}
.brand .hex { color: var(--accent-2); }
.brand .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ok);
box-shadow: 0 0 10px var(--ok);
margin-right: 0.5rem;
transform: translateY(-1px);
}
.nav-section-title {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 0.5rem 0.5rem;
}
.nav-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-items a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
border-radius: 4px;
color: var(--muted);
text-decoration: none;
font-size: 0.88rem;
transition: background 0.12s, color 0.12s;
}
.nav-items a:hover {
background: rgba(110, 243, 255, 0.04);
color: var(--fg);
}
.nav-items a.active {
background: rgba(110, 243, 255, 0.1);
color: var(--accent);
border-left: 2px solid var(--accent);
padding-left: calc(0.75rem - 2px);
}
.nav-items a .kbd {
margin-left: auto;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--muted);
background: var(--panel-2);
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid var(--border);
}
/* Main */
main.main {
padding: 1.25rem 1.5rem;
overflow-x: hidden;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.topbar h1 {
font-family: var(--mono);
font-weight: 600;
font-size: 1.3rem;
letter-spacing: -0.01em;
margin: 0;
}
.topbar .status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--ok);
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
padding: 0.25rem 0.65rem;
border: 1px solid rgba(94, 255, 166, 0.25);
border-radius: 3px;
background: rgba(94, 255, 166, 0.06);
}
.topbar .right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.search {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.4rem 0.7rem;
font-family: var(--mono);
font-size: 0.82rem;
color: var(--muted);
}
.search .kbd {
font-family: var(--mono);
font-size: 0.72rem;
background: var(--panel-2);
padding: 0.08rem 0.35rem;
border-radius: 3px;
border: 1px solid var(--border);
}
/* KPI row */
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.kpi {
padding: 1rem 1.1rem;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.kpi .label {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.kpi .value {
font-family: var(--mono);
font-weight: 700;
font-size: 1.8rem;
letter-spacing: -0.01em;
margin-top: 0.25rem;
color: var(--fg);
}
.kpi .delta {
margin-top: 0.3rem;
font-family: var(--mono);
font-size: 0.78rem;
}
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
/* Chart panel */
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.1rem 1.2rem;
margin-bottom: 1rem;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.panel-header h2 {
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
margin: 0;
color: var(--fg);
}
.panel-header .tabs {
display: flex;
gap: 0.25rem;
font-family: var(--mono);
font-size: 0.72rem;
}
.panel-header .tabs span {
padding: 0.2rem 0.55rem;
border: 1px solid var(--border);
border-radius: 3px;
color: var(--muted);
cursor: pointer;
}
.panel-header .tabs span.active {
color: var(--accent);
border-color: rgba(110, 243, 255, 0.3);
background: rgba(110, 243, 255, 0.06);
}
.chart {
height: 180px;
position: relative;
padding-top: 10px;
}
.chart svg { display: block; width: 100%; height: 100%; }
/* Lower grid */
.grid-2 {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 1rem;
}
table.events {
width: 100%;
border-collapse: collapse;
font-family: var(--mono);
font-size: 0.82rem;
}
table.events th,
table.events td {
padding: 0.5rem 0.65rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
table.events th {
font-weight: 500;
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
table.events td.status-ok { color: var(--ok); }
table.events td.status-warn { color: var(--warn); }
table.events td.status-err { color: var(--danger); }
table.events tr:last-child td { border-bottom: 0; }
.bars {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bar-row {
display: grid;
grid-template-columns: 90px 1fr 60px;
align-items: center;
gap: 0.75rem;
font-family: var(--mono);
font-size: 0.8rem;
color: var(--muted);
}
.bar {
height: 8px;
background: var(--panel-2);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 2px;
}
.bar-row .value { text-align: right; color: var(--fg); }
@media (max-width: 880px) {
.layout { grid-template-columns: 1fr; }
aside.sidebar { display: none; }
.grid-2 { grid-template-columns: 1fr; }
}
/* 配布見本の操作・説明。配色と主構成は維持する。 */
[hidden]{display:none!important} :focus-visible{outline:3px solid currentColor;outline-offset:3px}
.demo-note{margin:2rem 0 0;padding:1rem;border-top:1px solid currentColor;font:14px/1.8 system-ui,"Hiragino Sans","Meiryo",sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.demo-note h2{font:700 16px/1.5 system-ui,"Hiragino Sans","Meiryo",sans-serif;letter-spacing:0}
.demo-note p{letter-spacing:0;scroll-margin-top:7rem}.demo-note a{display:inline-flex;align-items:center;min-height:44px}
.demo-banner{font:13px/1.7 system-ui,"Hiragino Sans","Meiryo",sans-serif;letter-spacing:0;margin:0 0 1rem}
[data-dashboard-scroll]{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-gutter:stable}
[data-motion-toggle]{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:4px;min-height:44px;padding:.5rem .8rem;margin:0 0 1rem;cursor:pointer;letter-spacing:0}
html:not(.demo-js) *,html[data-motion-paused] *{animation-play-state:paused!important}
html:not(.demo-js) *::before,html:not(.demo-js) *::after,html[data-motion-paused] *::before,html[data-motion-paused] *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--muted:#91a0c3}.layout{grid-template-columns:240px minmax(0,1fr)}main.main{min-width:0;overflow:visible}.topbar,.topbar>div,.panel-header{flex-wrap:wrap;gap:.6rem}.topbar .right,.panel{min-width:0}.nav-items a{min-height:44px}.panel-header .tabs{flex-wrap:wrap}.panel-header .tabs span{cursor:default}.kpis{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}.events{min-width:620px}.bar-row{grid-template-columns:minmax(0,140px) minmax(20px,1fr) 56px;gap:.5rem}.bar-row>span:first-child{overflow-wrap:anywhere}.kpi .label{letter-spacing:0}.search{letter-spacing:0}
@media(max-width:880px){.layout{grid-template-columns:minmax(0,1fr)}aside.sidebar{display:flex;border-right:0;border-bottom:1px solid var(--border)}.sidebar .nav-items{flex-flow:row wrap}.sidebar .nav-items a{border:1px solid var(--border)}main.main{padding:1rem}.grid-2{grid-template-columns:minmax(0,1fr)}}
</style>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="brand"><span class="dot"></span><span class="hex">0x</span>NIGHT/STACK</div>
<div>
<p class="nav-section-title">Observe</p>
<ul class="nav-items">
<li><a href="#demo-overview" class="active">◆ 概要 </a></li>
<li><a href="#demo-traffic">▲ ライブトラフィック</a></li>
<li><a href="#demo-latency">▼ レイテンシ</a></li>
<li><a href="#demo-alerts">● アラート <span class="kbd">3</span></a></li>
</ul>
</div>
<div>
<p class="nav-section-title">Ops</p>
<ul class="nav-items">
<li><a href="#demo-deploy">▣ デプロイ</a></li>
<li><a href="#demo-services">⎔ サービス</a></li>
<li><a href="#demo-logs">⏚ ログ</a></li>
<li><a href="#demo-runbook">⚒ Runbook</a></li>
</ul>
</div>
<div>
<p class="nav-section-title">Account</p>
<ul class="nav-items">
<li><a href="#demo-team">∆ チーム</a></li>
<li><a href="#demo-billing">$ 請求</a></li>
<li><a href="#demo-settings">⚙ 設定</a></li>
</ul>
</div>
</aside>
<main class="main"><p class="demo-banner">架空の監視画面・固定データの見本です。期間や種別のタグ、検索欄は表示専用です。</p>
<div class="topbar">
<div style="display:flex;align-items:center;gap:.75rem">
<h1>~/overview</h1>
<span class="status">● 全システム · 正常</span>
</div>
<div class="right">
<div class="search">検索欄の見本</div>
</div>
</div>
<div class="kpis">
<div class="kpi">
<div class="label">リクエスト / 分</div>
<div class="value">148,203</div>
<div class="delta up">▲ +4.8% 前1時間比</div>
</div>
<div class="kpi">
<div class="label">エラー率</div>
<div class="value">0.043<span style="font-size:1rem;color:var(--muted)">%</span></div>
<div class="delta down">▼ −0.11 今1時間</div>
</div>
<div class="kpi">
<div class="label">p95 レイテンシ</div>
<div class="value">87<span style="font-size:1rem;color:var(--muted)">ms</span></div>
<div class="delta up">▲ +2ms</div>
</div>
<div class="kpi">
<div class="label">アクティブユーザー</div>
<div class="value">9,412</div>
<div class="delta up">▲ +312</div>
</div>
</div>
<section class="panel">
<div class="panel-header">
<h2>> traffic.last_24h</h2>
<div class="tabs">
<span>1H</span><span>6H</span><span class="active">24H</span><span>7D</span>
</div>
</div>
<div class="chart">
<svg role="img" aria-label="24時間のリクエスト推移を示す架空のグラフ。終盤に増加する固定の見本" viewBox="0 0 600 180" preserveAspectRatio="none">
<defs>
<linearGradient id="fill" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#6ef3ff" stop-opacity="0.45"/>
<stop offset="100%" stop-color="#6ef3ff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="line" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#6ef3ff"/>
<stop offset="100%" stop-color="#ff4bcf"/>
</linearGradient>
</defs>
<g stroke="rgba(110,243,255,0.05)" stroke-width="1">
<line x1="0" y1="45" x2="600" y2="45"/>
<line x1="0" y1="90" x2="600" y2="90"/>
<line x1="0" y1="135" x2="600" y2="135"/>
</g>
<path d="M0,120 L50,100 L100,130 L150,85 L200,95 L250,60 L300,75 L350,40 L400,55 L450,30 L500,50 L550,25 L600,20 L600,180 L0,180 Z" fill="url(#fill)"/>
<path d="M0,120 L50,100 L100,130 L150,85 L200,95 L250,60 L300,75 L350,40 L400,55 L450,30 L500,50 L550,25 L600,20" fill="none" stroke="url(#line)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
<circle cx="600" cy="20" r="4" fill="#ff4bcf"/>
</svg>
</div>
</section>
<div class="grid-2">
<section class="panel">
<div class="panel-header">
<h2>> events.live</h2>
<div class="tabs"><span class="active">all</span><span>errors</span><span>warn</span></div>
</div>
<p class="demo-banner">表は横にスクロールできます。Tabで表に入り、左右キーで移動できます。</p><div data-dashboard-scroll tabindex="0" role="region" aria-label="イベント一覧（横スクロール可）"><table class="events">
<thead><tr><th>時刻</th><th>サービス</th><th>レベル</th><th>メッセージ</th></tr></thead>
<tbody>
<tr><td>14:02:41</td><td>edge-prod</td><td class="status-ok">OK</td><td>v1.42.0 のデプロイが完了</td></tr>
<tr><td>14:01:18</td><td>auth-svc</td><td class="status-warn">WARN</td><td>レート上限に接近 (us-east)</td></tr>
<tr><td>13:58:02</td><td>billing</td><td class="status-ok">OK</td><td>webhook 再試行が成功 · 1.4s</td></tr>
<tr><td>13:55:10</td><td>ingest-02</td><td class="status-err">ERR</td><td>kafka-broker-3 への接続がタイムアウト</td></tr>
<tr><td>13:52:44</td><td>web-fe</td><td class="status-ok">OK</td><td>CDN キャッシュをパージ · /assets/*</td></tr>
</tbody>
</table></div>
</section>
<section class="panel">
<div class="panel-header">
<h2>> regions</h2>
<div class="tabs"><span class="active">p95</span><span>rps</span></div>
</div>
<div class="bars">
<div class="bar-row"><span>us-east-1</span><span class="bar"><span style="width:82%"></span></span><span class="value">74ms</span></div>
<div class="bar-row"><span>us-west-2</span><span class="bar"><span style="width:68%"></span></span><span class="value">61ms</span></div>
<div class="bar-row"><span>eu-west-3</span><span class="bar"><span style="width:94%"></span></span><span class="value">112ms</span></div>
<div class="bar-row"><span>ap-northeast-1</span><span class="bar"><span style="width:76%"></span></span><span class="value">88ms</span></div>
<div class="bar-row"><span>ap-south-1</span><span class="bar"><span style="width:88%"></span></span><span class="value">102ms</span></div>
</div>
</section>
</div>
<aside class="demo-note"><h2>この見本について</h2><p>架空のサービス・数値・人物を使った表示見本です。外部通信・永続保存は行いません。配布HTMLはCC0・利用料¥0です。</p><p id="demo-overview" tabindex="-1"><b>概要</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-traffic" tabindex="-1"><b>ライブトラフィック</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-latency" tabindex="-1"><b>レイテンシ</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-alerts" tabindex="-1"><b>アラート</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-deploy" tabindex="-1"><b>デプロイ</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-services" tabindex="-1"><b>サービス</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-logs" tabindex="-1"><b>ログ</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-runbook" tabindex="-1"><b>Runbook</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-team" tabindex="-1"><b>チーム</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-billing" tabindex="-1"><b>請求</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p><p id="demo-settings" tabindex="-1"><b>設定</b> — サイト構成を示す入口です。このページ内の説明へ移動し、実データの取得・設定変更・課金は行いません。</p></aside></main>
</div>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
ダッシュボードは本来、速度と正確さが最優先される画面です。だから多くの管理画面は、装飾を削ぎ落とした無機質な白地になります。しかしサイバー調のダッシュボードは、あえて逆を行く——「管理画面も世界観の一部だ」という立場を取ります。
「仲間だ」というシグナル
Web3、セキュリティ、開発者ツール、ゲーミング——これらのプロダクトでは、世界観こそが選ばれる理由になります。ユーザーがログインして最初に見る画面が白地の事務的なダッシュボードだったら、その世界観との約束は途切れる。暗背景・ネオンの発光色・モノスペースフォントの3点セットは、ログインの瞬間にこのプロダクトは自分の側のものだというシグナルを返します。機能は同じでも、所属感が変わります。
世界観と可読性の綱引き
ただし、ダッシュボードの本分は情報を正確に速く伝えることです。サイバー演出はこの本分と常に綱引きの関係にある。発光や走査線に酔って肝心の数値が読みにくくなったら本末転倒です。
世界観は味付けであって主菜ではありません。発光や走査線に酔って肝心の数値が読みにくくなったら、本末転倒です。
仕上げの判断軸
サイドバーはセクション見出し＋記号アイコンで情報密度を上げつつ、スキャンしやすい段組みに。上部のステータスバッジ（緑の丸＋「ALL SYSTEMS GREEN」）が画面全体に「動いている感」を与えます。KPIは auto-fit グリッドで並べ、各指標にデルタ表示を添えて変化の向きを即座に把握させる。チャートはシアン→マゼンタの統一グラデで、アクセント色を画面全体で一貫させます。CRT走査線と格子背景は repeating-linear-gradient でJSなしに質感を足せますが、本文や数値のコントラストは必ず確保します。
3点暗背景・ネオン・モノスペース。世界観はこれで足りる
auto-fitKPIグリッド。各指標にデルタを添えて変化の向きを出す
0本追加するJS。走査線も格子も CSS だけで足りる
ダッシュボードの構成要素
使いどころ
- 開発者向け SaaS やセキュリティ系プロダクトの観測系ダッシュボードで、世界観の強さをユーザー体験の一部にしたいとき
- Web3 / インフラ / ゲーミング系の管理画面で「退屈な管理画面UI」を避けたいとき
- 社内向けでも、操作していて楽しい計測ツールにしたいとき
このデザインの分類
背景と狙いどころ
よくある質問
チャートは SVG のままでいい？
プロトタイピングやデモでは SVG のハードコードで十分です。本番プロダクトでは Recharts / Chart.js / ECharts などのチャートライブラリに差し替え、色や装飾だけこのデザイン体系に合わせてください。
アクセシビリティで注意点は？
暗背景 × 明文字のコントラストは確保していますが、緑/赤で状態を表現している部分は色だけに依存しない表示(OK/WARN/ERR のラベル)も必ず残します。アイコン代わりに記号を使う箇所では、スクリーンリーダー向けに aria-label などで意味を補足できます。
モノスペースは何のフォントを読み込む？
このプロンプトは `ui-monospace` を優先するので、システム標準のモノスペースが使われます。プロジェクト側で JetBrains Mono や Fira Code を `@fontsource` などでロードしていれば、そのまま採用されます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。