はじめまして！『NINJA GAIDEN4』でリードUIアーティストとして参加しました近藤知之です。今回は本作を彩るUIのデザインについて小ネタを交えてお話しします。
■UIってどんな仕事？
UI（ユーザーインターフェイス）とは、画面上に表示される各種情報のことを指します。HPゲージやさまざまなゲージ類、アイコン、アイテムの獲得表示、各種達成通知、メニュー画面などが、その代表例です。UIアーティストの主な仕事は、これらの要素を分かりやすく、かつゲームの雰囲気に合った形でデザインし、実装することです。
ここ10年ほどで、UIという分野は以前にも増して注目されるようになり、ご存じの方も多いかと思います。もしご興味をお持ちいただけましたら、ぜひ弊社の歴代タイトルに関する記事もあわせてご覧いただければ幸いです。
『ベヨネッタ オリジンズ: セレッサと迷子の悪魔』：
UIデザインについて | ベヨネッタ オリジンズ 開発ブログ
『ASTRAL CHAIN（アストラルチェイン）』：
『ASTRAL CHAIN』のUIについて：前編（UIアーティスト 大西＆斉藤）
『NieR:Automata（ニーア オートマタ）』：
『NieR:Automata』のUIデザイン
『BAYONETTA 2（ベヨネッタ2）』：
『ベヨネッタ2』のUIデザイン
『MAX ANARCHY（マックス アナーキー）』：
UIデザインのフレームワークについて
『BAYONETTA（ベヨネッタ）』：
UIのデザイン
■UIコンセプト（意図）について
今作のUIコンセプトは、ズバリ「SF風 忍者インターフェイス」です。開発初期から「サイバーパンク感」をテーマにしていたので、UIもその世界観に合うようにアイデアを広げていきました。ゲーム内でこのあたりを詳しく説明することはありませんが、世界観になじみ、「実際にその世界にあっても違和感がない」デザインを目指しています。
具体的には、現代社会で暮らす忍者が本当に使っていそうなデバイスの画面をイメージしながらデザインしています。また、デザインに説得力を持たせるため、「忍者集団は外界との接触が制限されていて、高度な技術を持ちながらも独自の進化を遂げている。そのためUIも古来の日本文化が色濃く残ったまま発展している」という裏設定も用意しました。こういった部分は、忍具やお札の装飾をUIに取り入れて、レトロフューチャーな雰囲気で表現しています。
ちなみにこの裏設定は、あくまでデザインを考える上でイメージを膨らませるためのもので、公式な設定というわけではありません。でも、こういったバックストーリーを想像しながらデザインを作っていくのも、UI制作のおもしろい部分だと思っています。
ゲーム中のUIデザイン
こうしたコンセプトをディレクターやアートディレクターに提案した際は、思いのほかスムーズにデザインが決定しました。ただ、そこに至るまでは配色や装飾のパターンを繰り返し試行錯誤しています。最終的に選んだ赤と黒のカラーリングは、「血」をテーマにした世界観にも、単色モニターっぽいレトロフューチャーな雰囲気にもよく合っていると感じています。
最初期のデザイン画像
提出直前のデザイン画像
コンセプトが決まった後も、実際にゲームに実装したUIを確認しながら、装飾や色の微調整を何度も重ねています。ゲームプレイ中の見た目は、静止画で確認するときとは印象が違うため、「見やすさ」や「情報の優先度」、「チープに見えないか」など、細かな点までしっかり調整しました。
実装後も、ボタンや背景の装飾、全体の色味やアイコンの色、さらに数字フォントを自作したりと、細かい部分までとことんブラッシュアップしています。
コンセプト決定時のデザイン画像
実装後の画像
■UIのアニメーションについて
本作のUIアニメーションでは、「イーズアウト」と呼ばれる動きの緩急をつける手法を多く採用しています。これは、動き始めを速く、終わりにかけて徐々にゆっくりにすることで、自然で心地よい印象を演出できるのが特長です。また、画面全体のアニメーションは、表示時にはやや長めに、消える際には短めに設定することで、よりスムーズな画面遷移になるよう工夫しています。
さらに、選択中のボタンには緩やかな前後移動や装飾のループアニメーションを加えることで、画面内で目立つようにし、動きのあるものと静止しているもののルールを明確にしています。この工夫によって、自然な視線誘導が働くよう意識して制作しています。
オプション画面の遷移アニメーション
その他の表現演出についても、さまざまな手法を取り入れています。特に演出面では、仕様には含まれていないものがほとんどですが、UIを触っている時間そのものが楽しさにつながるよう、アイデアを盛り込みました。
たとえば、画面遷移時にはドットパターンや歪み、画面の湾曲といった表現を使っています。これは「忍者デバイスが市販品や既製品ではなく、独自に作られたもの」という設定から着想を得ており、遷移の瞬間に画面が不安定になるような演出になっています。
メインメニューの遷移アニメーション
メインメニューでは上下に格子状の装飾を配置し、それを前後にアニメーションさせることで、画面に奥行きを持たせています。
所持品画面のアニメーション
「武器と装備」画面では、プレイヤーキャラの体を流れる「気」の流れをイメージした人体図を回転するアニメで表現し、サイバーな雰囲気を強調しています。また、カーソルの位置に応じて人体図のポインターの位置が動くようになっており、よりインタラクティブな仕上がりになっています。
武器と装備画面のアニメーション
NPCメニューの表示時には、そのNPCごとのマークと、データ読み込み風のゲージを組み合わせて、サイバー感を演出しています。
NPC画面の遷移アニメーション
「煉獄」画面の表示時には、SF映画のように上下に文字が流れるアニメーションを取り入れ、特別感のある演出に仕上げました。
煉獄の遷移アニメーション
リザルト画面の表示時には、直前の画面に上下から帯がかぶさってくるアニメーションと、「データベースにアクセスしている」ような演出を加え、チャプター終了のタイミングがより明確になるようにしています。
リザルトの遷移アニメーション
■UIの小ネタについて
その他にも、随所に細かい小ネタを仕込んでいますので、いくつかご紹介します。
メインメニューで一瞬だけ表示される「忍邪断滅」という四字熟語は、自作の言葉で、忍びの心得を表現しています。
メインメニュー遷移アニメーションのテンポづくりのために表示している四字熟語
また、メニュー内で多用している日本語の文字装飾は、「準日本製デバイスが日本語でコーディングされている」というイメージから配置しました。上下に流れる装飾についても、本作のテーマである雨と重ね合わせ、メニュー画面で雨が流れているような印象を演出しています。
日本語でプログラムされているイメージを表す装飾
雨を模したメニュー画面のデジタルアニメーション
HUDの通知表示アニメーションでは、よく見るとクナイが飛んでいるのも小さなこだわりポイントです。
HUD通知のアニメーションに含まれるクナイ
さらに、各種演出に使われているヤクモの目元イラストは、「忍者龍剣伝」のカットインをオマージュしたものになっています。
演出アニメーションに含まれるカットインを模したデザイン
■UI以外のデザインについて
その他、UI以外のデザインにも幅広く携わりました。ショップ画面に表示されるモニターデザインについては、当時担当者が決まっていなかったため自ら立候補し、依頼されたわけではありませんでしたが、SF映画のモニタグラフィックをイメージして情報量の多いデザインに仕上げました。ユーザーが頻繁に目にする部分でもあり、ゲームの雰囲気づくりにも貢献できたのではないかと思います。
デザイン前後のショップモニター
また、家紋の制作も担当しました。鴉はひし形、隼は丸いシルエットと、それぞれのモチーフを差別化して判別しやすくし、遠目でも認識できるような密度感のある家紋らしいデザインにまとめています。
鴉一門/隼一門の家紋
敵組織のエンブレムも担当し、龍の漢字を逆三角形のシルエットに落とし込むことで、サイバー感と和風の雰囲気を両立させました。
敵組織のエンブレム
このほか、劇中で使用される文字も制作しています。干支と目をモチーフに取り入れ、禍々しい印象を持たせたデザインに仕上げました。
劇中に登場する文字
■おわりに
いかがでしたでしょうか。本作のUIは、「分かりやすさ」や「使いやすさ」はもちろん、ゲームの世界観から広げたさまざまなアイデアを随所に盛り込んでいます。発売前ということもあり、今回ご紹介できなかった仕掛けもまだまだ多く残っています。ぜひ実際にゲームをプレイして、エンディングのその先までご自身の目で確かめていただければ幸いです。
それでは、良い超忍ライフを！
 |
近藤 知之 (Tomoyuki Kondo) 2014年にプラチナゲームズにUIアーティストとして入社。『スターフォックス ゼロ』『World of Demons – 百鬼魔道』『BABYLON’S FALL』『ベヨネッタ オリジンズ: セレッサと迷子の悪魔』など、最新作『NINJA GAIDEN 4』を含む複数タイトルでリードUIアーティストを担当している。 |