LOG58HRI2026/2/6

気配りを可視化する｜ハコブくんの発光による意図の伝達

導入

ハコブくんを構成するキューブは、空間内での「確かな存在」を示すガイドです。しかし、単に色が塗られただけの不透明な物体は、ライティングや背景の壁（半透明）との位置関係によって、その立体的な厚みや「回り込み」の感覚がオペレーターに伝わりにくいという課題がありました。物体を柔らかく発光させることで、ロボットの容積をより直感的に、かつ存在感を持って提示する設計へと変更しました。

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

発光マテリアルの改修

キューブに「情報の外装」を設定

ワイヤーフレームという最小限の構成に対し、発光は「ロボットの意志」を可視化する重要なインターフェースになります。

操作項目: Side_Emission_Mat という名称のマテリアルを新規作成し、 Emission プロパティを有効化して機体側面のメッシュに割り当てる。設計の意図: 物理的な構造を強調するだけでなく、機体全体を「周囲へのメッセージボード」として定義し、情報の発信源とするため。
Global Illumination の設定を Realtime にし、機体周辺の床面へ光が微かに漏れ出すよう調整する。設計の意図: ロボット単体が光るのではなく、周囲の環境を照らすことで「ハコブくんがそこに存在する」という実在感を高め、通行人の自然な回避行動を促すため。
設計の意図: 標準的な Lit シェーダーをベースに、後ほど発光（Emission）を制御するための専用アセットを独立させて管理するため。
開発が進むにつれ増えていくマテリアル群の中で、機体側面のコミュニケーション専用であることを一目で判別可能にし、メンテナンス性を高める。
単なる色情報の塗りつぶしではなく、自発光による「光のゆらぎ」を扱える状態にし、ロボットの知能を視覚化する準備を整える。

ギミックを完成させる階層構造の整理

作成した Side_Emission_Mat をハコブくんのメッシュに適用し、設計した光の質感を現実の機体挙動へと反映させます。

実装のステップ:

Hierarchy ウィンドウで Hakobu_kun を選択し、 Inspector ウィンドウにある Mesh Renderer コンポーネントを確認する。
Materials スロットを展開し、 Project ウィンドウにある Side_Emission_Mat を Element 0 へドラッグ＆ドロップして割り当てる。

設計の意図: ハコブくんの視覚的表現を司るコンポーネントを特定し、定義済みの「側面発光」仕様を物理モデルへ直接紐付けるため。これにより、ワイヤーフレームという最小限の構成に対して「意志を伝える外装」が定着し、周囲を照らす実体としての機能が完成する。

マスク画像の作成

ハコブくんの「側面だけ」を光らせるための「光の型紙（マスク画像）」を準備する工程ですね。現在のハコブくんはスケールが 0.5 の立方体として設定されており、標準的な Cube メッシュが使用されています。

このままでは全ての面に同じ発光が適用されてしまうため、どのエリアを光らせるかを定義する白黒の画像データをゼロから作成します。

側面への情報を限定する「白と黒」の設計

ハコブくん（立方体）の6面のうち、天面と底面を遮光し、周囲の人間から見える4つの側面だけにグリーンの光を透過させるための画像データを用意します。

実装のステップ: まずは Figma を開き、 1024 x 1024 ピクセルの正方形キャンバスを新規作成します。キャンバス全体を一旦「漆黒（R:0, G:0, B:0）」で塗りつぶし、その上に標準的な立方体のUV展開図（3x2のグリッドなど）を意識しながら、側面に相当するエリアだけを「純白（R:255, G:255, B:255）」の長方形で描き込みます。

作成したデータを Hakobu_SideMask という名称の PNG 形式で保存し、Unityの Project ウィンドウへドラッグ＆ドロップしてインポートさせます。

発光アラインメントの精密調整

実装のステップ: まず Side_Emission_Mat の Inspector を開き、 Surface Inputs 内にある Tiling の値を変更して模様の密度を変えてみるか、あるいは Offset の数値を左右にドラッグして、白い発光領域が各面の中心にくるようにスライドさせます。Unity標準の Cube は全周に同じテクスチャを繰り返す性質があるため、この数値調整によって、各面の「一部だけが光る窓」のようなデザインに追い込んでいきます。

設計の意図: 発光させたい場所を「白」、遮りたい場所を「黒」という2値のデータで明確に分けることで、3Dモデル上の特定部位のみに発光を限定するため。

