こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のフォントの使い分けについて考えてみました。
実際のルールがどうなっているのか分かりませんが、少なくとも複数のルールで運用されているように見えたため、ここでは可読性、意匠性、設計に分けました。
以下、目次です。
可読性
まずはフォントの「可読性」を利用している箇所について２点紹介します。
1-1：レイアウトの都合で文字が小さく表示される箇所で可読性を高めたい場合はゴシック体
読ませたい文字がレイアウトの都合で小さく表示される場合、ゴシック体が使われているように感じました。
個人的には、デジタル端末で文字を読む場合、解像度の関係なのか明朝体よりゴシック体の方が可読性が高く感じます。
日常生活の場合、文字や文章の一部が読めなくても読める部分から推測し、ある程度は解釈できますが、造語が多いゲームの場合だと推測や解釈が難しい箇所もあり、ややストレスに感じる場面もあるかもしれません。
少しでもストレスを減らすため、読ませたい文字が小さい場合、ゴシック体を使うのは理にかなっているように感じました。
▲ ユーザーの判断に必要なクエスト名はゴシック体
1-2：可読性の差を利用し、重要な情報を強調する
書体による可読性の差を利用して、重要な情報を強調していると感じました。
例えば、戦闘中に表示される数字に注目すると、リキャストタイムのみゴシック体が使われています。周囲が明朝体であることもあってか、目が留まりやすくなっていると感じました。
また、リキャストタイムの数字は表示されている間は常にカウントダウンし続けるため、静止している数字と比較して読み取りにくい特性があります。ゴシック体を用いることで少しでも読み取りやすくしたい意図もあったのかもしれません。
▲バトル中の画面
リキャストタイムのアニメーションはこんな感じです。
小数点第一位まで表示されているため、かなり目まぐるしく数字が動いています。
▲リキャストタイムのアニメーション
獲得アイテムの数字は明朝体です。
基本的には大きく動きません。
▲獲得アイテムの数字は明朝体
意匠性
次にフォントの「意匠性」を利用している箇所を２点紹介します。
2-1：装飾と合わせたフォント選び
「星になれ」では、曲線的で抑揚のある装飾とフォントを一緒に使う場合、明朝体を採用し、見た目の一体感を表しています。
例えば、章タイトルでは中世ファンタジーらしい装飾と共に明朝体が採用されています。
▲装飾と書体のデザインがマッチしている
2-2：ボタンやアイコンのデザインと合わせたフォント選び
ボタンの中の文字にはゴシック体が採用されていました。
好みの範疇ですが、フラットなデザインの場合、ソリッドなタイプフェイスの書体と合わせると一体感を得やすいのかもしれません。
▲ボタンにはゴシック体が採用
UIとフォントの組み合わせについて少し補足します。
単にフラットなボタンデザインだからゴシック体を採用した、という話ではないと考えています。
「星になれ」はグラフィックの描き込みが多く、情報量の多い画面です。
▲「星になれ」のマップ画面。描き込まれており情報量も多い
また、多くのボタン類は色数や装飾などの情報は少なめです。
▲情報量が少なめなアイコンたち
結果的に背景やキャラなどのグラフィックとUIパーツの間に情報量のコントラストが生まれています。
かなり感覚的な解釈ですが、グラフィックとUIパーツとで情報をグルーピングした際、双方が引き立ちやすくなるため、UIパーツと一体感が強いフォントを選んだのかな、と考えました。
設計
最後にフォントを利用した「設計」について３点紹介します。
3-1：見出しは明朝体、本文はゴシック体
「星になれ」の基本的な文字組みでは見出しに明朝体、本文にゴシック体が使われる傾向があります。世界観を含むような詩的な見出しには明朝体が、読ませたい本文にはゴシック体が適切だと感じました。
▲見出しは明朝体、本文はゴシック体
3-2：上位階層は明朝体、下位階層はゴシック体
「星になれ」に限らず、ゲームにおいては情報の組み合わせが多くあるため、必ずしも見出しと本文が明確に分けられている場所ばかりではありません。
ただ、 大まかな傾向として、上位階層は明朝体、下位階層はゴシック体を採用する傾向があると感じました。
例えば、クエストリストでは最も小さな情報のみゴシック体、それ以外は明朝体でした。
▲最下層の情報のみゴシック体
3-3：セリフは明朝体、選択肢はゴシック体
会話中のセリフは明朝体、選択肢はゴシック体が使われていました。
▲セリフは明朝体、選択肢はゴシック体
これは、上で紹介した「上位階層は明朝体、下位階層はゴシック体」と同じような解釈ができると思います。
ただ「上位階層は明朝体、下位階層はゴシック体」と異なる点として、選択肢の場合は読ませるだけではなく「選択させる」という役割があります。
- ゴシック体にすることで、没入感がリセットされ、選択肢であることがより意識される
- ゴシック体を採用することで、ボタン同様に一体感が生まれる
このように役割が異なるため、ゴシック体を利用しているのかな、と考えました。
長くなりましたが、改めてまとめると以下の７点を挙げさせていただきました。
- 1-1：レイアウトの都合で文字が小さくなる箇所で可読性を高めたい場合はゴシック体
- 1-2：可読性の差を利用し、重要な情報を強調する
- 2-1：装飾と合わせたフォント選び
- 2-2：ボタンやアイコンのデザインと合わせたフォント選び
- 3-1：見出しは明朝体、本文にはゴシック体
- 3-2：上位階層は明朝体、下位階層はゴシック体
- 3-3：セリフは明朝体、選択肢はゴシック体
以上です。
複数のフォントを採用する場合の使い分けの参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「星になれ ヴェーダの騎士たち」のガイドラインを確認したところ、ブログの記事（文書）に利用可能な旨が書かれていました。
主な参照箇所を抜粋します。
- ファンコンテンツの範囲には以下が含まれます！
· 文書、絵、アートワーク、ウェブトゥーン、小説、ストリーミング映像、ファンページ、コスプレ衣装の作成等
【公式コンテンツとの混同を防止する】
- HYBE IM及び開発会社が公式に作成したコンテンツとの誤解を与えないようにしてください。以下のとおり、作成したファンコンテンツを配布又は共有する際に、公式コンテンツではない旨を表示するという方法もあります。
「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
