管理システムとデスクトップワークスペースのUIデザイン：見せかけのダッシュボードを避け、中心オブジェクトでレイアウトを組む
管理画面やデスクトップアプリをAIに作らせると、上部に増減率付きのKPIカード4枚、中央に折れ線グラフと円グラフ2つ、下部に簡素なテーブルという構成になりがちです。しかし、本当に使いやすいワークスペース（運用障害対応、API請求管理、ラボのサンプルライブラリ、動画エディターなど）は、ユーザーが日々扱う具体的な対象を中心に作られています。何を選び、何を比較し、異常を見つけたらどう即座に対処するかが設計の軸です。
重要なポイント
- 「上部に統計カードを何枚置くか」ではなく、まず「ユーザーはここでどの対象を処理するのか」を問います。ファーストビューのスペースは、サービストポロジー、請求リスト、サンプル凍存ボックス、タイムラインのために使います。
- 高密度なUIでは、整列、字重の対比、余白で優先順位を付けます。すべての項目や小さなラベルを太い枠で囲まないようにします。
- よいワークスペースには状態の連携が必要です。時間帯をドラッグするとログが同期し、異常な行をクリックすると調査ドロワーが開き、ショートカットでコマンドパレットを呼び出せます。
- Oil UI Proには、リスト―詳細、キャンバス―インスペクター、タイムライン、ノードグラフなど、管理・ツール系ワークスペースの10種類の骨格が含まれ、カテゴリーに合わせて選べます。
npx skills add oil-oil/oil-ui/ja/inspiration/desktop-app-design/ では、ギャラリーのデスクトップアプリとワークスペースの全事例を見られます。
「統計グラフの積み増し」から「中心オブジェクトを扱う場」へ
ギャラリーのデスクトップ作品には、ありきたりな「4枚カードのダッシュボード」を採用したものはありません。分野ごとに、日常の操作対象が全く違うからです。
運用監視「Nightwatch」で中心となるのは、障害が発生しているサービスの経路と時間帯です。時間範囲をドラッグすると、トポロジー図、デプロイマーカー、ピーク時のログが同時にそろいます。API請求管理「Vesper」では、当期の異常請求とWebhookの支払いイベントが中心で、開くと支払いの再試行やクォータ調整を行えます。ラボのサンプルシステム「GridStore」では、−80度の冷凍庫内にある9×9の凍存ボックスグリッドが中心です。研究者はグリッド上でウェルを選び、入出庫と追跡を行います。
| ギャラリー作品 | 分野 | ページで操作する中心対象 | 重要な状態と連携 |
|---|---|---|---|
| Nightwatch (ops) | 運用監視とオンコール障害対応 | サービストポロジーの経路＋共通タイムライン | 正常な概要、警告時の下流経路ハイライト、エラーピークのログ、リリースとの関連という4状態の切り替え |
| Vesper (vesper) | API使用量と請求コンソール | 顧客請求リスト＋イベントタイムラインドロワー | 使用量のしきい値による即時フィルター、異常請求の明細と支払い再試行、クイックコマンドパレット |
| Runrate (revenue) | SaaS収益とリテンション | MRR変動の内訳（新規／拡大／解約）＋コホートマトリクス | 時間粒度の切り替えに連動する純収益維持率（NRR）、顧客層の明細、請求期間のドリルダウン |
| GridStore (lims) | 生物ラボのサンプル管理 | 冷凍庫ラックの階層＋9×9凍存ボックスのウェルグリッド | ウェルを視覚的に選んでサンプルチューブの経路を確認、一括移動・出庫、温度警告状態 |
情報密度が高くても画面をすっきり保つ4つの工夫
管理画面は項目も状態も多くなります。AIの既定の「カードの入れ子＋全面罫線のテーブル＋虹色の状態ラベル」を採用すると、10分も見れば目が疲れてしまいます。Oil UIでは、4つの削減原則で密度をコントロールします。
- 縦の罫線を増やす代わりに、列の整列と行間を使う
- 数値列は等幅数字（tabular-nums）でそろえて右揃えにし、文字と時刻の列は左揃えにします。余分な縦の区切り線をなくすだけで、テーブルがぐっと読み進めやすくなります。
- 高彩度の色は、本当に対応が必要な異常だけに使う
- 正常な状態まで眩しい明るい緑のピルにすると、本当の未払いやサービス停止が目立たなくなります。正常時は落ち着いたグレーの文字や小さなドットにし、琥珀色と赤は警告と停止項目のために残します。
- 二次的な明細はドロワー、分割ペイン、浮動レイヤーに置く
- 15項目をすべてリスト行に詰め込まないようにします。メインリストには絞り込みと判断に必要な5～6列だけを残し、行をクリックしたら右側のインスペクターや詳細ビューで完全なペイロードと履歴を開きます。
- ページ全体でビジュアル言語を崩さない
- AIが生成したページは、ファーストビューは整っていても、下のテーブルやダイアログで粗い既定スタイルに戻りがちです。上部バー、フィルターバー、空状態、詳細ドロワーまで、同じ文字サイズの階層と抑制の効いた罫線を共有させます。
管理画面・デスクトップワークスペースのプロンプトテンプレート
エージェントに管理画面を依頼するときは、メイン作業領域のレイアウト構造（左ナビゲーション＋中央のリスト／キャンバス＋右の詳細インスペクターなど）と、切り替え可能な3つの実際の作業状態を直接指定します。
Oil UIを使って、[システム名（例：ラボのサンプルライブラリ管理システム／越境物流ディスパッチ画面）]をデザインして実装してください。デスクトップのビューポートは1440×900です。
- 中心となる作業対象：[汎用的な統計カードのホームページにはせず、メイン作業領域をサンプル凍存ボックスグリッド／異常貨物リスト／ノードキャンバスに直接割り当てる]。
- レイアウトと情報密度：[左の階層ナビゲーション＋中央のメイン作業領域＋右の選択項目の詳細パネル]という構造を採用します。数値はすべてtabular-numsを使い、高彩度の強調色は異常と警告だけに使ってください。
- 必須のインタラクション状態：1) 日常の頻繁なフィルターと閲覧、2) 異常対象を選択した後の詳細調査と復旧操作、3) 一括操作またはクイックコマンドの状態を実装し、1440×900でスクリーンショットを撮って確認してください。「汎用的な統計カードのホームページにしない」と明示すると、モデルはありきたりなダッシュボードの定型から離れやすくなります。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Nightwatch
運用監視・インシデント対応
中規模プラットフォームチーム向けの監視・オンコールツール（1440×900）。英語のインターフェースとし、サービストポロジー、レイテンシー、エラーレート、トラフィックのグラフ、最近のデプロイ、ログ、トレースを表示する。インシデント時には、アラート、現在のオンコール担当者、インシデントのタイムラインを示す。 中核はインシデントの進行。障害が起きているサービスと影響を受ける下流サービスがトポロジー上で明確に分かるようにする。時間範囲をドラッグすると、グラフ、デプロイマーカー、ログの時間がそろい、どのデプロイが問題を引き起こしたかを確認できるようにする。 正常な概要、アラートとトポロジー上の影響経路を強調した進行中のインシデント、エラーピーク時にログとトレースを開いて原因デプロイを特定する状態の3状態をデザインする。
作品とプロンプトを見る →
Vesper
API使用量請求コンソール
AI・開発者ツールチーム向けに、API使用量の請求と顧客請求書のコンソールをデザインする。英語のインターフェースで、デスクトップのビューポートは1440×900とする。ユーザーはサブスクリプションプランとライブAPI使用量を管理し、現在の請求サイクルの未払い額と請求書の例外を確認し、ステータスや使用量のしきい値で顧客・請求書を絞り込み、レコードを開いて明細、支払いと Webhook のタイムライン、イベントペイロードを確認できる。支払いの再試行、クォータ調整、請求書のエクスポートを含める。 3つの主要状態を実装する：収益と使用量の傾向、顧客または請求書リスト、ライブフィルターを備えた日常のワークスペース。使用量の内訳、ステータスタイムライン、復旧アクションを備えた例外請求書の詳細ビュー。クイックコマンドパレット。オフラインで使える `index.html` を納品し、`shots/desktop.png`、`shots/state-1.png`、`shots/state-2.png` を1440×900、DPR=2で撮影する。
作品とプロンプトを見る →
Runrate
SaaS収益ダッシュボード
独立開発者と小規模チームがサブスクリプション収益を把握するためのデスクトップアプリ（1440×900）。MRR、新規、拡大、縮小、解約、純収益維持率と月次の傾向を表示する。月を開くと変化をもたらした顧客が分かり、顧客を開くとサブスクリプション履歴を確認できる。 ホーム画面では指標カードを積み上げるのではなく、まず「今月、収益がどう変わったか」に答える。概要、月を開いて変化を表示した状態、単一顧客の詳細をデザインする。
作品とプロンプトを見る →
GridStore
研究所試料管理システム
生物医学研究所向けの試料管理システム。試料の受け入れ、フリーザー内の保存場所、検査ワークフロー、監査記録を扱う。メインインターフェースを構築する。
作品とプロンプトを見る →Oil UI Pro：管理画面とデスクトップツールの10種類の専門骨格
Oil UI Proには、複雑なツールと管理画面に特化した10種類のワークスペースプロトタイプが含まれます。監視・障害対応、請求統制、多層データテーブル、キャンバスエディター、タイムラインのストーリーボード、ノードオーケストレーションなどに対応し、ページ上部から下部のダイアログまで、ビジュアルの連続性も確認します。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
AIが管理画面の上部に意味のないKPIカードを4枚並べるのを止めるには？
プロンプトに「メインビューポートでは、操作可能な作業対象（注文の異常テーブル、トポロジー図、カレンダーのスケジュールなど）を直接表示し、タスクと切り離された上部4分割の統計カードは置かない」と明記します。集計値が必要なら、リストの上のコンパクトなフィルター指標バーにまとめるよう指示してください。
管理UIは画面固定（100vh）とページ全体のスクロールのどちらが適していますか？
動画エディター（Cut）、ホワイトボード（Loom）、メッセージング（Sonar）、オンコール監視（Nightwatch）などは、1440×900の全画面アプリの骨格にし、内部パネルを個別にスクロールさせる構成が向いています。長い収益分析レポートやドキュメントサイトは、ページ全体を自然にスクロールさせる方が適しています。
テーブルの列数が多い場合、1440pxで窮屈にならずに見やすく配置するには？
項目を「一目で判断するために必要なもの」と「開いて処理するときに必要なもの」に分けます。メインテーブルには識別子、状態、主要な金額／指標、更新日時、主操作の5～6列を残し、Webhookの生JSON、監査ログ、過去のバッチなどは右側の詳細ドロワーに移します。
ギャラリーのデスクトップアプリ事例で、状態を直接クリックして切り替えられますか？
はい。「Nightwatch」「Vesper」「Sonar」などは、ページ内でフィルター、会話の切り替え、ドロワーを直接操作できます。作品ビューアー下部の状態ボタンから、事前に設定された重要な業務状態へ移動することも可能です。