---
title: 【出張ヒストリア2017】 想像と違ってた！ VRUI作りのコツ
tags:  #ue4 #unreal engine #historia #airtone #vr #ui #unreal engine 4 #game  
author: [株式会社ヒストリア](https://convert.docswell.com/user/historia_Inc)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5GE5MQMQE4.jpg?width=480
description: 2017年8月6日に行われた「出張ヒストリア！ UE4勉強会2017」にて発表させていただいたVRゲーム『Airtone』のUI制作事例です。  イベント詳細 https://historia.co.jp/archives/14244/  講演者： 岩田 里奈（UIデザイナー）  以下、セッション概要より抜粋。  VRゲーム『Airtone』のUI制作を通じて、VRでのUIデザインは2DベースのUIデザインとは大幅に異なると感じました。 VRにおけるUIデザインは、奥行き、平面ではなく360度空間を利用したレイアウト、視線誘導など、VRにしかない概念を意識する必要があります。また、制作の過程でほとんどのUIが3DUIになり、デザインの確認作業もVR上で行う必要があるため、使うツールや作り方も異なりました。 本セッションではこのようなVR特有の課題を、デザイン面、ツール面でどのように解決していったかをお話しいたします。
published: August 13, 17
canonical: https://convert.docswell.com/s/historia_Inc/ZMLRG5-vrui-78798570
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5GE5MQMQE4.jpg)

想像と違ってた︕ VRUI 作りのコツ
講演中に言葉で話した補足を簡単に追記しています。


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V9729P9WJR.jpg)

UI デザイナー / 宴会マネージャー
岩田 里奈
経歴
ゲーム / 遊技機
版権グッズ / その他
ゲーム (historia)
5年
5年
2 年～
妙な経歴ですが UE4 でなんとかやってます
宴会マネージャーは名刺にちゃんと記載されてる肩書です！


# Page. 3

![Page Image](https://bcdn.docswell.com/page/5DJY45497M.jpg)

historia でのお仕事
ＵＩ
ＵＩ
宴会
雑務
イベント
仲間に助けられながら UE4 使ってうまく回してます


# Page. 4

![Page Image](https://bcdn.docswell.com/page/2V7NYNYDE8.jpg)

historia でのお仕事
ＵＩ
ＵＩ
宴会
雑務
イベント
お店を決めて集団で会社のお金で飲んでいるだけ
最近、宴会活動が功を奏して社内にバーカウンターを設けました。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GYJ9PRP873.jpg)

historia でのお仕事
ＵＩ
ＵＩ
宴会
雑務
イベント
UNREAL FEST 出展 / ぷちコン / 出張ヒストリアなどなど


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5GJ8DWDZJD.jpg)

イベントでのお仕事
こういったロゴやポスターも担当させて頂きました。光栄の極みです。


# Page. 7

![Page Image](https://bcdn.docswell.com/page/MLJLMNM1ER.jpg)

2D
このように２Dをメインとして色々な方と関わって仕事をすることが多かったのですが


# Page. 8

![Page Image](https://bcdn.docswell.com/page/547MYXY57W.jpg)

今回VRリズムアクションゲーム【Airtone】に関わることで、ほぼ初めて3Dに触ることになりました。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/ZP7R9N9ZE9.jpg)

90%
UI
その結果ほとんど3DUIになりました。３Dに挑戦したのはただの興味ではなく、VRに触れていく中で挑戦しないとならない使命感的なものを感じ、自然とこの流れになりました。
このスライドでは２DUIからガラっと変わっていったAirtoneでの３DUIについて解説していきます。


# Page. 10

![Page Image](https://bcdn.docswell.com/page/NPJXQNQ17X.jpg)

おしながき
いつも通りの
デザイン
・要望から形に起こす
想像と違ってた！
・VR で見る 2DUI
デザイン
・VRUI はここが違った


# Page. 11

![Page Image](https://bcdn.docswell.com/page/63JK9N9MJD.jpg)

おしながき
いつも通りの
デザイン
・要望から形に起こす
想像と違ってた！
・VR で見る 2DUI
デザイン
・VRUI はここが違った


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4LE3WVW2E5.jpg)

いつも通りのデザイン
要望から形に起こす
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame
アウトゲーム
オプション アチーブメント
MusicSelect
Ingame
ミュージックセレクト
キャリブレーション インゲーム
ポーズ
リザルト
「OutGame」美少女アンドロイド：ネオンちゃんと戯れる落ち着いた生活スペースです。「Musicselect」曲選択画面です。OutGame内のオブジェクトに触れることでMusicSelectに遷移します。
楽曲も流れ、動きも多いにぎやかな場面。「Ingame」音ゲーをプレイする場面です、もちろん音も鳴ってにぎやかです。UIとしては記載されているようなざっくり8つのUIがあり、今回はアウト
ゲーム・ミュージックセレクト・インゲーム・リザルトに触れていきます。


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V8EDK8K67G.jpg)

いつも通りのデザイン
要望から形に起こす
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame
アウトゲーム
MusicSelect
Ingame
ミュージックセレクト
キャリブレーション インゲーム
ポーズ
オプション アチーブメント
落ち着かせる︓静
ガッツリ音ゲー︓動
「落ち着いた場面」と「音ゲーらしいにぎやかな場面」に分かれて「静と動」の印象を行き来する作りになっています。
リザルト


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4V7PK83ZJ8.jpg)

