講演者：岩本 義智(株式会社ホロラボ) こんな人におすすめ ・Mixed Realityコンテンツの企画・制作にかかわっている方 ・効果的なMixed Reality向けUI/UXデザインを学びたいアーティスト ・VR／Mixed Reality向けアプリ実装を担当するエンジニア 受講者が得られる知見 ・VR／MRコンテンツで使える、視差に依存しない遠近感の作り方 ・VR／MRにおける心理的空間演出の手法と実践方法 ・体感を生む立体的なUIデザインの作成の仕方

1. XRで心地よい3D体験を生むための、
絵画的空間構成手法とUnityへの実装
DAY2 2018/5/9
岩本 義智 Yoshitomo Iwamoto
株式会社ホロラボ / MR コンテンツプロデューサー

2. 自己紹介・会社紹介
HoloLab Inc.

3. 岩本 義智 Ｙｏｓｈｉｔｏｍｏ Iwamoto
＜略歴＞
• 米国アリゾナ大学（Visual Communication学科）卒。
在学中に絵画、イラスト制作を通じて視覚表現の手法
を学ぶ
• 2005年に大学へ復学、CG制作の基礎を学びながら
TV制作スタジオのインターンを約1年間経験
• 2007年に帰国後、CGのリアルタイムレンダリングを
使ったVR／ARコンテンツの企画プロデュースに従事
• 2017年よりＨｏｌｏＬｅｎｓアプリのプロデュースを開始
• 2018年4月より株式会社ホロラボに参加
株式会社ホロラボ / ＭＲコンテンツプロデューサー
2018-2019 Microsoft MVP (Windows Development)
@yoshipon13
iwamoto@hololab.co.jp
HoloLab Inc.

4. 趣味と小遣い稼ぎに時折人物イラストも描いています。

5. 株式会社ホロラボ
http://hololab.co.jp/
所在地：東京都品川区西五反田
設立日：2017年1月18日
創業者：5名
従業員：14名
HoloLens/Windows Mixed Realityに関する開発支援
• 受託開発(コンサルティング/ディレクションを含む)
• 研究開発
自社サービス「AR CAD Cloud」の開発
普及啓もう活動
• セミナー
• 開発トレーニング
• コミュニティ

6. 今までのXRコンテンツプロデュース実績

7. （事例画像・映像省略）

8. XRコンテンツ制作で心がけていること
•表示デバイスのスペックで狙える最大限のリアリティを追求
（CGの最適化）
•AR・MRでCG映像を投影する背景との親和性
•メインのCGコンテンツを邪魔しない、直感的にユーザーイン
ターフェース

9. 本講演の主旨

10. 本講演の主旨
本講演では体感を効果的に生むことができる
絵画的空間構成手法を用いたMixed Reality
空間の作成とUnityシーンへのUI/UX実装のポイントw
を紹介いたします。
1. VR／MRコンテンツで使える、視差に依存しない遠近感
の作り方
2. VR／MRにおける心理的空間演出の手法と実践方法
3. 体感を生む立体的なUIデザインの作成
Deigo Velazquez , Las Meninas

11. VR／MRコンテンツで使える、視差に依存しない
遠近感の作り方
絵画的遠近法

12. 「奥行き感のある絵作り」に苦労していませんか？
• 立体感に乏しい
• 空気感に欠ける
• ごちゃごちゃして見える
・・・など

13. ｘRコンテンツが立体的に見えるのは
人間の目の仕組み：「両眼視差」と「眼球運動」を利用
しているから
ズ
立体映像
両眼視差
左目
レンズ
右目
レンズ
遠い 開散（開き）
輻輳（寄せ）
眼球運動
ふくそう
近い
運動視差

14. 実は、視差と眼球運動だけに依存し
た立体表現だと…
脳が満足してくれません。
出典：Science learning – How the eye focuses light
１． ピント合わせ時の毛様体筋の緊張
２． 経験・知識に基づく距離感
150～180㎝？
15～20㎝？
40～50㎝？
8階建て？
30ｍくらい？
地平線？
• 陰影
• パース
現在のXRデバイス（スマホ、VRゴーグル、
MRデバイス）で表現できない要素
動的な被写界深度ぼかしが必要だが、
市販デバイスではまだ対応していない
絵画的な単眼性の立体表現である
「遠近法」を表示する映像コンテンツ
で使用することで補完できる！
改善可能か？

