VR向けUI/UXの検討と、その歴史

本記事は [DMMグループ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dmm) の11日目の投稿です。
先日12/10は @mimickn さんの [neo4jでグラフ同士の差分を取る](https://qiita.com/mimickn/items/9fff07188a217ea6ac4c) でした。

#はじめに

DMM.com VR研究室の [クレウス(kleus_balut)](https://twitter.com/kleus_balut) です。
2018年2月からVRChatユーザーで、2019年4月からDMM.com VR研究室配属、
2019年8月末にリリースしたVRゲーム [BOW MAN](https://bowman.vrlab.dmm.com/ja/) では、UI実装を中心に担当しました。
<a href="https://bowman.vrlab.dmm.com/ja/" target="_blank"><img src="https://bowman.vrlab.dmm.com/assets/img/main.jpg" width="320"></a>

個人では [VIVEBatteryInfo](https://kleusbalut.booth.pm/items/969809) という、VRソーシャル向けのVRオーバーレイツールを開発/頒布しています。
<a href="https://kleusbalut.booth.pm/items/969809" target="_blank"><img src="https://booth.pximg.net/c/620x620/cc94a38f-816e-407f-86e5-13bc78cd95c6/i/969809/305b8ffb-1d46-4cbc-a004-a5a3fe61fdcf_base_resized.jpg" width="320"></a>


### VR向けUI/UXについて

VRのコンテンツでは「VRならでは」を求めがちですが、UI/UXもそうであるとは限りません。
むしろ、旧来のUI (本記事では以下「2D-UI」) をそのままVR空間に3Dオブジェクトとして配置した方がUXが良いケースもあります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/10e246df-0d15-33fa-3438-91bcdf879945.png" width="480">
2D-UIなSteamVRダッシュボード

ゲーム開発ではゲーム自体の面白さに注力されるものですが、ユーザーが触れるUI/UXも地味に重要で、なおかつゲームに密接に関わってくるものなので、プロダクトの質を上げる為にバランスよく注力した方が良いと感じています。

本記事ではVR向けUI/UXについて、個人的に気を付けているところを中心に共有したいと思います。

BOW MANの当初リリース先がOculus Storeだったこともあり、下記の内容の多くが、[Rift Virtual Reality Check (VRC) Guidelines - Oculus](https://developer.oculus.com/distribute/latest/concepts/publish-rift-app-submission/) に準拠しています。

###用語の定義
紛らわしい用語があるため、本記事では下記の通りに定義します。
**VRChat** = VRChat
**VRC** = Oculusの**V**irtual **R**eality **C**heck Guidelines

#VR向けUI/UXの検討

### HMDへの常時表示は避ける
通常のゲームではHPゲージやステータスバー等が画面に常時表示されているのでVRでも常時表示したくなりますが、これは***VRでは御法度***(※)とされています。
以下の観点からオススメしません。

・常に視界に何かがある不快感の誘発
・HMD毎のFOVの違いによる見辛さ

弊アプリVIVEBatteryInfoでも、バッテリー残量の合計値をHPバーのようにHMDに常時表示するアイデアがあったのですが、VRでは御法度と知ってから、初期の段階で実装を断念した覚えがあります。

※ご法度とされる明確な文面を書籍「バーチャルリアリティ学」で見かけた記憶があるのですが、当該文面を探すことができませんでした。
　VR開発者の間では、主にTwitterを発信源としてよく耳にします。

実際にHMDに照準用のポインターを常時表示してみると、まるで「飛蚊症」のようなうっとおしさがあることを実感し、なぜこれがご法度とされているのかよくわかると思います。
2D画面で見るよりも、VRで見るとうっとおしさが顕著です。
慣れの問題もあるのですが、VRChatでのマイクアイコンも当初は結構気になりました。

### MenuボタンでシステムUIを開けるようにする (ゲーム中は中断できるようにする)
Oculus VRC: [VRC.PC.Functional.3](https://developer.oculus.com/distribute/latest/concepts/vrc-pc-functional-3/), [VRC.PC.Input.5](https://developer.oculus.com/distribute/latest/concepts/vrc-pc-input-5/), [VRC.PC.Input.7](https://developer.oculus.com/distribute/latest/concepts/vrc-pc-input-7/)

VRコントローラーのMenuボタン(ゲームコントローラーで言うStartボタン)を押しても***何も反応がないと不安***になります。
手首をクルっと回してUIが開くと、それはそれでカッコイイのですが、表示・非表示の判定にはスマートウォッチばりの***微調整が不可欠***です。
ゲームに慣れた人であれば、多くの人がシステムUIを開いて音量調節や各種値のトグルができると思うでしょうが、それができないと不快に感じると思います。

### システムUIは最前面表示にする
ソーシャルVRで顕著ですが、システムUIが他プレイヤーやゲーム内のオブジェクトの裏側に回ってしまうと操作ができません。
VRChatのように自由度が高いものについては視界ジャック(後述)等の脅威もあるので、UIの優先順位は最前面にする必要があると感じます。
※VRChatは今年のアップデートでシステムUIが最前面になりました。

### 主観視点の強制移動を行わない (主観視点でカットシーンを再生しない)
Oculus VRC: [VRC.PC.Input.10](https://developer.oculus.com/distribute/latest/concepts/vrc-pc-input-10/), [VRC.PC.Tracking.2](https://developer.oculus.com/distribute/latest/concepts/vrc-pc-tracking-2/)

強制的に視界を奪い、イベント(カット)シーンを見せる作りは不快感やVR酔いを誘発する可能性があります。
VRChatでは***「視界ジャック」***と呼ばれるような手法もこれに近いかもしれません。

Unity製VRゲームで何も考えずにこれを実装すると、トラッキングスペースがルームスケールの場合、正面がズレます。
(ヒエラルキー上のTrackingSpaceごと回転する必要があります)
カットシーンを見るたびに、プレイヤーが自らトラッキングスペースの正面を向かなければなりません。
6DoF-VR視点で体や腕が動かないと、***金縛りのような不快感***を感じることもあると思います。

デメリットを理解したうえで、あえてこの演出をすることを選択していない限り、オススメできません。

## 小コラム：VR向けUIの歴史
※便宜上、用語については独自の言い回しがあります。
　また、説明の為に主観視点の動画がありますので、酔いやすい方はご注意ください。

VR向けUIは今日までに様々なパターンが出てきていますが、デファクトスタンダードとされているものはあまりないように思います。

直近の2018-2019年は、BeatSaberやVRChatのような「ポインター型2D-UI」が主流のようでした。
昨今のVRブームの中でVR向けUIの傾向を見ていると、以下の傾向があると感じました。

・初期(2013年)：VR(コントローラー)向けのUIは皆無
・中期(2014-2016年頃)：「VR空間でボタンを押す」方式
・現在(2019年)：「ポインター型2D-UI」が多く、VRシステムアプリケーション(SteamVR等)でも多く使われている

ここで今一度、VRやARの歴史と共に、VR向けUIの歴史を振り返ってみたいと思います。
####2013年 Oculus DK1発送開始

2013年の***Oculus DK1***から始まる昨今のVRブームですが、***当時はまだVR専用コントローラーがなく***、Xbox360のコントローラー等で移動の操作をするか、何も操作するものがなかった記憶です。
UIについては、VRコントローラーがまだないころなのでVR向けのUIと呼べるものはなかった記憶です。
インタラクション方式については、この時点ではRazer Hydraでの入力がVRコントローラーに近かったです。
また、***基本的にVR開発者 to VR開発者向けのコンテンツが大半***を占めていました。

####2016年 HTC VIVE, Oculus Touch発売

2016年は、昨今のVRブームのターニングポイントとなる年です。この年に***HTC VIVEとOculus Touchが発売***され、***今のVRコントローラーの基本形***が形作られました。
VRコントローラーを使って直感的なインタラクションを行えるので、***「VR空間でボタンを押す」***、***「VR空間のオブジェクトを掴んで何かする」***ものが多かったように思います。

HTC VIVEの発売にあわせ、Valveより同時にSteamVRのチュートリアルを兼ねた「The Lab」がリリースされました。

最初の画面で「ゲームスタート」を押すのは「VR空間でボタンを押す」方式。

<details>
  <summary>クリックして動画を開く</summary>
![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/34df97fe-fc3b-248b-eb82-bc103b3ee190.gif)
</details>
部屋内での移動はテレポート方式で、ワールド移動は「VR空間にあるオブジェクト(球)を掴んで頭に持ってくる」ことで移動ができる形でした。

<details>
  <summary>クリックして動画を開く</summary>
![ダウンロード (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/becb6260-3eff-726c-9915-a849e04b7d9b.gif)
</details>
そのほか特徴的なものでは、Oculusの「First Step」や「First Contact」がありますが、これらもほぼ同様の操作体系だった記憶があります。
2016年頃にリリースされたVRタイトルは***全体的に「The Lab」をお手本***にしたものが多かったように思います。
####2016年後半 HoloLens1国内発送開始
このころはARの盛り上がりもあってか、***ハンドジェスチャーやモーションによる入力が検討***され始めた時期でもあると感じています。
ハンドジェスチャーについては***HoloLens1***の***AirTap***が印象的でした。
***Body-LockedなUI***の検討や、***Gaze入力が実用的に使われ始めた***のもこの時期な印象です。
Gaze入力に関しては、***3DoF-VRで有用な入力手段***として、同時期からGearVRやGoogle Cardboardのようないわゆる***「スマホVR」でも多く使われていた***記憶があります。
####そして2019年...
そして今年までには多くのタイトルが「ポインター型2D-UI」を採用している印象があります。
VR配信や動画でよく見るものでは***BeatSaber***が多いですね。
いつからか、***SteamVRダッシュボード***や***OculusDash***もこの形になっていました。

<details>
  <summary>クリックして動画を開く</summary>
![ダウンロード (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/e6499bce-042e-f2b7-eaf6-06e819e50583.gif)
</details>
直感性には欠けますが、多くのVRアプリケーション標準の操作体系となっているため、無難な使いやすさがあると思います。

####いち開発者として思う、VR向けUIのありかた
これはあくまでも「私個人が個人的に思っていること」という前提を付け加えさせていただきますが、
VR向けのUIは、現代で広く使われているUIをベースにして、いったんはそのまま移植するのが良いのかなと思いました。
例えば現代であれば、スマートフォンのUIをベースにするなどです。
スマートフォンのタッチ・スワイプ・ピンチイン/アウトの操作は、街頭のデジタルサイネージディスプレイでも使われているように、広く一般的に使われています。

あまりに革新的過ぎるUIは、iOSのようなレベルの直感性/応答性、そして市場の広がりがないと受け入れられないのではないかと思います。
新しいインタラクションを取り入れる際も、スマートフォンと共通のアイコンを置くなどしたほうがUXも上がると思っています。例えばメニューを起動するボタンアイコンはハンバーガーアイコン(三)にするなど。

あまりに革新的だったり独創的すぎて不便なUIは時に、プロダクトそのものを壊します。
***「それ、本当にやったほうがいいんだっけ？ やるとしても、そこに何らかの仮説はあるんだっけ？」***と常に問い続け、実装に落とし込んでいきたいなと思いました。

#参考文献等
[Rift Virtual Reality Check (VRC) Guidelines - Oculus](https://developer.oculus.com/distribute/latest/concepts/publish-rift-app-submission/)
[バーチャルリアリティ学 - 日本バーチャルリアリティ学会](https://www.amazon.co.jp/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E3%83%AA%E3%82%A2%E3%83%AA%E3%83%86%E3%82%A3%E5%AD%A6-%E8%88%98-%E6%9A%B2/dp/4904490053)
[ゲームデザインバイブル 第2版 - Jesse Schell](https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%90%E3%82%A4%E3%83%96%E3%83%AB-%E7%AC%AC2%E7%89%88-%E2%80%95%E3%81%8A%E3%82%82%E3%81%97%E3%82%8D%E3%81%95%E3%82%92%E9%A3%9B%E8%BA%8D%E7%9A%84%E3%81%AB%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B113%E3%81%AE%E3%80%8C%E3%83%AC%E3%83%B3%E3%82%BA%E3%80%8D-GAME-DEV/dp/4873118018)

# おわりに

数日前、ふとしたきっかけでVRのUI/UXについて書くことにしたのですが、思った以上に書きたいことがあったので、その部分は小コラムとしてまとめました。

明日12/12の [DMMグループ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dmm) は @taumu さんです。よろしくお願いします！