【出張ヒストリア2017】想像と違ってた！ VRUI作りのコツ

想像と違ってた︕ VRUI作りのコツ

講演中に言葉で話した補足を簡単に追記しています。

岩田里奈

UIデザイナー /宴会マネージャー

経歴

妙な経歴ですがUE4でなんとかやってます

ゲーム /遊技機

5年 2年～

ゲーム (historia)版権グッズ /その他

5年

宴会マネージャーは名刺にちゃんと記載されてる肩書です！

historiaでのお仕事

ＵＩＵＩ宴会イベント雑務

仲間に助けられながらUE4使ってうまく回してます



お店を決めて集団で会社のお金で飲んでいるだけ

最近、宴会活動が功を奏して社内にバーカウンターを設けました。



UNREAL FEST出展 /ぷちコン /出張ヒストリアなどなど

イベントでのお仕事

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

2D

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

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

90%

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

おしながき

・要望から形に起こすいつも通りの

デザイン

想像と違ってた！

デザイン・VRで見る 2DUI

・VRUIはここが違った

おしながき


デザイン




いつも通りのデザイン要望から形に起こす

Ingame

ゲーム全体のざっくりとした構成 (UI画面抜粋 )

Outgame MusicSelect

キャリブレーションインゲーム

ポーズリザルト

ミュージックセレクトアウトゲーム

オプションアチーブメント

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


Ingame


Outgame MusicSelect



ミュージックセレクトアウトゲーム


落ち着かせる︓静ガッツリ音ゲー︓動

「落ち着いた場面」と「音ゲーらしいにぎやかな場面」に分かれて「静と動」の印象を行き来する作りになっています。


Ingame



アウトゲーム




Outgame MusicSelect

ミュージックセレクト

3DUI・見せ場︕

当初はMusicSelectがUIの中で一番の見せどころとして3DUIになる予定でした。社内で誰もVR開発を行ったことが無いので想像ができず、開発期間も余裕は無かったので他は切り捨ててMusicselectだけがんばろう！という事に決まっていましたが。



Outgame MusicSelect Ingame

アウトゲームミュージックセレクトキャリブレーションインゲーム

オプションアチーブメント 3D︓UIの見せ場︕ ポーズリザルト


90％が 3DUIに後で説明します

だいたい

先ほど伝えた通り、最終的にはほとんど3DUIになります。


企画からUIへの要望

企画

まずは企画さんからの要望をヒアリングします。



企画

ガッツリ

音ゲー


企画


キーカラーは

黄色と水色ガッツリ

音ゲー


企画

ネオンちゃんに

癒されるゲーム


キーカラーは


音ゲー


企画



女性も

プレイしやすく


キーカラーは


音ゲー


企画



VRのUI…

アイアンマンカッコイイよね

女性も



キーカラーは


音ゲー


初期段階でUIを「こうゆうものにしたい︕」という明確なビジョンのある

プロジェクトはあまりないかなと思います。

企画

UI




なんとなく分かったよ

企画

UI




なんとなく分かったよ

調べる

要望と結びつける

企画

UI

得た要望について調べて要望と結びつけることが最初の仕事となります。この、UIに対してではなく、ゲーム全体のヒアリングとその要望からUIをどのようにしようかと読み取る力はかなり大切です。


調べる

なんか図形が多い・スピード感がある・派手目の色



VRのUI…


女性も


キーカラーは


音ゲー

音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。


調べる

つかう



VRのUI…


女性も


キーカラーは


音ゲー



調べる

sifiな黒ベースより白ベース・色を何色か使う・角を取った形



VRのUI…


女性も


キーカラーは


音ゲー



調べる

落ち着いた動き・奇抜過ぎない・角を取った形



VRのUI…


女性も


キーカラーは


音ゲー



調べる

ほっとこう



VRのUI…


女性も


キーカラーは


音ゲー



要望と結びつけると

落ち着かせたい場所ではシンプルに

Outgame

・図形

・スピード感がある

・派手目の色

・黒ベースより白ベース

・色を何色か使う

・角を取った形

・落ち着いた動き

・奇抜過ぎない

・黄色と水色


要望と結びつけるとMusicSelect

・図形


・派手目の色






・黄色と水色

音を聴かせる場所ではにぎやかに


要望と結びつけるとIngame

・図形


・派手目の色






・黄色と水色

プレイ中はにぎやかでも邪魔をしないように


基本的なUIのポイント

モチーフを決める

形の役割を決める

色の役割を決める

