2023年9月に満を持してリリースされた『とらべる島のにゃんこ』（以下、『とらにゃん』）。「にゃんこ」シリーズ最新作として前作『ほしの島のにゃんこ』（以下、『ほしにゃん』）を踏襲しながら、実写的な世界観やパズルゲーム要素など、新機軸も盛りだくさんの島づくりゲームになっています。こうした箱庭的なゲームジャンルは、もっともUIデザイナーの本領が発揮されるタイトルと言っても過言ではありません。実写的な世界観やUIの手触り、快適な操作性など、UIデザイナーのこだわりについて、開発ディレクターとUIデザイナーの3名に語っていただきました。

INDEX

【1】『とらにゃん』の実写的な世界観のUIデザインとは

【2】前作を踏襲しつつ、前作を超えていくUIのこだわり

【3】手触りと快適さを追求した、UIデザイナーの創意工夫

【4】今後『とらにゃん』の運用で挑戦していきたいこと

『とらにゃん』の実写的な世界観のUIデザインとは

にゃんこシリーズ第2弾としてリリースされた『とらにゃん』ですが、こうした箱庭的な島づくりゲームは、UIデザインが非常に重要になってくると思います。開発にあたって、どんなUIデザインを意識しましたか？

田島　私がUIデザイナーとして『とらにゃん』の新規開発にジョインした時には、すでにフィールドを実際のジオラマで作成し、ゲームに取り込んでリアルな世界観を表現するという構想は始まっていました。当初はCGで作っていたそうですが、「新しさが足りない」という話になり、ジオラマ化による実写的表現のアイデアが生まれたようです。
その後、ディレクターに任命された際、「このゲームはUIのゲームだから」と言われディレクターとしての責任を強く感じた記憶があります。たしかにこうした箱庭的なゲームは、手触りにしても見せ方にしても"体験性を損なわないUIデザイン"が重要になってくると思いますね。

『とらにゃん』のフィールドが、実際にジオラマで作られていたとは驚きです。

田島　最初にジオラマを見て、「リアルなテイストにどうUIデザインを合わせていくか」が課題であると同時に、そこにUI側での新しい可能性があると感じました。素直に考えると、なるべくフラットでシンプルで見やすく、3Dグラフィックを阻害しないデザインが良さそうだと思うのですが、そこは何かUIでも新しい工夫をしたいなと考えたのが始まりです。色々考え、ジオラマの世界観を阻害しない別のベクトルとして、UIもジオラマと同じ世界線にあればよりリアルな体験に落とし込めるのでは？と考えました。それでさっそくフェルト生地を買ってきて、試しにモックを作ってみることから始めました。最終的に現在のUIは、実写とCGの合いの子で作られています。

初期のモック用 実物UI

N.S.　私の場合は、「難しそうなゲームにしたくない」ということを意識していました。
前作『ほしにゃん』が子どもでも楽しめるゲームでしたので、『とらにゃん』のUIデザインにおいても、文字が小さすぎないようにしたり、難しい単語は使わないように配慮して、子どもから大人まで楽しめるゲームを心がけています。

M.A.　私は入社間もなく『とらにゃん』チームに配属されたのですが、その時にはUIの素材に本物のミニチュアを使うことが決まっていました。箱庭的な世界観を楽しんでもらえるように細かな部分まで可愛い要素を盛り込みつつ、その一方で、UIが邪魔にならないようにデザインすることを心がけていました。やはりゲームを快適に遊んでもらうことがUIデザインの目的ですので、素材が目立ちすぎてもいけないと考えていました。

前作の世界観を踏襲することも意識されたのでしょうか？

田島　もちろん前作をベースに現代版を作った側面も大きいので踏襲した部分は多々あります。
前作では子ども向けを強く意識しており、何度もレビューを繰り返してあのUIにたどり着いているので完成度が高いと思っています。その時の反省や知見を吸収しつつ、当時は見えなかった課題などを加味し、今作でやりたい新要素や表現を合わせていくことは簡単な作業ではなかったなと感じています。開発する度に『ほしにゃん』の設計は考えられていたんだなと教えられることが多かったです。

『とらにゃん』はずっと触っていたくなるような中毒性があるように感じます。「手触り」については、どんなことを意識しましたか？

田島　『とらにゃん』はリアルなテイストという方向性だったので、おのずと手触りにおいてもリアルなものを触っているようなUIにした方が気持ちいいだろうと考えました。
そのためボタンやアイテム素材などに、リアルな体感を助長できるような工夫が仕込まれています。例えばボタンを押すと、本当に圧がかかったように少し潰れて見えるようになっているんです。

