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

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

「勝利の女神:NIKKE(ニケ)」画面がかっこいいので、使われているフォントを調べてみました

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

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

 

今回は「勝利の女神:NIKKE」(以降、ニケ)でのフォントの使われ方をご紹介します。「ニケ」はスタイリッシュな画面作りを心掛けているように見えました。その中でもフォントが果たしている役割が多いように感じたため紹介します。
以下、主な特徴です。

 

サンセリフ体の大文字が中心

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

「ニケ」では、主にサンセリフ体のフォントと大文字を組み合わせてデザインされていました。
個人的には、サンセリフの大文字を中心にしたデザインにすることで、SF感が表現されていると感じました。

というのも、SF映画に登場するUIはサンセリフ体と大文字の組み合わせで構成されがちです。

例えば以下の様な理由があげられますが、「そういうもの」として理解する方が単純そうです。

  • 実際のシステムを模した歴史的な経緯
  • 読ませにくく、複雑に見せるための手法

詳しくは以下の書籍に書かれているので興味がある方は読んでみても良いかもしれません。

 

 

長体が多く使われている

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

「ニケ」では長体が使われがちな点にも注目です。

長体にすることで1行あたりにより多くの文字を表示することができます。
「ニケ」は縦画面を基準にデザインされているため相性が良さそうです。

また、単語ごとにまとまるため黒味が増し、画面のインパクト、重厚感、情報のメリハリなどの効果も期待できそうです。

 

「ミリタリー×SF×女性」で分類&使用フォント

「ニケ」で使われているフォントを分析するにあたり、今回は主に以下の3つの要素に分類して考えてみました。

  • ミリタリー
  • SF
  • 女性

それぞれどのような捉え方をするか紹介します。

ミリタリー:Spaceeland Eight

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

まずはミリタリーの要素を感じたフォントを紹介します。
「ニケ」ではメインで使われているフォントかと思います。

見た感じ「Spaceeland Eight」というフォントを元にデザインしてるように見えます。

元になったフォントのカーブだけ処理してるのかな。
欧文フォントは数が多いので間違ってるかもですが…雰囲気は近い気がします。

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

大文字で力強いフォント。かなり強めの長体。
文字間は狭く、圧迫感、重厚感のある印象。

ガチャ結果画面やステージクリア画面など、繰り返し表示される場所で大きく使われているので印象に残りやすい。
読ませるよりも見せることを優先したフォントであるため、小さく表示する場面ではあまり使われない。

 

▼他の例

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

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

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

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

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

 

SF:Industry

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

SFっぽいなと感じたのはこちらのフォントです。
ソリッド、フラットなアウトラインを持つサンセリフフォントです。静かで落ち着いた雰囲気に感じました。

見た感じ「Industry」というフォントを使ってるのかな…。

大文字の「Q」だけ文字の形が全然違うのですが、他の文字は比較的近い形をしているのと、太文字や斜体などファミリーの数も豊富なので、統一感を出しつつ変化に富んだデザインが出来そうです。
欧文フォントは数が多いので間違ってるかもですが…雰囲気は近い気がします(ずっと言う)

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

 

なお、使用箇所は多いのですが、一時的な演出などで使用されたり、小さく表示されることが多いため、印象に残りにくいかもしれません。

 

▼他の例(たぶん)

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

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

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

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

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

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

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

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

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

 

 

女性:Azonix Bold

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

最後に紹介するのが、丸みがあり、繊細な印象を与えるフォントです。
A、L、Eなど、見た目に特徴のある文字が多いです。

見た感じ「Azonix Bold」というフォントを元にデザインしてるのかな。

欧文フォントは数が多いので間違ってるかもですが…雰囲気は近い気がします(ほんとに自信が無い…)

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

 

キャラのエピソードや戦闘に入る前の演出で使われています。
「ニケ」の世界観を表現する、面白いデザインのUIだと感じました。

▼他の例(きっと)

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

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

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

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

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

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

 

他にも色んなフォントが使われている

「ニケ」では今あげた3つ以外にも色々なフォントが使われています。
ぜひゲームをプレイして、それぞれの使われ方を確認してみるのも面白いかもしれません。

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

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

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

 

 

以上です。
カッコイイ画面をデザインしたい時の参考になれば幸いです。

このブログではこのようにゲーム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

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

勝利の女神:NIKKEのコンテンツ利用ガイドラインです

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

 

お問い合わせ