バーチャルマーケットから見出すVR空間デザイン・VR UI/UXデザインの気づき：その①
皆様ごきげんよう。noteで初めて書く記事がこれなので真面目過ぎる気がしなくもないですが、なんとなくそれとなくバーチャルマーケット２から見えてくるデザイン面でのお話がしたいと思って書きました。
紹介が遅れました。初めましての人は初めまして。いつも応援していただいてる皆様はお久しぶりです。バーチャルクリエイターのモスコミュールです。私はバーチャルマーケット2においてVR空間デザイン及びプロップデザイン、UI/UXデザインを行いました。バーチャルマーケット２の詳細はこちら。
規模感としては、まだ公式が発表してないので詳しく言えませんが東京ドーム数個分の来場者数を誇り、参加団体は400を超え、クラウドファンディングでは延べ数ではなく実数で900人以上の支援を受け560万円ほどまで伸びました。やべーな。やばいんだわ。なんせ運営は企業のサポートがあるとはいえ、個人ですべてを回し尚且つ顔も合わせたことない人たちがリモートで半年で11個のVR空間マーケットプレイスを制作するという無謀な挑戦だったわけです。それでも成功してしまいました。まあもちろんまだまだ改善点はいっぱいあるし完璧では全くないので、これからの課題をちゃんと一つ一つクリアしていく必要があります。ですが、実現はしているわけです。やばいんです。
と、ここまでは以前私のブログでも話したことなのでこれ以上イベント概要については深堀りしません。
一般層の考えるVR空間
VRは言わば第２の空間というか、自分の存在を現実に置きつつ精神のみを別の時空で再構築する行為になるんですが、界隈を主導して拡張していく立場の企業たちは、基本的にVR空間をビジネスをする空間としてとらえるので、実は意外とVR会議システムサービスは多いんですね。私が受ける案件も「VR空間で会議してる様子の映像作って下さい」みたいなの多いんです。それが悪いとかではないんですが私個人の感想で言えば、会議をVR上でやりたくてたまらないんだなこの人たちって感じです。別にVR空間は会議室の機能だけではないんですけどね…今ちょうどBtoBのVRビジネスでは会議室ブームなんだと思います。ある意味「リモートで1か所に集合できコミュニケーションができる」というVRの特徴のみを見て作る脳死プレイの可能性もなくはないかもしれませんが。でもそれだと機能の大半はDiscordとかで完結しちゃうので、もっと圧倒的差異を見せつけてくれるのを期待してます。現実にあるめんどくさい手続きを省けるのは結構大きいので。
ちょうど先日とある最強アニメーターの人と話してた時にもVケットの話をしたんですが、やはり大人（30代以上の世代）の人たちはVR空間は会議をするためのものみたいな認識がありました。Vケットみたいな個人がアバターやプロップを制作し、VR空間上で世界観の上に成り立つ市場みたいなコンテンツ、文化というのにとっても驚かれていて私も驚きました。
まあVR大好きコアオタクの我々からしても、あ、そんなことできるんだってぐらいなので至極全うな反応かもしれませんが。
あとは映像媒体としての３６０度動画をVRといって出す場合ですね。これはもはやVRという定義に当てはまるか怪しいんですが、なんやかんや３６０度動画は多くなってきた気がします。機材の発展も含めて。例えばエンドユーザー用にはInsta 360とか中国スマートフォンでも360度撮影できるものがあります。360度映像が少し話題になった最初期に私が知ってるところがやっていたのは、3Dプリンタで設置台を作り、超広角レンズを搭載した一眼カメラ2〜4台で同時撮影みたいなこともやってました。3Dで言えば、私がやった案件のレベルだと1〜3分のPVで60〜120fps、6600＊6600px連番画像出力とかになるので、パソコン1台でレンダリングとかになると6〜38時間（クオリティによってだいぶ違う）みたいな感じです。でもやはりただの360度映像をVRと認識する一般の人たちがすごく多いのも事実で、それだけじゃないんだぞというのをどうやって伝えていこうかというのは今後の課題でもあるかなと思います。
しかし開発や研究で使われるVRでは医療、建築も活発になってきてる気がします。実際VR分野の投資額で言えばこの二つはかなりのウェイトを占めます。大学の研究でもVRを利用し医療のシミュレーションや建築の構造の実験等に使っている方を知ってます。おそらくこれからは教育や学問でもVRを利用したものは増えてくるだろうなという気はします。
一般ユーザーによるVR空間とUIの構築
さて、この流れからのVケットなんですが、VRChat誕生によりVR空間の利用を自由にできる一般ユーザーの空間市民権を得てから約2〜3年。やっと大きな「遊び」の部分が広がりを見せてますね。Vケットのみならずいろんなところでユーザープレゼンスのライブ、展示会、集会等、ユーザーに自ら空間を1から作らせてその中でコミュニティを構成させるタイプは珍しく、セカンドライフに近しいものを感じます。しかし、似ているのは仕組みの話だけで、経済を主軸に考えてたセカンドライフとは違い、VRChatはクリエイティビティを大事にしているという点がVRChatのいいところです。
でもやはりまだまだ発展途上のツール。全くと言っていいほどUIが整ってない。ユーザーが自ら伝える他ないのがなかなか人を選ぶなーと思うことはよくあります。メニューの出し方さえヘルプを常に確認出来る状況ではないのもすごい。他にも例えばキューブだけ置いてあって、インタラクト出来るとします。しかし「これは〇〇のボタンです」と書いてない限り何のボタンかは分からないし、もはやキューブがボタンであること自体普通の人間は気付きません。VRChat初心者でも他の人の自作ワールドに行った時に最初に驚く部分かもしれません。
人間の生活や慣習に沿って存在するUIは我々は生まれた時から存在し、利用するので全く違和感を覚えません（ドアノブはひねることかできる、電気のスイッチは押すことができる等）。
でもVRChatだとそもそもボタンを分かりやすい形で表現することが思いのほか少なく、今回のVケットで言えばブースでインタラクト出来るが、それは持つことが出来るのか、試着できるのか、初心者からしたらもしかしたら全く別の機能を想像するかもしれません。そのように何をさせるのかが分かりづらいものもあります。
「それは一体何ができるか」を伝えるのは人に何かをさせるためには最も重要な要素であり、その方法は必ずしも文章や言葉のみではありません。「アフォーダンス」や「シグニファイア」という単語で検索すると多分色んな難しい記事が出てくると思うのですが、私はVR空間を構成するときにシグニファイアを最も大切にしたいと考えています。簡単に言えば「その行動を起こさせるための誘導」です。その表現はそのものの形でも色でも言葉でもアイコンでも何でも良いです。
慣れない空間、いわば初めて来たパラレルワールド、あるいは初めて訪れる空間での行動において、現実でも見慣れてるもの、やり慣れてる行動に近しいものでないとそれは一体どうなるのか分からず困惑します。尚且つその行動は何を引き起こすのかも簡単に予想できるようにしていなくてはなりません。
VケットのワールドとUI/UXについて
実はそういう点では今回のVMエントランスはあまり良くないです。フロアが分かれているにも関わらず、上と下の移動は「Go to 2F（あるいは1F）touch」の文字と三角おにぎりのボタンのみ。これはVRCに慣れている人なら良いのですが、初心者からしたらそれがエレベーターとは気付きづらいですし、touchと書いてあるとはいえど空中に浮かぶものがボタンなのかただのテロップなのか分かりづらいです（しかも見づらい）。
ありがたいことにVRCはインタラクト出来ることを知らせるのに青いオーラがオブジェクトから発せられ、コントローラが振動するマイクロUIが実装されてるので、そこで「何か出来るだろう」と思わせることはできます。
他にも、エントランスエリアを上空に隔離してたので、初見からすればどこにエントランスあるねんって話になります。でっかい施設ならどっち方向に何があるかを示す看板かサインが書いてあったりします。
でもエントランスは、初期案の時点では1フロアしかないし道は一直線だし、とりあえず端っこに行けばエントランスへのゲートに行けるのですが、出展ブースが増えてその時期が開催2〜3週間前のタイミングだったりして、突貫工事によりフロアが増えるわ道は複雑になるわで形がかなり当初考えてたものから変わってしまいました。時間も押してたのでインターフェースまで手を回すことが出来なかった（言い訳ごめんなさい）ところがあり、決して親切設計ではありませんでした。
逆に異世界マルシェは初期案の時点よりもブース同士がバラけるようになったというのもありますが、結構周りやすくしてあると思います。入り口は一個に絞り、右手あるいは左手側から巡っていき、中央市場を一周する。すると入り口に戻ってくるので、そのまま真っ直ぐ路地裏へ。西市場、東市場どちらかを一巡すると、ワープ用のミラーがあり、反対の市場まで行けます。これで全てのブースを見ることが出来るので、一応導線としては良い出来にはなってるかと思います。
また、バーチャル特有の別問題として、動作の重さが挙げられます。VRCのみでは無いですが、殆どのソフトにおいてカメラに描画されるオブジェクト数、マテリアル数、テクスチャ数、ポリゴン数が多ければ多いほど重くなっていきます。なので我々はどうするかというと、オブジェクト同士を離すか、オクルージョンカリング（以下OC）を上手く利用します。OCは検索すると色々な記事が出てくると思うので詳しくは語りません。OCを上手く利用するには、まず壁が多いこと。それから高さによってあるいは想定されるカメラの方向にオブジェクトが沢山映らないような設計が肝になってきます。なので、ブースを配置する際も周回通路の外側にブースを配置する、あるいは入り組んだ道を作る。高低差をつけてブースを並べる等、意外にも対策は多くあります。とはいえ一つのブースでもマテリアル、テクスチャ、特殊シェーダ、複雑なアニメーション、アバターペデスタル等重くなる要素が多く含まれるため、3つのブースが縦に並ぶと重くなるなんてこともよくあります。
そういう意味ではエントランスはやっぱり最悪です。入り口から見ると2Fのほぼ全てのブースが目に入ります。そういう知識があるのに何であんな構造にしたんだよって怒られるかもしれませんが、あれは私がVケット1の時から考えていたもので、入場するといきなりドンと構えているより、細道を行き、ある地点から目の前に全体が広がるようなスタイルでいかなる人も見た時にうおぉぉ！って言いたくなるような構造にするのが私の癖です。大人も子供も、そのうおぉぉ！って感情を大切にしてほしいと考えて大体そうやってしまいます。
なので、Vケット1の時に作ったワールドも実は西館、東館共に暗がりで狭い視界から進んでいくと明るく広い空間が広がるようにしてますし、今回のエントランスも尾びれからスタートし、尻尾を伝っていくと全体が広がって見えてくるという構造にしてます。そして下り坂にすることで、早く前へ行きたいと思わせる欲を暗に掻き立たせようとしています。
ごめんなさい。重いのは分かってるんですが、最初が肝心だと考える人間なので、多少の重さは犠牲にああゆうことをしてしまった次第でございます。でも、いきなりだだっ広い部屋にブースがバラバラとあっても面白くないなぁと思うし、こっちの方がうおぉぉ！って思ってくれたんじゃないかなーと思います。
Vケットは、ただのマーケットプレイスでは無いです。もはや世界そのものなので、置いてある物だけでなく体験自体を創り上げるということを私はしたいと考えて毎回会場を作ってます。そうすると、自分のブースとのタッチに差異が出過ぎて自分のブースが浮いてしまう、掠れてしまうなど感じる方もいらっしゃるかもしれませんが、それは我々が先にどんなワールドになるか提示できてないのも問題ですし、ジャンルに沿っているならばそれ相応のブースデザインをするべきでもありますし、これからお互いどうやってクリエイティブの部分を上手くまとめていけるか、マネジメントを上手くやっていくかは重要ですし、ある意味経験や積み重ねから見えてくる部分もあるので、今すぐに全て完璧になることはありません。ですがなるべく最適な形に持っていけるように私は私なりに尽力するのでよろしくお願いします。
ワールドのクリエイティブ
ワールドを作るにあたって、導線やUIが大事なのは勿論ですが、やはりワールド自体のクオリティも大切になってきます。光の表現がリッチだとそれだけで没入感とリアリティが増し、チープな空間よりも情報量が増えることで居ても飽きない空間になります。しかし今回のVケットで我々が一番手間取ったところはこのライディングです。ワールドのクオリティを左右する要素の一個に挙げられますが、今回は完成まで本当に時間がかかってしまいました。なぜかというと、闇のパン屋に襲われたからです。
unityは標準機能にライトマップ（先にライトの演算結果をテクスチャに焼いて、オブジェクトに被せることでリアルタイム演算のライトを置かなくともライティングができ、動作が軽くなるマップ）を焼く機能がありますが、CPU処理なので、ワールド+ブースのベイクで2時間とか掛かります。それは流石にアホなので今回はGPU処理で焼いてくれるベイク高速化アセットの「Bakery」を使用しました。
これを導入すれば2時間のベイクが10分になります。しかし、こいつなかなかの曲者で、質感調整がとても難しいです。unity標準のライトなら、見えてる結果をそのままライトベイクしてくれますが、Bakeryはこのアセット専用のライトを置かなきゃいけない上に、プレビューでライトが表示されないので焼き直して確認ということになります。更にパラメータ（シェーダで操作するものもある）の調整、色味の調整、環境色との兼ね合い、光の当たり具合等々、直感的では無いのと、訳の分からない挙動をしたりするので、じゃじゃ馬を扱ってるかの如く配置班がすごい苦労をしてました。
いつかライティング勉強会とかもやりたいね。
さて、我々の苦労話はここまでにしておいて、空間デザインにおいてのライティングのお話をしようと思います。
ライトというのは基本的に、直接当たる光と反射してくることでほのかに当たる光の2種類を上手く扱えるとクオリティが上がります。また、全体を見渡した時に、光と陰の階調の量と光が当たる当たらないのメリハリがあると一気にリッチになります。
手取り早くリッチにしたいならば、壁に光を当てたりエリアライトを使用するのが良いです。特にエリアライトは有るか無いかだけでunity特有のチープ感が消せるかどうかになってきます。エリアライトはプレーン状の面光源です。こいつは本当にその面周辺の光の量を増やし、反射光、環境光（グローバルイルミネーションなど）を人工的に作り出すことができます。この面から離れると光が届かなくなっていくので、光にグラデーションが生まれます。そのグラデーションが目に入る情報量を増やすことになるのでリッチな仕上がりになります。
そしてもう一つはライトプローブとリフレクションプローブです。この二つはライティングには欠かせない要素です。
ライトプローブはライトを頂点色としてオブジェクトに事前に適応するのでライトの光の色具合がリアルタイムのライトを使わなくても表現出来ます。
そしてリフレクションプローブ。こいつは絶対に忘れないでください。反射というのはただ光を反射するのではなく、色が反射しています（厳密にいうとちょっと違うのですが簡単にまとめています）。その反射で見える色というのは、他の物質から反射してきた光の色も含めて反射します。つまりその物体周辺にあるものみんなの色が影響しあって色が見えています。青い空の下なら青みがかった光になります。すると物体も少し青い色が加わります。赤いリンゴの隣に青リンゴを置くと、赤リンゴには少し青リンゴの緑みが、青リンゴには赤みが少し加わり反射して見えます。
このように物体の反射すべき色を先に画像にしてしまい、その画像にある色を反射としてオブジェクトに反映させるものがリフレクションプローブになります。なので、これを置いてマップをベイクするだけで圧倒的に質感が違います。さらにグローバルイルミネーション（さっきリンゴの説明したものはこれに近い）を適用することで、そのお互いの色の反射をオブジェクト単位で演算するのでリアリティが格段に上がります。Realtime GI とかで調べてみてください。ただしGIは結構処理が重いので使うならベイクをするのがいいでしょう。リアルタイム演算だとパソコンが唸り始めます。
その①のまとめ
さて、色々綴ってたら全然時間も足りないし、そんなに奥まで踏み込めてないし、全部語ってたら時間がかかりすぎるって思ったので、とりあえず今回はここで終わりです。また今度色々細かい話をしていこうと思います。
簡単にまとめると
・一般人とVR民の考えるVRは圧倒的に違うのでそこを考慮してオタクを発揮していけ
・UIは現実世界に似たもので表現するか、ちゃんと何ができるのかわかるように明示する。それは初めて触る人でもわかるものかどうか。
・導線大事。あとスケジュール管理大事。
・動作を軽くさせるためオクルージョンカリングを意識した構造を考えよ。
・ライティング大事。クリエイティブに左右する。
：エリアライト使え
：ライトプローブ使え
：リフレクションプローブ使え
：グローバルイルミネーションをベイクしろ
あれ、思ったより語ってないかも。じゃあ早いうちまた書いた方がいいね。時間あったらまたまとめておくので是非よろしくお願いします。
ということで、当たり前のことばかり書き連ねましたが、これが何かの資料や参考になればいいな。それでは皆様またお会いしましょう。ごきげんよう。