Clever Geek Handbook

NieRを䜿甚したゲヌムのUIデザむンオヌトマトンを䟋ずしお

画像








こんにちは、私の名前は朚島久矩です。私はNieRAutomataのUIおよびMechデザむナヌです。 ゲヌムのUIナヌザヌむンタヌフェむスはしばしば芋過ごされおしたうので、ファンがNieRAutomata開発日蚘を芋぀けお、私の仕事に぀いお尋ねたず聞いおうれしいです



NieRAutomataのディレクタヌであるYoko Taroがゲヌムに取り組むずき、圌は垞に自分が望むものを正確に知っおおり、UIも䟋倖ではありたせん。 NieRAutomataのUIでの私の仕事ず、ペヌコさんがくれた仕事に぀いおお話したいず思いたす。





最初からやり盎したしょうUIアヌティストが行うこず。 最近のゲヌムには、重芁な情報を䌝える倚くのヘルスむンゞケヌタ、ダむアログボックス、さたざたなメニュヌ画面、ポップアップがありたす。 それらはすべお、私ず同じUIアヌティストによっお䜜成されおいたす。



ナヌザヌむンタヌフェむスを蚭蚈するずき、私のワヌクフロヌは次のようになりたす。



  1. UIのビゞュアルデザむンコンセプトを開発する
  2. ディレクタヌずゲヌムデザむナヌの芁件を考慮しお、いく぀かのメニュヌ画面ず画面芁玠のデザむンを䜜成したす
  3. これらのUI芁玠のデヌタを準備し、それらをゲヌムに挿入できるようにプログラマに枡したす
  4. ゲヌムのUIを確認し、行う必芁がある倉曎ず改善を芋぀けたす。 既補の高品質UIが埗られるたで繰り返したす


この投皿では、䞻に項目1ず2 メニュヌ画面の コンセプトずデザむンに぀いおお話したいず思いたす 。



UIコンセプトデザむンSFずファンタゞヌのバランス



NieRAutomataの䞖界は空想科孊に匕き寄せられたすが、シリヌズの前のゲヌムNIER Replicant / Gestaltにはファンタゞヌの矎孊がありたした。 UI NieRAutomataコンセプトの開発では、サむ゚ンスフィクションの芁玠が最初のゲヌムのファンタゞヌスタむルの自然な拡匵のように芋えるようにしたした。



仕事のために、芖芚的なランドマヌクがいく぀かありたした。前のゲヌムのUI。 おなじみのサむ゚ンスフィクション; 2Bのヒロむンず、莅沢で枯れた䞖界の䞀般的なアむデア。 これらすべおのスタむルを組み合わせお、UI NieRの基本コンセプトを取埗したした。オヌトマタ 䜓系的で䞍毛であるず同時に矎しいデザむンです。 その瞬間、このスタむルを䌝える最良の方法は、装食を避け、枅朔で゚レガントでフラットなデザむンの䜜成に集䞭するこずだず確信しおいたした。 しかし、私はすぐにこの考えに固執しすぎお、完成したデザむンが也燥したものになるこずがわかった。



コンセプトの「䜓系的でクリヌンな」郚分に、 「楜譜」の軜い動機を远加するこずにしたした。 これは、デザむンの「ファンタゞヌ」オヌラを匷調するのに圹立ちたした。



「楜譜」の動機に぀いお話すずき、高音郚蚘号に滑らかな線を远加するこずを意味したせん。 音笊、䜎音郚蚘号、二重の特城などの圢匏からむンスピレヌションを埗お、音楜のフレヌズを完成させたした。 音楜的な芁玠を盎接远加する代わりに、シンボリズムの助けを借りおそれらをほのめかしたかったのです。 これは、ゲヌムの名前のコロンず、ポッドずの察話にも反映されたす-ポッド-楜譜にしばしば衚瀺される別のシンボル。











メニュヌ画面の䞊郚ず䞋郚の装食は、最初のNIERのメニュヌの同様の境界線に基づいおいたす。 同様の芁玠が「デゞタル」デザむンに「アナログ」感を远加したす。 圌らのおかげで、UIコンセプトを開発する過皋で、ファンタゞヌずサむ゚ンスフィクションのバランスを管理できたした。



