「みんせか」UI/UXデザイン解説

はじめまして。滝 竜三といいます。

まず軽く自己紹介しておくと、「何か色々やってる人」です。専門はプログラミングですが、イラスト、3DCG、DTMなど色んなことを少しずつ齧っています。

さて、そんな中最近ハマっているのが「バーチャルSNS cluster」。アバターを通して他の人とコミュニケーションをとったりゲームで遊んだりできるサービスです。

このclusterでは誰でもUnityを使って「ワールド」を作ることができます。そして僕も最近ワールドを作り始めました。ただし一人でではなく合作です。それが記事タイトルの「みんせか」。

この「みんせか」こと「みんなで 世界樹の物語」というワールドは「みんなで作るワールド」として多くの人と協力しながら作っており、中でも自分は中心メンバの一人として主にギミック（仕掛け）関連を中心に制作しています。

で、この記事ではこれまで「みんせか」を制作してきた中で、特にUI/UXについて考えてきたことをまとめようと思います。一つは（参考になるか分かりませんが）UI/UXデザインの知見として、もう一つは一緒に作っているみなさんに意図を共有しておきたいという考えからです。

ただし、ここに書いてあることは（中心メンバの賛同はある程度得ていますが）基本的には素人である僕個人の考えです。「こっちの方が良いのでは」という意見があればいただければと思います。

ではさっそく始めていきましょう。

ワールドのコンセプト

このワールドは「ゲーム」と「雑談場所」の中間くらいの立ち位置を目指しており、木に水をやって育てながら好きに会話したり遊んだりすることができます。まずこのコンセプトの背景について解説します。

clusterには大きく「ゲーム系」と「背景系」のワールドがあります（公式な定義ではありません）。ゲーム系は文字通りアバターを使ったゲームができるワールドで、背景系は他のプレイヤとの交流や美麗な景色を楽しむためのワールドです。個人的に背景系というか雑談ができるワールドが好きなので作りたかったのですが、こういったワールドには弱点があります。それは「一人の時や話題が切れたときにすることがない」という点です。どうしても初めのひとりというのはいるわけで、その人は誰かが来るまで待ちぼうけということになってしまいます。ところがそこに簡単なタスクを用意すれば、一人でもそれをしながら待つことができますし、それによっておこる変化は人が集まれば話題のタネにもなります。そこで「水やり」というタスクを課し、それによって「木が育つ」という変化を与えることで一人でも大勢でも居心地のいいワールドになると考えました。

また、一人では完遂が難しいバランスに調整することで人を呼ぶように仕向けるというちょっとあざとい考えもあります。

上記のコンセプトで進めるにあたって話し合い、バランス調整の方向性を次のように決めました。

①木を育てつつ、それをネタに雑談することを重視

②あくまで成長はゆっくり、成長をブーストするような機能は基本的になし

③ゲームオーバーなし

特に②は難しいところで、ゲームとしては成長ブーストがある方が面白いのですが、あくまで今回は①の通り「木を成長させること」は目標ではあっても目的ではありません。そのためそういった機能は廃し、あくまで時間をかけて育ててもらう方向に決めました。このことがワールド全体の設計のベースになっています。

スポーン直後の動線

まず次の写真をご覧ください。

これはワールドに入った直後に見える景色です。正面やや左に見えているのが花壇で、ここに育てるべき木（はじめはまだ芽）が生えています。

入ってくると、まず正面になにかあって、そこへ向かう矢印の看板があるというレイアウトです。看板に絵が描いてあって、矢印の方向に同じものが見えています。これで初めての人でもどこへいけばいいかすぐにわかります。また看板を見ていなくてもとりあえず正面に向かえばメインコンテンツに辿り着くというのも重要です。

矢印の方に進むと井戸があります。井戸は固定アイテムになっていて、さわるとジョウロが出てきます（水汲みのイメージ）。clusterでは使えるアイテムは近づくと分かるようになっているので「さわると何かある」とは分かってもらえます（本当にclusterを始めたばかりの人には伝わらないかもなので何か方法がないかなとは思っています）。

ジョウロが出てくると、その奥にまた看板があり「ジョウロで水やりができる」ことが分かるようになっています。

HUDについて

