🪴 クライアントワーク（実案件）

B2B｜エネルギー運用｜電力オペレーター向け｜CSV操作｜実装を見据えたUX設計

• 期間: 2025年12月 〜 2026年3月
• 場所: 日本・東京
• 使用ツール＆技術: React, TypeScript, Next.js, Redux, RTK, MSW, Material UI, Jest, RTL, Figma, GitHub, VS Code + Copilot

🔎 概要

スマートシティ向けの電力運用チームのために、インターナルダッシュボードの新機能を2つ設計・仕様化しました：

• 運転計画（Operation Planning）：月別ビュー＋日別ビュー
• 運転モード切替（Operation Mode Switching）

これらは、もともとコマンドラインや直接DB更新で行われていた「実験的なスケジュール変更」を、UI上から安全かつ再現性高く行えるようにすることを目的としています。

🖼️ 設計した画面（最終仕様＋主要モーダル）

Operation Planning（運転計画）

• Final (Spec): 月別ビュー

  

  Final Spec — 月別ビュー。2ヶ月分のグリッドで、どの日付・どのデバイスに計画があるかを一覧できる。CSVテンプレートのダウンロードや、選択した日付の一括削除を安全に行える画面。

• Final (Spec): 日別ビュー

  

  Final Spec — 日別ビュー。特定の日付について、デバイス × 48コマのスプレッドシート形式テーブルで計画値を確認・更新する。CSVダウンロード／アップロードと、その日の計画削除への導線をまとめて持たせている。

• Final (Spec): バリデーションエラー表示

  

  Validationフィードバック。アップロード時のエラーを集約し、どこをどう直せばよいかが分かるかたちで表示することで、オペレーターが1回で修正しやすいようにした。

Operation Mode Switching（運転モード切替）

• Final (Spec): モード切替画面

  

  モード切替画面。現在のモード／ステータスを明示し、CSVでアップロードした計画をいつ有効化するかを、オペレーターが安全に切り替えられる。