3DアクションRPGとして2023年1月24日にリリースされたスマホゲーム『MONSTER UNIVERSE』（以下、『モンユニ』）。アクションゲームにおけるインゲーム制作、マルチプラットフォーム対応、そしてユーザーさまの体験・感情を創るための演出を工夫した作品となっています。
今回は、開発初期にアートディレクター兼プランナーを務めた藤野さん、UIデザイナーのM.S.さん、S.S.さん、そしてアートディレクターとエフェクトを担当した菅原さんの4名に『モンユニ』のUI/UXにおいてどういった箇所を意識して開発されたか、今だから明かせる秘話も含めてお話いただきました。

アクションの楽しさを最大化するインタラクションづくりの工夫や、スマホとコントローラーの操作性を両立させる技術の開発など、見どころ満載となっています！

INDEX

【1】オリジナルIPだからこそのUI演出

【2】UIとエフェクトの掛け合わせで実現させたアクションの気持ちよさ

【3】「モンスターを集めたい」と思わせるUIの工夫

【4】コロプラならではの"0"から対応

【5】『モンユニ』を通して学んだことと、これからについて

【1】オリジナルIPだからこそのUI演出

本タイトルはアクションRPGとなりますが、UI/UXにおいてどういったことを意識・工夫して開発を進めたか教えてください。

藤野　『モンユニ』は「モンスターを探索する、アクションバトルを通して集める、育成・交配し、もっと強いモンスターを生み出す」が楽しめる作品です。

まず「探索」という部分について。やはり初めて見るモンスターに出会った時には、ワクワクしていただきたい。
前提としてこの作品はオリジナルIPであるため、ユーザーさまは出会うモンスターについて何も知らない所からスタートします。その前提に立ち、ゲームの流れに没入して楽しんでもらうため、様々な工夫をしました。一つは、「初めて出会うモンスターを発見した時の演出」だと思います。

菅原　そうですね、ユーザーさまが「そのモンスターにどういう特徴があるのか」を理解し易くするため、モンスターを発見した際、主人公・フィーナの"驚き演出"を入れ、モンスター愛に溢れるフィーナの表情を最大5段階用意しました。最初は可愛く喜んでいますが、MAXまで行くと白目でハアハア言ってる感じで（笑）。
そこに加えて、モンスターの解説も入れました。ただ、生態についての説明を入れてもピンと来ないので、主に能力面を説明しています。例えば、このモンスターはこういう種類だから防御力が高い、などですね。

藤野　キャラクターなども使って説明することは、ゲームの世界観に入り込んでもらいつつ、理解を深めていける方法を考えた先の答えでしたね。あの演出があることでユーザーさまが「あ、この子はこんなモンスターなんだ！」と楽しみながら理解していけるようになります。

菅原　最初は「フィーナを推したい！」という気持ちが強すぎて、うるさすぎるくらいだったんですよ（笑）。

M.S.　ここでフィーナを推しすぎると、ユーザーさまの視線がモンスターに行きづらくなるので、UI表示や演出含めて、情報を出す順番やタイミングにも気をつけました。

藤野　それから、ゲーム体験が途切れないようにローディング画面も工夫しました。探索している間、ユーザーさまには、「探索中」の感覚のままゲームを遊んで欲しいのですが、エリア移動の際にマップが暗転して切り替わると、その瞬間、自分が何をしているのか、どこにいるのか分からなくなり、没入感が途切れてしまいます。そこで、ロード中の画面を移動演出として使うことにしました。

菅原　関連する箇所では、ロード前に操作キャラクターがモンスターに乗って去っていく様を見せたり。ロード後、街に到着した際はモンスターに乗った操作キャラクターが入ってくるだけではなく、先に街の情景を見せたり、ホームに仲間のモンスターが表示されるようにしたりと色々工夫しました。今回の旅で捕まえたモンスターを思い出して欲しいという意図もあり、ホーム到着時の演出で表示されるモンスターは、探索で捕まえた順にしています。「捕まえたモンスターが、自分のホームで生活している」という体験になるように、カット数もこだわっています。

藤野　他にも、ダンジョンに入った直後やフロアを降りた直後に、主人公が少し歩くようにしたり、かなり細かい仕様に詰めたよね。

菅原　そうですね。当たり前な部分をしっかりと全部やっていく。言葉で言うのは簡単ですが、そのおかげでユーザー体験がかなり向上したなと思っています。

【2】UIとエフェクトの掛け合わせで実現させたアクションの気持ちよさ

"バトル面"に関してははいかがでしょうか？

