gram / SwitchBot温湿度モニタリングアプリ開発

開発の背景

SwitchBotの温湿度センサーを複数台持つユーザーの悩みとして以下のようなものがあります。

• 公式アプリは1台ずつしかグラフを見られない部屋をまたいだ比較ができない
• 公式アプリではグラフの操作性が低い
• 公式アプリはスマホ・タブレット用のため、PCからグラフが見れない

これを解決するサービスが存在しなかったため、SwitchBot APIと連携したSaaSダッシュボード「gram」を設計・実装しました。

設計で工夫した点

1. リアルタイムデータの可視化

センサーから送られてくる温湿度データをリアルタイムで受信し、グラフを即時更新。ページをリロードせずに最新の計測値が確認できます。時系列グラフで温湿度の推移を直感的に把握できるUI設計にしました。

2. マルチデバイス対応

工場・倉庫・農場など、現場から確認するシーンを想定し、スマートフォンでも操作しやすいレスポンシブUIを設計。PCでのダッシュボード閲覧から、外出先でのスマホ確認まで同一アプリで完結します。

3. シンプルな導入設計

センサーを登録するだけで計測が始まる設計にこだわりました。複雑な初期設定を不要とし、ITに不慣れな現場スタッフでも扱いやすいことを重視しています。

4. 心地よいUX設計

ダッシュボードを長時間快適に使えるよう、ダークモード対応・各センサーのグラフ色カスタマイズ・直感的なアーカイブの年月セレクターなどを実装しました。

スマートフォンでのグラフ操作は、チャート分析ツール「TradingView」を参考に設計。ピンチ・スクロールによる直感的な時間軸操作を実現し、データを「触って探す」体験を意識しました。

「gram」サービスページへ