ダッシュボード · ダッシュボード

空港パタパタ式発車案内板風のダッシュボード

空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。

PUBLISHED — 2026年4月28日 UPDATED — 2026年4月27日 CATEGORY — ダッシュボード LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/split-flap-dashboard/

概要

空港や駅でかつて使われた「パタパタ式」の発車案内板——split-flap display。文字が物理的に回転し、パタパタという音とともに情報が切り替わるあの装置は、デジタル表示にはない「今まさに更新された」という実感を持っていました。このダッシュボードは、その質感を業務画面に持ち込みます。

「動いている」という実感

通常の管理画面は、数値が静かに書き換わるだけです。情報は正確でも、「システムが今この瞬間に動いている」という体感は薄い。split-flapのタイル状表示は、一枚ごとに分割された板が情報を構成することで、「いつ切り替わってもおかしくない」という予感を持続的に与えます。データが同じでも、それが物理的なボードに乗っているように見えるだけで、ダッシュボードは「生きている」印象に変わります。

抽象的な数値に実在感を与える

KPI、ログ、リソース使用率——ダッシュボードが扱うのは本来、目に見えない抽象的な数字です。それを空港の案内板という「誰もが知っている物理オブジェクト」の形式に乗せると、数値が急に実在感を帯びます。駅や空港で案内板を見上げた記憶は多くの人に共通しており、その記憶がWebアプリへの親しみと愛着に転写されます。

仕上げの判断軸

タイルの分割線（中央の水平線）と、わずかな上下の陰影が「板らしさ」の核です。これを省くと、ただの四角い数字に戻ってしまいます。文字色と背景のコントラストは必ず確保し、ステータスは色だけでなくテキスト（ON TIME / DELAYED など）も併記して色覚特性に配慮すること。情報密度が高い様式なので、本当に重要な指標を選び抜き、詰め込みすぎないことが可読性を守ります。

使いどころ

DevOps・SRE のリアルタイムOPSダッシュボード
物流・倉庫管理の出荷管制画面
取引・金融市場のティッカーボード
ホテル・空港・駅の業務オペレーション
イベント運営の進行管制パネル

カテゴリ: ダッシュボード
スタイル: レトロ / モノクロ / ボールド / サイバー / ダーク

背景と狙いどころ

Context

Category · ダッシュボード

ダッシュボード

管理画面・データ可視化。

カテゴリ一覧を見る →

Style · レトロ

レトロ

古さを意匠化した温度。

スタイル一覧を見る →

Style · モノクローム

モノクロ

単色または白黒で統一されたトーン。

スタイル一覧を見る →

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）に変更。
ボタン群を物理キー風（凸ボタン）に。

よくある質問

split-flap タイルの作り方は？

aspect-ratio で縦長 0.62 を確保 + 中央水平の 1px 線（::before）+ 下半分の subtle gradient（::after）で「上下に分割された板」感を作る。box-shadow の inset で凹凸も追加。

本物のパタパタアニメは作れる？

作れるが CSS のみだと手間。3D transform + perspective で上半分が rotateX 回転する hack がある。本実装は静的だが、必要なら hover で transform でも演出可能。

アクセシビリティは大丈夫？

文字色とタイル背景のコントラストは十分（5:1以上）。ステータスバッジは色だけでなくテキスト（ON TIME / DELAYED）も伴うので色覚異常にも安全。

完全 CLI ターミナル風のダッシュボード

GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。

ダッシュボードサイバーモノクロ

サイバー調のダッシュボード画面

黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。

ダッシュボードサイバーダーク

Discord/Slack風の3ペイン・チャットインターフェイス

Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。

ダークサイバー