中村将明/ 制作事例/ RelayGrid：無人設備網の障害対応SaaS

SAAS WEB APP / UI・UXコンセプト

RelayGrid：無人設備網の障害対応SaaS

CONCEPT

無人の設備網で起きた障害の受け付けから、担当の引き受け、4つの判断の確定、作業班の派遣、現場の追跡、記録を閉じる確認までを6画面で通した、実際に操作できるデスクトップ業務アプリのプロトタイプ（制作サンプル）。

カテゴリ

SAAS WEB APP / UI・UXコンセプト

想定業種

設備保守・障害対応オペレーション

担当範囲

情報設計・デザイン・実装（自社）

状態

コンセプトサンプル（デモを公開／実在の受託案件ではありません）

「機械が推定したこと」と「人が確定したこと」を混同させない、という問題を題材に、6画面と3つのエッジ状態を「操作できるプロトタイプ」として実装したデスクトップ業務アプリのコンセプトワークです。1440×900のデスクトップを主として設計し、1280×800・768×1024でも監査しています（768では複数ペインが1カラムへ、地図ペインは凡例を接地させた帯へ組み替わる、拡大縮小ではないレイアウト切り替えです）。デモのケーススタディ本文から実物のプロトタイプを開けます。公開35状態を3ビューポート計55レンダ（1440が35・1280が8・768が12）で機械監査（重なり・見切れ・省略・タップ領域・余白・コントラストの6検出）にかけ、重なり・見切れ・省略・タップ領域・コントラストはいずれも0件。残る余白16件は、絞り込みや検索が0件になったときの空きなど内容を作らなければ埋まらないものなので、そのまま記録として残しています。コントラストは地図ラスタ上の文字も含めて画素単位で253回計測し、判定不能0件・最悪値5.65:1（要求4.5:1）。受け入れテスト Playwright 186件（62テスト×3ビューポート）が通過し、axe-core（wcag2a / wcag2aa / wcag21a / wcag21aa / wcag22aa）は13の画面・状態×3ビューポートの39回すべてで違反0件（ルール無効化・除外セレクタ・免除リストはいずれもなし）、Storybook は6スイート49件すべてで play() を実行しています。UIは Ark UI 5.37.2（基盤の Zag.js は 1.41.2）のコンポーネント名前空間8種を src/ 配下の6ファイルで直接使用し（描画される名前空間付きサブコンポーネントは34種）、React 18 + TypeScript + Vite で実装しています。ケーススタディには27.08秒・1440×900の操作動画（字幕11件）を同梱しています。制作過程も伏せておらず、視覚レビューの1回目は地図上の地点記号2つが凡例に隠れて読めないという指摘で不合格（構成81点・基準84点）、修正1回を経て2回目に86点で合格しています。この試作はシェルが画面IDを1つ持つだけの構成なので、記録を閉じても一覧は閉じる前のまま戻ります。動画がその確認画面で止まる理由もそれで、ケーススタディに未解決の弱点として明記しています。地図には出典を要する地図データを一切使っておらず、座標は緯度経度ではなく架空のローカル座標系で表記しています。登場するインシデント・人物・設備・座標はすべて架空で、実在の企業・商標・受託案件を示すものではありません。