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つの基本的なルールが使用されました。

• すべてのメニュー機能には、 ジョイスティックとO / Xボタンを使用してアクセスできます 。
• 画面上のコントロールプロンプトは非常に簡潔である必要があります。通常は、上記の3つのコントロールのみを説明する必要があります。

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と機械的キャラクターを開発するのに大いに役立ちました。