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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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