以上の方法でやってみたのですが、うまくいきませんでした。ハコブくんはシマシマの模様になってしまいます。

画像に頼らず Unityの機能だけで側面だけを光らせる方法に切り替えて試してみます

マテリアルを2つに分ける（マルチマテリアル）

画像を使ったやり方は1つのマテリアルで全部を制御しようとしていますが、天面用と底面用のマテリアルと側面用のマテリアルを別々に用意して、オブジェクトに3つとも持たせるのが以下の方法です。

マテリアルを2つ用意する

側面用（今あるもの）: Side_Emission_Mat

Emission にチェックを入れ、発光用のグリーンにします。
画像（Emission Map）は不要なので削除します。

天面用（新規作成）: Top_Mat

新しくマテリアルを作り、色は「白」にします。
Emission はオフにします。

底面用（新規作成）: Bottom_Mat

新しくマテリアルを作り、色は「黒」にします。
Emission はオフにします。

Cubeに3つのマテリアルを割り当てる

Unityの標準Cubeは、実は「Mesh Renderer」の設定で、面ごとにマテリアルを分けることができます。

ヒエラルキーで対象のCubeを選択します。Inspectorの「Mesh Renderer」コンポーネントを探し、「Materials」の項目を開きます。
Size を 1 から 3 に変更します。すると、スロットが3つ（Element 0 と Element 1 とElement 2）現れます。

Element 0: Side_Emission_Mat（光るマテリアル）

Element 1: Top_Mat（光らない白マテリアル）をそれぞれドラッグ＆ドロップします。

Element 2: Bottom_Mat（光らない黒マテリアル）をそれぞれドラッグ＆ドロップします。

この方法のメリット

画像が不要: Figmaで何回も描き直してエクスポートする必要がありません。
調整が楽: 側面の光る色を変えたいときは、マテリアルの色を変えるだけで一瞬で終わります。
確実: UV展開のズレを気にする必要が一切なくなります。

と、ここまで作業してみてまた問題が起こりました。

キューブはマテリアルが1つしか設定できない

Unityからの警告（黄色い「！」マーク）にある通り、マテリアルを分けても現状では Element 1 のみが全面に適用されてしまいます。

"This renderer has more materials than the Mesh has submeshes. Multiple materials will be applied to the same submesh, which costs performance. Consider using multiple shader passes."

このCubeには面（サブメッシュ）が1つしかないのに、マテリアルが3つも設定されていますよ！という警告です。

側面発光ギミックは一旦辞め、キューブ全体の発光ギミックへ切り替えます

「まずは動くものを作る」というのは、開発において最も重要なステップです。

キューブ全体を発光させるのであれば、今の設定を少し整理するだけで、すぐに綺麗なワイヤーフレーム（あるいは発光体）として完成させることができます。

Side_Emission_Mat を使って、仕上げる手順をまとめました。

キューブ全体を発光させる最短手順

UnityのMesh Rendererを整理する

Inspectorの Mesh Renderer > Materials の Size を 1 に戻します。
Element 0 に Side_Emission_Mat だけが入っている状態にします。
これで、黄色い「！」警告も消えてスッキリします。

マテリアルの「画像」を外す

Side_Emission_Mat の設定画面で、Emission Map（白黒の画像が入っている四角い枠）をクリックし、None（なし）に設定します。
これで、画像による「欠け」がなくなり、キューブ全体が均一に発光します。

発光色（Emission Color）を調整する

グリーンのカラーバーをクリックし、Intensity（強度）を上げて、理想の輝き具合に調整します。

こだわりを形にすることも大切ですが、開発スピードを停滞させる要因に直面した際、素早く方向転換し、その場で「今の最適解」を導き出す判断力も同じくらい重要です。

今回は、サブメッシュとマテリアルの関係という技術的なハードルに対し、「キューブ全体を発光させる」というシンプルかつ確実な手法へ切り替えました。これにより、警告を解消するだけでなく、ハコブくんの「反応」という本質的な機能の実装を最優先に進めることができました。

「まずは動くものを作る」これは、未知のHRI（人間とロボットの相互作用）を探求する上で、最も強力な武器になります。

ハコブくんのワイヤーフレーム最適化と、次なるインタラクションの実装はまだまだ続きます。変化を恐れず、その都度ベストな形を模索しながら、このプロジェクトを形にしていきたいと思います。