Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VRにおけるUI設計
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
donabe
December 11, 2021
Programming
150
0
Share
VRにおけるUI設計
VRの最大の敵である「酔い」に対抗すべくVRにおけるUIについてまとめてみました。
donabe
December 11, 2021
More Decks by donabe
See All by donabe
Unityがマルチプラット フォームビルドできる理由は? よく聞くIL2CPPって? 調べてみました!
donabe3
0
22
ハッカソン請負人の 開発ルーティンを紹介!
donabe3
0
69
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
330
OutOfRange 【プロトスプリントリーグ】
donabe3
0
90
Unityで都市開発シミュレーションゲーム開発をしてみよう
donabe3
0
450
現実 VS バーチャルのマルチプレイゲームを作ろう
donabe3
0
190
Speech to Textureで 思い通りに世界を改変しよう
donabe3
0
34
院試までなにやったか
donabe3
0
39
XR Interaction toolkit & XRHands & Passthrough API で MR 開発
donabe3
0
290
Other Decks in Programming
See All in Programming
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
640
cloudnative conference 2026 flyle
azihsoyn
0
100
PicoRuby for IoT: Connecting to the Cloud with MQTT
yuuu
2
750
Kingdom of the Machine
yui_knk
2
1.4k
Import assertionsが消えた日~ECMAScriptの仕様はどう決まり、なぜ覆るのか~
bicstone
2
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
書き換えて学ぶTemporal #fukts
pirosikick
2
350
Agentic Elixir
whatyouhide
0
440
AIを導入する前にやるべきこと
negima
2
330
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
kashewnuts
1
210
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
matsuo_atsushi
0
140
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
480
Featured
See All Featured
Accessibility Awareness
sabderemane
1
110
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.7k
Design in an AI World
tapps
1
210
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
4 Signs Your Business is Dying
shpigford
187
22k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
180
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
180
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
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
ご清聴ありがとうございました