15. 遠近法とは？
• 遠近法が使われるようになったのは古代ギリシャ・ローマの時期だと言われています。
• 中世に入ると象徴主義の影響で絵画が平面的に。
• 遠近法が再活用されだしたのはルネサンス初期の13世紀以降。イタリアからヨーロッ
パに広がります。

16. 遠近法いろいろ
重なり 大きさと位置
キメの細かさ 陰影

17. 線遠近法（透視図法）
消失点（水平線上）に近いもの ほど小さく、遠く
見えるというもので、
一点透視図法、二点透視図法、三点透視図法
などがあります。
http://www.qam-web.com/?p=6115

18. 色彩遠近法
後方
手前
手前
後方
一般的に
暖色系は手前に、
寒色系は後方に
あるように見える。

19. 空気遠近法
遠くのものは大気の影響で霞んでいくことから、
彩度、コントラストが弱いものほど遠くに見える
という遠近法です。
この現象を利用し、遠景となる 部分を薄く描い
て距離感を表現 します。

20. 消失遠近法
焦点に由来する遠近法で、
焦点がぼやけたところほど
遠くに見える
という遠近法です。

21. 重なり
• ２つ以上のものが重なっていると、
前よりも後ろの物のほうが遠くに
見える
大きさと位置
• 手前のモノほど大きく見えて、 遠くに
あるほど小さく見える。
• 水平線に向かって、上にあるものほど
遠くに見える。

22. キメの細かさ
• 表面の様子が手前ほど粗く、
遠くほど細かく見える。
陰影
• 影や面の輝度によって、出っ張ったり
凹んだり見える。

23. まとめ
実は、Windows Mixed Realityの初期画面「Cliff House」では様々な遠近法が巧みに使われています。

24. 重なり
空気遠近法
色彩遠近法

25. 大きさと位置
空気遠近法

26. 陰影
重なり
線遠近法
色彩遠近法

27. VR／MRにおける心理的空間演出の手法と実践方法
感情を喚起する視線誘導

28. なせ画家はこのような構図を選んだか？
視線を誘導して見る者の
感情の動きをデザインするため
William-Adolphe Bouguereau, The Birth of Venus

29. 構図とコンテンツ要素を使った視線誘導
Rembrandt, The Anatomy Lesson of Dr. Deyman

30. 構図とコンテンツ要素を使った視線誘導
Courbet, The Burial at Ornans

31. 視線誘導：（１）簡単なテスト
まず頭の中で魚の絵を描いてみてください。
魚の頭はどちらを向いていますか？
次に世界の国旗デザインを思い出してください。
どのような法則性がありますか？
多くの方（特に右利きの方）が魚の
頭が左向きを想像したはずです。
上下左右対称、上下対象、左上に
ワンポイント

32. 視線誘導：（２）目の動きと感情の動き
新しいイメージを想像 過去に見たイメージを
想像
無意識に感じている体
の変化や感覚に注意を
向けている
自分自身への問いかけ
や独り言
右上 左上
右下 左下
最初に操作させたい
UI表示に適した方向

33. 幸せ
楽しい
怒り
動揺
リラックス
冷静
悲しみ
退屈
視線誘導：（３）視線の方向と結びつく感情
高揚
落胆
ポジティブ ネガティブ
報酬
Hotなニュース
伝達メッセージ
恐怖、驚き
注意喚起（弱）

34. 幸せ
楽しい
怒り
動揺
リラックス
冷静
悲しみ
退屈
視線誘導：（３）視線の方向と結びつく感情
高揚
落胆
ポジティブ ネガティブ

35. 幸せ
楽しい
怒り
動揺
リラックス
冷静
悲しみ
退屈
視線誘導：（４）視線が向きやすい方向と順番
１
２ ３
４
最初に操作させたい
UI表示に適した方向

36. 感情と色
塚田敢「色彩の美学」より
黒 悲哀、陰気
白 潔白、清楚
赤 情熱、危険
青 希望、孤独
黄色 平和、活発
灰色 陰鬱、沈静
ピンク 愛、女性的
オレンジ 陽気、快活
黄緑 平和、青春
緑 希望、新鮮
水色 爽快、清涼
紫 高貴、優雅

37. まとめ
重要な情報を
明るい色で
有用なテキスト情報、
操作ボタン、アイコン
など
驚き演出
重要度は低いが
表示しておきたい
情報
XRで視線誘導しやすいおすすめレイアウト
コンテ
ンツ用
領域
画面

