GeminiとFigmaで創るロボットUI全仕事。ハコブくんのUIデザイン全工程

これまで、ロボットの顔や認証といった個別の機能にフォーカスしてきましたが、今日はロボットが医療現場の最前線で働く一連の流れ、その全ての主要画面を一挙に公開します。

「目的地設定」から「走行」、「薬剤受渡」、そして「緊急対応」まで。 これら全ての画面は、AIツールLayermateが骨組みを作り、Figmaで完成度を上げるというプロセスでデザインされました。

まずは、現場で働くロボットたちの「装備」の全貌をご覧ください。

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

出発の準備（薬剤師の操作）

薬剤部のスタッフがロボットに仕事を依頼するフェーズ。正確さと効率が命です。

目的地選択画面（HMIR-03）

要件: どこへ届けるかを直感的に選択する。階層→エリア→ステーションの絞り込みと、マップによる視覚的確認。

• AIの仕事 (Layermate): 左にリスト、右にマップという定番の2カラムレイアウトを瞬時に構築。

• 人間の仕事 (Figma): リスト選択とマップハイライトの連動インタラクションを設計。視覚的なフィードバックで確信を持って操作できるようにします。

薬剤投入・確認画面 （HMIR-04）

要件: ドロワー（引き出し）を安全に開閉し、薬剤の投入を完了させる。

• AIの仕事: 「薬剤投入」「配送開始」といった巨大なアクションボタンを配置した、シンプルな画面構成を提案。

• 人間の仕事: 投入忘れや挟み込みを防ぐため、チェックリスト表示を追加し、安全性を徹底的に高めます。

院内を移動（すれ違う人への配慮）

ロボットは周囲の人とコミュニケーションを取りながら走行します。

走行中ステータス画面（HMIR-05）

要件: すれ違う患者さんやスタッフに、進行方向や状態を知らせ、安心感を与える。

• AIの仕事: 進行方向を示す大きな矢印や、「配送中」の文字を配置した視認性の高いレイアウトを作成。

• 人間の仕事: LOG7で作ったロボットの顔を活かし、視線を進行方向に向けるなどの演出を追加。単なる機械ではなくキャラクターが働いている雰囲気で周囲の警戒心を解きます。

病棟での任務（看護師の操作）

目的地に到着。忙しい看護師さんが、セキュリティを保ちつつ素早く受け取るための画面です。

受取・取出画面（HMIR-06）

要件: 到着時の認証、ドロワーの解錠、受取完了の報告。

• AIの仕事: 認証エリア、解除パスコード入力ボタン、完了ボタンを効率的に配置したレイアウトを提示。

• 人間の仕事: 顔認証ガイドの表示やカードタッチ位置の明確化など、迷わせない工夫を徹底。完了後には労いのメッセージを表示し、激務の合間の小さな癒やしを提供します。

もしもに備える（緊急時の対応）

万が一のトラブル発生時、パニックを防ぎ冷静な対応を促す重要な画面です。

エラー・緊急停止画面（HMIR-07）

要件: 障害物検知やエラー時の状況伝達、復旧手順表示。

• AIの仕事: 赤色を基調とした警告画面、エラーコード、手順リストといった定石パターンを生成。

• 人間の仕事: 恐怖感を与えないよう、困った顔で状態を直感的に伝えます。復旧手順は専門用語を避けイラスト付きで解説し、まずは落ち着いてというメッセージを発信します。

まとめ

これで、現場で動くロボット本体のUIデザインを制作してきました。 AIのスピードと、人間の細やかな配慮が融合した、自信作たちです。

しかし、まだデザインは終わりません。むしろ、ここからが本番です。

これら数十台のロボットたちが、広い病院内で効率よく、安全に働き続けるためには、それらを一元管理する強力な頭脳が必要です。

舞台を現場のタッチパネルから、運用管理者が操作するPC / タブレット向けのWebダッシュボード編へと移します。

• 今、どのロボットがどこにいるか？を俯瞰するリアルタイムマップ

• エラー発生時のアラート集中管理と遠隔操作

• 稼働率や配送効率を分析するアナリティクス画面

情報量が桁違いに多い管理画面を、いかにAIと協力して見やすく、使いやすく設計するか？ 運用管理者の視点に立った、新たなUIデザインの挑戦が始まります。