先程の写真で画面上部にレベルとコインのマーク、ジョウロのマークが表示されています。このHUD（ヘッドアップディスプレイ＝視界に追従するUI）のレイアウトに関しても少し知見を共有しておきます。clusterはVR機器に対応していますが、VRではHUDの見え方がかなり変わるらしく、表示されても見づらい位置があるようです（自分はVR機器を持っていないので持っている人から聞きました）。始めは画面右端に縦並びで表示していたのですが、頭を動かさないと見えないということで画面上部にまとめました。

またこれは技術的な話ですが、UIはアンカーを適切に設定しないと画面サイズによっては変な位置に表示されてしまいます。気をつけましょう。

木の成長の調整

水やりをすると回数に応じて木が成長します。この成長の仕方にもいくつか目標があります。

①説明がなくても『木に水やりをすると育つ』ことが分かる

②いつ来ても木が育つ瞬間を見られる

まず①に向けての調整についてです。初めて来た人が水やりをすると、1回目でいきなり芽が変化します。これによって「水をやると育つんだ」ということが分かるようになっています。一段階成長するのに必要な水やり回数は段々と増えていきますが、後から来た人はすでにいる人の行動を見て理解することができるはずです。

また、木の近くでしかジョウロが使用できないということもポイントです。実は始めは制限していなかったのですが、木から離れたところで水やりをする人が意外と多かったため制限するようにしました。プレイヤは予想外の行動をとると思ってデザインすることが重要だと改めて思いました。

②についてですが、これはもう力技です。とにかく成長段階を増やして短いスパンで変化するようにします。これには多数のモデルが必要で時間と手間がかかるのでなかなか進みませんが、着々と進んではいます。正直モデリング担当にかなり負担をかけてしまっていて申し訳ない…でも絶対に楽しいものにするので、そこは約束します…。

水やりに関する調整

HUDにジョウロのアイコンを表示していますが、これは現在水やり（正確には水汲み＝ジョウロの生成）が可能であることを示しています。一度水汲みをすると次までしばらくインターバルが必要になっています。これにもいくつか理由があり、

①少しでも成長に時間がかかるようにする

②連打で大量のジョウロを生成しあふれさせてしまうことを防ぐ

ことを目的としています。

特に①の理由はわざと不便にすることでより楽しめるようにしたいと考えてのことですが、不便過ぎずちょうどよいインターバルの長さを現在も模索中です。

BGMについて

やっぱりないと寂しいのでBGMを設定しています。ただclusterでは誰でも手持ちの動画や音声を再生でき、会話の中でそれらを使いたい時もあると考え、BGMをオンオフできるスイッチを用意しています。始めは比較的分かりやすいところにスイッチを置いていたのですが、来た人（特にcluster初心者と思われる人たち）がとりあえず押してしまうので、見えづらいところ（岩の中）に隠しました。

演奏ステージ

ワールド制作に協力してくれる人を集める中で、ピアノ演奏が得意な方に参加していただけることになりました。せっかくなのでワールドで演奏してもらおうと思い、そのためのステージをワールドに配置しました。

ところが演奏していただくときに、BGMが流れていると音がぶつかってしまいます。始めは上記のBGMオンオフスイッチで対応しようとしていたのですが、ちょうどclusterにアップデートがあり、マイク音声が距離減衰する仕様に変更されました。この変更を受け、ワールドの音声についても大きな変更を加えました。もともとは演奏した音声がワールド全体に届くつもりだったのでBGMを全て消す必要がありましたが、この仕様であれば演奏場所の周辺だけBGMが聞こえなければいいのです。そのためUnityの音声減衰機能を利用してBGMの聞こえる範囲を制限し、ステージのある山の上にはBGMが届かないようにしました。また演奏時のみリバーブをかけたかったのですが、これも演奏の届く範囲にリバーブゾーンを展開すれば良いため、リバーブのオンオフ機能を実装する必要もなくなりました。

最後に

以上、「みんせか」のUI/UX関連で僕がこれまで考えてきたこと・実装したことをざっとまとめました。

別に自分はデザインのプロではないのであまりよくない点もあるかもしれませんが、そういった意見もいただければ改善していこうと考えています。

なんか思ったより長文になってしまいましたが、ここまでお付き合いいただきありがとうございました。