---
title: VR空間でのUI表現
tags: 
author: [月ヶ瀬　理緒](https://docswell.com/user/tukigaselio)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/47ZLX84GJ3.jpg?width=480
description: VR空間でのUI表現 by 月ヶ瀬　理緒
published: May 31, 26
canonical: https://docswell.com/s/tukigaselio/ZJW8VE-2026-05-31-161544
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/47ZLX84GJ3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YJ6W4P3QJV.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJ5MQKL2J4.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE3WVZL1E5.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8EDK8RNK7G.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V7PK8W53J8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2JVVN8PNJQ.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5EGLK5P5JL.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JQYNZ2L7P.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/K74WG3L5E1.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LJ1YD1L2EG.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJWGY8V272.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EZLX84473.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Y76W4P3G7V.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/G75MQKLX74.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/9J29PWLQER.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DEY45LQYJM.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VJNYN4KR78.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YE9PRQVZJ3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GE8DWG4YED.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LELMNG697R.jpg)

余談
©2026月ヶ瀬理緒
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4JMYXQ5VJW.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PJR9N83W79.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PEXQN84VJX.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/3EK9NKZ5ED.jpg)

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