こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からキャラクターのイメージカラーを採用したUIをご紹介します。
最近色んなアプリで見かける気がします。体感ですが、2020年頃から徐々に見かける印象…流行りなのでしょうか…？
以下、概要です。
キャラごとにUIの色が変わっている
「ブルーロックPWC」では一部のUIにキャラクターのイメージカラーを反映させています。反映している範囲は主に以下の２か所です。
- ホーム画面
- キャラプロフィール
見た感じ、背景の色を変更するだけでボタンや文字の色などは変更していないようです。
▲ホーム画面でのキャラ切り替えの挙動
▲キャラプロフィールでのキャラ切り替えの挙動
面白いと感じたのは、構造的には背景の色だけ変えているけど、結果的には文字の色も変わっているように見せている点です。
メニューのアイコンを見ると文字の色が背景の色になっていることが分かります。
▲背景にあわせて文字の色も変わっている
恐らく、以下のような仕組みになっていると推測します。
- アイコンの一部を文字の形で抜く
- アイコンから背景が透けて見える
- 結果的に背景の色が文字の色になるように見える
この見せ方であれば、UIにもキャラのイメージカラーを反映させたいと考えても、背景色を変更するだけで済むのでコストも低く抑えられそうです。
また、この手法を取り入れる際の注意点は以下が考えられます。
他にもあると思うので、ご検討の参考程度に。
- 多言語対応の際に言語ごとに画像を用意する必要がある
- 背景色が暗いと文字が見にくくなる
- 色弱対応が難しくなる
イメージカラーがグラデーションのキャラもいる
「ブルーロックPWC」のキャラのイメージカラーは基本的には単色ですが、一部のキャラのイメージカラーにはグラデーションが設定されています。
世界観を重視しているのか、例外を許容した面白いルールだと感じました。
▲イメージカラーがグラデーションのキャラの例
反映しない箇所もある
キャラのイメージカラーを反映させない箇所の例も紹介します。
例えば、以下で使用しているグラフィックにはキャラクターのイメージカラーは反映していません。
- 所持キャラ一覧に表示するキャラのサムネイル
- ユーザープロフィールを示すサムネイル
- キャラのスキンごとのサムネイル
▲キャラ一覧のサムネイル
▲ユーザープロフィールのサムネイル
▲キャラスキンのサムネイル
キャラのイメージカラーを適用すると困ったことになるから適用していないと思います。察するに以下の事情が関係していると推測します。
- サムネイルに含まれる属性やレアリティなどの情報と、キャラのイメージカラーを干渉させないため
- 世界観に対する没入感よりも、属性やレアリティなどの伝わりやすさを優先させたい箇所であるため
- サムネイルのように並べて表示する場合、画面全体の色数が多くなり、画面内の情報の優先度付けが機能しなくなる懸念があるため
などなど。色々ありそう。
キャラのイメージカラーを適用する範囲にはある程度注意が必要かもしれません。
以上です。
UIにキャラクターのイメージカラーを採用したい場合の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ブルーロック Project: World Champion」のガイドラインを確認したところ、以下の記載がありました。
当社は、個人であるお客様が、プレイ動画等を利用した動画や静止画等を、適切な動画や静止画の共有サイトに投稿することおよび以下で指定するシステムにより収益化することに対して、著作権侵害を主張いたしません。
動画投稿ガイドライン | 「ブルーロック Project: World Champion」ゲーム公式サイト
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
