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

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

「ガール・カフェ・ガン」見落とされがちがサムネイルのデザイン。ガルカフェのデザインはスッキリしている

こんにちは、ちょこです。

 

「ガール・カフェ・ガン」のキャラクターのサムネイルのデザインと種類について考えてみました。

リストに使われるサムネイル

f:id:appgameui:20191223083701p:image

こちらはキャラ一覧などのリストに使われている画像です。
見た限り一番小さいサムネイルです。

1枚のサムネイルの中に「顔グラフィック」「レアリティ」「武器種」「属性」「役割」「レベル」

場面によっては「編成しているか」「編成可能か」「保護しているか」などが分かるように情報が詰まっています。

f:id:appgameui:20191225070111p:image

 

特徴的なデザイン

ガルカフェのキャラサムネイルのデザインは多くのゲームでは枠のデザインになっています。

f:id:appgameui:20191226224034p:plain

枠タイプ

「枠タイプ」最も伝統的な形状です。
ガラケーの頃からあり、アルファが使えない中、狭い領域に情報を最大限詰め込める、というメリットがあり、支持されたデザインです。

f:id:appgameui:20191225215605p:plain

▲グラク

 

f:id:appgameui:20191225220614p:plain

ときめきアイドル

 

f:id:appgameui:20191225220059p:plain

▲きらら

 

f:id:appgameui:20191225220504p:plain

▲ドールズオーダー

 

f:id:appgameui:20191225220752p:plain

▲ねぎマテ

f:id:appgameui:20191225220141p:plain

ダンまち

 

f:id:appgameui:20191225221443p:plain

刀使ノ巫女

f:id:appgameui:20191225221349p:plain

▲テニラビ

 

f:id:appgameui:20191225220423p:plain

▲とある

 

枠ではない

枠ではないデザインもいくつかあったので見ていきます。

f:id:appgameui:20191225215724p:plain

▲ジャンプチ

丸いデザインです。キャラクターが枠の手前に出ているので奥行きが感じられるデザインですね。

 

f:id:appgameui:20191225215947p:plain

キャプ翼

キャラクター意外の情報量を積極的に追加していくデザインです。

ここではレアリティを強く前面に押し出しています。

 

f:id:appgameui:20191225221221p:plain

▲城プロ

レアリティよりも武器種を強く前面に押し出したデザイン。情報量はあるがメリハリもある。

 

 

f:id:appgameui:20191225220317p:plain

▲テラウォーズ

馴染ませる系のデザイン。ゲームシステム的にレアリティよりもキャラクターの情報が最も重要なのでキャラクターが見えるようにしている。

 

 

f:id:appgameui:20191225221144p:plain

▲歌マクロス
 横長のデザイン。アプリも横画面なので、上手くまとめやすい。アニメのキャプチャもあるので横長の方が素材を切り出しやすかったり、元のシーンと印象が変わらないなどのメリットがあると考えられる。

 

f:id:appgameui:20191226224034p:plain

▲ガルカフェ

上下にレアリティに関する帯をデザインするに留め、キャラクターの外側に情報を配置しているのが特徴的です。

正直「こういったデザインもあるのか」となりました。枠を被せるのではなく、土台の上にキャラクターの画像を載せるデザインの考え方を

 

中サイズのキャラクターのサムネイル

先程のサムネイルより一回り大きいデザインのサムネイルもあります。

f:id:appgameui:20191223223315p:image

f:id:appgameui:20191223223321p:image

f:id:appgameui:20191223084259p:image

面積的には先程の素材の数倍はありそうです。

 さらに大きい素材もありました。

f:id:appgameui:20191223084356p:image

 

f:id:appgameui:20191223084305p:image

 

サムネイルを改めて見て感じたこと

こうしてサムネイルを見て感じたのですが、

  1. 情報をきれいにまとめる能力
  2. 情報の優劣をまとめる能力
  3. 世界観に合わせたデザイン能力
  4. 各画面に応じたデザインをどの程度用意するか、全体最適のバランス感覚

など、割とゲームのUIデザイナーに必要な基本的なスキルが求められていることに気付きました。

この辺を疎かにすると…

  1. 情報があふれて見づらい
  2. 情報に優劣がなく目が滑る
  3. 世界観に合っていない汎用的なデザイン
  4. 無駄にたくさん作って運用が大変になったり、逆に作らなさ過ぎてチープになる

ということになるのでは…怖い。

ガルカフェは6種くらいみたいですね。
サムネイル以外にもキャラ追加のグラフィック対応があると思うので、運用コストはもう少しかかるはず。

小さいからと言って油断しがちな素材かもですが、ちゃんと考えたいと思いました。