N.S.　コロプラのUIデザイナーは、UIに必要なモーションを自分たちで作ることもあります。私はUIが登場する簡単なアニメーションを作ったのですが、あえてゲーム的な表現は避けて、可愛らしい手触り感を意識していました。
UIの透明度が徐々に上がっていき、画面にふわっと登場するというゲームではよくある表現なのですが、本作ではそういった表現は少なめにして、画面の外からスライドしてUIを登場させたりなど、実物感のあるデザインでも違和感がないようにしています。

M.A.　実は、ローディング中に使われている雲型のTIPSのアニメーションもUIデザイナーで作成しています。ページが切り替わるときに紙がくしゃっとなる表現は、本物のようにリアルな表現にしたいと思って、実際の紙を見ながらシワの入れ方を検証したりしました。
その他にもパズルゲームに使われているカーテンは、本当に布を縫って素材として使っています。実はカーテンの動きも実写で表現するつもりだったのですが、あまりに目立ちすぎるということで、半実写くらいの仕上がりにしています。

田島　カーテンの滑らかな動きがリアルすぎて、逆に浮いてしまった感じでしたね（笑）。 実写風といっても『とらにゃん』は、コマ撮りアニメのようなポップなテイストを狙っているので、あえてfpsを落として硬めの動きにしたり、リアルの中でも求めている世界観は守って作るよう心がけています。

前作を踏襲しつつ、前作を超えていくUIのこだわり

前作のゲーム性を踏襲しつつ、新しい体験を届けるために本作のUIデザインでは、どんなところを変えていきましたか？

田島　子ども向けに作られた『ほしにゃん』は、実際に子どもにレビューしてもらうなどの試行錯誤を経てあのUIになっています。当時としては完成されたゲームではあるのですが、やはり9年以上も前にリリースされたゲームなので、今見ると、改修した方がいいところも見つかってくるものです。
前作を超えていくためには、今作に合わせつつ、習うべき部分と変えた方がいい部分両方にどれだけ「気づけるか」が重要になってきます。前作の良い部分を残しつつ、変えた方がいい部分に気づいては作り直し、気づいては作り直すということを繰り返していきましたね。

N.S.　ゲーム内にアイテム受け渡し画面がありますが、前作で同じような操作をするUIは、左の棚から右側に商品を移動させる見せ方になっていました。開発当初は『とらにゃん』も同じ仕様になっていたのですが、それだと「商品をにゃんこに渡していることが伝わりにくい」という話になり、机をはさんだ向こう側にいるにゃんこに商品を渡す見せ方に変更しました。
こうした体験性を向上させるための工夫は、UIデザイナーから提案することも多いですね。

M.A.　見せ方でいうと、私はミッション画面のデザインに悩みましたね。
ミッション画面は各項目ごとに進捗ゲージがあって、デイリーミッションではさらに全てをコンプリートすると報酬がもらえるのですが、全体の進捗までゲージで表現するとゲージだらけになってしまいます。そのため違う表現はできないかと考え、全体の進捗はにゃんこが移動する見せ方にしました。
ゲージと数字ばかり並んでいると威圧感があるものですけど、絵で表現すると可愛い感じになりますよね。

田島　進捗やリソース表現としてゲージや数字などを駆使することは一般的ですが、たくさんの情報が並ぶと、どうしたらいいかわからなくなることもしばしばあると思います。本作は直感的に遊べることを重視していたので、できるだけ絵で見せるようにしているんです。

N.S.　本作で新しく追加されたあそびの要素では、パズルゲームがあります。
新たにUIデザインを考えなければいけないわけですが、パズルゲームの背景をどうするかについては悩みました。いろんな案が出たのですが、紆余曲折あって、世界観を守りつつ、農園と別のあそびであるパズルをサイクルに繋ぎこむ表現として今の青空と草原の紙で作られたような背景に落ち着きました。前作のテイストから逸脱しない範囲で『とらにゃん』らしい背景に納まったのではないかと思いますね。

M.A.　パズルゲームの部分で言うと、プレイするのに必要なチケットがあるのですが、レア度の高いチケットはスマホを傾けるとキラキラ光る表現を入れています。あの表現は、まず雑貨屋に行き実際のホログラムの紙を買ってきて、光の見え方の検証をして、やりたい表現のイメージを作成しました。それをエンジニアに伝えて実装してもらい実現した機能です。

田島　それから操作性の面でも、快適さと体感性にこだわっています。
『ほしにゃん』の場合、生産したものを一個ずつ回収しなければいけなかったのですが、『とらにゃん』では一気にスワイプで回収できるようにしました。建物を横断して回収することも可能なので、前作よりも快適な操作性になっていると思います。
また、回収のアクションに合わせてスマホが振動するようになっているので、体感性も向上しているのではないでしょうか。

