こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、世界観が表現されているUIパーツデザインの事例をご紹介します。
UIパーツをデザインする際に、どのようなビジュアルにするか迷うことがあるかと思います。
ストーリーを象徴するモチーフなど、何かしらの意匠を拠り所にすることが一般的かなと思いますが「NieR Re[in]carnation / ニーア リィンカーネーション」では幾何学的な紋様を基本とし、展開していました。
世界観を構成するUIパーツをデザインする際のヒントになるかもしれません。
実際の画面に使われているUIパーツを紹介していきます。
まずは画面上部のメニュー群のアイコンです。
それぞれ四角形で要素が構成されています。
特にヘルプアイコンの「はてなマーク」も直線的な要素で構成されていることに驚きました。角度に統一感があり、画面で並べた時にも不要なストレスがありません。
画面下部のメニューのアイコンも四角形で構成されています。
興味深いのはアイコンが何を表わしているのか直感的には分からない点です。
本来であれば、アイコンの役割を果たしていないデザインではありますが、アイコンを小さく表示することで相対的に文字で認知させるように誘導させているように感じました。
こちらは閉じるボタンのアイコンです。
直線の交点に大きなひし形がアクセントとして乗っているのが特徴的です。
僅かな隙間により抜け感が表現され、繊細な印象を与えているように感じます。
こちらは戻るアイコンです。
大きな面と小さな隙間のコントラストによってメリハリ感、リズム感が生まれているように感じます。
編成画面で使われているUIパーツも紹介します。
こちらはアンロックを示すアイコンです。
カメラのようにも見えますが、南京錠を直線で再構築したアイコンです。
こちらは装備を追加するアイコンです。
いわゆるプラスマークがモチーフになっています。
左右にスライドできることを示す矢印マークです。
先ほど紹介した戻るアイコンと似たデザインです。
僅かにアニメーションしており、指向性が強調され、左右に動かせることが直感的に理解できるデザインになっています。
こちらはステータスのパネルの近くに表示されている現在の位置を表わしているナビゲーションです。この場合は7ページある内の1ページ目という状態を表わしています。
ひし形にすることで画面に統一感が生まれているように感じます。
タップエフェクトも幾何学的な紋様が採用されています。
このようにひし形で構成された十字のエフェクトがタップエフェクトとして採用されています。
あとはダイアログの罫線や枠線などにも四角形のあしらいが採用されていました。
こちらが四角形で構成された罫線のあしらいです。
単純な図形の組み合わせですが、既存のどこの文化圏とも異なる、独特な世界観を感じます。
マップ画面のメニューアイコンもいわずもがなですね。
大きなひし形のデザインがメニューアイコンとして採用されています。
まとめ
今回は「NieR Re[in]carnation / ニーア リィンカーネーション」の世界観が表現されているUIパーツデザインの事例を紹介しました。
このように幾何学的な紋様でUIパーツを統一、構成することで、ゲームの中の世界観が表現されているように感じました。
直線であるため、どこか無機質でソリッドで、独特な文化を発展させてきたような印象を受けます。
ニュートラルな暖色を取り入れることで、近未来を感じるSFの世界観と一線を画しているようにも感じました。
キャラクターからモチーフを取り入れなくても、このようなアプローチが可能なのだと勉強になりました。
他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。
以上です。
UIパーツをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
© SQUARE ENIX CO., LTD. All Rights Reserved.
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「NieR Re[in]carnation / ニーア リィンカーネーション」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
画像・動画・生放送配信ガイドライン | NieR Re[in]carnation | SQUARE ENIX
主な参照箇所を抜粋します。
【利用可能な範囲】
(1)本サービスのゲーム画像およびプレイ動画（生放送配信を含み，以下「プレイ動画等」といいます）を個人利用の目的で自身のブログやツイッターなどのミニブログなどで利用すること。(2)プレイ動画等を「ニコニコ動画」「Youtube」等の動画共有サイトに配信すること（この配信動画のURLやサムネイルを個人利用の目的で個人のブログやツイッターなどのミニブログなどにリンクすることを含みます）。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
