ハコブくん薬剤搬送システムのUIスコープ定義。Figmaで作る画面リストと情報設計
LOG4HRI2025/12/13

ハコブくん薬剤搬送システムのUIスコープ定義。Figmaで作る画面リストと情報設計

点ではなく「面」でデザインする

  • 前回の振り返り: LOG3でロボット単体の要件と振る舞いを定義しました。

  • 課題提起: ロボット開発において、デザイナーはロボットの顔だけを作れば良いわけではない。ロボットは病院のシステムの一部として機能する。

  • ゴール: 実際にデザインが必要なすべてのタッチポイント(接点)を洗い出し、開発チーム(エンジニア・PM)と共有できる画面リストを作成するプロセスを公開します。

※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI(人間とロボットの相互作用)の本質を探求するコンセプトとして定義しています。

タッチポイントの探索

Webデザイナーの強みであるユーザー視点で、誰がいつシステムに触れるかを整理し、必要なアプリケーションを特定します。

  • 視点A: ロボット本体

  • ユーザー: 現場の看護師、薬剤師、患者、すれ違う人。

  • 必要なUI: タッチパネルアプリ(Android/Linuxベースなどを想定)。

  • 視点B:運用管理・指令

  • ユーザー: 薬剤部の管理者、病院の施設管理者、保守担当者。

  • 必要なUI: デスクトップPC/タブレット向けのWeb管理画面(ダッシュボード)。

  • 視点C:現場からの呼び出し・通知

  • ユーザー: 病棟の看護師。

  • 必要なUI: ナースステーションのPC、または支給されるスマートフォン/タブレット用アプリ。

具体的な画面リストの作成

ここが記事のメインコンテンツです。実際にリストアップした内容を表形式で提示します。

ロボット本体アプリ(On-Board UI)

  • 待機・感情表現: アイドリング時の表情、充電中の表示。

  • 認証・操作: 顔認証/ICカード読み取り画面、パスワード入力画面。

  • タスク実行: 目的地選択(病棟リスト)、薬剤投入・取り出しガイド(ドロワー連動)、走行中ステータス。

  • 例外処理: 障害物検知、緊急停止中、ネットワークエラー、バッテリー切れ警告。

Web管理画面

  • モニタリング: 病院内マップとロボットのリアルタイム位置表示、各機体のステータス(稼働中/充電中/エラー)。

  • タスク管理: 搬送スケジュールの作成、履歴ログ確認(いつ誰が何を運んだか)。

  • 機体管理: エラーログ詳細、ファームウェア更新、ユーザー権限管理。

スタッフ連携ツール

  • 通知: 「ロボットが病棟に到着しました」のポップアップ。

  • リクエスト: 薬剤回収の呼び出しボタン(集荷依頼)。

  • プロフィール: 看護スタッフ情報やアプリ設定、サポート情報。

情報の整理と優先順位付け

  • 洗い出したすべての画面を一度に作るのは難しいため、基本機能(MVP)とあると良い機能(Nice to have)に分類するプロセス。

  • デザイナーの視点: 開発工数を意識しつつ、UXを損なわない最小限のセットを提案する(例: スマホアプリは後回しにして、まずはロボット本体と管理画面の通知機能を充実させましょうといった提案)。

UI/UXデザイン画面リスト

まとめ

UIデザインに入る前に何をいくつ作るのかを可視化したことで、開発ボリュームが見え、エンジニアとの見積もりがスムーズになる。Webデザインにおけるサイトマップや要件定義書のスキルがそのまま活きて活用することが出来ます。