AR / VR / MRの世界に、置けるUI、置けないUI、置くべきUI

1. 株式会社ハニカムラボ
河原田清和
田中浩一
AR / VR / MRの世界に、
置けるUI、置けないUI、置くべきUI

2. アジェンダ
1. 自己紹介
2. 今日のテーマ（前置き）
3. やってみる内容
4. 実際に作ってみた
5. まとめ

3. 河原田 清和（かわはらだ きよかず）
• 株式会社ハニカムラボ 代表取締役 CEO
• 昔、ゲーム作ってました
• PS2 / Xbox / PSP / Xbox 360あたりの世代
• その後マイクロソフトXbox ATGチームに。
• 最近はHoloLensとの絡みが多いです
• いろんなものを作りたくて、ハニカムラボを設立
自己紹介

4. 田中 浩一（たなか こういち）
•新卒でコナミに入社、アーケードゲーム開発に携わる
•いろいろな会社を経てハニカムラボへ
•HoloLensアプリやインスタレーション系アプリの開発
を主に行っています
自己紹介

5. ハニカムラボとは
ゲーム業界出身のメンバーたちと、
Web業界出身のメンバーたちが、
それぞれの得意ジャンルを持ち寄って、
ワクワクするコンテンツを生み出すテクノロジー集団

6. ハニカムラボがよく作るもの
• デジタルプロモーションのイベントアプリケーション
 xRコンテンツ
 プロジェクションｘインタラクティブ
• スマホアプリ
• メーカーと共同でプロトタイプ開発
• コンシューマゲーム
• Webサイト
とかいろいろ。
MicrosoftのMixed Reality Partner Program（MRPP）の
認定パートナーでもあります。HoloLensアプリ作ります。

7. こんなのとか
愛媛県の道の駅の2F部分を
リニューアル。
8m x 8m x 3.5mの空間4面
にプロジェクション＋Kinect
でインタラクティブなバー
チャル水族館を作成。

8. こんなのとか
渋谷109前のスペースにAndroid端末
203台を同期させたインタラクティブ
なクリスマスツリーを設置。
通行人は自分のスマホで飾り付けがで
きます。

9. こんなのとか
新宿メトロプロムナード
に、東京喰種の実写版映
画公開に先駆けたプロ
モーションを展開。
Kinectを使って、体験者
が喰種となり、特定のパ
ラメータによりいずれか
の赫子（かぐね）が生え、
写真入り指名手配のポス
ターがもらえる体験がで
きるイベント。

10. こんなのとか
ベネッセ様進研ゼミの学習用タブレットのコ
ンテンツ。ゲーム要素を交えて遊びながら、
地理ｘ歴史を学ぶことができるアプリ。

11. こんなのとか
表参道の「ベーカリーカフェ426」で
開催されたデジタルプロモーションの
VRゲーム。
冒険ファンタジーの世界を表現した
VR空間で、たくさん出てくるモンス
ターを倒してハイスコアを目指す。
VR専用椅子が音楽に合わせて振動し、
映像と音と振動で没入感をさらに演出。

12. こんなのとか
Microsoftの開発者向けイベント、
de:code 2018にて、HoloLensコ
ンテンツをブース出展。
Cognitive Service＋HoloLens＋オ
リジナルキャラクターによる、近未
来型AI体験を提供。

13. de:code 2018出展の様子

14. 他にもxRコンテンツはいろいろ作っていますが、
大人の事情でここでは言えないものもあるので割愛。
こんな感じのいろいろなジャンルのデジタルものを
ハニカムラボは日々開発しています。

15. というわけでそろそろ本題。

16. 「AR / VR / MRの世界に、
置けるUI、置けないUI、置くべきUI」
今日のテーマ

17. あとになって後悔するほど壮大なテーマを掲げてしま
いました。
まともにやったら50分じゃ終わらないくらいの壮大
さです。

18. その理由の一つが、ひとことで“UI”と言っても様々な
タイプのUIが存在すること。
今回は、テーマのメインである「AR / VR / MRの違
い」という点にポイントを絞って、今回扱う“UI”その
ものは、限りなくシンプルなものに限定することにし
ます。

