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

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

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

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/terminal-cli-dashboard/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

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

プレビュー

AIへの指示文

開発者向けインフラ管理ツールを、完全に CLI ターミナル風のダッシュボードとして作ってください。

要件:
- 配色: 黒 #000 + 緑 #00ff88（メインフォア）+ 黄 #ffd700（警告）+ 赤 #ff4060（エラー）+ 灰 #5a5a5a（補助）。
- すべてモノスペースフォント（JetBrains Mono / IBM Plex Mono / Cascadia Code）。
- 上部にプロンプト行: "user@host:~/dashboard $" で常時点滅する block カーソル。
- 左サイドナビは ASCII リスト（"├─ servers"、"├─ logs"、"└─ alerts" など）。
- メインに CRT スキャンライン薄め + ASCII バー / グラフ（████░░░ で進捗を描く）。
- メトリクスは monospace の数字、左揃え固定幅、`tabular-nums`。
- ステータスは `[ OK ]` `[ WARN ]` `[ FAIL ]` のブラケット形式で色分け。
- フッターに `^C` `^X` 等のキーバインドヒント。
- JS 不要。点滅カーソルは CSS animation で。
- フルレスポンシブ。モバイルでは ASCII テーブルが崩れないように横スクロール許可。

バリエーション

アンバー版（古典端末）

緑を琥珀色 #ffb000 に置換。1980年代の単色 CRT 端末の雰囲気に。

ライト版（モダン端末）

背景 #f4f4f0、フォア色は深緑 #006640 に。Apple Terminal のソリッドベージュ風。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。端末風に架空のサーバー情報を表示する見本です。コマンド・ショートカット・監視・接続は実行せず、リンクは説明へ移動します。カーソル演出は停止できます。

CC0 · 改変・商用利用自由 · revision f364aa30bc62

コードを表示

