警備の管制業務・配置業務を、企画から内製化したReactアプリへ

プロジェクトでの変化

• 管制業務の入力時間
  紙運用比で短縮
• 配置調整の伝達ミス
  減少傾向
• リリースサイクル
  週次

課題

警備員の配置と管制業務が、紙と電話とExcelに散らばっていました。本部が持つ配置情報と、現場が知っている実態は常にずれます。急な配置変更が入るたびに電話が飛び交い、そのたびに伝達ミスが起きていました。警備員は毎朝、今日どこへ行くのかを電話で確かめる。それが当たり前になっていたのです。しかも業務要件はどこにも書かれておらず、属人的に回っていました。システム化以前に、何を作るかを整理するところからの出発でした。

アプローチ

1. 01 現場警備員と本部のそれぞれにヒアリングし、業務フローを図に起こしました
2. 02 MVPの範囲を「管制業務」と「配置業務」に絞り、企画書へ落とし込みました
3. 03 Supabase + React + TypeScript で素早く画面を試作し、企画段階から実物を見せて議論しています
4. 04 Vercelのプレビュー環境を毎週の現場レビューに使い、フィードバックを翌週のリリースへ反映しました
5. 05 スマホの片手操作を前提とした入力UIとし、現場の負担を増やさずに移行できる構造にしています
6. 06 初期定着の後は機能拡張のロードマップを引き、内製運用へ移行できる体制を整えました

成功要因

現場起点の要件抽出

業務要件が明文化されていない状態から、現場と本部へのヒアリングで業務フローを図に起こすことから着手しました。

MVPスコープの絞り込み

管制業務と配置業務の2点に絞り、定着してこそ意味のあるシステムに、余計なスコープの広がりを持ち込みませんでした。

プレビュー駆動の現場巻き込み

Vercelのプレビュー環境を毎週の現場レビューに使い、業務側が発言しやすい状態を整えました。

Supabase最小構成

認証・DB・ストレージをSupabaseでまとめ、企画段階でも素早く実物を見せられる体制を保ちました。

ソリューション

認証・DB・ストレージはSupabaseに最小構成でまとめ、フロントは React + TypeScript で組みました。効いたのは毎週のレビューです。Vercelのプレビュー環境をそのまま現場に見せ、出た意見を翌週のリリースに入れる。これを繰り返すうちに、電話で確認する運用がアプリの中で完結するようになりました。MVPを出した後も、同じ体制で機能を足し続けています。