「ロビー」とは、2021年8月に誕生した、色々な人が交流できるワールドです。clusterの公式スタッフが常駐しており、はじめてclusterに来た人向けの初心者案内なども行っている玄関口のような場所になっています。そのロビーが2023年7月にリニューアルされ、clusterのユーザーの中では大きな話題になりました。
新しいロビーが運用され始めて数ヶ月。ユーザーの皆さんにとっても馴染みのある場所になってきたと思います。そこで今回はロビーのことをもっと知ってもらうために、リニューアルのデザイン、制作を担当されたクラスター社の樋口さん、山木さんにお話を伺いました。デザインの話から、快適なワールドを実現するための負荷軽減テクニックまで色々な話を聞いています。（2024年2月29日収録）
樋口大介（以下、樋口）
クラスター社CGデザイナー
デザイン系の専門学校を卒業後、約20年に渡って3DCGデザイナーとしてコンシューマーゲーム制作に携わる。2022年、クラスターに入社。
山木拓実（以下、山木）
クラスター社デザイナー
フリーランス、ゲーム会社、コンサル系デザイン会社勤務を経て2023年4月にcluster入社。
「人と情報の交わる場所」をつくる
──最初に普段担当している業務について教えてください。
樋口
ロビーを中心にcluster公式によるワールドの制作を担当しています。たまにcluster公式イベントの「アバターの日」の会場制作に対して「こうしたらもっと負荷が軽減できる」などアドバイザー的な立ち位置で関わることもありますね。
──樋口さんは、少し前はクラスター社の法人向けの案件でバリバリ働かれてましたよね。前職はゲームの背景の3Dモデルを担当されていたと伺っています。
次は山木さんが普段担当されている業務を教えてください。
山木
デザインチームとしてグラフィックやコンセプトデザインを色々と制作しています。手がけたもので表に出ているものとしては、昨年のCluster Conferenceのキービジュアルなどを担当しました。
──ありがとうございます。ここからはロビーの制作について話を聞いていきたいと思います。
ロビーは昨年7月にリニューアルされましたが、リニューアルプロジェクトはどのようにスタートしたのでしょうか。
山木
社内で「clusterに入っても何をしていいか分からない」「clusterはできることは多いけど、何ができるのかがユーザーに伝わっていない」という課題があって、それを解決するためにチュートリアルやオンボーディングをつくろうという話が立ち上がりました。その中で、ロビーも「人と人の接点をつくる最初の場所」としてきちんと定義して、課題解決に貢献できる場所としてリニューアルをしよう、という話になり、プロジェクトがスタートしました。
──以前のロビーは「空港のロビー」をイメージして制作されたと聞いたことがあるのですが、今回のロビーでは、そうしたビジュアル的な部分をどのようにデザインしていったのでしょうか。
山木
ロビーに最初に来た人に伝えたいことは「人と情報が交わる場所」です。なので、「人と情報が交わる」という意味を込めたモチーフとして「交差点」を配置することにしました。
──なるほど。交差点も特徴的ですが、時計塔やカフェなど他の特徴的な要素はどのように考えていったのでしょうか。
山木
時計塔やカフェ、ワールドのポータルが置いてある場所など、それぞれは意図的にバラバラにデザインしています。
それらはロビーリニューアルを企画した方からもらった最初の要件に入っていた要素だったのですが、配置が必須な要素は多岐に渡っており、同じような見た目でつくってしまうと違いも分かりづらくなってしまうし、統一した見た目にするのは難しいと思ったんです。なので、建物ごとの高低差であったり、それぞれの要素のデザインをあえてバラバラにすることで、それぞれの役割が分かりやすくなるようにしています。
実は、時計塔やカフェ、ストア、ステージなどはすべてモジュール式になっています。床の面積をすべて一緒にしていて、将来的に拡張したり組み替えたりしやすくしているんです。
樋口
時計台は「ロビーには長時間滞在する人がいるから、現在時刻が分かるように時計を入れたらいいんじゃないか」という話から生まれましたよね。
山木
そうそう。時計台は時計のアイデアが先に出てきたんです。
──なるほど。そこに来る人がどのように使うかも考えてデザインされているんですね。
ロビーは季節によって彩りが変わるのがひとつの特徴になっていますが、モジュール式にしてつくり変えやすくしているということはデザインしている当初から、そうした改変を前提に考えられていたということですね。
山木
そうですね。以前のロビーでもクリスマスやバレンタインで装いを変えていたので、それを新しいロビーでしない理由はないだろうと思っていたので。新しいロビーでは、そうした改変をする時により表現しやすい、見た目が分かりやすいつくり方にすることを意識していました。
手戻りしないようなデザインのプロセス
──デザインを進めるにあたって、最初にコンセプトイメージを描かれたそうですね。コンセプトイメージは、どのように制作を進めていったのでしょうか。
山木
家をつくる時は、間取り図や建築パースをつくって関係者で「ここはこうしたいよね」と話してイメージを膨らませてから設計を進めていきますよね。今回は最初の要件が抽象的な状態で始まったので、その状態で樋口さんが3Dでつくりはじめてから修正が入ると大きな手戻りが発生してしまうと思いました。
家づくりに例えると、基礎をつくった後に「やっぱ違う」となったら、変更するのに時間かかるしお金もかかりますよね。
なので、今回は抽象的な要件から始まったからこそ手戻りが発生しないように、最初に関係者で認識を合わせることができる間取り図のような役割を持つコンセプトイメージを描いて土台づくりから始めました。
──後の工程まで考えてデザインされたんですね。山木さんは過去に3DCGデザイナーと協働して今回のような3次元空間を立ち上げるプロジェクトを手掛けられたことがあったのでしょうか。
山木
前々職はゲーム会社に所属していたので経験はありました。そこでの経験があったからこそ、最初にしっかりと間取り図のようなものをつくることをやってみたいなと思ったんです。
──3DCGデザイナーの樋口さん側から見て、今回の制作プロセスはどうでしたか。
樋口
山木さんとは、めちゃくちゃ密にやり取りしながら制作を進めましたね。
前職でゲームをつくっていた時は、コンセプトアートができたら、それが修正されることはありませんでした。なので、2Dデザイナーと密にやりとりすることはなかったんですよね。だから、今回は試行錯誤しながら制作することができたと思います。
山木さんのコンセプトイメージの叩きができた段階で、テクスチャーのないラフモデルを組んで、一旦clusterにアップロードして、その中を歩いてみたんです。
そうすると、2Dのイラストでは分からなかった問題が必ず浮かび上がってくる。そこで「こうした方が良いよね」と話して、それをコンセプトイメージに反映する。そうしたプロセスを繰り返してブラッシュアップしていきました。
──2Dと3Dを行き来しながらブラッシュアップしていったということですね。モデルをアップロードすればすぐに中に入ることができるclusterならではのつくり方だと感じました。ラフモデルを歩いた時に気づいたのはどのようなことでしたか。
山木
ワールドの広さや建物の高さとかユーザーからの視点に関わるところです。そうしたスケール感は2Dで把握するにはどうしても限界があったので。
なので、実際にワールドを歩いて気づいたことを反映していって、何十回も描き直しました。
樋口
後は、ロビーは多くのユーザーが訪れるのでclusterのワールドとして負荷が低い必要があるのですが、コンセプトイメージの段階で「こうしたら負荷を軽減できる」と伝えていて、それを踏まえてコンセプトイメージを描いてもらったりもしました。なので、僕としてはすごくやりやすかったですね。
──後の工程が楽になる進め方をされていたということですね。
デザインでこだわっている部分はどのあたりでしょうか。
山木
スポーンした時のファーストビューですね。高いところにスポーンして、目の前が低くなって、さらに時計台で高くなる、というすり鉢のような形状を意識してデザインしました。
このデザインは「見た目のインパクトをどうやったらつくれるか」と考えた結果生まれたものです。フラットな構成も検討したりしましたね。後は、低すぎても高すぎても見た目の印象が変わってしまうので、かなり意識してデザインしました。この構成だと、立体的に見やすくてスポーンした時に「どこに行こうかな」をイメージしやすいんですよね。
──デザインで苦労した部分はありますか。
山木
やっぱり苦労したのは負荷との戦いですね。
樋口さんと毎日話しながら制作していたので、どういう表現だと負荷が高くなってしまうのかは分かっていました。なので、「妥協」という言い方が適切かは分からないんですけど、諦めた表現はいっぱいありますね。必ず入れなくてはいけない要件があって、見た目のインパクトを出して、さらに負荷を低くしなければならなかったので。
「美味しいものを安くつくれ」みたいな話ですよね（笑）
──断念した表現の中で、特に「これは惜しかったな」という表現はなんですか。
山木
遠景ですね。
最初はロビーが街の中にあるようなつくりにするというアイデアだったんです 。遠景が書き割りみたいなビルになっている感じですね。ただそれは、負荷との戦いで断念しました。
──実際に公開されたロビーの遠景は綺麗な空で、ある意味特色がないので、季節の改変をする時にはやりやすそうですよね。 街の遠景だと逆に印象が強すぎたかもしれないという考え方も……
山木
という意味では、結果的に良かったかもしれないですね。
負荷軽減のためのテクスチャテクニック
──負荷との戦いは重要なテーマですよね。
これまでの話でも少し触れていましたが、今回のロビーでは「負荷を低くしつつも見た目のクオリティを担保する」という面で樋口さんのこれまでの経験から来るテクニックが色々発揮されていたと伺っています。そうした負荷軽減のためのテクニックについてお聞きしたいです。
樋口
主な話としてはテクスチャの節約の話になってきますね 。やっぱりテクスチャがメモリの圧迫に直接影響するので、なるべくテクスチャーやマテリアルの数を減らすことが重要になります。
だからこそ、タイリングできるテクスチャーや流用が可能な汎用的なテクスチャーを多用できるように、デザインの段階で山木さんに要望を出していたんですよね。
──具体的にはどのような部分でしょうか。
樋口
下の図を見てもらえば分かると思いますが、基本的にはこれらは同じテクスチャを使っているんですよね。
──そうなんですね……！とても同じには見えないです。
樋口
完全に同じなんですけど、テクスチャのつくり方やタイリングの仕方の部分で同じには見えないような工夫を色々しているんです。
繰り返し感が見えないようにするタイリング
──タイリングをするとテクスチャの枚数を少なくできる一方で、繰り返し感がどうしても出てしまうという悩みはありますよね。
樋口
レンガのテクスチャを例にすると、レンガのひとつひとつのタイルが同じ色だったら単調になってしまうので、所々明度を変えているんです。こうすることで繰り返し感が緩和されます。他にも十字に溝を入れることでタイリングした時に繰り返し感の緩和に効いてくるんですよね。
──「タイル」が表現と実益を兼ねているということですね。
山木
今のロビーは街中っぽさを意識しています。リアルを観察しても街中には色々なタイルがあるので、タイルの床は必須だろうなというのもありましたね。
カラーマップで立体感を表現する
樋口
その他にも負荷を軽減する工夫をしています。現在のゲームでは一般的に使われているノーマルマップやラフネスマップを本当は使いたいのですが、これももちろんメモリーに載ってしまうので、できるだけカラーマップのみで立体感を表現するようにしてます。カラーマップにすべてを描き込むやり方は昔ながらのゲームの手法ですね。
──なるほど。
樋口
すごく端折ったざっくりとした説明ですが、まずはレンガのハイモデルをつくって、それをローモデルに転写させた情報をもとにSubstance Painterで質感をつけていきます。そして、その素材をエクスポートしてPhotoshopで合成しています。1枚のテクスチャにこれだけの手間をかけているんです。
──1枚のテクスチャにすごい情報量が詰め込まれているということですね……！横断歩道もすごくリアルですよね。
樋口
横断歩道をつくるには、その部分だけポリゴンを割って白で塗り潰すというやり方もあるのですが、それだと「アスファルトに横断歩道が描かれている」という感じが出なくなってしまいますよね。
そこで今回は、横断歩道の白線の少し外側でポリゴンを割って、その中に白線のテクスチャーを入れています。横断歩道の白線は8本あるんですけど、テクスチャは4本の白線だけで、実は同じテクスチャのものが混じっているんです。
──全然気づかなかったです。掠れ具合もすごくリアルですよね。
樋口
そういうディテールで印象が変わってくるので、こういう工夫は要所要所でやっていますね。
ロゴはテクスチャーではなく単色のポリゴンで表現できるようにデザインする
樋口
ロゴをテクスチャーで表現してしまうと、その分テクスチャの領域が大きくなってしまうので、なるべく ポリゴンで割りやすいような単純な形状、単色で表現できるかたちにしてもらうように、山木さんへデザインの要望を出しました。デザイン段階から負荷を見越してデザインすることでテクスチャの容量を削減できたんです。
──密に話せたからこそできたデザインということですね。
樋口
「3D側からデザインについて要望する」というやり方はゲーム会社に所属していた時代はしていなかったので、今回のやり方だからこそ実現できた表現ですね。
風を感じられるようにするための「雲」「旗」
樋口
旧ロビーもそうでしたが、今回のロビーも屋外なので、風を感じられるように動きを出す工夫もしています。それが雲の動きと旗のはためきですね。
雲は二層にして、外と内側で回転の速度を変えることで立体感を出しているんです。内側の雲は透過のテクスチャで、奥は天球にしてそれぞれの回転速度を変えているという感じですね。
また、旗の動きは3DCGアニメーションソフトの「Maya」でつけています。
できるだけ負荷が低くなるように、頂点数とボーンの数はできるだけ少なくしています。
ディテールでクオリティを高める
──季節の更新では横断歩道など細かい部分まで変わっているのが印象的ですが、こうしたデザインはどのように進めていくのでしょうか。
樋口
山木さんと手掛けたハロウィンを例にすると「ここ変わってると楽しそうだよね」とふたりでキャッキャしながら楽しみつつ打ち合わせしていました（笑）
──基本の形は変えずに、あくまでロビーが季節に合わせて変化したみたいな見せ方を意図していたということですね。
樋口
そうですね。まるっきり変えたら、ロビーでなくなってしまって、それは面白くないと思うので。
──ベースのロビー自体も旗やカフェの看板・メニューも細かくつくってあって、それらの表現が変わるのが面白いですよね。
樋口
それは山木さんのこだわりですね。
山木
今回のロビー制作では「clusterでつくれるワールドのクオリティのトップラインをつくる」というテーマを定めたんです。僕らは2D、3Dの違いはあれど年齢が同じでベテランである、ということでテーマを達成するためにお互いのこだわりをぶつけ合ったんです（笑）
先ほど話したテクスチャのタイリングや雲が2層になっている、という話はまさにこだわりから出てきた部分です。正直、そういうところは手を抜こうと思えばいくらでも手を抜けると個人的には思っています。ですが、樋口さんが毎日のように上げてくる進捗は一切手が抜かれていなくて、こちらの想像を超えてくる「おせっかいクリエイティブ」をどんどん突きつけてくる（笑）
クオリティが上がる時ってそういう一手間加える「おせっかい」が重要だと思っていて、樋口さんとはそうしたやりとりができたのはすごく良かったです。
「何が起こるか分からない」を許容して楽しみに転化するデザイン
──旧ロビーの時から路上ライブ的なことをされる方がいたこともあり、新しいロビーにもステージが用意されているのだと思うのですが、ステージから発せられる音がどのくらいの距離まで届くようにするべきか考えるのは難しそうだなと思いました。
樋口
そうですね。音はステージから距離減衰するようになっているのですが、奥のステージ同士で干渉しないようにするためのちょうどいい距離感は実際に配置して模索していましたね。
──個人的な想像なのですが、そうやってユーザーが歌を歌ったり「何をするか分からない」という状況は普通のゲームとはちょっと違うのではないかなと感じました。
樋口
メタバースならではな感じがありますね。
──ゲームであれば決められたBGMをベースに制作するのだと思いますが、何が起こるか分からない状態でどういう場所をつくるかを考えるのは違う頭を使いそうだなという印象があります。
樋口
そこで旧ロビーのノウハウや知見が活きています。例えば、ステージにはマイクスタンドがあるのですが、アバターって背が高い人もいれば低い人もいますよね、なので、マイクを上下に移動して調節できるようにしています。そうやってニーズに合わせてディテールを用意しているのもこだわりですね。
──実際に使われ始めてから気づくことも多いと思いますが、デザイン・制作時の想定通りだった、違っていたなと感じたことはありますか。
樋口
データで証明されてましたが、やっぱり時計台の上に登る人って意外と多いんだなと思いました（笑）
あとは、 新しいロビーがオープンした時にカフェスペースで、早速店員を演じている人がいてすごく嬉しかったですね。カフェを本当にカフェとして使ってくれているというか。
山木
メターバックスとか言ってましたね（笑）
樋口
なので、カフェは用意してよかったなと思いましたね。
──カフェは最初の要件の中にあったんですか。
山木
カフェは最初から要望がありました。2Dでデザインしている時に色々な人に話を聞いたんですけど「ロールプレイをしたい」という声がすごく多くて、居場所を欲しいという人が多かったんですよ。 その時に、その視点は僕の中で盲点だったなと思いました。
そうした経緯もあって、ロビーは色々な場所に椅子を配置しています。椅子やカフェって直接的に何かを満たすような機能ではないのですが、「落ち着ける場所」「自分が居たいと思える場所」がすごく求められていて、それが実際に機能するということは発見でしたね。
──「意外とみんな座るんだな」と思いますよね。
山木
あとは、アバター同士で人と人の距離感、つまりパーソナルスペースをすごく気にする人は多いんですよね。「近すぎると嫌だ」と言う人もいるので、椅子の配置をする時に距離感はすごく意識していた記憶があります。
──山木さんは実際に使われ始めてから、発見や感じたことはありますか。
山木
大体は樋口さんが言っていたことと重なってるんですけど。「こういうことが起きるのか！」と思ったのは、ロビーに合わせたアバターをつくる人が現れたということですね。あれは面白かったです。洗濯物として干されてるような、時計塔の旗の一部になっているアバターとか。
樋口
事故車みたいにポールにぶつかってた人もいましたね（笑）
山木
いたいた（笑）それも、ある種カフェの店員みたいなロールプレイですよね。ロビーという空間に合わせて姿を変えているというか。
──場所のデザインがユーザーの創造力を誘発させたと言えそうですね。今後もロビーでは色々季節ごとの彩を変えていくでしょうし、そうした思いもよらないことが起きていくと思うと、楽しみです。