<!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>完全 CLI ターミナル風のダッシュボード — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #000;
        --bg-2: #0a0a0a;
        --fg: #00ff88;
        --fg-dim: #00b366;
        --warn: #ffd700;
        --err: #ff4060;
        --muted: #5a5a5a;
        --quiet: #2c2c2c;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "JetBrains Mono", "IBM Plex Mono", "Cascadia Code",
          ui-monospace, "Noto Sans Mono CJK JP", "Meiryo", monospace;
        background: var(--bg);
        color: var(--fg);
        line-height: 1.55;
        font-size: 13px;
        font-feature-settings: "kern", "ss01";
        font-variant-numeric: tabular-nums;
        min-height: 100dvh;
      }
      /* CRT scanline veil */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1000;
        background:
          repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 2px,
            rgba(0, 255, 136, 0.04) 2px,
            rgba(0, 255, 136, 0.04) 3px
          );
      }

      /* Top prompt bar */
      .promptbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--bg-2);
        border-bottom: 1px solid var(--quiet);
        font-size: 12px;
      }
      .promptbar .ps1 { color: var(--fg); }
      .promptbar .ps1 .user { color: var(--warn); }
      .promptbar .ps1 .at, .promptbar .ps1 .colon, .promptbar .ps1 .dollar { color: var(--muted); }
      .promptbar .ps1 .path { color: var(--fg-dim); }
      .promptbar .cursor {
        display: inline-block;
        width: 8px;
        height: 14px;
        background: var(--fg);
        animation: blink 1s steps(2) infinite;
      }
      @keyframes blink {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
      }
      .promptbar .right {
        margin-left: auto;
        color: var(--muted);
        font-size: 11px;
      }
      .promptbar .right .ok { color: var(--fg); }

      /* Main grid: side nav + content */
      .app {
        display: grid;
        grid-template-columns: 220px 1fr;
        min-height: calc(100dvh - 30px);
      }
      @media (max-width: 720px) {
        .app { grid-template-columns: 1fr; }
        nav.tree { display: none; }
      }

      nav.tree {
        padding: 1rem;
        border-right: 1px solid var(--quiet);
        font-size: 12px;
      }
      nav.tree .head {
        color: var(--muted);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }
      nav.tree ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      nav.tree li {
        white-space: pre;
        line-height: 1.85;
      }
      nav.tree li a {
        color: var(--fg-dim);
        text-decoration: none;
      }
      nav.tree li a:hover { color: var(--fg); background: rgba(0, 255, 136, 0.1); }
      nav.tree li.active a { color: var(--fg); }
      nav.tree li.active::before { color: var(--warn); }

      main.shell {
        padding: 1.25rem 1.5rem;
        overflow-x: auto;
      }

      .out-line {
        white-space: pre;
        line-height: 1.65;
        font-size: 12.5px;
      }
      .out-line.muted { color: var(--muted); }

      .block {
        margin-block: 1.25rem;
      }
      .block h2 {
        font-size: 13px;
        font-weight: 600;
        color: var(--fg);
        margin: 0 0 0.5rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px dashed var(--quiet);
        letter-spacing: 0.05em;
      }
      .block h2 .hash { color: var(--muted); margin-right: 0.45em; }

      /* ASCII table */
      table.ascii {
        width: 100%;
        min-width: 640px;
        border-collapse: collapse;
        font-size: 12px;
      }
      table.ascii th, table.ascii td {
        text-align: left;
        padding: 4px 12px 4px 0;
        white-space: nowrap;
      }
      table.ascii thead {
        color: var(--muted);
        border-bottom: 1px dashed var(--quiet);
      }
      table.ascii tbody tr {
        border-bottom: 1px dashed var(--quiet);
      }
      table.ascii tbody tr:last-child { border-bottom: 0; }
      .tag {
        display: inline-block;
        padding: 1px 6px;
        font-size: 11px;
        letter-spacing: 0.04em;
      }
      .tag.ok   { color: var(--fg); }
      .tag.warn { color: var(--warn); }
      .tag.fail { color: var(--err); }

      /* ASCII bar chart */
      .bar {
        display: grid;
        grid-template-columns: 130px 1fr 60px;
        gap: 12px;
        font-size: 12px;
        line-height: 1.7;
      }
      .bar .lab { color: var(--fg-dim); }
      .bar .val { color: var(--muted); text-align: right; }
      .bar .bb { color: var(--fg); white-space: pre; letter-spacing: 0.04em; }
      .bar.warn .bb { color: var(--warn); }
      .bar.warn .val { color: var(--warn); }
      .bar.err .bb { color: var(--err); }
      .bar.err .val { color: var(--err); }

      /* Bottom bindings hint */
      footer.bind {
        position: sticky;
        bottom: 0;
        background: var(--bg-2);
        border-top: 1px solid var(--quiet);
        padding: 0.45rem 1rem;
        font-size: 11px;
        color: var(--muted);
        display: flex;
        gap: 1.25rem;
        flex-wrap: wrap;
      }
      footer.bind kbd {
        background: var(--quiet);
        color: var(--fg);
        padding: 1px 5px;
        font-family: inherit;
        font-size: 10.5px;
        margin-right: 0.25rem;
      }