38. 体感を生む立体的なUIデザインの作成
インタラクションに適した視野角と距離

39. 密接距離（15㎝～45㎝） ・・・ 非常に親密な関係
個体距離（45㎝～1.2ｍ） ・・・ 親しい間柄の友人など
社会距離（1.2ｍ～3.6ｍ） ・・・ 個人的な関係のない人
公衆距離（3.6ｍ以上） ・・・ 講演会の場合など、公衆との間にとる距離
パーソナルスペース
E.ホール「パーソナル・スペースと縄張り意識・空間行動」
個体距離（45㎝～1.2ｍ） ・・・ 親しい間柄の友人など
社会距離（1.2ｍ～3.6ｍ） ・・・ 個人的な関係のない人
XRコンテンツ表示に
適した距離

40. パーソナルスペース
密接距離（15㎝～45㎝）
一歩も動かずに
キスやハグが
できる距離
個体距離（45㎝～1.2ｍ）
一歩踏み出せば
握手したり殴ったり
できる距離
社会距離（1.2ｍ～3.6ｍ）
複数人と同時に
会話するのに適した
距離
公衆距離（3.6ｍ以上）
自分が集団や風景
に埋没される距離
より感情的 より冷静
XRコンテンツ表示に適した距離

41. 視野と情報の読み取りやすさ
水平 垂直 参考
弁別視野 視機能が優れている中
心領域、細かく見れる範
囲
約５°
以内
約５°
以内
有効視野 眼球運動だけで寸時に
情報を理解できる範囲
約３０°
以内
約２０°
以内
NTSCテレビ方式
の標準観視画角
安定注視野 眼球・頭部運動で無理
なく注視でき、情報を把
握できる範囲
６０°‐
９０°
４５°‐
７０°
情報端末利用空
間での効果的な
情報表示範囲
誘導視野 識別能力は低いが座標
系誘導効果が生じ臨場
感を引き起こす範囲
３０°‐
１００°
２０°‐
８５°
映画、高品位テレ
ビの目標大画面
サイズ
補助視野 単純な視覚情報のみを
検出・受容できる範囲
１００°‐
２００°
８５°‐１
３０°
参照元：
• https://dbnst.nii.ac.jp/view_image/2515/4526?height=785&width=421
• 畑田豊彦「情報需要と市や特性の計測」
弁別視野
有効視野
安定注視野
誘導視野
補助視野
中心視野周辺視野
UI表示に適した範囲
CGコンテンツ表示に
適した範囲 HoloLens

42. HoloLensの視野角（FoV）、視距離と表示画面サイズ
水平30°×垂直17.5°
0.8m
高さ：0.4m
幅： 0.22ｍ
1.5m
高さ：0.75m
幅： 0.42ｍ
3.0m
高さ：1.4m
幅： 0 .84ｍ 5.0m
高さ：2.5m
幅： 1.4ｍ

43. まとめ
体感を生む立体的なUIとコンテンツの配置場所
• 21～27インチのディスプレイ
が浮いているイメージ
• 個体距離と社会距離の中間
• 有効視野
操作UI最適ゾーン
0.8m～1.5m
コンテンツ表示
最適ゾーン
1.2m～3.6m
• 社会距離の中間
• 有効視野
背景ゾーン
コンテンツから情報を送る
新たなコンテンツが登場する

44. 総まとめと応用事例

45. 資料提供：株式会社reK
本講演で紹介した手法を取り入れたHoloLens事例
1. 視差に依存しない遠近感
2. 心理的空間演出
3. 体感を生む立体的なUIデザイン

46. 本講演で紹介した手法を取り入れたHoloLens事例
資料提供：株式会社reK
1. 視差に依存しない遠近感
2. 心理的空間演出
3. 体感を生む立体的なUIデザイン

47. 総まとめ
1. VR／MRコンテンツで使える、視差に
依存しない遠近感の作り方
2. VR／MRにおける心理的空間演出の
手法と実践方法
3. 体感を生む立体的なUIデザインの
作成
線遠近法、色彩遠近法、重なりなどの
遠近法を活用する。
パーソナルスペース、視野と距離を考
慮した効果的な空間配置を行う。
HoloLensではFoVを考慮する。
空間へのUIやコンテンツ配置位置を
検討し、視線誘導を行う。
色による感情喚起も活用。

48. Thank you!
ご静聴ありがとうございました！