S.S.　バトルUIの制作においては、"モンスターとのアクションバトルを楽しむゲーム"であることを、しっかりと自分の中で理解しながら進めていきました。
攻撃を当てた時の気持ちよさ、当てられたことに対する焦り。そういった体験をしてもらいたい。"プレイする心地良さ"がしっかりと担保されていないと、ユーザーさまに満足していただけません。それと当たり前の話ですが、"いつ"、"どんな情報"をユーザーさまに見せなければいけないか、その優先度を都度、考慮しなければいけません。そこはUIだけでなく、エフェクトの力を借りて進めていきました。

菅原　当時、アクションゲームをガッツリ作るのが初めてだったこともあり、プレイする側として当たり前に感じていたことを、いざ自分が作るとなると気づけないことがとにかく多かったです。そんな状態の中、藤野さんからアドバイスをいただきつつ、トライ＆エラーを繰り返していきました。

藤野　エフェクトの話で言うと、例えば開発中のある時期は、バトル中に"攻撃を当てている"という実感があまり得られませんでした。その理由の一つが、3D空間上にあるヒットエフェクトが、モンスターに埋まって見えなくなってしまったことです。（※ヒットエフェクト・Before画像参照）この事象は、モンスターの大きさが最初の想定より巨大化した結果起きてしまっていました。ここをディレクターに相談して、菅原さんと解決に向けて動こうという話になったんですよね。

菅原　そうですね。エンジニアと相談した結果、ヒットエフェクトは必ずモンスターの手前に表示するように変更してもらったり、また、攻撃がインパクトした中心点がしっかり光り、そこから広がるようなエフェクトにしてみるなど、エフェクト表現でも体感の強化を狙いました。（※ヒットエフェクト・After画像参照）

S.S.　あとは、ダメージの数字やクリティカルヒットの演出を大きく派手にしたりですね。菅原さんに手伝ってもらいながら、攻撃を当てた時、より楽しさが伝わるようにガンガン目立たせましたよね。

ヒットエフェクト・Before

ヒットエフェクト・After

藤野　とにかくアクションゲームとして「これがあるといいな」と思ったことは、色味やテンポ感などを細かく調整した上で、全て詰め込みました。受けたダメージはHPバーの中で赤色にしてヤバさを伝えたり、状態異常も見た目でパッと分かるようにしたり。

S.S.　要素が増えれば、どうしても画面に表示するゲージや情報量が多くなってしまいます。本作では敵キャラのHPゲージの他にも、ブレイクゲージという固有の要素があるんですが、それをどこに配置してユーザーさまに見せるか、かなり調整しました。

開発当初、バトル中のUIは全て画面の中央付近に置かれていたのですが、チーフクリエイター（兼　代表取締役会長）の馬場さんから「このゲームの一番の武器である"3DCG&アクション"を邪魔するようなUIにしない方が良い」とアドバイスをいただきまして。
最も大切なのは"モンスターと戦っている"ことなので、GUI情報だけを前に出すわけにはいきません。「ここを一番楽しんで欲しい」というのは自分たちの想いでもありますし。
だからこそ工夫したのは、GUI要素を画面の中心軸に近い所に置かないようにしながらも、しっかり状況を把握して、モンスターとのアクションバトルを楽しめるような画面に仕上げられるようにすることでした。

藤野　実際、難易度の高いお題ではありましたよね（笑）。

S.S.　そうですね。バトル中表示される、与えたダメージ以外の情報（味方側のHPゲージなど）を画面の端の方に置いて、どうやってユーザーさまに必要な情報を認識してもらうか、多くの工夫が必要でした。ゲージの光らせ方を変えたり、主張すべき時を見極めて演出するなど、ディレクターやプランナーと相談しながら何度も調整しましたね。

菅原　ずっと光っているとバトルの邪魔になってしまうので、「今なら必殺技が打てますよ！」というタイミングだけ強く光らせたりね。

S.S.　今振り返えると、なぜ最初の頃はあんなに余計な情報を真ん中に置いたんだろうと思います。比較してみると、確かにバトルに集中できないんですよね。
想定されるユーザーさまは、普段からアクションゲームで遊ばれるゲーム好きな方でしたので求められるクオリティも高い一方で、説明せずとも分かってもらえる部分が多いんですよね。それを踏まえた工夫を盛り込んでいくようにしました。

藤野　余計な情報を置いてしまっていることに気づけなくなっていることはありますよね。そもそもゲーム自体の3Dでの表現力が高いから、説明の仕方も変えていかないといけない。例えば、一時期は状態異常をキャラアイコンで表現しようとしていましたが、それらは3D側でエフェクト表現を追加すれば十分理解してもらえるから2DのGUIからは省くとか。
結果的に本作のバトル画面は、3Dアクションゲームのお作法に則った部分と、モバイルだからこその工夫をしなければいけない部分、それらを融合させる工夫が詰まったUI/UXになっているんじゃないかなと思います。