19. ということで、今回扱う”UI“は、
“3D/2D空間に配置する、
メニューなどの操作パネル/ウィンドウ”
というシンプルなものということにします。シンプル
にするため、デザイン性も排除します。
今回扱う“UI”
今回の話題は、このシンプルな
ウィンドウの、配置方法、出現方
法、操作方法にフォーカスします。
こんなシンプルウィンドウ

20. 対象となる“UI”を絞った上で、今回やりたいことは、
• ARとVRとMRって、実装方法はほとんど同じだけ
ど、それぞれはやっぱり特徴が違うので、操作し
やすいUIの設計は違うはず
• なので、それぞれの世界で違和感がないUIを、違
う世界に持っていったらどうなるかを実際に試し
てみる
です。
今回やりたいこと

21. ちなみに、xRという3次元の世界でUIを語る場合、様々なタ
イプのUIを考えることができます。
例えば・・・
余談（xRのUI①）

22. • 2DのUI
画面上に貼り付けてある2DのUI
 ステータス/情報表示パネル
 会話メッセージウィンドウ
 操作パネル
 とか
余談（xRのUI②）

23. • 2Dのものを3Dに配置したUI
本来2Dのものを3D空間上に配置したUI
 ステータス/情報表示パネル
 メニューウィンドウ
 などの、ウィンドウ/操作パネルのような板を3D空間に配置
余談（xRのUI③）

24. • 3DのUI
3D空間上に配置した、3DオブジェクトのUI
 ワープ移動カーソル
 アイテムを示す矢印
 セーブポイント
 とか
余談（xRのUI④）

25. さらに、ウィンドウとか操作パネルだけに注目したとしても、
考えるべき「要素」がたくさんあります。
例えば、ウィンドウの形、大きさ、色、フォントの色やサイズ、
etc…
→伝えたい内容の重要さ/緊急度/有用性等々によって、様々に
検討、設計されるべき
余談（その他の構成要素①）

26. • 明るい色は目立つ
→重要な情報
• 緊急度が高いものやエラーメッセージ
→赤いウィンドウや赤い文字で表現
• すべての情報を差し置いてでも最初に確認すべきもの
→本来コンテンツ表示領域となるど真ん中において、OKを押
すまで消えない
• 多くの人は最初に左上を見る
→頻度が高いものや重要なものは左上に置くことを意識する
• その他にも、出てくる速度、アニメーションのさせ方、
アニメーションの柔らかさ、ウィンドウの透明度、、、
等、要素をあげだしたらキリがないくらい考えることは
いろいろある
余談（その他の構成要素②）

27. • 色があたえるイメージとか、心理的に視線を動かしやす
い位置とか、アニメーションが与える印象とか、
心理学的な側面からの検討も実は重要だったりします
余談（その他の構成要素③）

28. で、いろいろ説明しましたが。
今回は全部無視して・・・
AR / VR / MRそれぞれの特徴と、操作性/操作方法という点に
のみ注目します。

29. （発表者チェンジ）

30. やることまとめ
• シンプルなメニューウィンドウに注目
 ボタン付きのメニューウィンドウをどこにどうやって表示するか
 メニュー内にあるボタンをどうやって押すか
• このウィンドウを、何パターンかの配置方法で、AR / VR /
MRのそれぞれの世界に配置してみる
 どこがよかったか、どこがよくなかったか
→これを通じて、UIウィンドウを設計/配置するときに、それ
ぞれの世界ではどの部分を意識する必要があるのかを浮き彫り
にします。
ガイドラインを10回読むより肌で感じてみよう！
ウィンドウ
ボタン

31. 用意するパターン
その1：「ダイアログ」
画面真ん中に配置するウィンドウ。
ダイアログ

32. 用意するパターン
その2：「おなか固定パネル」
プレイヤーのおなかの先の位置あたりに固定するメニューパ
ネル。顔（カメラ）の位置に対して、だいたいいつも同じ位
置にあるため、見たいときにぱっと確認しやすい。
こんな感じのやつ

33. 用意するパターン
その3：「横からスライドメニュー」
画面横からスライドしてくるメニュー。
にゅ
押す

34. 用意するパターン
その4：「Tagalong」
HoloLensのメニューで使われてるやつ。顔の向きの移動に対
して少し遅れて追従し、画面のセンター付近に常に配置され
る。

35. ターゲットデバイス
• AR代表
SAMSUNG Galaxy S8
• VR代表
Lenovo Mirage Solo
• MR代表
Microsoft HoloLens