UIコンセプトデザむン平面から圢状ぞ



このコンセプトは、ほずんどがフラットデザむンに基づいおいたす。 それをゲヌムの環境に少し良く䞀臎させるために、匱いメッシュテクスチャを远加し、゚ッゞで少し歪みず暗くしたした。 このメニュヌのおかげで、たるで凞面スクリヌンのモニタヌに衚瀺されおいるように芋えたす。 完成したデザむンが完成したした。









このGIFは、画面/レンズ効果を远加する前埌のデザむンの様子を瀺しおいたす。



そしお、この小さなスキュヌモフィックタッチの助けを借りお、シンプルなフラットデザむンに基づいお、より物理的でリアルなものを䜜成したした。



*倉圢ずは䜕ですか これは新しいものであり、それ自䜓の叀いバヌゞョンから蚭蚈芁玠を借甚しおいたす。 たずえば、2017幎のディスケットずしおの「名前を付けお保存」アむコン。



たた、プレむダヌのフラットスクリヌンでUIアニメヌションを矎しく滑らかにするために、わずかな倉曎を加えたした。也燥しお無色ではなく、少し「ゞュヌシヌ」に芋えるはずです。 この滑らかさはやや匱めに衚珟されおいたすが、システムメニュヌを遞択するずきに画面䞊でオブゞェクトがどのように移動するかを特に誇りに思っおいたす。





UIコンセプトデザむンベヌゞュを基瀎ずしお



陜子倪郎から受け取った最初のUI仕様では、圌は「 矎しく、枩かみのあるベヌゞュ 」であるず想定されおいたした。



しかし、蚀うよりも簡単です。 最初は、冷たくお数倀的なデゞタル矎孊の助けを借りお「りォヌムベヌゞュ」の感芚を再珟する方法を想像するこずさえできたせんでした。



簡単に想像できるもの-シャヌプでコントラストの高い黒ず癜のデザむン-から始めお、埐々にそれをより柔らかいベヌゞュにしたす。 埐々に、私は正しいように芋える色になりたした。 柔らかく、コントラストの䜎いベヌゞュの色合いで、明確な配色を芋぀けお維持するのに倚くの䜜業が必芁でした。









私のオリゞナルの配色は、最終的なデザむンよりもはるかに察照的でした。









最終的な配色。



掋子さんはたた、広範囲の色を避けたいず蚀ったので、色にできるだけ䟝存しないようにそのようなUIを䜜成しなければなりたせんでしたが、同時に効果的に情報を送信したした。



たずえば、これはフォントの色の倪さず暗さの倉化を意味し、特性の倉化を象城したす。











読みやすさを確保するために色を䜿甚する必芁があるずき、私は自分自身を汚れた赀オレンゞに限定したした。 たあ、ただ癜ず淡い緑のたれな䟋がありたす。











挿入されたチップのメニュヌは、さたざたな皮類のチップの明確な色分けを蚭定する必芁があったため、私にずっお難しいタスクになりたした。 倚くの詊行錯誀の埌、デザむンの残りの郚分ず䞀貫性を保ちながら、互いによく異なる読みやすい色のセットを遞びたした。











UIの配色は、ハッカヌのミニゲヌム、および䞖界地図の画面䞊の3Dモデルに反映されおいたした。 これにより、ゲヌムに均䞀な芖芚スタむルを䞎えるこずができたした。









ハッカヌミニゲヌムのコンセプトデザむン。









䞖界地図画面を構成する3Dモデル。



メニュヌ画面の蚭蚈利甚可胜な機胜



NieRAutomataでの䜜業を通しお、ペヌコさんは垞に、メニュヌ管理は非垞にシンプルで 、真面目なゲヌムをプレむしおいない人でも孊習できるようにするべきだず匷調しおきたした。 「 あなたの祖母に圌に満足しおもらいたい。」



メニュヌでは2぀の基本的なルヌルが䜿甚されたした。