レイアウトを決める

もっと分かり易いもの、紋章とかオリジナルのモチーフがあると最高

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





フチを目印に。特に「ボタン：押せるもの」を分かってもらうことが大切



これら見せたいものにはフチをつけました。小さな差に聞こえるかもしれないですがフチは他と切り離して浮き立たせる効果があります。フチは目立つので使いやすいのですが、多用するとゴチャつくので、意外と使うのには注意が必要です。







色は増えがちなので使う領域の大小で見せたり色数を絞ったり同系色にまとめたりしてバランスをとります

デフォルト︓水色

選択 /アクティブ︓黄色

その他

EXIT

今回は音ゲーなのでどうしても色数が多くなりました。基本の色として水色、選択されたりアクティブなものは黄色を効かせました。難易度にも３色、さきほどの文字などのフチの色にもこの色の役割をリンクさせています。







VRUIにするにあたってかなり変更したので後で説明します

いつものUI

●ヘッダーフッター●サイズの統一

●ヘッダーフッター関係なし ●奥行を駆使(奥行があるのでサイズの統一は手間がかかる )

VRUI







組み合わせて意味を持たせながら仕上げていく

意味を持たせておくと UIの変更があった場合も

新たな組み合わせがしやすい


個人的に最も大切にしている UIのポイント

主役 (ゲーム )の良さを引き立て、

完成度を上げること


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


地味に見えますが少しの気遣いでグッと完成度を上げることができちゃいます

まとめ

●UIは主役を引き立たせる額縁だ︕

●UIはキレイに作るだけではなく裏付けが必要

●作品と要望を読み取り、結びつけて、落とし込む



こういった「いつものUI」を経て

いよいよ 3D空間内に配置することになります。

そこでの「想像と違った！」部分を

掘り下げていきます。

おしながき


デザイン




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

なぜほとんどのUIが

3Dになったのか


ざっとラフができたので 2Dテクスチャでテストレベルに配置してみました

UE4



上から見た図

視線

背景

曲のアルバムアート

SSSなどの情報

難易度


板ポリにカーブするマテリアルを設定してます。


それをレベルに配置してテクスチャ変えたり、カーブの強さなどを調整。

弊社のスーパー TAさんが作ってくださいました (/・ω・)/


想像と違う... なんだか汚い荒いボケてる。

VRで見るともっと汚いです。


UIは視認性が

大切なのでNomip

テクスチャ設定

いつも通りの設定なのに


なぜ︖


VRUIの特徴

※プレイヤーが動けるタイプ

近寄ることが出来る


画面 1920*1080

素材 256*256

近寄れば画像も荒くなり、見ていてつらい

VR以外

素材サイズのまま見れるし、

UIの位置が固定されている。

VR（プレイヤーが近寄れる場合）

360度なので画面という概念も無く、近寄れる。

大きなサイズの素材が必要となってしまう。


実装前 (AI) 実装後 (UE4)

RGBなのに、

まるで CMYKで見ているかのよう。

半透明がうまく出ずに

白っぽくなります。

テクスチャを３D空間に配置すると

ポストプロセスなどによって色が変わってしまう

※クラッシュハイライトの値などを調整すればある程度改善します


後ろにまわりこまれると

板感がバレバレで悲しいことに。。

しかも裏側は透明に。。

予想できることだとは思いますが 2DUIばかりだった私は愕然としました。。


これらの要因の中でも特に

●立体感の無さ (板感 ) ●発色の悪さ

この２つは折角の没入感を冷めさせてしまう要因となる

このままではUIが

ゲーム全体の印象を

下げかねない ...UI


個人的に最も大切にしている

主役 (ゲーム )の良さを引き立て、

完成度を上げること

が叶わなくなってしまうのはよくない


こういった経緯で一部だけ３Dのつもりだった UIも開発期間もなく、経験も無いくせに

ガッツリ 3Dにしたい︕

という結論に至ります

なので、ここの段階でUIを2Dでやるという方向は私の中で消えて3Dに移行していきます。

おしながき


デザイン




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

VRは画面の概念が無く

360度見渡せると知っていながら

リザルト画面を作ったのですが


まずはイラレで作成 ※当初のラフデザイン

当初の案です。まずはイラレでやっています。無垢に360度を意識してパンっパンにいろんなパーツをしきつめたりカーブさせたりして奥行感じを出そうとしてます。


テストレベルに配置

HMD被って見た瞬間はとても感動しましたが。


テストレベルに配置

想像よりスッカラカン...


