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

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

「永遠の七日」画面に表示される情報が洗練され、迷わないUIになっていた

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

 

 

「永遠の七日」のホーム画面のUIがかなりシンプルで特徴的でしたのでご紹介させていただきます。

 

 

やることを絞っている

「永遠の七日」はかなり複雑なスキームを持っているゲームなのですが、表示する情報を絞っているので迷いません。

f:id:appgameui:20191230122551p:image

通常、表示されがちなプレイヤーのLvや名前も表示されていません。
ここまで情報が絞れるのは凄いと感じます。

 

 

基本的にいずれかの建物を選択してクエストを実行すると話が進みます。

f:id:appgameui:20200112222338p:plain

ここからシナリオを進めるか、建物を建ててバフ効果を得るかなど行います。
(建物が急に暗くなっているのは時間経過によるものです) 

 

 

f:id:appgameui:20200113135307g:plain

▲こんな感じでシームレスに遷移します

 

 

 

メニュー項目は全部この中に入れる

メニューは結構あるのですが全部右下のボタンに集約されています。

f:id:appgameui:20200112232023p:plain

端末を模したボタンデザインです。
フラットベースですが、押せるように見せるため、浮いているように影を落としたり、立体的に見せる工夫をしています。

 

 

メインのスキーム以外はほぼこの中に入っています。個々のアイコンデザインも色がメインカラーとベースカラーの2色程度に抑えられており情報量が多いにも関わらず、とてもスッキリして見えます。

 

f:id:appgameui:20200112231602p:image

f:id:appgameui:20200112231608p:image

f:id:appgameui:20200112231614p:image

 

3画面にカラムを分けているのも画面をスッキリして見せている工夫の一つに感じられます。 

 

まとめ

機能が多いゲームですが、まとめると…

  1. 情報の優先順位を決める
  2. アイコンがたくさん並ぶところは色数を整理して情報量を減らす努力をする
  3. 一度に表示する情報を整理する

かな…。
情報に関してはかなり洗練されており、多くの機能があるにも関わらず迷わずにゲームをプレイすることができたので参考にしたいなと思いました。

「永遠の七日」データダウンロード中にアンケート機能が利用できる実装でした

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

 

「永遠の七日」でデータDL中にアンケート機能が表示されたので実装事例として紹介します。

f:id:appgameui:20191230162103p:plain

手紙風でかわいいですね。
フォントも丸くてかわいいくて開発者のこだわりが感じられます。

 

f:id:appgameui:20191230162422g:plain

ユーザーの反応を知ることはより良いUIを作るために不可欠なので、こういった試みをもってユーザーのペルソナを知ろうとするのは興味深いかもしれません。

得られる数字や寄せられる感想、ネットの書き込みを参考にするだけでなく、色んな方法でユーザーの声をあつめ、開発に活かそうとする姿勢はとても良いな、と感じます。

 

なんとなくですが、今後こういった動きは加速するように感じます。
アンケート機能が流行るということではないと思いますが、何かしら新しい方法でユーザーの反応を得ようとするのではないかなと思います。

「仮面ライダー シティウォーズ」ブラウン管の歪みと走査線の表現がレトロ感を煽る

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

 

仮面ライダー シティウォーズ」TVのブラウン管っぽいデザインがかっこいいな、と思いました。

f:id:appgameui:20191231092314p:image

走査線とか比率とか、歪みとかがレトロ感あって良いですね。

 

f:id:appgameui:20191231092320p:image

よく見たら歪ませてなくて、上から黒い板乗せてるだけだったー。

f:id:appgameui:20200112162926p:plain 

とはいえ、流れで見てぱっと見分かんないし、真面目にやろうとしたらグラフィックの方が大きく歪んじゃうのでそんなに気にならないか…。こういう表現って他にあるのかな…。 

「仮面ライダー シティウォーズ」画面をかっこよくすることと、項目に英語を使うことは結び付けない方が良いです

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

仮面ライダー シティウォーズ」のメニューで英語が使われているのが気になりました。

 

むやみにメニュー内に英語を使わない方が良い

f:id:appgameui:20191231062003p:image

無闇に英語は使わない方が良いです。単純に読めないので。

「いや、読めるじゃん」って思う方がいるかもですが、英語ネイティブでもない限り瞬間的に読めないです。そして多くの方は日本語ネイティブです。
漢字と言う便利なツールがあるのでそっちを使う方が効率的です。 

 

 

矛盾が発生しがち

英語だけですべての項目を賄うことは難しいです。
他の画面ではアルファベットが無く、日本語で書かれている場所があります。

f:id:appgameui:20191231062211p:image

 

プレゼント画面でも、受け取り、一括受け取りが同じ「RECEIVE」という翻訳になっており、英語だけでは区別が付きません。

f:id:appgameui:20191231062915p:image

なので結局日本語のテキストが添えられています。 
情報が重複しているので無駄のあるデザインに感じてしまいます。

 

f:id:appgameui:20191231063033p:image

▲ホーム画面でも生産施設で発生したリソースを受け取ることができるけど、そこでも「RECEIVE」。こっちには日本語が添えられていません。

 

 

読めることが大事

文字は何より読めることが重要です。
英語を使うとなんとなくかっこ良くは見えますが陥りがちな罠です。

f:id:appgameui:20200112160555p:plain

 

英語を使いたい気持ちは分かりますが、どうしても日本語の方が理解しやすいです。

f:id:appgameui:20191231062211p:image

理解しづらいことはストレスに繋がるので配慮したいです。
見た目をかっこよくすることと、文字を英語にするということは繋げない方が良いのかもしれ前ん。

 

読ませない文字ならOK 

f:id:appgameui:20200112104241p:plain

 読ませたい文字ではなく、見せたい文字なら英語でもビジュアルで理解できるので使い分けが必要なのかもしれません。

 

ゼノンザードでも同じようなネタを扱ったことがあるので、よかったらこちらもどうぞー 

「ゼノンザード」アルファベットを見出しに使う時は注意が必要 - アプリゲームUIデザイン