【3】「モンスターを集めたい」と思わせるUIの工夫

"集める"に関してははいかがでしょうか？

藤野　モンスターを集めていく楽しみとして、「個体値」という仕様が設けられていました。同一種を捕まえても、毎回ちょっとした違いがあるというものですね。デザイナーサイドは主に見た目としての個体差である「柄の違い」や「ハーツ（特殊能力）枠のレアリティ表現」などでアイデアを絞ったと思います。

菅原　個体値は、「極＞超＞優＞良＞表記なし」の順にレアで優秀なステータスなのですが、UI/UXとしての工夫は、レア度ごとの表記と、入手時の演出を工夫しましたね。

M.S.　あと特徴的なのがハーツスロットです。『モンユニ』はキャラクターからモンスターへと、「ハーツ」と呼ばれる特殊能力を伝授することができます。ハーツスロットは「S＞A＞B＞C＞D」というレア度があり、高レアスロットほど、伝授されたハーツの効果が大きくなるのですが、レアなハーツスロットを持っているモンスターを集めること自体が面白いので、ハーツスロットを大きく目立たせるようにしました。

モンスター獲得時に「どんなレア度の枠が来るのか！」とワクワクしてもらうべく、個体値と同様、表記と入手時の演出差分作りを頑張りました。

菅原　本作の基本は交配と育成を繰り返しながらモンスターを厳選していくゲームですが、その面白さに辿り着く前にもっと分かりやすい要素がないと、ユーザーさまを"その奥にある楽しさ"へ連れていくことができない。そこで、ハーツスロットが上手く活きました。

M.S.　ちなみに昔はハーツスロットにレアリティしか書かなかったり、SやAなどの表記と共に「攻撃力●％アップ」みたいな詳細を添えたことも。でも、文字情報だと凄さが伝わりにくいので、いっそのこと無しのほうが良いんじゃないと。菅原さんに「（レア度の高いものは）もっとギラギラさせてください」とお願いしたら、予想の3倍ギラついたエフェクトで仕上げてくれました（笑）。結果、分かりやすい魅力作りに繋がったと思います。

S.S.　重要な箇所にフォーカスして他を切り捨てた方が、主目的を叶えられるんだという学びですね。

M.S.　もちろん、より深く遊びたい人向けに個体差によるパラメータなどの文字情報は階層が少し深いところで表示することにしました。そうすることで探索やダンジョンに潜ってモンスターと出会う度に、次はどんな能力、ハーツスロットなのか期待感を持って遊ぶことができるようになったと思っています。

藤野　本作はモンスターと出会い、手にいれるまでのワクワク感が何段階もあります。最初は出会った時。次に倒した後、仲間になるのか。そして仲間になった後、そのモンスターの能力はいかほどなのか。

M.S.　そのすべてがカチッとハマった時の喜びは凄いですよ。

"育てる"に関してはいかがでしょうか？

菅原　"育てる"に関しては「交配演出」が良い例です。この演出は何度も作り直しました。難しかったのは「生き物感」を感じさせる3D上の演出と、交配開始前後のUIのつなぎを自然にまとめることでした。

M.S.　最初、私が交配演出画面の前後のUIを組んでいたのですが、演出はどうしようかと悩んでいました。藤野さんがUIも考慮しつつ、間を繋ぐコンテを作ってくれて、それを受けて私がUIを調整する。それを何度も繰り返して、流れるような体験ができる構成に仕上がったと思っています。

藤野　そうですね。ここは世界観を強く表現できる大切な演出なので、流れの中での表現を大事にしました。

M.S.　実際にプレイした方から「面白い演出ですね！」と感想をいただきました。交配させるモンスター同士が近づいて、触れ合う寸前にカメラを空へ。太陽が沈んで昼→夜→昼と一周回った後、カメラを下に向けると卵があるという。

S.S.　ちょっと面白いですよね（笑）。

M.S.　実はもっとスピリチュアルなイメージで融合・合体する演出も作っていました。しかし、世界観に合わせた表現にするなら、ちゃんと交配させてモンスターが卵を産む表現の方が合うんじゃないかと。藤野さんがちょうどいい塩梅のコンテにしていたので、凄いと思いました。

藤野　流れは考えましたが、あれは総合芸術というか。みんなが一つ一つの要素のクオリティを担保してくれたので形になったと思います。例えば3D背景部分でも、担当者がめちゃくちゃ精細に空や太陽、月を描いてくれて、アニメーションやサウンドも臨場感ある仕上がりになっています。それも没入感を深めるのに効いていると思います。

【4】コロプラならではの"0"から対応

