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

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

「アークナイツ」オプションにあるUI調整って何のための機能?やっぱり配信を意識している?

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

 

「アークナイツ」のオプション画面でUI調整という変わった項目がありました。 

f:id:appgameui:20200129182546p:plain

 

このオプションを変更すると、こんな感じで横幅が狭くなり、一部のUIの位置が変わります。

f:id:appgameui:20200129205152g:plain

▲ぐいーんと変わります


ゲーム中の画面を比較してみましたので、紹介します。

 

ホーム画面

まずはホーム画面からです。

f:id:appgameui:20200129182724p:image

f:id:appgameui:20200129182656p:image

 

f:id:appgameui:20200129210056p:plain

あー、この辺の情報が被るのか…。

矢印のボタンの基準点が画面中央に設定いるのに対して、左側のUI群は画面左側にあるので、一定の値を超えると被っちゃうんですね。

 

というか、
基準点が違うUIパーツがあれば、お互いにいずれ被るか隠れるかすることになるのでは…。

 

他の画面も見ていきますね。

 

 

プロファイル画面

f:id:appgameui:20200129182247p:image

f:id:appgameui:20200129182240p:image

f:id:appgameui:20200129211130p:plain

これも左側が基準点のパーツ群と中央のパーツ群が重なっちゃっていますね。
表示順番どうこうもありますが、文字が隠れちゃってます。

 

メール画面

f:id:appgameui:20200129182301p:image

f:id:appgameui:20200129182305p:image

 

f:id:appgameui:20200129211307p:plain

「一括受け取り」のボタンが隠れちゃいますね。
文字も読めませんし、押しづらい。

 

ショップ画面

f:id:appgameui:20200129182345p:image

f:id:appgameui:20200129182337p:image

f:id:appgameui:20200129211356p:plain

ここは画面全体の基準点が中央にあるんですね。
左右の帯にUIが隠されてしまっています。

 

お知らせ画面

f:id:appgameui:20200129182507p:image

f:id:appgameui:20200129182514p:image

f:id:appgameui:20200129221923p:plain

右上にある閉じるボタンが隠れてしまいました。
(当たり判定は残っているので、それっぽい位置をタップすると閉じれます)

 

オプション画面

f:id:appgameui:20200129182546p:image

f:id:appgameui:20200129182607p:image

 

f:id:appgameui:20200129222056p:plain

この画面ではボタンは隠れませんが、見出しが隠れてしまいます。

 

 

キャラ詳細画面

f:id:appgameui:20200129182840p:image

f:id:appgameui:20200129182835p:image

f:id:appgameui:20200129222158p:plain

画面上部にある「図鑑画面」へのボタンが隠れてしまいました。
押せますが…ボタンの境界が分かりづらく誤タップする可能性があります。 

 

ファッション画面

f:id:appgameui:20200129182941p:image

f:id:appgameui:20200129182946p:image

この画面はきれいに収まっています。
これぐらい情報が整理されていればいけるのか…。ハードル高いな…。

 

f:id:appgameui:20200129222512p:plain

それでも、ちょっとはみ出てるか…。

 

キャラ詳細画面

f:id:appgameui:20200129183053p:image

f:id:appgameui:20200129183058p:image

f:id:appgameui:20200129215157p:plain

文字が被ってたり、アイコンが隠れたりしてますね。
被るのはともかく、なんで虫眼鏡のアイコンが帯に隠れちゃってるんだろう…。基準点が画面右側にあるなら隠れないはずなのですが…。

閾値でもあるのかな…。

 

ヘッダーメニュー

f:id:appgameui:20200129183218p:image

f:id:appgameui:20200129183222p:image

f:id:appgameui:20200129215232p:plain

これも左右が思い切り隠れちゃってますね。 

 

ガチャ画面

f:id:appgameui:20200129183328p:image

f:id:appgameui:20200129183334p:image

f:id:appgameui:20200129215317p:plain

一部文字隠れてしまいます。
開催期間は限定性を高めるので、訴求したい情報だと思うのですが、隠れちゃうのは勿体ない。

 

公開求人画面

f:id:appgameui:20200129183349p:image

f:id:appgameui:20200129183354p:image

f:id:appgameui:20200129215449p:plain

残り時間の一部が隠れます。
この画面は情報量が他よりも少ないので、なんとか調整できそうな気がします。 

 

章選択画面

f:id:appgameui:20200129182445p:image

f:id:appgameui:20200129182358p:image

最新のクエストが選択しやすいように、最新の章が画面中央に配置されるデザインです。
これもきれいに収まっている気がします。
 

 

エスト選択画面 

f:id:appgameui:20200129183815p:image

f:id:appgameui:20200129183832p:image

