VRのDiegeticUIとNon-DiegeticUIについて

#はじめに
**DiegeticUI / Non-DiegeticUI**とは**物語世界内に属しているUI / 属していないUI**のことです。
VRにおけるDiegeticUIについてはUnityの公式で説明されています。
https://unity3d.com/jp/learn/tutorials/topics/virtual-reality/user-interfaces-vr
ただ、Unity公式様が語っている割にはこの言葉でVRのUIについて語っている人が少ない印象なので、事例をあげてみました。

#Diegeticの意味
Diegeticは「**物語内の**」という意味の形容詞です。「ダイエジェティック」みたいな[発音](https://ja.forvo.com/word/diegetic/)になります。

もともとDiegeticという言葉は音の分野で使われていたようです。[英辞郎on the web](https://eow.alc.co.jp/search?q=diegetic+sound)によると
>diegetic sound
《映画理論》物語世界の［の世界に属する］音
non-diegetic sound
《映画理論》非物語世界の［物語の世界に属さない］音◆概念的に「物語の外」で鳴っていて、物語の登場人物には聞くことができない音。例えば、物語に付随する音楽。

ここでいう物語世界とはアニメとか映画とかゲームとかのことで、
**Diegetic sound**は、せりふや歩く音とか銃声など**物語内で鳴っている音**で、物語内のキャラクターには聞こえています。
**Non-diegetic sound**はBGMや「きらきらきら～」みたいな**物語世界内では鳴っていない音**で、キャラクターには聞こえていないです。

オノマトペでいうと擬音語（ワンワン、ガッシャーン）、擬態語(わくわく、テカテカ)の関係に似ている気もします。
https://meaning.jp/posts/1283#head-f3549870056a7251bfb89b02c064b5f7

#DiegeticUI Non-DiegeticUI
「diegetic UI」でGoogle検索して[画像結果](https://www.google.com/search?q=Diegetic+UI&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjEpv3QtojjAhXIV7wKHZEJCP8Q_AUIECgB&biw=1215&bih=754#imgrc=nOy7bJSqhm80RM:)を見るとFPSゲームに関する海外の記事の画像が多く出てきます。

こちらのInrerfaceLoveというゲームや映画のかっこいいUIをまとめているサイトには4つほどdiegeticUIが載っています。
https://ilikeinterfaces.com/?s=diegetic
こちらの記事も英語ですが説明してくれています。
https://samwongpic.wordpress.com/2014/06/20/diegetic-and-non-diegetic-ui-2/

ここで得たイメージとDiegeticSoundの定義をもとに私なりにDiegeticUIについて考えてみます。

**DiegeticUI**
・キャラクターが持っているスマホやタブレットに表示されているUI
・物語世界内のテレビやPCに表示されたりしているUI
・部屋にかかっている時計（動いているなら）
etc
![SnapCrab_2019-6-27_17-32-25_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/848894cf-fdc0-5bde-047b-1d13518de5bb.png)

**Non-DiegeticUI**
空間にいきなり出てくるUIなど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/e416d5c0-884b-fdec-fb4c-011cab9900b1.png)


#VRでのUI事例

##DiegeticUI
###Oculus First Contact
OculusのチュートリアルはほとんどDiegeticUIな気がします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/4aaae8a9-2e82-9452-5cdd-16305beb33e4.png)
フロッピーディスクを謎の機械に入れると道具が出て来て、未来感のある部屋にいるという体験ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/0ac6f4cc-f3d1-c1ed-049d-ce192416760a.png)
###Facebook Spaces
腕時計からUIが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/08e42d4b-db18-37f5-b1fc-4f8d058069dc.png)
この方式はClusterとかでもありましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/ea643fe3-8fbd-36c5-5fc3-1b4454926a85.png)

###BigScreen
色選択UIです。
色はペンキの缶に入っていて、ペンも実際のマーカーやボールペンなどを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/7f70ebac-e5f0-0a87-c438-75d494bece39.png)
カメラは自撮り棒方式です。これもDiegeticUIに入るかなと思います。
![SnapCrab_2019-6-27_17-44-43_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/4ca19fd2-4c41-8ee1-bb28-ddb0d79c2ffc.png)

###RecRoom
アイテムは箱をスライドして開けて受け取ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/72ed1dac-ecfc-bf03-72d0-e6fd598a850a.png)
###Disney movie VR
ボタンが手すりにあって、レーザーポインターで押す方式です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/2cec625e-71d2-414c-694f-150faf433d83.png)
Diegeticかは微妙ですが、ディズニーランドのテーマパークという舞台設定なので手すりに不思議なボタンがあっても自然なのでDiegeticにしました。

##Non-DiegeticUI
ほとんどのVRUIはNon-Diegeticだと思います。
###VRchat
空中に出ているUIをレーザーポインターでクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/e416d5c0-884b-fdec-fb4c-011cab9900b1.png)
###Cluster
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/47308ce9-c719-7b55-3d20-a9e31aaeabd2.png)


#UIと操作
厳密な分類は難しいと思いました。
物語世界に依存する部分も多く、「**この世界は空間にUIが浮かぶ世界なんだよ！**」ということにしておけばDiegeticUIになります。

またUI自体はDiegeticでも操作の仕方がDiegeticじゃないものもあります。
VR以外のPCやスマホとかなら、そもそも入力系統はほとんどクリックやタッチだけですが、VRならレーザーポインターでクリックすることもできれば、手を動かして架空のボタンを押す操作などもできます。
手は確実に存在しているのでDiegeticですが、レーザーポインターは物語世界内で存在しているのかはあいまいです。
（ちなみにOculusGoのアプリは手の位置を動かすことはできないので、レーザーポインターで操作するしかないと思います。）

またUIが3Dになっていて手で入力すればDiegeticUIというわけではありません。
RecRoomなどはほとんどのボタンが3Dで手で押し込む方式ですが、空中に浮かんでいるUIはDiegeticとはいえないと思います。
![SnapCrab_2019-6-27_17-19-42_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190043/23e8e045-0625-ce49-ca69-9b4f4b5281a3.png)




#まとめ
分類して紹介してきましたが、分類することが大事なのではなくユーザー体験としてどのようなUIがいいかを考えることが大切だと思います。
またどちらのUIが良いという話でもありません。

DiegeticUIを作るのはとても手間がかかります。
ユーザーも手で押すより、レーザーポインターで空間に出ているものをクリックしたほうが楽なこともあるでしょう。

その代わりDiegeticUIを徹底すると、世界観を壊すこともなくユーザーのプレゼンスが高まることが期待できます。
事例ではUIの一部だけDiegeticUIになっているものもありました。

**実装の工数、ユーザーの操作性、世界観**の３つを天秤にかけてどの程度DiegeticUIにするかを考える必要があると思います。