スマートビルディング電力監視システム（IoT電力管理プラットフォーム）
スマートビルディング監視システムのウェブUI設計
IoTデバイスを活用したビル管理監視システムのウェブ・モバイルインターフェース設計。複雑なデータの可視化を実現し、施設管理者がビル全体から個別デバイスまでリアルタイムで電力消費をモニタリングできるシステムを構築しました。
目的
- →粒度の高い可視化：プラント全体から個別デバイス（空調・照明・生産機械など）までドリルダウン監視
- →リアルタイム検知：異常な電力消費や過負荷を即座に検知しアラート通知
- →比較分析：過去データや他プラントとの比較で節電余地を特定
- →操作性：膨大なデータから管理者が「今確認すべき情報」に素早くアクセスできること
役割
- →情報設計（IA）
- →ダッシュボードのデータ可視化設計
- →階層型ナビゲーションの構築
- →エンジニアリングチームへの技術的なデザイン仕様（Design Handoff）の提供
挑戦
- ⚡大量のIoTセンサーデータをユーザーを圧倒せずに可視化すること
- ⚡ビル→フロア→デバイスへのドリルダウンナビゲーション設計
- ⚡現場オペレーター向けに情報密度と明瞭さのバランスを取ること
- ⚡工場内の明るい照明環境・フィールドでのモバイル使用など物理的制約への対応
デザインプロセス
要件整理・現場理解
2020年4月Polytron工場での現地観察とステークホルダーインタビューを実施し、既存の手動監視プロセスの課題とオペレーターのワークフローを把握しました。
- ·施設管理者へのステークホルダーインタビュー
- ·現場での監視フロー観察
- ·既存IoTダッシュボードの競合分析
- ·主要ユーザーシナリオの定義
情報設計・階層ナビゲーション
2020年5月ビル→フロア→ゾーン→デバイスの階層型IAを構築。異常を数秒で発見・対処できるドリルダウンナビゲーションを設計しました。
- ·階層型サイトマップ：ビル→フロア→ゾーン→デバイス
- ·ドリルダウンナビゲーション設計
- ·アラート・通知のIA設計
- ·モバイルファーストのレスポンシブ構造
UIデザイン（ウェブ・モバイル）
2020年6月〜8月ウェブダッシュボードとモバイルアプリを設計。グラフ・ヒートマップで異常を即座に発見できるデータビジュアライゼーション。工場現場での視認性を考慮した高密度レイアウトを実現しました。
- ·リアルタイム電力消費チャート・ヒートマップ
- ·重大度レベル付き異常アラートカード
- ·デバイスレベル詳細画面
- ·現場オペレーター向けモバイルアプリ
- ·デザインシステム：カラー・タイポグラフィ・チャートコンポーネント
Design Handoff・品質確認
2020年9月アノテーション・コンポーネント状態・レスポンシブブレークポイント付きでFigmaによる設計仕様書を納品。実装後のUI品質確認を実施しました。
- ·Figmaによる完全アノテーション付き納品
- ·コンポーネント状態ドキュメント
- ·レスポンシブブレークポイント仕様
- ·実装後のUI品質確認
Flow設計 — 異常検知・対応フロー
通常の監視フローと異常対応フローの両方を設計し、オペレーターが数秒以内にアラートに対応できるよう導線を整備しました。
例：電力異常検知の場合
✅ Positive Flow （正常系）
- 1ダッシュボードが正常ステータスを表示
- 2オペレーターがフロア・ゾーン詳細にドリルダウン
- 3消費量が正常範囲内 → 対応不要
- 4比較分析用にデータを記録
❌ Negative Flow （異常系）
- ✕異常検知 → ダッシュボードに赤アラートカード表示
- ✕オペレーターがアラートをタップ → 該当デバイスにドリルダウン
- ✕デバイス詳細でスパイク時刻・重大度を確認
- ✕オペレーターが問題を記録 → メンテナンスチームに通知
- ✕解決後：パターン分析用にデータを記録
学び・得られた知見
「使いやすさ」の再定義
優れたデザインとは、単に美しいだけでなく、ユーザーのコンテキスト（現場の状況や文化的背景）を深く理解したものであることを学びました。
日本市場の特性：情報密度と安心感
日本のユーザーは空白の多いミニマルなデザインより、情報密度が高く整理されたUIを好む「安心感と信頼性」を重視する傾向があることを実証的に理解しました。
現場視点の重要性
ブースの照明や工場内での操作など、物理的な制約を考慮した設計が真の課題解決に繋がることを学びました。
IoTダッシュボードの核心はナビゲーション階層
データ量が膨大な場合、ユーザーが素早く正確にドリルダウンできることが最も重要なデザイン上の意思決定でした。
成果・インパクト
⚡
15%
電力コスト削減
電力コストの削減
特定デバイスによる過剰消費の早期発見が可能になり、導入後3ヶ月で全体の電力コストを約15%削減。
🔧
20%
ダウンタイム短縮
保守の効率化
異常検知アラートにより機器の故障予兆を事前把握でき、ダウンタイムを20%短縮。
📊
↑↑
意思決定スピード
意思決定の迅速化
複雑なデータが視覚的に整理されたことで、管理者の状況判断と報告のスピードが大幅に向上。
デザインギャラリー
Web Dashboard
4 screens
Mobile App
7 screens
さらに多くの作品はこちら
Dribbble ↗