手触りと快適さを追求した、UIデザイナーの創意工夫

『とらにゃん』は実写的な世界観を意識して細部までこだわって作られているんですね。特殊な作り方だと思うのですが、こだわったからこそ大変だったことや苦心したことはありますか？

M.A.　『とらにゃん』に出てくるアイテムは実際のミニチュアを撮影して作っているのですが、私がチームに配属されて最初の業務が、実際にアイテムを作ることでした。
今は料理のミニチュアを作っていますが、ゲーム開発当時は様々なアイテムを作れる仕様があったので、毛糸をひたすら巻いて毛糸玉を作ったり、いろんな種類の紙を買ってきてミニチュアサイズの紙のアイテムを作ったりしていましたね。
私は新卒でゲーム開発が初めてだったので、ミニチュア風ではなく、本当にミニチュアを作っているこだわりに衝撃を受けましたね（笑）。

料理やアイテムがミニチュアっぽくて可愛いと感じていましたが、本当にミニチュアだったとは！

田島　パンやおにぎりにはじまり、パスタやパフェなどいろんな料理が出てきますが、あれは全てミニチュア業者に発注して作った実物のミニチュアです。木材や斧などの料理以外のアイテムもほとんどがミニチュアで作られています。
料理だけがミニチュアで、他のものがCGだと世界観が合わなくなってしまうので、なるべく実物で統一させています。そのため開発中は、ラフを描いてミニチュア業者に発注したり、社内の撮影部屋でミニチュアを撮影したり、その画像をパソコンに取り込んでトリミングするといった作業に追われました。

M.A.　大変でしたけど、デザインしたものが実際にミニチュアになると、テンションが上がりますよね。私はミニチュアの撮影を担当していたのですが、学生時代にカメラも少し学んでいて、その時の物撮りの知識が思わぬところで活かされました（笑）。
「ゲームのUIデザイナーってここまで担当するんだ！」って最初はビックリしたんですけど、とことんクリエイティブにこだわって作れるのがすごく楽しかったです。

田島　撮影用に実際に家で棚を作ったという話ですよね。

M.A.　そうなんです。『とらにゃん』はアイテムを棚に置いてる見せ方をしているので、ちゃんと棚に置いてるように見えるよう撮影時にパースを揃える必要があります。
当時はコロナ禍の在宅ワークだったので家で作業をする期間もあり、実際にゲーム内と同じような棚を作って部屋の壁に貼り付けて確認したりしていました。

N.S.　私もこのチームに配属されたばかりの頃に、ジオラマ作りをお手伝いしました。
ジオラマ班のみんなと絵の具でジオラマに色を塗っていたんですけど、文化祭みたいですごく楽しかったです（笑）。

さざなみ島用のミニチュア

ミニチュアを撮り込み制作された画面

こうした島づくりゲームは、島を自由にレイアウトすることも楽しみの一つです。レイアウトの面でもUIデザインが重要になってくると思うのですが、どんな工夫が施されていますか？

M.A.　レイアウト変更をより快適にするため「もようがえモード」を作りました。『ほしにゃん』だとフィールド上の建物や飾りを1つずつタップして移動させたり、一度アイテムたなを開き、配置したいものを選ぶ必要がありました。今回の「もようがえモード」では画面下に一覧が出てくるため、フィールドと手持ちの一覧を同時に見ることができるので、レイアウトを考えやすく編集しやすくなっていると思います。

田島　「もようがえモード」はカメラアングルにもこだわっています。通常のフィールド画面はパノラマビューになっていますが、「もようがえモード」はカメラアングルを固定した状態で寄ったり引いたりできるので、より見やすくなっていると思います。

本当に細かなところまで快適にプレイできるようにデザインされているのですね。細部へのこだわりでは、他にはどんな工夫がありますか？

田島　私の推しの機能は、モグラのタップ機能ですね。
モグラを連打するとタップの回数分だけ報酬が得られるのですが、3Dフィールドということもあり、連打中に間違って周りの物に触ってしまうことがあります。それを回避するために最初の1タップ目だけフィールド上のタップ判定にして、2タップ目からUI判定に切り替わるようにしました。そうすることで、いくらモグラを連打しても周りの物に触れないようになっています。

M.A.　この機能が実装される前は、連打していると周りのにゃんこや建物に触れてしまって連続タップができず、「ジャマだ！」みたいなことがよくありましたね（笑）。