マルチプラットフォーム対応はコロプラでは初めての取り組みでしたが、UIデザインにおいてどのような工夫や新しい要素を取り入れましたか？

M.S.　マルチプラットフォームの話を聞いた時、正直驚きました。やったことがなかったので最初は「え！？無理でしょ」ってなりましたよ（笑）。普通に考えればスマホとは完全に別環境を用意して対応するのが当たり前なんですが、そこに対応するための工数を大きく割けない状況で。そんな中でエンジニアと相談しながら、スマホ側のUIのクオリティはできる限り担保し、コントローラーでもしっかりと遊べるもの、それらを両立するUIを限界まで考えました。

そして出た結論が、Unity上で1個のコンポーネントを挿すだけで、見栄えを落とさずに、コントローラー操作にもスマホ操作にも変換してくれるシステムを作ることです。今後、『モンユニ』と同様にコントローラー操作とスマホ操作を両立させる開発プロジェクトがあるか分かりませんが、これを使えば実現できるという一つの事例を作ることができました。

菅原　0からやるしかなかったんですね。

M.S.　社内に事例がなかったので。ないならレギュレーションを作るところから始めなければと思いました。

藤野　そんなこと、恐らくコロプラ以外はやらないですね（笑）。チャレンジングな判断と、実際にUIデザイナーとエンジニアが協力してシステムを作ったことが本当に凄い。

M.S.　『モンユニ』の担当になった時点では、コントローラー向けUIの制作経験はなかったので、社内のコンシューマー経験者に聞きに行きましたよ。「これどうやって作っていますか」って。かなり苦労しましたが、今はやってよかったという実感はあります。

【5】『モンユニ』を通して学んだことと、これからについて

今後、挑戦したいことについて教えてください。

菅原　『モンユニ』の開発を経て、自分たちでしっかりアクションゲームを作れることが分かりました。その上で、もう一度アクションゲームを作りたいです。前回よりできることは増えていますし、新しい気づきもあるはずです。そもそもコロプラはアクションゲームのイメージが強いので、その期待に応えられるように挑戦したいと思います。

S.S.　僕はこのプロジェクトを経て、テンポ感やゲーム全体を見通す力などが養われました。それは今、新規開発している作品にも活かされています。本作とは別ジャンルではありますが、今後も、当たり前に使いやすい、でも見たことない。そんなゲームUIを作るために頑張ります。

藤野　今回の話で面白いなと思ったのが、誰一人としてパーツ単体の制作の話をしなかったことです。みんなが"ゲーム体験"という大きな目的に向かった工夫の話をしていました。開発中、小さな部分に目が向いてしまうこともありましたが、全員同じ方向を向いてからはクオリティが伸びるスピードが早かったのを思い出しました。

M.S.　UIデザイナーの仕事は1つの画面を作るだけでは完結しません。ゲーム全体を見て、様々なセクションと協力して動き、設計も考えていかなければいけないと、骨身に染みました。『モンユニ』で培ったユーザー体験を持って、剣をゴルフクラブに変え、今担当している『白猫GOLF』の運営やその他のゲーム開発に活かしていきたいです。

藤野　ゲームUIは、2Dで制作されたGUI要素だけでなく、3D部分や動き含めた全てがインターフェースなので。だからこそ、大事なのは「ユーザーさまに、どんな体験をしてもらいたいのか？その為に何を作ればいいのか？」を、しっかり考えて形にすることだと思っています。その意識は、今後も変えずに持っていきたいですね。

チームでの目線がしっかりと合っていますね！

S.S.　連携力というか、風通しの良さがこの会社らしいですよね。だから目線も合いやすい。セクションに囚われないのが強みです。

M.S.　特にこのチームは風通しが良かったですね。吹き抜けです（笑）。

S.S.　とにかく1回形にしてみようぜ、という風潮がありました。個々の役割を飛び越え過ぎることもありますけど、困ったらすぐ頼れる環境になっていました。そして、駄目だった時はちゃんと戻る。駄目なもののまま進まないのも良いところだと思っています。

藤野　それがコロプラらしさかもしれないですね。

最後に、代表して藤野さん、求職者の方に一言お願いします。

藤野　ここまでのみんなの話にあるように、コロプラには「体験」からUIを考えて、チームで共に作っていく文化があります。そういった場で一緒にゲームを作ってみたい方、一般的に言われる「デザイナー」の枠を飛び越えて、一クリエイターとしてものづくりにチャレンジしたい方、そういった方はきっとコロプラの環境を楽しめるはずです。一緒にものづくりに向き合ってくれる仲間をお待ちしています！

※画像は開発中のイメージを含みます。

▼合わせて読みたい ▼