36. 作ってみた
それぞれのデバイスｘメニューパターンを実際に
作ってみました
順番に見てみましょう

37. AR x ダイアログ
普通。押しやすい。
この状態のプレイはARの恩恵が受けられない。

38. AR x おなか固定パネル
意外とあり。必要な時は下を向けばいい。
ボタン決定がグルグルなら画面タッチする必要がない。

39. AR x 横からスライドメニュー
必要な時に出し入れするもの向き。
メニュー的な話だと圧倒的な使いやすさ。

40. AR x Tagalong
ありっちゃあり。
ベゼルが細ければ細いほど変な印象を受ける。

41. VR x ダイアログ
これまた普通です。よく出ます。
プレイ中はじゃま。

42. VR x おなか固定パネル
本を開いてる感じにも似ている。
長時間やると酔う。

43. VR x 横からスライドメニュー
できるんだけども調整が大変。ほぼ無理。疲れる。
そもそもVRの画面の端はひとそれぞれ。模範的悪手。

44. VR x Tagalong
Tagalongに慣れてると違和感はない。
調整して、「ついてくる」ようになれば使いやすそう。

45. MR x ダイアログ
押せない。
押せそうだけども。

46. MR x おなか固定パネル
動画
感想
押せた。
でも、真ん中のボタンしか押せない。

47. MR x 横からスライドメニュー
動画
感想
押せない。
押せる気がしない。

48. MR x Tagalong
動画
感想
押せた。
やっぱりコレ。

49. 結果
ダイアログ おなか固定
スライドメ
ニュー
Tagalong
AR
◯
使える
◯
使える
◯
使える
◯
使える
VR
◯
使える
◯
使える
△
使いにくい
◯
使える
MR
×
押せない
×
真ん中しか
押せない
×
押せない
◎
イケてる
それぞれの結果をマトリクスにするとこんな感じ

50. まとめ①
•総括すると、MR（HoloLens）がUI的にはイケてな
い感じがしてしまう
•が、理由は単純に操作方法の問題
HoloLensのカーソルは常に画面のセンターにある（首
ごとカーソルを動かす）
つまり、実は画面のセンター以外の場所はクリックで
きない → 一般的なUIは使えないものがある
その問題を解決するために生まれたのがTagalong

51. まとめ②
•ARは、今回の検証の結果としては優秀に見えるが、
画面のどこでもタップできるという入力方法のおかげ
画面の端の方を見るときに目が疲れるというVRゴーグ
ルで起こる問題も起こらない
ということが理由だと考えられる。
•つまり、ARが優秀というよりは、スマホARという
スタイルは画面にいろんな形でUIを配置しやすいス
タイルだと言える。

52. まとめ②
•スマホでは画面が小さいケースが多いので、レイア
ウトには気を付けないとコンテンツ表示領域がどん
どん狭くなってしまう。
•昨今のベゼルが細い端末では画面外から入ってくる
ようなUIに対してはアニメーションや使いどころが
肝心。コンテンツのAR感とはちょっと違った印象
を与えることも。

53. まとめ③
•VRにおけるUI配置は、
画面の端の方に固定すると目が疲れやすい
おなか固定のような空間上に相対的に位置固定する方
法は、酔いやすかった
といったデバイスならではの問題があった。
•コントローラの活躍もあってポインティングという
ことに関しては困ることがなく、デザインの自由度
が高い。

54. 結論
•UI自体の設計（例えばウィンドウの中身）が最適かど
うかについては、表示したい内容によって変わる。
•最適な見せ方は、やっぱり伝えたい内容ごとにがん
ばって考える必要がある。
•ただ、UIの配置設計は、AR / VR / MRの特
徴ごとにそれぞれ気をつけるべき違うポイント
がある→それに気を付けて考えましょう！
（発表者チェンジ）

55. （発表者チェンジ）

56. 最後に宣伝
• 素敵なUIを一緒に設計したい人
• ARCoreも好きだけど、HoloLensも好きな人
• DayDreamでコンテンツ作りたい人
• 実はARKit2が気になってる人
• xRも、xR以外も、いろんなコンテンツを作りたい人
ハニカムラボは仲間を募集しています！
興味のある人は採用特設サイトをチェック！
↓
https://www.special.honeycomb-lab.co.jp/recruit

57. ありがとうございました！