/* 配布見本の操作・説明。配色と主構成は維持する。 */
[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:#909090}.app{grid-template-columns:220px minmax(0,1fr)}main.shell{min-width:0;overflow:visible}h1{font-size:20px;line-height:1.5;letter-spacing:0}.promptbar{flex-wrap:wrap;overflow-wrap:anywhere}.promptbar .ps1{overflow-wrap:anywhere}.out-line{white-space:pre-wrap;overflow-wrap:anywhere}.bar{min-width:620px}nav.tree li{white-space:normal}nav.tree li a{display:inline-flex;align-items:center;min-height:44px}.block h2{overflow-wrap:anywhere}footer.bind{position:static}footer.bind::before{content:'操作キーの表示見本（未実装）';width:100%;letter-spacing:0}
@media(max-width:720px){.app{grid-template-columns:minmax(0,1fr)}nav.tree{display:block;border-right:0;border-bottom:1px solid var(--quiet)}nav.tree ul{display:flex;flex-wrap:wrap;gap:0 .8rem}main.shell{padding:1rem}.promptbar .right{margin-left:0}}
nav.tree li a{min-width:44px}
</style>
  </head>
  <body>
    <div class="promptbar">
      <span class="ps1"><span class="user">root</span><span class="at">@</span>helix-prod<span class="colon">:</span><span class="path">~/dashboard</span><span class="dollar"> $ </span></span>
      <span>monitor --live</span>
      <span class="cursor" aria-hidden="true"></span>
      <span class="right"><span class="ok">●</span> connected · 2026-04-26 · 17:42:08 JST</span>
    </div>

    <div class="app">
      <nav class="tree" aria-label="Sections">
        <p class="head">// helix-prod</p>
        <ul>
          <li class="active">├─ <a href="#demo-monitor">monitor</a></li>
          <li>├─ <a href="#demo-servers">servers (12)</a></li>
          <li>├─ <a href="#demo-deploys">deploys</a></li>
          <li>├─ <a href="#demo-logs">logs</a></li>
          <li>├─ <a href="#demo-alerts">alerts (3)</a></li>
          <li>├─ <a href="#demo-db">db</a></li>
          <li>├─ <a href="#demo-queue">queue</a></li>
          <li>├─ <a href="#demo-users">users</a></li>
          <li>└─ <a href="#demo-settings">settings</a></li>
        </ul>
        <p class="head" style="margin-top:1rem;">// shortcuts</p>
        <ul style="color:var(--muted);">
          <li>g s · servers</li>
          <li>g l · logs</li>
          <li>/ &nbsp;· search</li>
          <li>? &nbsp;· help</li>
        </ul>
      </nav>

      <main class="shell"><h1>監視画面の表示見本</h1><p class="demo-banner">数値・接続表示・ショートカットは固定の見本です。キー入力でコマンドは実行されません。</p><button type="button" data-motion-toggle hidden>演出を停止</button>
        <p class="out-line muted">// loaded 12 servers, 3 active alerts, polling every 5s</p>
        <p class="out-line">[<span class="tag ok">  OK  </span>] cluster healthy · 2/3 regions · last sync 4s ago</p>

        <div class="block">
          <h2><span class="hash">##</span> servers / overview</h2>
          <p class="demo-banner">表は横にスクロールできます。Tabで表に入り、左右キーで移動できます。</p><div data-dashboard-scroll tabindex="0" role="region" aria-label="サーバー一覧（横スクロール可）"><table class="ascii">
            <thead>
              <tr>
                <th>HOST</th><th>REGION</th><th>UPTIME</th><th>CPU</th><th>MEM</th><th>STATUS</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>helix-prod-01</td><td>tokyo-a</td><td>14d 03h</td><td>42%</td><td>61%</td><td><span class="tag ok">[ OK ]</span></td></tr>
              <tr><td>helix-prod-02</td><td>tokyo-a</td><td>14d 03h</td><td>38%</td><td>59%</td><td><span class="tag ok">[ OK ]</span></td></tr>
              <tr><td>helix-prod-03</td><td>tokyo-b</td><td>06d 11h</td><td>71%</td><td>78%</td><td><span class="tag warn">[ WARN ]</span></td></tr>
              <tr><td>helix-edge-01</td><td>iad</td><td>30d 12h</td><td>22%</td><td>34%</td><td><span class="tag ok">[ OK ]</span></td></tr>
              <tr><td>helix-edge-02</td><td>lon</td><td>00d 02h</td><td>92%</td><td>88%</td><td><span class="tag fail">[ FAIL ]</span></td></tr>
              <tr><td>helix-edge-03</td><td>sin</td><td>30d 12h</td><td>18%</td><td>30%</td><td><span class="tag ok">[ OK ]</span></td></tr>
            </tbody>
          </table></div>
        </div>

        <div class="block">
          <h2><span class="hash">##</span> traffic / req·s</h2>
          <div data-dashboard-scroll tabindex="0" role="region" aria-label="文字で描いた負荷グラフ（横スクロール可）"><div class="bar">
            <span class="lab">tokyo-a</span><span class="bb">██████████████████████░░░░░░░░░░</span><span class="val">2,143</span>
            <span class="lab">tokyo-b</span><span class="bb">██████████████████░░░░░░░░░░░░░░</span><span class="val">1,720</span>
            <span class="lab">iad</span><span class="bb">█████████░░░░░░░░░░░░░░░░░░░░░░░</span><span class="val">  860</span>
            <span class="lab">lon</span><span class="bb">█████████████████████████████░░░</span><span class="val">2,910</span>
          </div></div>
          <div data-dashboard-scroll tabindex="0" role="region" aria-label="文字で描いた負荷グラフ（横スクロール可）"><div class="bar warn" style="margin-top:.4rem;">
            <span class="lab">queue depth</span><span class="bb">████████████████████████░░░░░░░░</span><span class="val">12.4k</span>
          </div></div>
          <div data-dashboard-scroll tabindex="0" role="region" aria-label="文字で描いた負荷グラフ（横スクロール可）"><div class="bar err" style="margin-top:.4rem;">
            <span class="lab">error rate (5m)</span><span class="bb">██████████░░░░░░░░░░░░░░░░░░░░░░</span><span class="val">3.2%</span>
          </div></div>
        </div>

        <div class="block">
          <h2><span class="hash">##</span> recent events</h2>
          <p class="out-line"><span style="color:var(--muted)">17:41:55</span>  [<span class="tag fail"> FAIL </span>] helix-edge-02 lon · health-check timeout (5/5)</p>
          <p class="out-line"><span style="color:var(--muted)">17:41:30</span>  [<span class="tag warn"> WARN </span>] helix-prod-03 tokyo-b · CPU sustained &gt; 70%</p>
          <p class="out-line"><span style="color:var(--muted)">17:39:08</span>  [<span class="tag ok">  OK  </span>] deploy v0.2.41 → all regions · 8m 22s</p>
          <p class="out-line"><span style="color:var(--muted)">17:32:00</span>  [<span class="tag ok">  OK  </span>] db backup completed · 1.2 GB</p>
          <p class="out-line muted">// + 142 more events · type :events to view</p>
        </div>
      <aside class="demo-note"><h2>この見本について</h2><p>架空のサービス・数値・人物を使った表示見本です。外部通信・永続保存は行いません。配布HTMLはCC0・利用料¥0です。</p><p id="demo-monitor" tabindex="-1"><b>monitor</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-servers" tabindex="-1"><b>servers</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-deploys" tabindex="-1"><b>deploys</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-logs" tabindex="-1"><b>logs</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-alerts" tabindex="-1"><b>alerts</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-db" tabindex="-1"><b>db</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-queue" tabindex="-1"><b>queue</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-users" tabindex="-1"><b>users</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p><p id="demo-settings" tabindex="-1"><b>settings</b> — 端末風の構成を示すページ内の説明です。コマンド実行・監視・接続・設定変更は行いません。</p></aside></main>
    </div>

    <footer class="bind">
      <span><kbd>?</kbd> help</span>
      <span><kbd>/</kbd> search</span>
      <span><kbd>g</kbd> <kbd>s</kbd> servers</span>
      <span><kbd>g</kbd> <kbd>l</kbd> logs</span>
      <span><kbd>:</kbd> command</span>
      <span><kbd>q</kbd> quit</span>
      <span style="margin-left:auto;color:var(--fg-dim);">v0.2.41 · build 26.04</span>
    </footer>
  <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の描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

グラフィカルUIが当たり前になった時代に、あえてコマンドライン（CLI）の見た目を選ぶ——それは郷愁ではなく、ターゲットへの強いシグナルです。ASCIIテーブル、モノスペース、コマンドプロンプト。これらは開発者文化のネイティブ言語であり、その様式をまとうだけで「このプロダクトは我々の側のものだ」と無言で宣言できます。

「あえてGUIを捨てる」というメッセージ

GUIは、初心者にもわかりやすいよう情報を間引き、余白を取り、アイコンで誘導します。CLIはその逆で、前提知識のある人間に向けて最大の情報を最小の面積で叩き込みます。開発者向けのインフラ管理ツールやサーバーモニタリングにおいて、この情報密度は実用上の利点であると同時に、「あなたを初心者扱いしません」という敬意の表明でもあります。同質化したSaaSダッシュボードの海の中で、この姿勢は強烈に記憶されます。

崩れる形GUIとして情報を間引く

初心者にも分かるよう余白を取りアイコンで誘導する設計は、前提知識のある人には初心者扱いとして届きます。密度が足りず、画面を何度も行き来させます。

効く形CLIとして密度で応える

情報密度は実用上の利点であると同時に、あなたを初心者扱いしませんという敬意の表明です。同質化したSaaSの海の中で、この姿勢は記憶されます。

速さの体感

CLIの美学が支持されるもう一つの理由は、操作の俊敏さです。マウスでメニューを辿るより、コマンドを打つほうが速い——少なくとも、速いと感じさせる。たとえ実際の処理速度が同じでも、テキスト中心のインターフェイスは軽い、キビキビしているという体感を生みます。開発者は、その体感を信頼の根拠にします。