こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「フェスティバトル」（以下「フェスバ」）からアイコンの優先度付けと見せ方についてご紹介します。情報の優先度付けは画面内の情報量が増え、関係性が複雑化しても意識したい点です。
以下、目次です。
それではそれぞれ詳細を記載します。
フォントを利用する
©COLOPL, Inc. ©MIXI
「フェスバ」のホーム画面では、フォントの特性を生かして情報の優先度付けに利用していると感じました。
「バトル」コマンドを始め、「ヒーロー」「バトルメニュー」などのメインコマンドは文字を大きく表示し、可読性よりもデザイン性を重視したフォントを採用しています。
「パーティ」「フレンド」「ミッション」「エピソード」などのサブコマンドは、メインコマンド群と比較して文字を小さく表示し、可読性が高いフォントを採用しています。
©COLOPL, Inc. ©MIXI
▲メインコマンドはデザイン書体、サブコマンドは可読性の高いゴシック系の書体が採用されている
グラフィックによる差別化
メニュー画面のアイコンに注目すると、優先度の高いアイコンは色数を多く使用し、優先度の低いアイコンは色数を少なくしたデザインを採用しています。
色数が多い方は有彩色、色数が少ない方は無彩色になっており、優先度付けがより効果的に作用していると感じました。
©COLOPL, Inc. ©MIXI
▲メニュー画面
色数の大きさだけではなく、ディティールの描きこみの差も大きく差別化している点も、情報の優劣を明確にしていると考えます。
©COLOPL, Inc. ©MIXI
▲色や描きこみの差別化
優先度の低い情報の情報量を下げる
背景の情報量にも注目したいと思います。
「フェスバ」のメニュー画面では色数の多い背景を採用しています。
そのうえで、何が描かれているか分からない程度にぼかし、彩度もやや下げています。
結果、相対的に彩度の高いアイコンに視線が誘導され、迷いにくいデザインになっていると感じました。
アイコンの情報量を調整するだけではなく、画面全体の情報量のバランスを取り、調和を図っているように見えます。
©COLOPL, Inc. ©MIXI
▲背景をぼかし、彩度を下げることでアイコンに視線が向きやすくなる
以上です。
複数のアイコンをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「フェスティバトル」のガイドラインを確認したところ、プレイ画像の投稿が可能な旨が書かれていました。
主な参照箇所を抜粋します。
◆『フェスティバトル』アプリ内でのプレイ動画の投稿等
『フェスティバトル』に登場するすべてのキャラクターを使用する『フェスティバトル』のプレイ動画を対象とします。◆YouTube等の外部プラットフォームを利用したプレイ動画の投稿等
『フェスティバトル』に登場するキャラクターのうち、「白猫プロジェクト」と「モンスターストライク」の ゲームオリジナルキャラクターを使用する『フェスティバトル』のプレイ動画を対象とします。
『フェスティバトル』とのコラボを含む、上記 以外のキャラクターを使用するプレイ動画は、本ガイドラインの対象外とさせていただきます。◆プレイ画像の投稿等
上記「YouTube等の外部プラットフォームを利用したプレイ動画の投稿等」と同様とします。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