田島　個人的には最高の発明だと思っています（笑）。
その他に苦心したことだと、UIのデザインに直結する話ではないのですが、UI操作の上で重要な通信の課題がありました。例えば開発当時は、作物を回収する時に都度通信が走っていて、次の操作ができなかったりショップを開く度に通信を待ってすぐに商品が買えなかったり。プレイ動線の中で操作頻度の高い部分は特にエンジニアに相談して改善をお願いしていました。
他にも少し通信とは違いますが、UIからUIへ遷移するときのインアウトのアニメーションで、アウトのアニメーションが終わる前にUIのボタンは触れるようにしています。世界観的にアニメーションは重要と考えている反面、待つというストレスも改善したかったので両方どりな調整を心がけました。『とらにゃん』はインゲームとアウトゲームの切り替えがないので、これらのような待ち時間をなくす方法を模索して改善するのには苦労しましたね。
通信や実装はエンジニアの領域になりますが、操作が重いとゲームの手触りや快適さに関わってくるので、UIデザイナーの領域でもあると考えています。
直接的に我々が改善できるものでなかったとしても、プレイ感に関わることはUIデザイナーはもちろん、職種に関係なく開発者全員が見ていかなければいけないと思っています。

今後『とらにゃん』の運用で挑戦していきたいこと

『とらにゃん』も運用に入り、これから新たな島がどんどんリリースされていくことと思います。運用チームとして今後どんなことに挑戦していきたいですか？

M.A.　私はゲーム運用の経験が少ないので、新規イベントで季節もののデザインに挑戦するのが楽しみです。
10月末にハロウィンイベントを開催しましたが、今後はクリスマスやバレンタインデーのイベントも担当したいですし、夏や春の季節に合わせたかざりやお知らせ画像も出てくると思うので作ってみたいです。

N.S.　前作には他のユーザーさまの島を訪ねる機能があって、私も様々な島を見て回るのが好きでした。今のところ本作にその機能はないので、いつか機能を追加できればと考えています。
みなさん本当に素敵な島を力を入れて作って下さっていますし、私もユーザーさまの作った島を眺めて周りたいです（笑）。

田島　今後はユーザーさまに飽きを感じさせないように、UIにしても機能にしても、どんどんアップデートしていきたいと思っています。
12月に「スイーツ島」がリリースされましたが、想定していた以上にユーザーさまの進み方が早くて、まだまだコンテンツが足りていないと実感しています。それだけ熱量高く遊んでくれていることだと思いますので、ありがたいと思いつつ、同時に焦りも感じているのが正直なところです。少しでも長く楽しんでいただけるコンテンツになるように色々な仕掛けを準備してみなさんに届けていきたいと思っています。

最後にコロプラで「UIデザインをやってみたい」と考えている求職者に向けて、メッセージをお願いします。

N.S.　私は大学で映像を学んでいてUIデザインは未経験だったのですが、コロプラで先輩方にたくさん教えていただき、少しずつ順応することができました。
大学や前職でレイアウトデザインをやってきた方は、もちろんその経験が活かせると思いますが、ゲームのUIデザインはちょっと特殊だったりもします。
それこそ『とらにゃん』がジオラマやミニチュアを使って実写的な世界観を届けようとしたように、「どうすればより良いものを届けられるか」をみんなと一緒に考え、提案する力が大事になってくると思います。
自分が提案したことが実際にゲームに反映されるわけですから、すごく楽しいですし、いろんなことに挑戦できるので、やり甲斐も大きいと思いますね。

M.A.　私も職種の枠に囚われず、いろんなことに挑戦できることが楽しいです。
UIデザイナーとして画面遷移やお知らせ画像を作るだけではなく、時にはプランナー的な提案をしたり、3Dアーティストやエンジニアのような業務ができることもあって、いろんなことに挑戦できる柔軟さが、コロプラの良いところだと思っています。

田島　「コンテンツをより良くしたい」という意志や考え方は、コロプラにおいてとても大切なことです。今回のリアルなテイストというアイデアにしても、最初はほんの思いつきにすぎなかったのが、実際にやってみようという話になり、えいや！でここまで来た感じなんですよね。「コンテンツをより良くしたい」という提案であれば、コロプラは前向きに検討して許容してくれる会社です。むしろ「より良くしたい」という熱意のある方にこそ活躍してほしい会社だと思います。これはUIデザイナーに限らず、コロプラのあらゆる職種に言えることですが、単なる作業者になることなく、自分で考えて挑戦していけることがコロプラの魅力だと思います。
今後は今話題のAIが多くのことをサポートしてくれるようになり、より熱意を実現できる可能性が高まっていくと思うので、その人間的な熱意の部分、クリエイティブへの強い思いと熱量を持った方を歓迎しています！

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

▼合わせて読みたい ▼