Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
66
Unityで都市開発シミュレーションゲーム開発をしてみよう
donabe3
0
330
現実 VS バーチャルのマルチプレイゲームを作ろう
donabe3
0
160
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
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
240
Developing static sites with Ruby
okuramasafumi
0
260
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
160
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
440
dnx で実行できるコマンド、作ってみました
tomohisa
0
140
テストやOSS開発に役立つSetup PHP Action
matsuo_atsushi
0
150
俺流レスポンシブコーディング 2025
tak_dcxi
14
8.5k
CSC509 Lecture 14
javiergs
PRO
0
220
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
130
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
dachi023
1
570
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
720
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
6
3k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Writing Fast Ruby
sferik
630
62k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Building Applications with DynamoDB
mza
96
6.8k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Designing for Performance
lara
610
69k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Language of Interfaces
destraynor
162
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
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
ご清聴ありがとうございました