【出張ヒストリア2017】 想像と違ってた！ VRUI作りのコツ
•Download as PPTX, PDF•
17 likes•9,960 views
全スライドをDocswellで公開中！ https://www.docswell.com/s/historia_Inc/ZMLRG5-vrui-78798570 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 「出張ヒストリア！ UE4勉強会2017」（https://atnd.org/events/89177）で行ったVRゲーム『Airtone』のUI制作事例です。 講演者： 岩田 里奈（UIデザイナー） 以下、セッション概要より抜粋。 VRゲーム『Airtone』のUI制作を通じて、VRでのUIデザインは2DベースのUIデザインとは大幅に異なると感じました。 VRにおけるUIデザインは、奥行き、平面ではなく360度空間を利用したレイアウト、視線誘導など、VRにしかない概念を意識する必要があります。また、制作の過程でほとんどのUIが3DUIになり、デザインの確認作業もVR上で行う必要があるため、使うツールや作り方も異なりました。 本セッションではこのようなVR特有の課題を、デザイン面、ツール面でどのように解決していったかをお話しいたします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Recommended
More Related Content
What's hot
What's hot (20)
More from historia_Inc
More from historia_Inc (20)
【出張ヒストリア2017】 想像と違ってた！ VRUI作りのコツ
- 2. 岩田 里奈 UI デザイナー / 宴会マネージャー 経歴 妙な経歴ですが UE4 でなんとかやってます ゲーム / 遊技機 5 年 2 年～ ゲーム (historia)版権グッズ / その他 5 年 宴会マネージャーは名刺にちゃんと記載されてる肩書です！
- 3. historia でのお仕事 ＵＩ ＵＩ 宴会 イベント雑務 仲間に助けられながら UE4 使ってうまく回してます
- 4. historia でのお仕事 ＵＩ ＵＩ 宴会 イベント雑務 お店を決めて集団で会社のお金で飲んでいるだけ 最近、宴会活動が功を奏して社内にバーカウンターを設けました。
- 5. historia でのお仕事 ＵＩ ＵＩ 宴会 イベント雑務 UNREAL FEST 出展 / ぷちコン / 出張ヒストリアなどなど
- 10. お し な が き ・要望から形に起こす いつも通りの デザイン 想像と違ってた！ デザイン ・VR で見る 2DUI ・VRUI はここが違った
- 11. お し な が き ・要望から形に起こす いつも通りの デザイン 想像と違ってた！ デザイン ・VR で見る 2DUI ・VRUI はここが違った
- 12. いつも通りのデザイン 要望から形に起こす Ingame ゲーム全体のざっくりとした構成 (UI 画面抜粋 ) Outgame MusicSelect キャリブレーション インゲーム ポーズ リザルト ミュージックセレクトアウトゲーム オプション アチーブメント 「OutGame」美少女アンドロイド：ネオンちゃんと戯れる落ち着いた生活スペースです。「Musicselect」曲選択画面です。OutGame内のオブジェクト に触れることでMusicSelectに遷移します。楽曲も流れ、動きも多いにぎやかな場面。「Ingame」音ゲーをプレイする場面です、もちろん音も鳴ってに ぎやかです。UIとしては記載されているようなざっくり8つのUIがあり、今回はアウトゲーム・ミュージックセレクト・インゲーム・リザルトに触れて いきます。
- 13. いつも通りのデザイン 要望から形に起こす Ingame ゲーム全体のざっくりとした構成 (UI 画面抜粋 ) Outgame MusicSelect キャリブレーション インゲーム ポーズ リザルト ミュージックセレクトアウトゲーム オプション アチーブメント 落ち着かせる︓静 ガッツリ音ゲー︓動 「落ち着いた場面」と「音ゲーらしいにぎやかな場面」に分かれて「静と動」の印象を行き来する作りになっています。
- 14. いつも通りのデザイン 要望から形に起こす Ingame キャリブレーション インゲーム ポーズ リザルト アウトゲーム オプション アチーブメント 落ち着かせる︓静 ガッツリ音ゲー︓動 ゲーム全体のざっくりとした構成 (UI 画面抜粋 ) Outgame MusicSelect ミュージックセレクト 3DUI・見せ場︕ 当初はMusicSelectがUIの中で一番の見せどころとして3DUIになる予定でした。社内で誰もVR開発を行ったことが無いので想像ができず、開発期間も余 裕は無かったので他は切り捨てて Musicselectだけがんばろう！という事に決まっていましたが。
- 15. いつも通りのデザイン 要望から形に起こす ゲーム全体のざっくりとした構成 (UI 画面抜粋 ) Outgame MusicSelect Ingame アウトゲーム ミュージックセレクト キャリブレーション インゲーム オプション アチーブメント 3D︓UI の見せ場︕ ポーズ リザルト 落ち着かせる︓静 ガッツリ音ゲー︓動 90％が 3DUI に 後で説明します だいたい 先ほど伝えた通り、最終的にはほとんど3DUIになります。
- 16. いつも通りのデザイン 要望から形に起こす 企画から UI への要望 企画 まずは企画さんからの要望をヒアリングします。
- 17. いつも通りのデザイン 要望から形に起こす 企画から UI への要望 企画 ガッツリ 音ゲー
- 18. いつも通りのデザイン 要望から形に起こす 企画 企画から UI への要望 キーカラーは 黄色と水色 ガッツリ 音ゲー
- 19. いつも通りのデザイン 要望から形に起こす 企画 ネオンちゃんに 癒されるゲーム 企画から UI への要望 キーカラーは 黄色と水色 ガッツリ 音ゲー
- 20. いつも通りのデザイン 要望から形に起こす 企画 ネオンちゃんに 癒されるゲーム 女性も プレイしやすく 企画から UI への要望 キーカラーは 黄色と水色 ガッツリ 音ゲー
- 21. いつも通りのデザイン 要望から形に起こす 企画 ネオンちゃんに 癒されるゲーム VRの UI… アイアンマン カッコイイよね 女性も プレイしやすく 企画から UI への要望 キーカラーは 黄色と水色 ガッツリ 音ゲー
- 22. いつも通りのデザイン 要望から形に起こす 初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある プロジェクトはあまりないかなと思います。 企画 UI
- 23. いつも通りのデザイン 要望から形に起こす 初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある プロジェクトはあまりないかなと思います。 なんとなく分かったよ 企画 UI
- 24. いつも通りのデザイン 要望から形に起こす 初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある プロジェクトはあまりないかなと思います。 なんとなく分かったよ 調べる 要望と結びつける 企画 UI 得た要望について調べて要望と結びつけることが最初の仕事となります。 この、UIに対してではなく、ゲーム全体のヒアリングとその要望からUIをどのようにしようかと読み取る力はかなり大切です。
- 27. いつも通りのデザイン 要望から形に起こす 調べる sifi な黒ベースより白ベース・色を何色か使う・角を取った形 ネオンちゃんに 癒されるゲーム VRの UI… アイアンマン カッコイイよね 女性も プレイしやすく キーカラーは 黄色と水色 ガッツリ 音ゲー 音ゲーをはじめ、色んなゲームや広告デザイン、WEBデザインも見ます。
- 33. いつも通りのデザイン 要望から形に起こす 基本的な UI のポイント モチーフ を決める 形の役割 を決める 色の役割 を決める レイアウト を決める もっと分かり易いもの、紋章とかオリジナルのモチーフがあると最高 だいたい４つの項目にまとめました。順序は行ったり来たりです。まず「モチーフを決める」今回はAirtoneならでわのモチーフは最初の段階で無かっ たので開発期間との兼ね合いもあり、割り切って「図形」に。これら六角形、ひし形、マル、六角形を伸ばした形、などを組み合わせて作っています。 さきほどの要望を意識してフォントもある程度の太さがあり角の取れたものを選んでいます。太さについてはVRだと解像度の問題で細い文字が見えに くいのでそうしたという理由もあります。
- 34. いつも通りのデザイン 要望から形に起こす 基本的な UI のポイント モチーフ を決める 形の役割 を決める フチを目印に。特に「ボタン：押せるもの」を分かってもらうことが大切 色の役割 を決める レイアウト を決める これら見せたいものにはフチをつけました。小さな差に聞こえるかもしれないですがフチは他と切り離して浮き立たせる効果があります。 フチは目立つので使いやすいのですが、多用するとゴチャつくので、意外と使うのには注意が必要です。
- 35. いつも通りのデザイン 要望から形に起こす 基本的な UI のポイント モチーフ を決める 形の役割 を決める 色の役割 を決める レイアウト を決める 色は増えがちなので使う領域の大小で見せたり色数を絞ったり 同系色にまとめたりしてバランスをとります デフォルト︓水色 選択 / アクティブ︓黄色 その他 EXIT 今回は音ゲーなのでどうしても色数が多くなりました。基本の色として水色、選択されたりアクティブなものは黄色を効かせました。 難易度にも３色、さきほどの文字などのフチの色にもこの色の役割をリンクさせています。
- 36. いつも通りのデザイン 要望から形に起こす 基本的な UI のポイント モチーフ を決める 形の役割 を決める 色の役割 を決める レイアウト を決める VRUI にするにあたってかなり変更したので後で説明します いつもの UI ●ヘッダーフッター ●サイズの統一 ●ヘッダーフッター関係なし ●奥行を駆使 ( 奥行があるのでサイズの統一は手間がかかる ) VRUI
- 37. いつも通りのデザイン 要望から形に起こす 基本的な UI のポイント モチーフ を決める 形の役割 を決める 色の役割 を決める レイアウト を決める 組み合わせて意味を持たせながら 仕上げていく 意味を持たせておくと UI の変更があった場合も 新たな組み合わせがしやすい
- 38. いつも通りのデザイン 要望から形に起こす 個人的に最も大切にしている UI のポイント 主役 (ゲーム )の良さを引き立て、 完成度を上げること
- 39. いつも通りのデザイン 要望から形に起こす 絵 + 額縁で表現したかった。。 コンビニパックなのか、お皿なのか、お皿にもうちょっと気を利かせるのかで見え方が全然違います。 主役のことをよ～く理解し、それに見合ったものを用意することで完成度や品格を上げ、主役の雰囲気も語ることがUIには可能です。 頭の中ではいつも「絵と額縁」に例えて考えています。主役より目立ちすぎても邪魔してもいけない絵と額縁のバランスが好きです。
- 42. いつも通りのデザイン 要望から形に起こす こういった「いつもの UI」を経て いよいよ 3D 空間内に配置することになります。 そこでの「想像と違った！」部分を 掘り下げていきます。
- 43. お し な が き ・要望から形に起こす いつも通りの デザイン 想像と違ってた！ デザイン ・VR で見る 2DUI ・VRUI はここが違った
- 44. 想像と違ってた！デザイン VR で見る 2DUI なぜほとんどの UI が 3D になったのか
- 45. 想像と違ってた！デザイン VR で見る 2DUI ざっとラフができたので 2D テクスチャでテストレベルに配置してみました UE4
- 46. 想像と違ってた！デザイン VR で見る 2DUI
- 47. 想像と違ってた！デザイン VR で見る 2DUI 上から見た図 視線 背景 曲のアルバム アート SSSなどの情報 難易度
- 48. 想像と違ってた！デザイン VR で見る 2DUI 板ポリにカーブするマテリアルを設定してます。
- 49. 想像と違ってた！デザイン VR で見る 2DUI それをレベルに配置してテクスチャ変えたり、カーブの強さなどを調整。 弊社のスーパー TA さんが作ってくださいました (/・ω・)/
- 50. 想像と違ってた！デザイン VR で見る 2DUI 想像と違う... なんだか汚い荒いボケてる。 VR で見るともっと汚いです。
- 51. 想像と違ってた！デザイン VR で見る 2DUI UI は視認性が 大切なので Nomip テクスチャ設定 いつも通りの設定なのに
- 52. 想像と違ってた！デザイン VR で見る 2DUI な ぜ ︖
- 53. 想像と違ってた！デザイン VR で見る 2DUI VRUI の特徴 ※プレイヤーが動けるタイプ 近寄ることが出来る
- 54. 想像と違ってた！デザイン VR で見る 2DUI 画面 1920*1080 素材 256*256 近寄れば画像も荒くなり、見ていてつらい VR 以外 素材サイズのまま見れるし、 UI の位置が固定されている。 VR（プレイヤーが近寄れる場合） 360 度なので画面という概念も無く、近寄れる。 大きなサイズの素材が必要となってしまう。
- 55. 想像と違ってた！デザイン VR で見る 2DUI 実装前 (AI) 実装後 (UE4) RGB なのに、 まるで CMYK で見ているかのよう。 半透明がうまく出ずに 白っぽくなります。 テクスチャを３D 空間に配置すると ポストプロセスなどによって色が変わってしまう ※クラッシュハイライトの値などを調整すればある程度改善します
- 56. 想像と違ってた！デザイン VR で見る 2DUI 後ろにまわりこまれると 板感がバレバレで悲しいことに。。 しかも裏側は透明に。。 予想できることだとは思いますが 2DUI ばかりだった私は愕然としました。。
- 57. 想像と違ってた！デザイン VR で見る 2DUI これらの要因の中でも特に ●立体感の無さ ( 板感 ) ●発色の悪さ この２つは折角の没入感を冷めさせてしまう要因となる このままでは UI が ゲーム全体の印象を 下げかねない ... UI
- 58. 想像と違ってた！デザイン VR で見る 2DUI 個人的に最も大切にしている 主役 (ゲーム )の良さを引き立て、 完成度を上げること が叶わなくなってしまうのはよくない
- 59. 想像と違ってた！デザイン VR で見る 2DUI こういった経緯で 一部だけ３D のつもりだった UI も 開発期間もなく、経験も無いくせに ガッツリ 3D にしたい︕ という結論に至ります なので、ここの段階でUIを2Dでやるという方向は私の中で消えて3Dに移行していきます。
- 60. お し な が き ・要望から形に起こす いつも通りの デザイン 想像と違ってた！ デザイン ・VR で見る 2DUI ・VRUI はここが違った
- 61. 想像と違ってた！デザイン VRUI はここが違った VR は画面の概念が無く 360 度見渡せると知っていながら リザルト画面を作ったのですが
- 62. 想像と違ってた！デザイン VRUI はここが違った まずはイラレで作成 ※当初のラフデザイン 当初の案です。まずはイラレでやっています。 無垢に360度を意識してパンっパンにいろんなパーツをしきつめたりカーブさせたりして奥行感じを出そうとしてます。
- 73. 想像と違ってた！デザイン VRUI はここが違った ●ドームで囲み、別空間へ飛ばすため余計な情報を遮断できる ●視線の先ではなくプレイヤーを囲むように UI を配置 ●目立たせたいものを横並びに配置、上下に頭を振る場所に UI を置きすぎない ●「目立たせたい UI」と「にぎやかし」とで動かし方を変える ●VR 内ではゴチャついてる UI も目が焦点を合わせる事で自然と必要な情報だけ読みとれる Before After ・目立たせたいものを横並びに配置して上下に頭を振る場所にＵＩを置きすぎない これはＨＭＤかぶりながら上下に頭を振ると気持ち悪くなったりします。特に上を向かせるのは首も疲れるので上にはなるべく通常使わない要素を置 く程度にしています。一番首を動かしやすい横並びに目立つ情報を置くことが大事です。
- 76. 想像と違ってた！デザイン VRUI はここが違った ●ゲームの特性に合わせて視界の中央には何も表示させない ●評価 UI はプレイヤーの視界の邪魔にならず爽快な印象に ( 主に色で識別 ) ●スコア UI には幾重か図形を重ねて拍と同期 Before After
- 78. 想像と違ってた！デザイン VRUI はここが違った このように想像していた からBefore デザインがどんどん変化していきました。 デザイン変更の要因は全て HMDをかぶることで初めてわかる 想像と違ってた！視界の違和感によってです。 UI として機能させるにあたって さきほどの変更点から４点ほど抜粋して解説します。
- 79. 想像と違ってた！デザイン VRUI はここが違った ●倒したり傾けて配置する 全ての UI が正面を向いていると圧迫感があり、 空間になじみません。プレイヤーを中心に大胆に 角度をつけるだけで一気にそれっぽくなります。
- 80. 想像と違ってた！デザイン VRUI はここが違った ●ドームで囲む VR ではプレイヤーが好きな方向を見たり移動できたりしてしまうので、 散漫にならないように別空間に飛ばしたりドームで囲うなどして注目させています
- 81. 想像と違ってた！デザイン VRUI はここが違った ●目が焦点を合わせてくれる 通常の２DUI だと手前にウィンドウが出た場合、後ろとの間に半透明の黒を乗せたり、 ぼかしたり、手前のウィンドウに影を落としたりして引き立たせる必要がありますが、 VR ではそれを自然と目が焦点を合わせる事で他をボカしてくれるので見やすい。
- 83. 想像と違ってた！デザイン VRUI はここが違った 何より大変だったのは HMD を被らないと分からないので 被っては微調整、被っては微微微調整を 毎日、化粧が消えるほど繰り返した事です。(VR エディタいいなぁ ) 大したコツではないのですが、 デザインやレイアウトをするうえで PC 上ではなく 「目をつぶって手探りしながらイメージする」 は、かなり有効でした。
- 84. 想像と違ってた！デザイン VR で見る 2DUI / URUIはここが違った まとめ ●VRでは長方形画面UIを徹底的に忘れる ●視界の範囲を意識したデザインをする ●奥行・傾きを工夫してVR体験を邪魔しない
- 86. ご 清 聴 あ り が と う ご ざ い ま し た