ダッシュボード · ダッシュボード
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap(パタパタ式)発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/split-flap-dashboard/
完全無料・著作権フリー(CC0)· 料金¥0 · 商用利用・改変自由
プレビュー
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
DevOps チーム向けのオペレーションダッシュボードを、空港の split-flap(パタパタ式)発車案内板として作ってください。 要件: - 配色: 鋼鉄黒 #0a0908 / #15120e + 金属 #2a2620 / #3a342c + タイル黒 #1a1612 + 文字 #f5e9c8 + 緑 #4dff8a / 琥珀 #ffae3b / 赤 #ff5a4d。 - 全画面 dark + 上方ラジアルグラデ + 走査線(repeating-linear-gradient 1px / 3px)でブラウン管感。 - 上部バー: ▶ FLAPSTREAM · OPS DASHBOARD(琥珀色) + 日時 + LIVE STREAM(緑、点滅ドット)。 - ヒーロー H1:「本日の発着 — 0824 件」(数字部分は琥珀色)。 - 4 ステータスカード: - 各カードに3〜6個のタイル(aspect 0.62、太字 800、Inter フォント、背景黒、box-shadow inset 上下で立体感) - タイルの中央水平に1px の溝線(::before)+ 下半分に subtle gradient(::after)で「上下二分割」感 - 数字は 大きく(30px〜34px)、色はカードごとに(琥珀=Revenue / 緑=Uptime / 通常=Users / 赤=Incidents) - sep(カンマ・ピリオド)と unit(¥・%・件)を別タイル扱いで挟む - delta 行: 前月比+12.4%(緑)/ 要対応(赤) - 中央に巨大な発車案内板: - ヘッダ行: TIME / DESTINATION / GATE / STATUS / OWNER(letter-spacing 0.4em、琥珀色) - 6 行: 各セルが split-flap タイル(時刻・任務名・ゲート・ステータス・担当) - ステータス: ON TIME(緑)/ BOARDING(琥珀)/ DELAYED(赤)/ SCHEDULED(琥珀) - 下部 2 カラム: - Activity Log: 時刻 + lvl タグ(OK 緑 / WARN 琥珀 / ERR 赤)+ メッセージ + ソース - Region Load: 6リージョンの水平バー(緑→琥珀グラデ + 走査ハッチ、警告行は琥珀→赤) - 下部フッタ: BUILD 番号・NODES/REGIONS/PODS 数・次回更新カウントダウン。 - フォント: 全体 JetBrains Mono / IBM Plex Mono、タイル数字のみ Inter 800 で太く。 - JS不要、フルレスポンシブ(モバイルは行のグリッドを auto 1fr に再構成)。
バリエーション
古典発車案内板(ベージュ)
色をベージュ #d4c8a8 + 黒タイルへ反転(昭和の駅)。LIVE を明朝書体「現在」に。 フォントを Garamond / Yu Mincho に切替。
NASA 管制室版
色を NASA カーキ + シアン + 琥珀の3色に。緑文字を緑燐光(text-shadow)に変更。 ボタン群を物理キー風(凸ボタン)に。
このプレビューのコード
HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。発着板で架空の運用データを表示する見本です。時刻・指標・ログは固定で、監視・自動更新・実際の交通案内は行いません。表示演出の停止とOSの動き低減に対応します。
コードを表示
<!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,nofollow">
<title>split-flap-dashboard preview</title>
<style>
:root {
--bg: #0a0908;
--bg2: #15120e;
--steel: #2a2620;
--steel-light: #3a342c;
--tile: #1a1612;
--tile-edge: #0a0806;
--tile-fg: #f5e9c8;
--green: #4dff8a;
--amber: #ffae3b;
--red: #ff9c91;
--gray: #8a8276;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: radial-gradient(ellipse at 50% 0%, var(--bg2) 0%, var(--bg) 50%);
color: var(--tile-fg);
font-family: "JetBrains Mono", "IBM Plex Mono", "Courier New", "Meiryo", monospace;
line-height: 1.55;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px
);
z-index: 1;
}
.stage {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: clamp(24px, 4vw, 48px);
z-index: 2;
}
/* Top header */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--gray);
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid var(--steel);
}
.topbar .brand {
color: var(--amber);
font-weight: 700;
font-size: 14px;
}
.topbar .right {
display: flex; gap: 22px;
}
.topbar .live {
color: var(--green);
display: inline-flex;
align-items: center;
gap: 8px;
}
.topbar .live::before {
content: "";
width: 8px; height: 8px;
background: var(--green);
border-radius: 50%;
box-shadow: 0 0 12px var(--green);
animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }
/* Heading */
.heading {
margin: 36px 0 28px;
}
.heading h1 {
font-family: "JetBrains Mono", "Meiryo", monospace;
font-weight: 800;
font-size: clamp(28px, 4vw, 48px);
margin: 0 0 6px;
letter-spacing: 0.05em;
color: var(--tile-fg);
}
.heading h1 b { color: var(--amber); }
.heading p {
margin: 0;
color: var(--gray);
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
}
/* Stat row - hero metrics */
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 26px;
}
@media (max-width: 920px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
background: var(--steel);
border: 1px solid var(--steel-light);
padding: 14px 16px;
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.stat .lbl {
font-size: 9.5px;
letter-spacing: 0.4em;
color: var(--gray);
text-transform: uppercase;
margin-bottom: 8px;
}
.stat .digits {
display: flex;
gap: 3px;
align-items: stretch;
}
.stat .digits .tile {
flex: 1;
aspect-ratio: 0.62;
background: var(--tile);
color: var(--tile-fg);
border-radius: 3px;
border: 1px solid var(--tile-edge);
box-shadow:
inset 0 -1px 0 rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 2px rgba(0,0,0,0.45);
display: grid;
place-items: center;
font-family: "Inter", "JetBrains Mono", sans-serif;
font-weight: 800;
font-size: clamp(20px, 3vw, 34px);
position: relative;
overflow: hidden;
}
.stat .digits .tile::before {
content: "";
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: rgba(0,0,0,0.7);
z-index: 1;
}
.stat .digits .tile::after {
content: "";
position: absolute;
inset: 50% 0 0;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
pointer-events: none;
}
.stat .digits .sep {
flex: 0 0 auto;
aspect-ratio: 0.3;
display: grid;
place-items: center;
color: var(--gray);
font-size: 28px;
line-height: 0;
}
.stat .digits .unit {
flex: 0 0 auto;
display: grid;
place-items: end center;
padding-bottom: 4px;
color: var(--gray);
font-size: 12px;
letter-spacing: 0.25em;
line-height: 1;
}
.stat.amber .tile { color: var(--amber); }
.stat.green .tile { color: var(--green); }
.stat.red .tile { color: var(--red); }
.stat .delta {
margin-top: 8px;
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--gray);
}
.stat .delta b { color: var(--green); }
.stat .delta b.down { color: var(--red); }
/* Departure board */
.board-wrap {
background: var(--steel);
border: 1px solid var(--steel-light);
box-shadow:
0 0 0 4px var(--bg2) inset,
0 16px 48px -12px rgba(0,0,0,0.7);
padding: 18px;
margin-bottom: 26px;
}
.board-head {
display: grid;
grid-template-columns: 1fr 2.4fr 1fr 1fr 1fr;
gap: 12px;
color: var(--amber);
font-size: 10.5px;
letter-spacing: 0.4em;
text-transform: uppercase;
border-bottom: 1px solid var(--steel-light);
padding-bottom: 8px;
margin-bottom: 4px;
font-weight: 700;
}
@media (max-width: 720px) {
.board-head { display: none; }
}
.row {
display: grid;
grid-template-columns: 1fr 2.4fr 1fr 1fr 1fr;
gap: 12px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed rgba(245,233,200,0.12);
}
.row:last-child { border-bottom: 0; }
@media (max-width: 720px) {
.row {
grid-template-columns: auto 1fr;
gap: 6px;
}
}
.text-tile {
background: var(--tile);
border: 1px solid var(--tile-edge);
border-radius: 3px;
padding: 6px 10px;
font-family: "Inter", sans-serif;
font-weight: 800;
color: var(--tile-fg);
letter-spacing: 0.08em;
box-shadow:
inset 0 -1px 0 rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 2px rgba(0,0,0,0.45);
text-align: center;
position: relative;
line-height: 1.2;
overflow: hidden;
}
.text-tile::before {
content: "";
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: rgba(0,0,0,0.65);
}
.text-tile.lg { font-size: 18px; padding: 10px 12px; letter-spacing: 0.12em; }
.text-tile.sm { font-size: 12px; padding: 5px 8px; letter-spacing: 0.18em; }
.text-tile.green { color: var(--green); }
.text-tile.amber { color: var(--amber); }
.text-tile.red { color: var(--red); }
.text-tile.gray { color: var(--gray); }
.row .destination {
display: flex; gap: 8px; align-items: center;
}
.row .destination .name {
flex: 1;
}
.row .destination .gate {
flex: 0 0 auto;
}
/* Bottom panel - 2 col */
.grid-2 {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 18px;
}
@media (max-width: 920px) { .grid-2 { grid-template-columns: 1fr; } }
.panel {
background: var(--steel);
border: 1px solid var(--steel-light);
padding: 18px;
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.panel h3 {
margin: 0 0 14px;
font-size: 11px;
letter-spacing: 0.4em;
color: var(--amber);
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid var(--steel-light);
padding-bottom: 8px;
}
/* Activity log */
.log {
display: grid;
gap: 6px;
font-size: 12px;
color: var(--gray);
}
.log-row {
display: grid;
grid-template-columns: auto auto 1fr auto;
gap: 12px;
align-items: center;
}
.log-row .time {
color: var(--tile-fg);
font-variant-numeric: tabular-nums;
}
.log-row .lvl {
width: 56px;
text-align: center;
border-radius: 2px;
padding: 2px 6px;
font-size: 10px;
letter-spacing: 0.15em;
font-weight: 700;
}
.lvl.ok { background: rgba(77,255,138,0.15); color: var(--green); border: 1px solid rgba(77,255,138,0.4); }
.lvl.warn { background: rgba(255,174,59,0.15); color: var(--amber); border: 1px solid rgba(255,174,59,0.4); }
.lvl.err { background: rgba(255,90,77,0.15); color: var(--red); border: 1px solid rgba(255,90,77,0.4); }
.log-row .msg { color: var(--tile-fg); }
.log-row .src { color: var(--gray); font-size: 10.5px; letter-spacing: 0.15em; }
/* Bar chart */
.bars {
display: grid;
gap: 8px;
}
.bar-row {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 12px;
align-items: center;
font-size: 11px;
letter-spacing: 0.18em;
}
.bar-row .lbl { color: var(--gray); }
.bar-row .bar {
height: 14px;
background: var(--tile);
border: 1px solid var(--tile-edge);
position: relative;
overflow: hidden;
}
.bar-row .bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--green), var(--amber));
background-image: repeating-linear-gradient(
90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 6px
), linear-gradient(90deg, var(--green), var(--amber));
}
.bar-row .num {
color: var(--tile-fg);
font-weight: 800;
font-variant-numeric: tabular-nums;
width: 50px;
text-align: right;
}
.bar-row.warn .bar > span {
background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 6px), linear-gradient(90deg, var(--amber), var(--red));
}
/* Footer */
.footer {
margin-top: 26px;
padding-top: 12px;
border-top: 1px solid var(--steel);
color: var(--gray);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
.footer b { color: var(--amber); }
/* 配布見本の操作・説明。配色と主構成は維持する。 */
[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{--gray:#b8b0a4}.topbar,.topbar .right{flex-wrap:wrap;gap:.8rem}.topbar .brand{letter-spacing:.15em}.heading h1{line-height:1.4}.heading p,.stat .delta,.stat .lbl,.stat .digits .unit{letter-spacing:0}.stat-row{grid-template-columns:repeat(4,minmax(0,1fr))}.stat,.row>*,.grid-2>*,.destination{min-width:0}.text-tile{overflow:visible;overflow-wrap:anywhere}.row{grid-template-columns:minmax(70px,1fr) minmax(0,2.4fr) repeat(3,minmax(0,1fr))}.log-row{grid-template-columns:auto auto minmax(0,1fr) auto}.log-row .msg{overflow-wrap:anywhere}.bar-row{grid-template-columns:minmax(0,90px) minmax(10px,1fr) 50px;gap:8px}.bar-row .lbl{overflow-wrap:anywhere}
@media(max-width:920px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.row{grid-template-columns:minmax(0,1fr)}.row>.text-tile:first-child{justify-self:start;min-width:88px}.row .destination{width:100%}.log-row{grid-template-columns:auto auto minmax(0,1fr)}.log-row .msg{grid-column:1/-1;grid-row:auto;line-height:1.7}.log-row .src{grid-column:1/-1;overflow-wrap:anywhere}.board-wrap,.panel{padding:14px}.text-tile.lg{font-size:16px}.heading p{overflow-wrap:anywhere}}@media(max-width:480px){.stat-row{grid-template-columns:minmax(0,1fr)}.stat .digits{max-width:320px}.topbar .right{letter-spacing:.1em}}
.stat .digits{height:64px}.stat .digits .tile,.stat .digits .sep{aspect-ratio:auto}.stat.red .digits{max-width:120px}
@media(max-width:480px){.stat .digits{height:56px}}
</style>
</head>
<body>
<div class="stage">
<header class="topbar">
<span class="brand">▶ FLAPSTREAM · OPS DASHBOARD</span>
<div class="right">
<span>2026.04.27 — 14:08:42 JST</span>
<span class="live">LIVE STREAM</span>
</div>
</header>
<p class="demo-banner">架空の発着板・固定データの表示見本です。監視・秒ごとの更新・実際の発着案内は行いません。</p><button type="button" data-motion-toggle hidden>演出を停止</button><section class="heading">
<h1>本日の発着 — <b>0824 件</b></h1>
<p>— Operations board · static demo data —</p>
</section>
<section class="stat-row">
<div class="stat amber">
<div class="lbl">REVENUE / 月</div>
<div class="digits">
<span class="unit">¥</span>
<span class="tile">8</span>
<span class="tile">4</span>
<span class="sep">,</span>
<span class="tile">2</span>
<span class="tile">9</span>
<span class="tile">6</span>
</div>
<div class="delta">前月比 <b>+12.4%</b> · YoY +38%</div>
</div>
<div class="stat green">
<div class="lbl">UPTIME / 30日</div>
<div class="digits">
<span class="tile">9</span>
<span class="tile">9</span>
<span class="sep">.</span>
<span class="tile">9</span>
<span class="tile">7</span>
<span class="unit">%</span>
</div>
<div class="delta">SLA 99.95% を <b>+0.02%</b> 上回る</div>
</div>
<div class="stat">
<div class="lbl">ACTIVE USERS</div>
<div class="digits">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">,</span>
<span class="tile">4</span>
<span class="tile">7</span>
<span class="tile">3</span>
</div>
<div class="delta">接続数の表示見本</div>
</div>
<div class="stat red">
<div class="lbl">INCIDENTS / 24h</div>
<div class="digits">
<span class="tile">0</span>
<span class="tile">3</span>
<span class="unit">件</span>
</div>
<div class="delta">前日比 <b class="down">+2件</b> 要対応</div>
</div>
</section>
<section class="board-wrap">
<div class="board-head">
<span>TIME</span>
<span>DESTINATION / FLIGHT</span>
<span>GATE</span>
<span>STATUS</span>
<span>OWNER</span>
</div>
<div class="row">
<div class="text-tile lg">14:30</div>
<div class="destination">
<div class="text-tile lg name">RELEASE v3.4.0 / PROD DEPLOY</div>
<div class="text-tile sm gray gate">G·07</div>
</div>
<div class="text-tile sm">FE-DEPLOY</div>
<div class="text-tile lg green">ON TIME</div>
<div class="text-tile sm gray">@yusuke</div>
</div>
<div class="row">
<div class="text-tile lg">14:45</div>
<div class="destination">
<div class="text-tile lg name">DB MIGRATION / SHARD-04</div>
<div class="text-tile sm gray gate">G·12</div>
</div>
<div class="text-tile sm">DB-OPS</div>
<div class="text-tile lg amber">BOARDING</div>
<div class="text-tile sm gray">@kaori</div>
</div>
<div class="row">
<div class="text-tile lg">15:00</div>
<div class="destination">
<div class="text-tile lg name">CDN PURGE / GLOBAL</div>
<div class="text-tile sm gray gate">G·03</div>
</div>
<div class="text-tile sm">PLATFORM</div>
<div class="text-tile lg green">ON TIME</div>
<div class="text-tile sm gray">@takeshi</div>
</div>
<div class="row">
<div class="text-tile lg">15:20</div>
<div class="destination">
<div class="text-tile lg name">SECURITY PATCH / CVE-2026-0421</div>
<div class="text-tile sm gray gate">G·09</div>
</div>
<div class="text-tile sm">SEC-OPS</div>
<div class="text-tile lg red">DELAYED</div>
<div class="text-tile sm gray">@hiroshi</div>
</div>
<div class="row">
<div class="text-tile lg">16:00</div>
<div class="destination">
<div class="text-tile lg name">FEATURE FLIP / PAYWALL_V2</div>
<div class="text-tile sm gray gate">G·15</div>
</div>
<div class="text-tile sm">PRODUCT</div>
<div class="text-tile lg green">ON TIME</div>
<div class="text-tile sm gray">@youko</div>
</div>
<div class="row">
<div class="text-tile lg">16:30</div>
<div class="destination">
<div class="text-tile lg name">WEEKLY DIGEST / EMAIL BLAST</div>
<div class="text-tile sm gray gate">G·22</div>
</div>
<div class="text-tile sm">CRM</div>
<div class="text-tile lg amber">SCHEDULED</div>
<div class="text-tile sm gray">@kaoru</div>
</div>
</section>
<section class="grid-2">
<div class="panel">
<h3>▶ Activity Log · LIVE</h3>
<div class="log">
<div class="log-row">
<span class="time">14:08:42</span>
<span class="lvl ok">OK</span>
<span class="msg">Health check passed for all 14 nodes</span>
<span class="src">us-west-2</span>
</div>
<div class="log-row">
<span class="time">14:07:31</span>
<span class="lvl warn">WARN</span>
<span class="msg">Cache hit ratio dropped to 72% on edge-04</span>
<span class="src">edge-04</span>
</div>
<div class="log-row">
<span class="time">14:06:18</span>
<span class="lvl ok">OK</span>
<span class="msg">Auto-scaling triggered: +2 instances on api-prod</span>
<span class="src">api-prod</span>
</div>
<div class="log-row">
<span class="time">14:05:55</span>
<span class="lvl err">ERR</span>
<span class="msg">Webhook retry exhausted: stripe-events</span>
<span class="src">webhook</span>
</div>
<div class="log-row">
<span class="time">14:04:02</span>
<span class="lvl ok">OK</span>
<span class="msg">Deploy succeeded: v3.3.9 → 2,341 pods rolled</span>
<span class="src">k8s</span>
</div>
<div class="log-row">
<span class="time">14:02:14</span>
<span class="lvl ok">OK</span>
<span class="msg">Backup completed: 1.4TB to vault-04</span>
<span class="src">backup</span>
</div>
</div>
</div>
<div class="panel">
<h3>▶ Region Load · 5min avg</h3>
<div class="bars">
<div class="bar-row">
<span class="lbl">TOKYO</span>
<span class="bar"><span style="width:62%"></span></span>
<span class="num">62%</span>
</div>
<div class="bar-row">
<span class="lbl">OSAKA</span>
<span class="bar"><span style="width:38%"></span></span>
<span class="num">38%</span>
</div>
<div class="bar-row warn">
<span class="lbl">FUKUOKA</span>
<span class="bar"><span style="width:88%"></span></span>
<span class="num">88%</span>
</div>
<div class="bar-row">
<span class="lbl">SAPPORO</span>
<span class="bar"><span style="width:24%"></span></span>
<span class="num">24%</span>
</div>
<div class="bar-row">
<span class="lbl">SINGAPORE</span>
<span class="bar"><span style="width:55%"></span></span>
<span class="num">55%</span>
</div>
<div class="bar-row">
<span class="lbl">FRANKFURT</span>
<span class="bar"><span style="width:42%"></span></span>
<span class="num">42%</span>
</div>
</div>
</div>
</section>
<footer class="footer">
<span>FLAPSTREAM v.4 · BUILD 2026.04.27.b</span>
<span>NODES <b>14</b> · REGIONS <b>06</b> · PODS <b>2,341</b></span>
<span>STATIC DATA · DISPLAY DEMO</span>
</footer><aside class="demo-note"><h2>この見本について</h2><p>架空のサービス・数値・人物を使った表示見本です。外部通信・永続保存は行いません。配布HTMLはCC0・利用料¥0です。</p><p id="demo-board" tabindex="-1"><b>発着・ログ・指標</b> — 時刻・サービス名・稼働率・障害・請求額・利用者数は架空の固定値です。実行・自動更新・通知の機能は含みません。</p></aside>
</div>
<script>
document.documentElement.classList.add('demo-js');
const motionButton=document.querySelector('[data-motion-toggle]'),motionQuery=matchMedia('(prefers-reduced-motion: reduce)');let userPaused=false;
function syncMotion(){const paused=userPaused||motionQuery.matches;document.documentElement.toggleAttribute('data-motion-paused',paused);motionButton.disabled=motionQuery.matches;motionButton.setAttribute('aria-pressed',String(paused));motionButton.textContent=motionQuery.matches?'動きを減らす設定で停止中':paused?'演出を再開':'演出を停止';}
motionButton.hidden=false;motionButton.addEventListener('click',()=>{userPaused=!userPaused;syncMotion()});motionQuery.addEventListener('change',syncMotion);syncMotion();
</script></body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
空港や駅でかつて使われた「パタパタ式」の発車案内板——split-flap display。文字が物理的に回転し、パタパタという音とともに情報が切り替わるあの装置は、デジタル表示にはない「今まさに更新された」という実感を持っていました。このダッシュボードは、その質感を業務画面に持ち込みます。
「動いている」という実感
通常の管理画面は、数値が静かに書き換わるだけです。情報は正確でも、「システムが今この瞬間に動いている」という体感は薄い。split-flapのタイル状表示は、一枚ごとに分割された板が情報を構成することで、「いつ切り替わってもおかしくない」という予感を持続的に与えます。データが同じでも、物理的なボードに乗っているように見えるだけで、ダッシュボードは生きている印象に変わります。
抽象的な数値に実在感を与える
KPI、ログ、リソース使用率——ダッシュボードが扱うのは本来、目に見えない抽象的な数字です。それを空港の案内板という誰もが知っている物理オブジェクトの形式に乗せると、数値が急に実在感を帯びます。駅や空港で案内板を見上げた記憶は多くの人に共通しており、その記憶がWebアプリへの親しみと愛着に転写されます。
仕上げの判断軸
タイルの分割線(中央の水平線)と、わずかな上下の陰影が「板らしさ」の核です。これを省くと、ただの四角い数字に戻ってしまいます。
崩れる形分割線と陰影を省く
軽量化のつもりで削ると、ただの四角い数字に戻ります。パタパタ式に見立てた意味が消え、装飾のコストだけが残ります。
効く形中央の水平線と上下の陰影
この2つが板らしさの核です。一枚ごとに分割された板が情報を構成することで、いつ切り替わってもおかしくないという予感が持続します。
ステータスは色だけでなく、ON TIME / DELAYED のようなテキストも併記してください。色だけに載せると、見分けられない人に何も届きません。
情報密度が高い様式なので、本当に重要な指標を選び抜き、詰め込みすぎないことが可読性を守ります。
ダッシュボードの構成要素
使いどころ
- DevOps・SRE のリアルタイムOPSダッシュボード
- 物流・倉庫管理の出荷管制画面
- 取引・金融市場のティッカーボード
- ホテル・空港・駅の業務オペレーション
- イベント運営の進行管制パネル
このデザインの分類
背景と狙いどころ
よくある質問
split-flap タイルの作り方は?
本物のパタパタアニメは作れる?
アクセシビリティは大丈夫?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。