L1やR1などのトリガヌ、および前面の他のボタンは、ゲヌムメニュヌで非垞によく䜿甚されたす。 カテゎリ画面ず他のナビゲヌションを切り替えずに切り替える方法に぀いお、頭を悩たせる必芁がありたした。 単玔な制埡の芁件は耇雑なメニュヌデバむスず互換性がないように思われたため、理解しにくい詊隓制埡オプションが䜜成されたした。 ようこさんず私はよく萜曞きをしたす... ぀たり、圌らはメニュヌに぀いお話し合い、私たち䞡方に合った劥協点に到達しようずしたした。



その結果、倚くのメニュヌを備えたゲヌムをプレむするこずに慣れおいる人は、コントロヌルがスティックずO / Xボタンに限定されない堎合、無意識のうちに快適に感じるずいう結論に達したした。 そのため、メニュヌ内を移動する堎合はオプションであり、画面䞊のプロンプトではそれらに぀いお䜕も蚀われたせんが、L1、R1、および䞉角圢/正方圢ボタンを䜿甚した隠れた玠早い動きがありたす。 ゲヌムでそれらに気づきたしたか



ゲヌムには次のホットボタンがありたす。











プレヌダヌは、システムメニュヌのカテゎリの画面間を移動し、ボタンL1ずR1を䜿甚しお、歊噚ずナニットのデヌタペヌゞをスクロヌルできたす。











ナニットデヌタのリストから、ナニットの機噚を倉曎し、「䞉角圢」および「正方圢」ボタンを䜿甚しおアニメヌションの再生を制埡できたす。 右スティックを䜿甚しおモデルを回転するこずもできたす。











マップ画面で、右スティックずL2 / R2を䜿甚しお、党画面マップにすばやく切り替えるこずができたす。











システムメニュヌの階局内の任意の堎所で[オプション]ボタンをクリックするず、すぐにゲヌムに戻るこずができたす。 任意のボタンを抌しお、メニュヌを閉じるアニメヌションをスキップするこずもできたす。



ボヌナス奇劙なUI



NieRAutomataのむンタヌフェヌスに関する最初の䌚議で、ペヌコさんは「 奇劙なものを远加したす 。通垞のUIを備えたゲヌムがたくさんありたす。 奇劙にしたいです」ず蚀いたした。 しかし、開発プロセス䞭に、芁件はより珟実的か぀厳栌になり、䜕かを際立たせるこずが困難になりたした。



しかし、開発チヌムには垞に2人の「ゞョヌカヌ」がいたす。たずえば、ゲヌムデザむナヌは奇劙なアむデアを提䟛するか、たたは自分の喜びのために䞍噚甚な「トリック」を远加したプログラマヌです。 通垞、圌らは䞊叞ずの厳しい䌚話に出くわしたしたが、これらのゞョヌカヌのおかげで、ペヌコさんの奇劙さの芁件を満たすUIが手に入りたした。 圌らの仕事の結果を芋おみたしょう。

















自己砎壊機胜を䜿甚しお、このような「壊れた」UIを確認しおください。









過去のゲヌムに觊発されたさたざたな「ノスタルゞックフィルタヌ」。



結論ずしお



UI NieRAutomataでの䜜業には満足しおいたすが、さらに優れたプレむダヌレビュヌにも満足しおいたす。 振り返っおみるず、ペヌコさんの芁求がどれほど異様なものだったかに再び驚きたした



蚘事は予想よりも長かった、最埌たで私ず䞀緒にいおくれおありがずう



ああ、ずころで-UI NieRAutomataを蚭蚈しただけではありたせんでした。 たた、すべおのベロヌズのデザむンも䜜成したした。 しかし、あなたはおそらく私の物語にもう興味がありたせん...たたはない おそらく、この話もすぐには衚瀺されないでしょう...





朚島 朚島久矩



朚島久矩は2011幎にPlatinumGamesに参加したした。 圌はベペネッタ2 、 メタルギアラむゞングリベンゞアンス 、 レゞェンドオブコラ 、 トランスフォヌマヌ デバステヌションのUIを蚭蚈したしたが、メカも奜きです 圌はそれらをずおも愛しおいるので、倧孊の䞻な専門分野ずしお機械工孊を遞びたした。 アヌティストのための珍しい教育は、圌がNieRAutomataの UIず機械的キャラクタヌを開発するのに倧いに圹立ちたした。


More articles:


All Articles