これも大丈夫そうですね。
選択肢が少ない、やれることが少ない画面は結構スッキリまとまっています。

 

パーティ編成画面

f:id:appgameui:20200129183906p:image

f:id:appgameui:20200129183912p:image

左右の余白が埋まるくらいで何事もなかった。

 

エスト中画面 

f:id:appgameui:20200129184017p:image

f:id:appgameui:20200129184022p:image

マップのマス目が小さくなっていることに気付くかと思います。

全体的に縮小というか、マップとカメラの距離が離れました。

 

エスト中の会話シーン

f:id:appgameui:20200129184252p:image

f:id:appgameui:20200129184259p:image

 

f:id:appgameui:20200129215729p:plain

エスト中の会話シーンは話者の顔が隠れる程度。
これはもうちょっとテキストの横幅を狭くすれば対処できそう。 

 

エストリザルト画面

f:id:appgameui:20200129184058p:image

f:id:appgameui:20200129184102p:image

 クエストリザルトもきれいに収まっています。

 

 

「UI調整」という変わった機能ですが、

今はまだクエスト周りにのみ対応しているようです。
エスト選択、パーティ編成、クエスト中、リザルト周りはデザイン上の破綻は見られません。

他の画面はボタン同士が被ったり情報が隠れたりしていました。
そちらはβ版的な扱いなのかな。

 

「UI調整」を実装する意義

ゲーム中の画面を見た限り、機能している画面は限定的でした。

レイアウトが崩れてしまう箇所も多く、操作性に関してもメリットが見当たらなかったのですが、どういった時にこの調整が必要になるのか考えてみました。

 

こういった機能が実装された背景には…

  1. ノッチという(UIデザイナーを苦しめた)デザインが生まれたこと。
  2. 縦横比が16:9以上の端末も発売されるなど端末の多様化が進んでいるため。
  3. 個別に対応すると開発コストが増してしまうので、ユーザー側がUIを調整できる簡易的な機能を提供し、コストを抑えるため。

というのが主な理由だと推測します。

 

エスト周りだけが対応している理由

エスト周りだけが対応している理由に関してですが、機能性の向上と配信を意識したデザインなのかな、と推測しました。

この機能を調整するとUIとマップの表示物の被りを抑える役割があります。

 

f:id:appgameui:20200130083306p:image

f:id:appgameui:20200130083338p:image

 

機能性の向上に関して

機能性の向上に関してですが、

敵出現位置や自陣の位置は画面端にあることが多いので、稀にUIと被ってしまい見落してしまうことがあります。

 

例えば以下のステージでは、画面の上下にある敵出現ポイントはUIに隠れてしまい見落とされがちです。

 

例えば以下のマップでは、画面下部に敵出現エリアがありますが、キャラクターのサムネイルと被ってしまいます。

f:id:appgameui:20200130134933p:image

 

これをUI調整すると以下の見え方になります。

f:id:appgameui:20200130135258p:image

僅かですが、敵出現エリアとキャラクターのサムネイルが被っている領域が少なくなっています。

 

 

配信を意識したデザインか?

また、配信を意識したデザインという可能性も考えられます。

いまやゲームを配信するのは当たり前です。
画面の情報が隠れてしまうと、配信する際に不都合やストレスが生じがちです。

 

配信主も視聴者も見やすい画面になるように、UI調整機能を入れたのかな、と推測します。

 

まとめ

エスト画面にUI調整機能を実装したのは

  1. 情報が隠れないようにするため
  2. 配信を意識したため

という可能性があると考えました。
他の画面に関してはそこまで有効には感じなかったのですが…

  1. ノッチという(UIデザイナーを苦しめた)デザインが生まれたこと。
  2. 縦横比が16:9以上の端末も発売されるなど端末の多様化が進んでいるため。
  3. 個別に対応すると開発コストが増してしまうので、ユーザー側がUIを調整できる簡易的な機能を提供し、コストを抑えるため。

などの理由により、この機能の実装がなされたのかもしれません。

 


他に気付いたことがあれば教えていただければ助かります。

 

【追記】2020/1/31

追記します。

21:9の端末でゲームを確認したのですが、見え方が大分違っていて衝撃的でした。

各カラムのマージンが広く、UI調整の値を100にしても全然被りません。
上に「縦横比が16:9以上の端末も発売されるなど端末の多様化が進んでいるため」
と書きましたが、これを主な理由として捉えるのが良いのかもしれません。

 

というのも、情報が画面の中央に集まることにより…

  1. 指の移動距離が抑えられる
  2. 視線を動かさなくても情報が視界に入る

といったメリットがあります。

見栄え的には間延びが抑えられるのも良いかも。
開発中にはここまでの比率の端末がなかったので、傾向を先読みして実装したのかな…。