Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
想像と違ってた︕ VRUI 作りのコツ
講演中に言葉で話した補足を簡単に追記しています。
岩田 里奈
UI デザイナー / 宴会マネージャー
経歴
妙な経歴ですが UE4 でなんとかやってます
ゲーム / 遊技機
5 年 2 年~
ゲーム (historia)版権グッズ / その他
5 年
宴会マネージャーは名刺にちゃんと記載されて...
historia でのお仕事
UI UI 宴会 イベント雑務
仲間に助けられながら UE4 使ってうまく回してます
historia でのお仕事
UI UI 宴会 イベント雑務
お店を決めて集団で会社のお金で飲んでいるだけ
最近、宴会活動が功を奏して社内にバーカウンターを設けました。
historia でのお仕事
UI UI 宴会 イベント雑務
UNREAL FEST 出展 / ぷちコン / 出張ヒストリアなどなど
イベントでのお仕事
こういったロゴやポスターも担当させて頂きました。光栄の極みです。
2D
このように2Dをメインとして色々な方と関わって仕事をすることが多かったのですが
今回VRリズムアクションゲーム【Airtone】に関わることで、ほぼ初めて3Dに触ることになりました。
90%
UI
その結果ほとんど3DUIになりました。3Dに挑戦したのはただの興味ではなく、VRに触れていく中で挑戦しないとならない使命感的なものを感じ、自
然とこの流れになりました。
このスライドでは2DUIからガラっと変わっていったAirto...
お し な が き
・要望から形に起こす
いつも通りの
デザイン
想像と違ってた!
デザイン
・VR で見る 2DUI
・VRUI はここが違った
お し な が き
・要望から形に起こす
いつも通りの
デザイン
想像と違ってた!
デザイン
・VR で見る 2DUI
・VRUI はここが違った
いつも通りのデザイン 要望から形に起こす
Ingame
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame MusicSelect
キャリブレーション インゲーム
ポーズ リザルト
ミュージックセレクトアウトゲーム
オプション...
いつも通りのデザイン 要望から形に起こす
Ingame
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame MusicSelect
キャリブレーション インゲーム
ポーズ リザルト
ミュージックセレクトアウトゲーム
オプション...
いつも通りのデザイン 要望から形に起こす
Ingame
キャリブレーション インゲーム
ポーズ リザルト
アウトゲーム
オプション アチーブメント
落ち着かせる︓静 ガッツリ音ゲー︓動
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Ou...
いつも通りのデザイン 要望から形に起こす
ゲーム全体のざっくりとした構成 (UI 画面抜粋 )
Outgame MusicSelect Ingame
アウトゲーム ミュージックセレクト キャリブレーション インゲーム
オプション アチーブメント...
いつも通りのデザイン 要望から形に起こす
企画から UI への要望
企画
まずは企画さんからの要望をヒアリングします。
いつも通りのデザイン 要望から形に起こす
企画から UI への要望
企画
ガッツリ
音ゲー
いつも通りのデザイン 要望から形に起こす
企画
企画から UI への要望
キーカラーは
黄色と水色
ガッツリ
音ゲー
いつも通りのデザイン 要望から形に起こす
企画
ネオンちゃんに
癒されるゲーム
企画から UI への要望
キーカラーは
黄色と水色
ガッツリ
音ゲー
いつも通りのデザイン 要望から形に起こす
企画
ネオンちゃんに
癒されるゲーム
女性も
プレイしやすく
企画から UI への要望
キーカラーは
黄色と水色
ガッツリ
音ゲー
いつも通りのデザイン 要望から形に起こす
企画
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
企画から UI への要望
キーカラーは
黄色と水色
ガッツリ
音ゲー
いつも通りのデザイン 要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
企画
UI
いつも通りのデザイン 要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
なんとなく分かったよ
企画
UI
いつも通りのデザイン 要望から形に起こす
初期段階で UI を「こうゆうものにしたい︕」という明確なビジョンのある
プロジェクトはあまりないかなと思います。
なんとなく分かったよ
調べる
要望と結びつける
企画
UI
得た要望について調べて要望...
いつも通りのデザイン 要望から形に起こす
調べる
なんか図形が多い・スピード感がある・派手目の色
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
キーカラーは
黄色と水色
ガッツリ
音ゲー
...
いつも通りのデザイン 要望から形に起こす
調べる
つかう
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
キーカラーは
黄色と水色
ガッツリ
音ゲー
音ゲーをはじめ、色んなゲームや広告デザイ...
いつも通りのデザイン 要望から形に起こす
調べる
sifi な黒ベースより白ベース・色を何色か使う・角を取った形
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
キーカラーは
黄色と水色
ガッ...
いつも通りのデザイン 要望から形に起こす
調べる
落ち着いた動き・奇抜過ぎない・角を取った形
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
キーカラーは
黄色と水色
ガッツリ
音ゲー
音ゲ...
いつも通りのデザイン 要望から形に起こす
調べる
ほっとこう
ネオンちゃんに
癒されるゲーム
VRの UI…
アイアンマン
カッコイイよね
女性も
プレイしやすく
キーカラーは
黄色と水色
ガッツリ
音ゲー
音ゲーをはじめ、色んなゲームや広告デ...
いつも通りのデザイン 要望から形に起こす
要望と結びつけると
落ち着かせたい場所ではシンプルに
Outgame
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない...
いつも通りのデザイン 要望から形に起こす
要望と結びつけると
MusicSelect
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない
・黄色と水色
音を聴かせ...
いつも通りのデザイン 要望から形に起こす
要望と結びつけると
Ingame
・図形
・スピード感がある
・派手目の色
・黒ベースより白ベース
・色を何色か使う
・角を取った形
・落ち着いた動き
・奇抜過ぎない
・黄色と水色
プレイ中はにぎやかで...
いつも通りのデザイン 要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
もっと分かり易いもの、紋章とかオリジナルのモチーフがあると最高
だいたい4つの項目にまとめま...
いつも通りのデザイン 要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
フチを目印に。特に「ボタン:押せるもの」を分かってもらうことが大切
色の役割
を決める
レイアウト
を決める
これら見せたいものにはフ...
いつも通りのデザイン 要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
色は増えがちなので使う領域の大小で見せたり色数を絞ったり
同系色にまとめたりしてバランスをと...
いつも通りのデザイン 要望から形に起こす
基本的な UI のポイント
モチーフ
を決める
形の役割
を決める
色の役割
を決める
レイアウト
を決める
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
画面 1920*1080
素材 256*256
近寄れば画像も荒くなり、見ていてつらい
VR 以外
素材サイズのまま見れるし、
UI の位置が固定されている。
VR(プレイヤーが近寄れる場合)
...
想像と違ってた!デザイン VR で見る 2DUI
実装前 (AI) 実装後 (UE4)
RGB なのに、
まるで CMYK で見ているかのよう。
半透明がうまく出ずに
白っぽくなります。
テクスチャを3D 空間に配置すると
ポストプロセスなどに...
想像と違ってた!デザイン VR で見る 2DUI
後ろにまわりこまれると
板感がバレバレで悲しいことに。。
しかも裏側は透明に。。
予想できることだとは思いますが 2DUI ばかりだった私は愕然としました。。
想像と違ってた!デザイン VR で見る 2DUI
これらの要因の中でも特に
●立体感の無さ ( 板感 ) ●発色の悪さ
この2つは折角の没入感を冷めさせてしまう要因となる
このままでは UI が
ゲーム全体の印象を
下げかねない ...
UI
想像と違ってた!デザイン VR で見る 2DUI
個人的に最も大切にしている
主役 (ゲーム )の良さを引き立て、
完成度を上げること
が叶わなくなってしまうのはよくない
想像と違ってた!デザイン VR で見る 2DUI
こういった経緯で
一部だけ3D のつもりだった UI も
開発期間もなく、経験も無いくせに
ガッツリ 3D にしたい︕
という結論に至ります
なので、ここの段階でUIを2Dでやるという方向は私の...
お し な が き
・要望から形に起こす
いつも通りの
デザイン
想像と違ってた!
デザイン
・VR で見る 2DUI
・VRUI はここが違った
想像と違ってた!デザイン VRUI はここが違った
VR は画面の概念が無く
360 度見渡せると知っていながら
リザルト画面を作ったのですが
想像と違ってた!デザイン VRUI はここが違った
まずはイラレで作成 ※当初のラフデザイン
当初の案です。まずはイラレでやっています。
無垢に360度を意識してパンっパンにいろんなパーツをしきつめたりカーブさせたりして奥行感じを出そうとしてま...
想像と違ってた!デザイン VRUI はここが違った
テストレベルに配置
HMD被って見た瞬間はとても感動しましたが。
想像と違ってた!デザイン VRUI はここが違った
テストレベルに配置
想像よりスッカラカン...
想像と違ってた!デザイン VRUI はここが違った
長方形の画面に慣れすぎていて
いくら頭で分かっていても
自然と長方形に寄せてしまう癖が強い
想像と違ってた!デザイン VRUI はここが違った
長方形の癖を打破すべく
変えていった点がいくつもあるので
ビフォーアフター形式でバンバンだしていきます︕
想像と違ってた!デザイン VRUI はここが違った
最終的にはこうなりました
板系の3Dもありますがマテリアルで色を付けているのでとても綺麗ですし、もちろんボケません!
想像と違ってた!デザイン VRUI はここが違った
●一番外側の形を長方形に収まらないものにする
●広いパーツを奥に倒したり傾けたり奥行をだす(文字は問題なく読める)
●意外と文字を大きくしてもダサくならない(いつもはイマイチになりやすい)
B...
想像と違ってた!デザイン VRUI はここが違った
BeforeMusicselect
想像と違ってた!デザイン VRUI はここが違った
BeforeMusicselect
上からみた図。正面を向いたアルバムアート(曲)がプレイヤーの視線の先に円を描いて並んでる感じです。
想像と違ってた!デザイン VRUI はここが違った
AfterMusicselect
想像と違ってた!デザイン VRUI はここが違った
AfterMusicselect
アルバムアートについては半円くらいにしています。
これはプレイヤーが位置で楽曲を覚える場合に、グルっと囲ってしまうとループしてしまって位置を覚えられないという...
想像と違ってた!デザイン VRUI はここが違った
●ドームで囲み、別空間へ飛ばすため余計な情報を遮断できる
●視線の先ではなくプレイヤーを囲むように UI を配置
●目立たせたいものを横並びに配置、上下に頭を振る場所に UI を置きすぎない
...
想像と違ってた!デザイン VRUI はここが違った
BeforeIngame
想像と違ってた!デザイン VRUI はここが違った
AfterIngame
想像と違ってた!デザイン VRUI はここが違った
●ゲームの特性に合わせて視界の中央には何も表示させない
●評価 UI はプレイヤーの視界の邪魔にならず爽快な印象に ( 主に色で識別 )
●スコア UI には幾重か図形を重ねて拍と同期
Bef...
想像と違ってた!デザイン VRUI はここが違った
ちなみに
3Dツールは【Blender】を使いました︕
【イラレデータをSVG形式で保存】して
Blenderに読み込んで作ったので
理想の形にするのも簡単です。
Blenderは無料ツールな...
想像と違ってた!デザイン VRUI はここが違った
このように想像していた からBefore
デザインがどんどん変化していきました。
デザイン変更の要因は全て
HMDをかぶることで初めてわかる
想像と違ってた!視界の違和感によってです。
UI ...
想像と違ってた!デザイン VRUI はここが違った
●倒したり傾けて配置する
全ての UI が正面を向いていると圧迫感があり、
空間になじみません。プレイヤーを中心に大胆に
角度をつけるだけで一気にそれっぽくなります。
想像と違ってた!デザイン VRUI はここが違った
●ドームで囲む
VR ではプレイヤーが好きな方向を見たり移動できたりしてしまうので、
散漫にならないように別空間に飛ばしたりドームで囲うなどして注目させています
想像と違ってた!デザイン VRUI はここが違った
●目が焦点を合わせてくれる
通常の2DUI だと手前にウィンドウが出た場合、後ろとの間に半透明の黒を乗せたり、
ぼかしたり、手前のウィンドウに影を落としたりして引き立たせる必要がありますが、
...
想像と違ってた!デザイン VRUI はここが違った
●どうしても見せたいものはカメラに固定
チュートリアル・字幕・注意表記についてはカメラに固定させ、必ず確認できるように
しています。
想像と違ってた!デザイン VRUI はここが違った
何より大変だったのは
HMD を被らないと分からないので
被っては微調整、被っては微微微調整を
毎日、化粧が消えるほど繰り返した事です。(VR エディタいいなぁ )
大したコツではないのですが...
想像と違ってた!デザイン VR で見る 2DUI / URUIはここが違った
まとめ
●VRでは長方形画面UIを徹底的に忘れる
●視界の範囲を意識したデザインをする
●奥行・傾きを工夫してVR体験を邪魔しない
想像と違ってた!VRUI作りのコツ
さいごに
冒頭で話したようにUIはいろいろな要素を
組み立てて作っています。
みなさまの今後の制作の参考になれば幸いです
また、ゲームとプレイヤーを結ぶ大切なところで、
タイトル画面からスタッフロールまで関わ...
ご 清 聴 あ り が と う ご ざ い ま し た
Upcoming SlideShare
Loading in …5
×

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

3,434 views

Published on

「出張ヒストリア! 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特有の課題を、デザイン面、ツール面でどのように解決していったかをお話しいたします。

Published in: Software

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

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

×