いつも通りのデザイン
要望から形に起こす
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame
アウトゲーム
オプション アチーブメント
落ち着かせる︓静
MusicSelect
Ingame
ミュージックセレクト
キャリブレーション インゲーム
3DUI・見せ場︕
ポーズ
リザルト
ガッツリ音ゲー︓動
当初はMusicSelectがUIの中で一番の見せどころとして3DUIになる予定でした。社内で誰もVR開発を行ったことが無いので想像ができず、開発期間も余裕は無かったので他は切り捨てて
Musicselectだけがんばろう！という事に決まっていましたが。


# Page. 15

![Page Image](https://bcdn.docswell.com/page/L2JVVN4MJQ.jpg)

要望から形に起こす
いつも通りのデザイン
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame
MusicSelect
Ingame
90％が 3DUI に
だいたい
後で説明します
アウトゲーム
オプション アチーブメント
落ち着かせる︓静
先ほど伝えた通り、最終的にはほとんど3DUIになります。
ミュージックセレクト
3D︓UI の見せ場︕
キャリブレーション インゲーム
ポーズ
ガッツリ音ゲー︓動
リザルト


# Page. 16

![Page Image](https://bcdn.docswell.com/page/Z5EGLK1XJL.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
企画
まずは企画さんからの要望をヒアリングします。


# Page. 17

![Page Image](https://bcdn.docswell.com/page/V4JQYND57P.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
ガッツリ
音ゲー
企画


# Page. 18

![Page Image](https://bcdn.docswell.com/page/DK74WGZVE1.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
キーカラーは
と
黄色 水色
ガッツリ
音ゲー
企画


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PLJ1YDR4EG.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
キーカラーは
と
黄色 水色
ガッツリ
音ゲー
企画
ネオンちゃんに
ゲーム
癒される


# Page. 20

![Page Image](https://bcdn.docswell.com/page/8GJWGY1Z72.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
キーカラーは
と
黄色 水色
ガッツリ
音ゲー
企画
ネオンちゃんに
ゲーム
癒される
女性も
プレイしやすく


# Page. 21

![Page Image](https://bcdn.docswell.com/page/W4EZLXPL73.jpg)

いつも通りのデザイン
要望から形に起こす
企画から UI への要望
キーカラーは
と
黄色 水色
ガッツリ
音ゲー
企画
ネオンちゃんに
ゲーム
癒される
女性も
プレイしやすく
VR の UI…
アイアンマン
カッコイイよね


# Page. 22

![Page Image](https://bcdn.docswell.com/page/KY76W4MM7V.jpg)

いつも通りのデザイン
要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
企画
UI


# Page. 23

![Page Image](https://bcdn.docswell.com/page/5G75MQZQ74.jpg)

いつも通りのデザイン
要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
なんとなく分かったよ
企画
UI


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V9J29PRWER.jpg)

いつも通りのデザイン
要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
なんとなく分かったよ
企画
UI
調べる
要望と結びつける
得た要望について調べて要望と結びつけることが最初の仕事となります。
この、UIに対してではなく、ゲーム全体のヒアリングとその要望からUIをどのようにしようかと読み取る力はかなり大切です。


# Page. 25

![Page Image](https://bcdn.docswell.com/page/5DEY45D9JM.jpg)

いつも通りのデザイン
要望から形に起こす
調べる
ガッツリ
音ゲー
黄色 水色
ネオンちゃんに
ゲーム
癒される
女性も
キーカラーは
と
プレイしやすく
VR の UI…
アイアンマン
カッコイイよね
なんか図形が多い・スピード感がある・派手目の色
音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


# Page. 26

![Page Image](https://bcdn.docswell.com/page/2VJNYN6D78.jpg)

いつも通りのデザイン
要望から形に起こす
調べる
ガッツリ
音ゲー
女性も
キーカラーは
と
黄色 水色
プレイしやすく
VR の UI…
ネオンちゃんに
ゲーム
アイアンマン
癒される
カッコイイよね
つかう
音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GYE9PRL8J3.jpg)

いつも通りのデザイン
要望から形に起こす
調べる
ガッツリ
音ゲー
黄色 水色
ネオンちゃんに
ゲーム
癒される
女性も
キーカラーは
と
プレイしやすく
VR の UI…
アイアンマン
カッコイイよね
siﬁ な黒ベースより白ベース・色を何色か使う・角を取った形
音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


# Page. 28

![Page Image](https://bcdn.docswell.com/page/5GE8DWXZED.jpg)

いつも通りのデザイン
要望から形に起こす
調べる
ガッツリ
音ゲー
黄色 水色
ネオンちゃんに
ゲーム
癒される
女性も
キーカラーは
と
プレイしやすく
VR の UI…
アイアンマン
カッコイイよね
落ち着いた動き・奇抜過ぎない・角を取った形
音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


# Page. 29

![Page Image](https://bcdn.docswell.com/page/MLELMN817R.jpg)

いつも通りのデザイン
要望から形に起こす
調べる
ガッツリ
音ゲー
黄色 水色
ネオンちゃんに
ゲーム
癒される
女性も
キーカラーは
と
プレイしやすく
VR の UI…
アイアンマン
カッコイイよね
ほっとこう
音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


# Page. 30

![Page Image](https://bcdn.docswell.com/page/54JMYX65JW.jpg)

要望から形に起こす
いつも通りのデザイン
要望と結びつけると
Outgame
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない
・黄色と水色
落ち着かせたい場所ではシンプルに


# Page. 31

![Page Image](https://bcdn.docswell.com/page/ZPJR9NPZ79.jpg)

いつも通りのデザイン
要望から形に起こす
要望と結びつけると
MusicSelect
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない
・黄色と水色
音を聴かせる場所ではにぎやかに


# Page. 32

![Page Image](https://bcdn.docswell.com/page/NPEXQN31JX.jpg)

いつも通りのデザイン
要望から形に起こす
要望と結びつけると
Ingame
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない
・黄色と水色
プレイ中はにぎやかでも邪魔をしないように


# Page. 33

![Page Image](https://bcdn.docswell.com/page/63EK9NYMED.jpg)

いつも通りのデザイン
要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
もっと分かり易いもの、紋章とかオリジナルのモチーフがあると最高
だいたい４つの項目にまとめました。順序は行ったり来たりです。まず「モチーフを決める」今回はAirtoneならでわのモチーフは最初の段階で無かったので開発期間との兼ね合いもあり、
割り切って「図形」に。これら六角形、ひし形、マル、六角形を伸ばした形、などを組み合わせて作っています。さきほどの要望を意識してフォントもある程度の太さがあり角の取れたものを選
んでいます。太さについてはVRだと解像度の問題で細い文字が見えにくいのでそうしたという理由もあります。


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4L73WV9275.jpg)

いつも通りのデザイン
要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
フチを目印に。特に「ボタン：押せるもの」を分かってもらうことが大切
これら見せたいものにはフチをつけました。小さな差に聞こえるかもしれないですがフチは他と切り離して浮き立たせる効果があります。
フチは目立つので使いやすいのですが、多用するとゴチャつくので、意外と使うのには注意が必要です。


# Page. 35

![Page Image](https://bcdn.docswell.com/page/V87DK8G6JG.jpg)

いつも通りのデザイン
要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
デフォルト︓水色
選択 / アクティブ︓黄色
EXIT
その他
色は増えがちなので使う領域の大小で見せたり色数を絞ったり
同系色にまとめたりしてバランスをとります
今回は音ゲーなのでどうしても色数が多くなりました。基本の色として水色、選択されたりアクティブなものは黄色を効かせました。
難易度にも３色、さきほどの文字などのフチの色にもこの色の役割をリンクさせています。


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4VJPK88ZE8.jpg)

いつも通りのデザイン
要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
いつもの
UI
VRUI
形の役割
を決める
色の役割
を決める
レイアウト
を決める
●ヘッダーフッター ●サイズの統一
●ヘッダーフッター関係なし
●奥行を駆使
( 奥行があるのでサイズの統一は手間がかかる )
VRUI にするにあたってかなり変更したので後で説明します


# Page. 37

![Page Image](https://bcdn.docswell.com/page/L2EVVNNMEQ.jpg)

いつも通りのデザイン
要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
組み合わせて意味を持たせながら
仕上げていく
意味を持たせておくと UI の変更があった場合も
新たな組み合わせがしやすい


# Page. 38

![Page Image](https://bcdn.docswell.com/page/Z57GLKKXEL.jpg)

いつも通りのデザイン
要望から形に起こす
個人的に最も大切にしている UI のポイント
主 役 ( ゲーム ) の良さを引き立て、
完成度を上げること


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V4EQYNN5JP.jpg)

いつも通りのデザイン
要望から形に起こす
絵 + 額縁で表現したかった。
。
コンビニパックなのか、お皿なのか、お皿にもうちょっと気を利かせるのかで見え方が全然違います。
主役のことをよ～く理解し、それに見合ったものを用意することで完成度や品格を上げ、主役の雰囲気も語ることがUIには可能です。
頭の中ではいつも「絵と額縁」に例えて考えています。主役より目立ちすぎても邪魔してもいけない絵と額縁のバランスが好きです。


# Page. 40

![Page Image](https://bcdn.docswell.com/page/DKJ4WGGV71.jpg)

いつも通りのデザイン
要望から形に起こす
地味に見えますが少しの気遣いでグッと完成度を
上げることができちゃいます


# Page. 41

![Page Image](https://bcdn.docswell.com/page/PLE1YDD47G.jpg)

いつも通りのデザイン
要望から形に起こす
まとめ
●UI は主役を引き立たせる額縁だ︕
●UI はキレイに作るだけではなく裏付けが必要
●作品と要望を読み取り、結びつけて、落とし込む


# Page. 42

![Page Image](https://bcdn.docswell.com/page/8GEWGYYZJ2.jpg)

いつも通りのデザイン
要望から形に起こす
こういった「いつもの UI」を経て
いよいよ 3D 空間内に配置することになります。
そこでの「想像と違った！」部分を
掘り下げていきます。


# Page. 43

![Page Image](https://bcdn.docswell.com/page/W47ZLXXLJ3.jpg)

おしながき
いつも通りの
デザイン
・要望から形に起こす
想像と違ってた！
・VR で見る 2DUI
デザイン
・VRUI はここが違った


# Page. 44

![Page Image](https://bcdn.docswell.com/page/KYJ6W44MJV.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
なぜほとんどの UI が
3D になったのか


# Page. 45

![Page Image](https://bcdn.docswell.com/page/5GJ5MQQQJ4.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
ざっとラフができたので 2D テクスチャでテストレベルに配置してみました
UE4


# Page. 46

![Page Image](https://bcdn.docswell.com/page/4LE3WVVZE5.jpg)

想像と違ってた！デザイン
VR で見る 2DUI


# Page. 47

![Page Image](https://bcdn.docswell.com/page/V8EDK8847G.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
上から見た図
背景
曲のアルバム
アート
難易度
SSSなどの情報
視線


# Page. 48

![Page Image](https://bcdn.docswell.com/page/4V7PK88VJ8.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
板ポリにカーブするマテリアルを設定してます。


# Page. 49

![Page Image](https://bcdn.docswell.com/page/L2JVVNNRJQ.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
それをレベルに配置してテクスチャ変えたり、カーブの強さなどを調整。
弊社のスーパー TA さんが作ってくださいました (/・ω・)/


# Page. 50

![Page Image](https://bcdn.docswell.com/page/Z5EGLKK6JL.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
想像と違う...
なんだか汚い荒いボケてる。
VR で見るともっと汚いです。


# Page. 51

![Page Image](https://bcdn.docswell.com/page/V4JQYNN27P.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
テクスチャ設定
いつも通りの設定なのに
UI は視認性が
大切なので Nomip


# Page. 52

![Page Image](https://bcdn.docswell.com/page/DK74WGGPE1.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
なぜ︖


# Page. 53

![Page Image](https://bcdn.docswell.com/page/PLJ1YDDXEG.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
VRUI の特徴
近寄ることが出来る
※プレイヤーが動けるタイプ


# Page. 54

![Page Image](https://bcdn.docswell.com/page/8GJWGYYK72.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
近寄れば画像も荒くなり、見ていてつらい
VR 以外
素材サイズのまま見れるし、
UI の位置が固定されている。
VR（プレイヤーが近寄れる場合）
画面 1920*1080
素材 256*256
360 度なので画面という概念も無く、近寄れる。
大きなサイズの素材が必要となってしまう。


# Page. 55

![Page Image](https://bcdn.docswell.com/page/W4EZLXXN73.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
テクスチャを３D 空間に配置すると
ポストプロセスなどによって色が変わってしまう
実装前 (AI)
実装後 (UE4)
RGB なのに、
まるで CMYK で見ているかのよう。
半透明がうまく出ずに
白っぽくなります。
※クラッシュハイライトの値などを調整すればある程度改善します


# Page. 56

![Page Image](https://bcdn.docswell.com/page/KY76W4497V.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
後ろにまわりこまれると
板感がバレバレで悲しいことに。。
しかも裏側は透明に。
。
予想できることだとは思いますが 2DUI ばかりだった私は愕然としました。
。


# Page. 57

![Page Image](https://bcdn.docswell.com/page/5G75MQQD74.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
これらの要因の中でも特に
●立体感の無さ ( 板感 ) ●発色の悪さ
この２つは折角の没入感を冷めさせてしまう要因となる
このままでは UI が
ゲーム全体の印象を
下げかねない ...
UI


# Page. 58

![Page Image](https://bcdn.docswell.com/page/V9J29PWMER.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
個人的に最も大切にしている
主役 ( ゲーム ) の良さを引き立て、
完成度を上げること
が叶わなくなってしまうのはよくない


# Page. 59

![Page Image](https://bcdn.docswell.com/page/5DEY45LPJM.jpg)

想像と違ってた！デザイン
VR で見る 2DUI
こういった経緯で
一部だけ３D のつもりだった UI も
開発期間もなく、経験も無いくせに
ガッツリ 3D にしたい︕
という結論に至ります
なので、ここの段階でUIを2Dでやるという方向は私の中で消えて3Dに移行していきます。


# Page. 60

![Page Image](https://bcdn.docswell.com/page/2VJNYN4M78.jpg)

おしながき
いつも通りの
デザイン
・要望から形に起こす
想像と違ってた！
・VR で見る 2DUI
デザイン
・VRUI はここが違った


# Page. 61

![Page Image](https://bcdn.docswell.com/page/GYE9PRQWJ3.jpg)

想像と違ってた！デザイン
VRUI はここが違った
VR は画面の概念が無く
360 度見渡せると知っていながら
リザルト画面を作ったのですが


# Page. 62

![Page Image](https://bcdn.docswell.com/page/5GE8DWGRED.jpg)

想像と違ってた！デザイン
VRUI はここが違った
まずはイラレで作成 ※当初のラフデザイン
当初の案です。まずはイラレでやっています。
無垢に360度を意識してパンっパンにいろんなパーツをしきつめたりカーブさせたりして奥行感じを出そうとしてます。


# Page. 63

![Page Image](https://bcdn.docswell.com/page/MLELMNG27R.jpg)

想像と違ってた！デザイン
テストレベルに配置
HMD被って見た瞬間はとても感動しましたが。
VRUI はここが違った


# Page. 64

![Page Image](https://bcdn.docswell.com/page/54JMYXQ9JW.jpg)

想像と違ってた！デザイン
VRUI はここが違った
テストレベルに配置
想像よりスッカラカン...


# Page. 65

![Page Image](https://bcdn.docswell.com/page/ZPJR9N8979.jpg)

想像と違ってた！デザイン
VRUI はここが違った
長方形の画面に慣れすぎていて
いくら頭で分かっていても
自然と長方形に寄せてしまう癖が強い


# Page. 66

![Page Image](https://bcdn.docswell.com/page/NPEXQN83JX.jpg)

想像と違ってた！デザイン
VRUI はここが違った
長方形の癖を打破すべく
変えていった点がいくつもあるので
ビフォーアフター形式でバンバンだしていきます︕


# Page. 67

![Page Image](https://bcdn.docswell.com/page/63EK9NKNED.jpg)

想像と違ってた！デザイン
VRUI はここが違った
最終的にはこうなりました
板系の3Dもありますがマテリアルで色を付けているのでとても綺麗ですし、もちろんボケません！


# Page. 68

![Page Image](https://bcdn.docswell.com/page/4L73WVZZ75.jpg)

想像と違ってた！デザイン
VRUI はここが違った
Before
After
●一番外側の形を長方形に収まらないものにする
●広いパーツを奥に倒したり傾けたり奥行をだす（文字は問題なく読める）
●意外と文字を大きくしてもダサくならない（いつもはイマイチになりやすい）


# Page. 69

![Page Image](https://bcdn.docswell.com/page/V87DK8R4JG.jpg)

想像と違ってた！デザイン
Musicselect
VRUI はここが違った
Before


# Page. 70

![Page Image](https://bcdn.docswell.com/page/4VJPK8WVE8.jpg)

想像と違ってた！デザイン
Musicselect
VRUI はここが違った
Before
上からみた図。正面を向いたアルバムアート（曲）がプレイヤーの視線の先に円を描いて並んでる感じです。


# Page. 71

![Page Image](https://bcdn.docswell.com/page/L2EVVN8REQ.jpg)

想像と違ってた！デザイン
Musicselect
VRUI はここが違った
After


# Page. 72

![Page Image](https://bcdn.docswell.com/page/Z57GLK56EL.jpg)

想像と違ってた！デザイン
Musicselect
VRUI はここが違った
After
アルバムアートについては半円くらいにしています。
これはプレイヤーが位置で楽曲を覚える場合に、グルっと囲ってしまうとループしてしまって位置を覚えられないという点と、
後ろを振り向いて曲を選ぶと、リアルでの立ち位置が動いて危険という点で半円に抑えて正面が分かるように半円にしてあります。


# Page. 73

![Page Image](https://bcdn.docswell.com/page/V4EQYNZ2JP.jpg)

想像と違ってた！デザイン
VRUI はここが違った
Before
After
●ドームで囲み、別空間へ飛ばすため余計な情報を遮断できる
●視線の先ではなくプレイヤーを囲むように UI を配置
●目立たせたいものを横並びに配置、上下に頭を振る場所に UI を置きすぎない
●
「目立たせたい UI」と「にぎやかし」とで動かし方を変える
●VR 内ではゴチャついてる UI も目が焦点を合わせる事で自然と必要な情報だけ読みとれる
・目立たせたいものを横並びに配置して上下に頭を振る場所にＵＩを置きすぎない
これはＨＭＤかぶりながら上下に頭を振ると気持ち悪くなったりします。特に上を向かせるのは首も疲れるので上にはなるべく通常使わない要素を置く程度にしています。
一番首を動かしやすい横並びに目立つ情報を置くことが大事です。


# Page. 74

![Page Image](https://bcdn.docswell.com/page/DKJ4WG3P71.jpg)

想像と違ってた！デザイン
Ingame
VRUI はここが違った
Before


# Page. 75

![Page Image](https://bcdn.docswell.com/page/PLE1YD1X7G.jpg)

想像と違ってた！デザイン
Ingame
VRUI はここが違った
After


# Page. 76

![Page Image](https://bcdn.docswell.com/page/8GEWGY8KJ2.jpg)

想像と違ってた！デザイン
VRUI はここが違った
Before
After
●ゲームの特性に合わせて視界の中央には何も表示させない
●評価 UI はプレイヤーの視界の邪魔にならず爽快な印象に ( 主に色で識別 )
●スコア UI には幾重か図形を重ねて拍と同期


# Page. 77

![Page Image](https://bcdn.docswell.com/page/W47ZLX8NJ3.jpg)

想像と違ってた！デザイン
VRUI はここが違った
ちなみに
３Dツールは【Blender】を使いました︕
Blenderは無料ツールなので、
MAYAとか支給してもらえない環境でも
ホイホイ触れるのでオススメです。
【イラレデータをSVG形式で保存】して
Blenderに読み込んで作ったので
理想の形にするのも簡単です。


# Page. 78

![Page Image](https://bcdn.docswell.com/page/KYJ6W4P9JV.jpg)

想像と違ってた！デザイン
VRUI はここが違った
このように想像していた
Before
から
デザインがどんどん変化していきました。
デザイン変更の要因は全て
HMDをかぶることで初めてわかる
想像と違ってた！視界の違和感によってです。
UI として機能させるにあたって
さきほどの変更点から４点ほど抜粋して解説します。


# Page. 79

![Page Image](https://bcdn.docswell.com/page/5GJ5MQKDJ4.jpg)

想像と違ってた！デザイン
VRUI はここが違った
●倒したり傾けて配置する
全ての UI が正面を向いていると圧迫感があり、
空間になじみません。プレイヤーを中心に大胆に
角度をつけるだけで一気にそれっぽくなります。


# Page. 80

![Page Image](https://bcdn.docswell.com/page/V9E29P6M7R.jpg)

想像と違ってた！デザイン
VRUI はここが違った
●ドームで囲む
VR ではプレイヤーが好きな方向を見たり移動できたりしてしまうので、
散漫にならないように別空間に飛ばしたりドームで囲うなどして注目させています


# Page. 81

![Page Image](https://bcdn.docswell.com/page/5D7Y459PEM.jpg)

想像と違ってた！デザイン
VRUI はここが違った
●目が焦点を合わせてくれる
通常の２DUI だと手前にウィンドウが出た場合、後ろとの間に半透明の黒を乗せたり、
ぼかしたり、手前のウィンドウに影を落としたりして引き立たせる必要がありますが、
VR ではそれを自然と目が焦点を合わせる事で他をボカしてくれるので見やすい。


# Page. 82

![Page Image](https://bcdn.docswell.com/page/2VENYNLMJ8.jpg)

想像と違ってた！デザイン
VRUI はここが違った
●どうしても見せたいものはカメラに固定
チュートリアル・字幕・注意表記についてはカメラに固定させ、必ず確認できるように
しています。


# Page. 83

![Page Image](https://bcdn.docswell.com/page/GY79PR4WE3.jpg)

想像と違ってた！デザイン
VRUI はここが違った
何より大変だったのは
HMD を被らないと分からないので
被っては微調整、被っては微微微調整を
毎日、化粧が消えるほど繰り返した事です。(VR エディタいいなぁ )
大したコツではないのですが、
デザインやレイアウトをするうえで PC 上ではなく
「目をつぶって手探りしながらイメージする」
は、かなり有効でした。


# Page. 84

![Page Image](https://bcdn.docswell.com/page/5G78DWQR7D.jpg)

想像と違ってた！デザイン
VR で見る 2DUI / URUIはここが違った
まとめ
●VRでは長方形画面UIを徹底的に忘れる
●視界の範囲を意識したデザインをする
●奥行・傾きを工夫してVR体験を邪魔しない


# Page. 85

![Page Image](https://bcdn.docswell.com/page/ML7LMNX2JR.jpg)

想像と違ってた！VRUI作りのコツ
さいごに
冒頭で話したようにＵＩはいろいろな要素を
組み立てて作っています。
また、ゲームとプレイヤーを結ぶ大切なところで、
タイトル画面からスタッフロールまで関われる
面白い仕事です。
みなさまの今後の制作の参考になれば幸いです


# Page. 86

![Page Image](https://bcdn.docswell.com/page/54EMYXL9EW.jpg)

ご清聴ありがとうございました


