電力管理ダッシュボード：運用画面・CSV更新フロー設計
電力オペレーター向けの業務ダッシュボードで、CSV更新を含む複雑な運用フローを、安全に扱える画面仕様へ整理した実務案件。確認・アップロード/ダウンロード・削除・バリデーション・エラー表示まで、実装を見据えて設計した。
期間：2025年12月〜
関連サービス
CSVやExcelに依存した高リスク運用を画面に移したい、実装を見据えて仕様まで整理したい、という相談に近い実績です。
- 誤操作を防ぎながら業務画面を整えたい
- 要件が曖昧な状態から仕様を固めたい
- バリデーションや削除フローまで含めて設計したい
背景
スマートシティ向けのエネルギー運用環境で使う社内ダッシュボードにおいて、もともとコマンドラインや直接DB更新で行っていた試験的なスケジュール変更を、UI上から安全に行えるようにする必要がありました。
課題
手動・属人的な運用を画面操作へ移行するにあたり、誤操作防止と運用のしやすさをどう両立するかが重要でした。
- アップロードミスがそのまま削除・上書きにつながり得る
- 100台 × 48スロット規模を扱う前提がある
- 既存画面では日付やエラーの把握がしにくかった
主な利用者
- 日々スケジュールを調整するオペレーション担当者
- 同じ画面を直接操作するマネージャークラス
- 内容を確認・適用するその他の社内ステークホルダー
設計対象
運転計画（Operation Planning）
- 月別ビュー：2ヶ月分の計画有無を一覧
- 日別ビュー：デバイス × 48コマの詳細グリッド
運転モード切替
- アップロード済み計画を、どのモードで有効化するか制御
- 確認モーダルを含む安全な切替導線を整理
CSVワークフロー
- テンプレートダウンロード
- 日別画面からのアップロード
- 単日削除 / 複数日一括削除
実施内容 / 進め方
要件のすり合わせと反復
曖昧な要件を、ドラフト作成と短いフィードバックループを通じて徐々に具体化しました。
Figmaワイヤーからコード試作へ
複雑な振る舞いはコードで早めに試し、実装制約やパフォーマンスを確認しました。
ハンドオフ資料の整備
画面挙動、状態、例外、API仕様、エラーメッセージ対応表まで含めて整理し、実装解釈のブレを減らしました。
工夫した点 / 設計上のポイント
安全設計を先に置いた
削除・上書き・日付不一致など、事故になりやすいポイントを先に洗い出し、確認モーダルや制約を設計しました。
多層バリデーション
フロント側とバックエンド側の両方でチェックし、単に弾くだけでなく「どこをどう直せばよいか」が分かるエラー表示にしました。
アウトプット
- 業務フロー整理
- UI / 表示構造設計
- CSV操作導線設計
- バリデーション設計
- エラー表示設計
- 仕様書 / ベンダー実装支援
結果
- 高リスクなCSV運用を、安全に画面操作へ移すための仕様を整理
- 誤操作防止と運用のしやすさを両立するUI方針を提示
- 実装前提で必要な挙動・例外・文言まで落とし込んだ
画面・共有物
月別ビュー
どの日付・どのデバイスに計画があるかを一覧できる画面
日別ビュー
デバイス × 48コマのスプレッドシート形式テーブル
バリデーション表示
修正箇所が分かるエラー集約表示