VR空間でのUI表現

SNS OK VR空間でのUI表現 月ヶ瀬 OK

自己紹介 • UE歴5年目 • ディプロス株式会社のなんでもやってるエンジニア • X（TWITTER)によくいるので気軽に話しかけてください ©2026月ヶ瀬理緒 2

すべての始まり • VR・MRのUIのあるあるデザイン 2Dウィンドウを空中に浮かべる ©2026月ヶ瀬理緒 3

ハンドトラッキングでUIを押しても 何押した感じがしなくて気持ち悪い ©2026月ヶ瀬理緒 4

スマホ/PCとハンドトラッキングの入力の違い ハンドトラッキング スマホ/PC 明確な点操作 （クリック・タッチ） ©2026月ヶ瀬理緒 と 座標 （2D） 座標 （3D） 5

感覚がなくても納得するUIをつくろう！ ©2026月ヶ瀬理緒 6

アプローチ手法 • 自分の指に接触する ©2026月ヶ瀬理緒 • 視覚的に納得させる 7

自分の指に接触する ©2026月ヶ瀬理緒 8

自分の指に接触するアプローチ • つまみ（立体）を動かすスライダー • バーを直接つまむスライダー ©2026月ヶ瀬理緒 9

良い点 悪い点 • つまみがあると操作方法がわかる • ハンドトラッキングの精度的にピン チ（つまみ）の判定がうまくいかない • 比較的違和感が少ない 場合がある • つまみに指が固定されないので手 がふらふらする ©2026月ヶ瀬理緒 10

視覚的に納得させる ©2026月ヶ瀬理緒 11

視覚的アプローチ ①輪 • 穴に指を入れて動かす ©2026月ヶ瀬理緒 12

良い点 悪い点 • 穴が開いていたら指を入れたくなる • ハンドトラッキングの精度により指 （誘導） • 穴なら指先が何にも当たらなくても が輪に通っていないように見えるこ とがある 気にならない ©2026月ヶ瀬理緒 13

視覚的アプローチ ②ボタン的アプローチ • 押すと押したものが後ろに移動する ©2026月ヶ瀬理緒 14

良い点 悪い点 • 現実にある挙動（押すとへこむ）な • ボタンのへこみ方の作り方次第で ので納得度が高い ©2026月ヶ瀬理緒 指が貫通する 15

視覚的アプローチ ③押すと変形する • 押すと変形して指が通るようになる ©2026月ヶ瀬理緒 16

良い点 悪い点 • 良くも悪くも珍しいので、UIとして認 • ある程度の納得感がある • 指が一定の深さまで行くまではキャ 識されない可能性がある ンセルできる ©2026月ヶ瀬理緒 17

視覚的アプローチ ③回転する • 引っかかりに指などをかけて回す ©2026月ヶ瀬理緒 18

良い点 悪い点 • 指に抵抗（押した感）がなくてもベア • 精密な操作が難しい リングなどの知識があるので違和 感が少ない • 指先ではなく指の側面なので感覚 が鈍い • 動かし方の誘導がしやすい ©2026月ヶ瀬理緒 19

まとめ • 結局、現実世界のインタラクションに帰ってきた • 連続値をうまく変換させる必要がある 今日、何気なく使っている入力装置を見てみよう ©2026月ヶ瀬理緒 20

余談 ©2026月ヶ瀬理緒 21

UIのサイズは何mmであるべき？ • スマホのUI ： 推奨最小48dp≒大体9ｍｍ • 家電類 ： 概ね10～20mm （統計データがあるわけではないです） →３次元的な動きをするVR/MRで適切なサイズは？ ©2026月ヶ瀬理緒 22

アンケート • 目から30ｃｍほど先の空中で浮かんでい たときに安定して輪に人差し指を通せそう なものは？ 10.0mm 12.5mm 15.0mm 20.0mm 25.0mm →4，5に集中。まれに6（n=15程度） 30.0mm 40.0mm ©2026月ヶ瀬理緒 23

Meta QuestのUIは？ • おおむね最小25.0mm以上になっている • より大きいUIのほうがはるかに多い（横長の場合、縦幅が25.0mmが最低限確保される） • 思ったより大きくつくろう →ハンドトラッキングではスマホと同じ指先で操作ながら、 はるかに大きなサイズで作成する必要がある ©2026月ヶ瀬理緒 24

ご清聴ありがとうございました ©2026月ヶ瀬理緒 25