長方形の画面に慣れすぎていて

いくら頭で分かっていても

自然と長方形に寄せてしまう癖が強い


長方形の癖を打破すべく

変えていった点がいくつもあるので

ビフォーアフター形式でバンバンだしていきます︕


最終的にはこうなりました

板系の3Dもありますがマテリアルで色を付けているのでとても綺麗ですし、もちろんボケません！


●一番外側の形を長方形に収まらないものにする

●広いパーツを奥に倒したり傾けたり奥行をだす（文字は問題なく読める）

●意外と文字を大きくしてもダサくならない（いつもはイマイチになりやすい）

Before After


BeforeMusicselect


BeforeMusicselect

上からみた図。正面を向いたアルバムアート（曲）がプレイヤーの視線の先に円を描いて並んでる感じです。


AfterMusicselect


AfterMusicselect

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


●ドームで囲み、別空間へ飛ばすため余計な情報を遮断できる

●視線の先ではなくプレイヤーを囲むようにUIを配置

●目立たせたいものを横並びに配置、上下に頭を振る場所にUIを置きすぎない

●「目立たせたいUI」と「にぎやかし」とで動かし方を変える

●VR内ではゴチャついてるUIも目が焦点を合わせる事で自然と必要な情報だけ読みとれる

Before After

・目立たせたいものを横並びに配置して上下に頭を振る場所にＵＩを置きすぎないこれはＨＭＤかぶりながら上下に頭を振ると気持ち悪くなったりします。特に上を向かせるのは首も疲れるので上にはなるべく通常使わない要素を置

く程度にしています。一番首を動かしやすい横並びに目立つ情報を置くことが大事です。


BeforeIngame


AfterIngame


●ゲームの特性に合わせて視界の中央には何も表示させない

●評価 UIはプレイヤーの視界の邪魔にならず爽快な印象に (主に色で識別 )

●スコアUIには幾重か図形を重ねて拍と同期

Before After


ちなみに

３Dツールは【Blender】を使いました︕

【イラレデータをSVG形式で保存】して

Blenderに読み込んで作ったので理想の形にするのも簡単です。

Blenderは無料ツールなので、

MAYAとか支給してもらえない環境でも

ホイホイ触れるのでオススメです。


このように想像していたからBefore

デザインがどんどん変化していきました。

デザイン変更の要因は全て

HMDをかぶることで初めてわかる

想像と違ってた！視界の違和感によってです。

UIとして機能させるにあたって

さきほどの変更点から４点ほど抜粋して解説します。


●倒したり傾けて配置する

全てのUIが正面を向いていると圧迫感があり、

空間になじみません。プレイヤーを中心に大胆に

角度をつけるだけで一気にそれっぽくなります。


●ドームで囲む

VRではプレイヤーが好きな方向を見たり移動できたりしてしまうので、

散漫にならないように別空間に飛ばしたりドームで囲うなどして注目させています


●目が焦点を合わせてくれる

通常の２DUIだと手前にウィンドウが出た場合、後ろとの間に半透明の黒を乗せたり、

ぼかしたり、手前のウィンドウに影を落としたりして引き立たせる必要がありますが、

VRではそれを自然と目が焦点を合わせる事で他をボカしてくれるので見やすい。


●どうしても見せたいものはカメラに固定

チュートリアル・字幕・注意表記についてはカメラに固定させ、必ず確認できるように

しています。


何より大変だったのは

HMDを被らないと分からないので

被っては微調整、被っては微微微調整を

毎日、化粧が消えるほど繰り返した事です。(VRエディタいいなぁ )

大したコツではないのですが、

デザインやレイアウトをするうえで PC上ではなく

「目をつぶって手探りしながらイメージする」

は、かなり有効でした。

想像と違ってた！デザイン VRで見る 2DUI / URUIはここが違った

まとめ

●VRでは長方形画面UIを徹底的に忘れる

●視界の範囲を意識したデザインをする

●奥行・傾きを工夫してVR体験を邪魔しない

想像と違ってた！VRUI作りのコツ

さいごに

冒頭で話したようにＵＩはいろいろな要素を

組み立てて作っています。

みなさまの今後の制作の参考になれば幸いです

また、ゲームとプレイヤーを結ぶ大切なところで、

タイトル画面からスタッフロールまで関われる

面白い仕事です。

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

【出張ヒストリア2017】 想像と違ってた！ VRUI作りのコツ

Software

【出張ヒストリア2017】想像と違ってた！ VRUI作りのコツ