GeminiとFigmaで作る「認証画面」。ハコブくんのセキュリティUIデザイン工程
LOG7でロボットに愛嬌のある顔が生まれました。 LOG8では、病院というセキュリティが重視される環境で不可欠な認証画面（ロック解除画面）の構築に入ります。
薬を取り出すための重要なゲートキーパー。しかし、厳重すぎて使いづらくては、現場の業務を止めてしまいます。Layermateで構造を爆速で組み上げ、そこにデザイナーが現場への配慮を注入していく、そのプロセスを公開します。
※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI（人間とロボットの相互作用）の本質を探求するコンセプトとして定義しています。
要件定義：この画面に必要な4つのモード
まず、このセクションに必要な4つのステート（状態）を整理します。
解除パスコード（到着）: 基本となるテンキー入力画面。
顔認証: ハンズフリーで素早く受け取るためのカメラ画面。
スタッフ呼び出し: 操作がわからない時などに使うための呼び出しボタン。
緊急連絡: 重大なエラーや事故時の緊急停止画面。
Layermateで「骨組み」を一瞬で作る
まずはLayermateにプロンプトを投げ、画面のベースを作成させます。
プロンプト: タブレットの認証画面を作成して。左側に「状態表示エリア」右側に「操作パネル」。テンキー、顔認証カメラ枠、緊急ボタンを配置したクリーンな医療用UI。タブレット画面サイズは1920x1440pxで生成。
AIは瞬時に整然としたレイアウトを生成してくれます。ボタンの配置や余白のバランスなど構造の正解を出すのはAIの得意分野です。しかし、そこにはまだ温度がありません。
人の手で体験を磨き上げる
ここからがデザイナーの仕事です。生成された骨組みに対し、実際の利用シーンを想像しながらディテールを修正していきます。
解除パスコード：ロボットとしての振る舞い
AIが生成した無機質なパスコード画面に、LOG7で作ったロボットの顔を配置しました。
修正点
キャラクターの継承: 単なるセキュリティ画面ではなく、到着しました！とロボットが語りかけているような演出を追加。事務的な作業を、コミュニケーションの一環に変えます。
巨大なボタン: 忙しい看護師さんが手袋をしていても押し間違えないよう、テンキーのサイズを大きく調整しました。
顔認証：失敗させないための親切心
ただカメラ映像を映すだけでは、認証エラーが多発する可能性があります。
修正点
ガイドの表示: 画面右側に「正面を向く」「明るい場所で」「マスクを外す」といった具体的なチェックリスト（認証のポイント）を追加。エラーでイライラする前に成功率を上げます。
視線誘導: カメラ映像の中央に青いシルエットガイドを敷き、直感的に顔の位置を合わせられるように配慮しました。
スタッフ呼び出し：待ち時間の不安解消
「呼び出し中...」の文字だけでは、いつ来るかわからず現場にストレスを与えます。
顔が見える安心感: 対応するスタッフ（薬剤部）のアイコンを表示。
時間の可視化: 「到着予定時刻 約3〜5分」と具体的な数字を出すことで、待つ側の心理的ハードルを大幅に下げています。
緊急連絡：色による直感的な警告
AIの生成では他のボタンと同じ色になりがちですが、ここだけは明確にルールを変えます。
修正点
赤色のヘッダー: 画面上部を赤く染め、一目で「通常ではないモード」であることを伝達。
行動の指示: 「この場から動かないでください」という、人間への具体的な指示テキストを追加し、二次災害を防ぎます。
土台は完成。ここからが深淵。
これで、ロボットの顔、基本的な配送タスク、そして今回の認証まわりという、システムの根幹となるUIパーツが出揃いました。
AI（Layermate）のおかげで、ここまでの構築スピードは以前の数倍になっています。浮いた時間で、「チェックリストがあった方が親切かな？」「到着時間を表示して安心させよう」といった、人の感情に寄り添うディテールを作り込むことができました。
しかし、ロボットのUI開発はまだまだ終わりません。 さらに深い階層の画面や、例外的なエラー処理、そして設定画面など、より複雑なUI構築へと進んでいきます。
