ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「勝利の女神:NIKKE(ニケ)」キャラクターのイメージカラーをUIにも反映。ビジュアルだけではなく視認性、可読性にも考慮が必要そう

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「勝利の女神:NIKKE」(以降、ニケ)からキャラのイメージカラーを設定し、UIにも反映させている例をご紹介します。

ニケではキャラごと、衣装ごとにイメージカラーが用意されています。
イメージカラーを一部UIにも反映させることで、キャラにフォーカスした画面作りをされているように感じました。

 

以下、イメージカラーについての所感です。

 

キャラを訴求したい場面で使われている

イメージカラーはゲーム内の様々な画面で使われています。
まずはADVパートの話者名の見出しのUIパーツです。

f:id:appgameui:20231113100128p:image

分かりやすいように該当箇所を抜粋します。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

こちらですね。
無彩色の中に有彩色が使われることでアクセントになっています。

また、キャラクターのステータスなどが見れる画面でも使われていました。
背景に大きくスタイリッシュなラインが引かれています。

f:id:appgameui:20231113094951p:image

 

他にも、キャラクターのプロフィール画面では意匠性のあるUIパーツに用いられています。

f:id:appgameui:20231113100159p:image

 

こちらは3Dのミニキャラのプレビュー画面です。
ここでもキャラのイメージカラーが使われています。
3Dのキャラだけだと寂しくなりがちな画面ですが、ベタを敷くだけでも印象が変わるように感じました。
f:id:appgameui:20231113100205p:image

 

こちらは射撃モーションのプレビュー画面です。
ここでもラインが良い感じにスタイリッシュさを演出しています。
f:id:appgameui:20231113100209p:image

いくつか見てきましたが、画面の中の色数を絞っているからこそキャラのイメージカラーがより際立つのだと感じました。
キャラクターの配色計画を含め、情報整理がなされているデザインだと思います。

 

キャラごと、衣装ごとにイメージカラーが用意されている

先ほどはキャラのイメージカラーが使われている場面を紹介しましたが、次にキャラごと、衣装ごとにイメージカラーが設定されていることを紹介します。

 

メインキャラのラピは赤系です。
背景のラインは一色のベタではなく、キャラのグラフィックを透かすことで色に階調が生まれ、退屈な画面にならないようにしていると感じました。

f:id:appgameui:20231113094951p:image

 

別の衣装だと薄紫色が設定されていました。

f:id:appgameui:20231113094954p:image

 

他のキャラ(アニス)だとこんな感じです。
衣装や瞳のカラーに合わせたイエロー系ですね。

f:id:appgameui:20231113100240p:image

 

下地とのコントラストにも注意し、見やすさを考慮

ついつい目立つ背景に目が行きがちですが、アイコンや文字色にもイメージカラーが適応されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

見た限りでは、白と組み合わせてコントラストを担保しているように見えます。
キャラクターを象徴する色という視点だけではなく、文字の視認性、可読性も考慮して色を設定する必要があるように感じました。

 

以上です。

キャラクターのイメージカラーをUIにも活かしたいときの参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
勝利の女神:NIKKE」のガイドラインを確認したところ、以下の記載がありました。

1.用語の定義

ガイドラインにおいて、使用する用語の定義を以下に示します。
1)本件ゲームIP:本条2項に定める「当社オリジナルコンテンツ」に関してSHIFT UP CORP.が有する又は管理する一切の知的財産権を指します。
2)当社オリジナルコンテンツ:SHIFT UP CORP.が開発、制作、運営、配信等を行うゲームやその他創作物の世界観、ストーリー、キャラクター及びモンスターのイラスト、背景画像、バックグラウンド・ミュージック(BGM)、映像等を指します。
3)本件二次創作物:当社オリジナルコンテンツを元に、本件ゲームIPを利用し、又はクリエーターの創作要素を加えて表現及び制作した新しい制作物をいいます。例えば、イラストレーション、ゲーム関連グッズ、ビデオ、漫画、小説、ファンフィクション、ファンアート、コスプレ衣装、コスプレの写真及び動画などが含まれます。
4)本件二次創作活動:前項の本件二次創作物を製作、複製、公開、販売、頒布、配信する等の行為を指します。ただし、当社オリジナルコンテンツをそのまま再現、複製、コピー、トレースする行為、又はこれらと同様とみなされる行為は、二次創作活動と認められませんのでご注意願います。詳しくは、以下の例をご参照ください。
<二次創作活動と認められない行為の例>
スキャン等の方法で、SHIFT UP CORP.が独占的に著作権を有する公式イラストの画像データを取り込み、そのまま或いは加工したものを素材に転写し、アクリルスタンドやバッチ等のグッズを製作して販売及び公開する行為。

2.本件二次創作活動の許諾範囲

1) 基本的には、本条に定める一部の例外を除き、非営利的活動のみ許諾します。
2)個人や法人格のない団体(サークル等)が、YouTubeやTwitchなどのコンテンツ共有プラットフォームに本件二次創作物を公開し、広告収益やその他収益を得ること。ただし、本ガイドラインに反する内容又は方法で公開した場合は、当社の判断にて当該公開に関連する収益化を中止するように要求する場合があります。

勝利の女神:NIKKE|背中で魅せるガンガールRPG

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