$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VRにおけるUI設計
Search
donabe
December 11, 2021
Programming
0
150
VRにおけるUI設計
VRの最大の敵である「酔い」に対抗すべくVRにおけるUIについてまとめてみました。
donabe
December 11, 2021
Tweet
Share
More Decks by donabe
See All by donabe
Unityがマルチプラット フォームビルドできる理由は? よく聞くIL2CPPって? 調べてみました!
donabe3
0
12
ハッカソン請負人の 開発ルーティンを紹介!
donabe3
0
55
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
290
OutOfRange 【プロトスプリントリーグ】
donabe3
0
65
Unityで都市開発シミュレーションゲーム開発をしてみよう
donabe3
0
320
現実 VS バーチャルのマルチプレイゲームを作ろう
donabe3
0
150
Speech to Textureで 思い通りに世界を改変しよう
donabe3
0
25
院試までなにやったか
donabe3
0
28
XR Interaction toolkit & XRHands & Passthrough API で MR 開発
donabe3
0
270
Other Decks in Programming
See All in Programming
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
160
AIコーディングエージェント(skywork)
kondai24
0
120
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
18k
俺流レスポンシブコーディング 2025
tak_dcxi
13
7.8k
エディターってAIで操作できるんだぜ
kis9a
0
650
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
210
『実践MLOps』から学ぶ DevOps for ML
nsakki55
2
550
Querying Design System デザインシステムの意思決定を支える構造検索
ikumatadokoro
1
1.2k
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
260
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
ternbusty
7
1.9k
これだけで丸わかり!LangChain v1.0 アップデートまとめ
os1ma
6
1.3k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
340
Featured
See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
80
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
120
20k
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Transcript
VRにおける UI設計 土鍋
自己紹介 • 土鍋 • 学部二年 • A-PxL(VR部)代表 • Twitter:@donadonadonabe •
普段はUnityでVRゲームを作ってます • IoTもちょっぴりかじってます→
VRにおける最大の敵とは なんでしょうか??
それは「酔い」です
VR酔いによる影響 • 酔ってしまってゲームに集中できない • 長時間プレイできない • VRは酔っちゃうからもうやらないとなってしまう… →VRコンテンツを作るものとして 「酔い対策」は必須!!
原因 • 平衡感覚と視覚情報の不一致 (空を飛んでいるのに椅子に座っている) • 現実の感覚との著しい違い (解像度が低い、カクつく)
対策 • 視野角の確保 • 遅延をなくす • リフレッシュレート • 解像度を上げる •
トラッキング方法 • VR空間の移動方法 • 急な動作をなくす • VR向けのUI • などなど
対策 • 視野角の確保 • 遅延をなくす • リフレッシュレート • 解像度を上げる •
トラッキング方法 • VR空間の移動方法 • 急な動作をなくす • VR向けのUI • などなど HMDの性能による。 基本的にコンテンツを作る人は関与できない。
VRにおけるUI設計の重要性 • 一番は酔い対策 • VRに慣れていない人でもすぐに理解できる • 次の動きを予測させる (急な動作が演出上必要な際などに利用できる)
UIの完成度が高いゲーム 「Half Life Alyx」
Half Life Alyxから学ぶ VRにおけるUI設計において意識すべき点 • 目線にUIを固定しない →意識がUIに集中した状態で周りの景色が動くとすごく酔う →ゆっくり視線を追従するor空間、手に固定 • 距離(近すぎず遠すぎず)
• サイズ(小さすぎでかすぎ)
Half Life Alyxから学ぶ VRにおけるUI設計において意識すべき点 • オブジェクトに埋まらない →常にオブジェクトの前に • 階層(ネスト)を深くしない →特にVRだとUI操作が増えるのは良くない
• 初心者でもわかりやすく • かっこよく!ロマン叶える!
実際に意識しながらゲームを作ってみた (未完成) • UIも楽しいものにしたい! • かっこよく出現するUI • 初めてプレイする人にも優しく • VRでしかできない体験を!!
→視点に追従する常に表示するUI(HPなど) →手を広げて自由な大きさで開けるメニュー
デモ
詰まったところ • UI向けのTransformがあるので すが、これが曲者 • 3Dゲーム内で2Dを扱う • VRのようにCanvasをすべて World Spaceものでは座標系を
考える際にかなり複雑になる。 • 解像度等もUIと3D空間とで 別々で調整が面倒くさい。
ベクトルとクォータニオン(四元数) • 三次元座標にベクトルを用いるのはさすがに慣れたが、 クオータニオンはまだ慣れない。 • インスペクターではオイラー角のrotationがscriptでは quaternion制御
まとめ • テクスチャやエフェクト、アニメーションをこだわれば良くなり そう。 • バグが大量にあるので修正必須
参考資料 • 実際にデザインしてみる!VRアプリのUIデザインを作るプロセス • クォータニオン (Quaternion) を総整理! ~ 三次元物体の回転と姿勢を鮮 やかに扱う
~ • [Unity][C# Script] 回転を自在にあやつろう。 • 【Unity】2つのベクトル間の角度を求める • RectTransform
ご清聴ありがとうございました