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

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

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

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

 

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

アークナイツのオプション画面です

 

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

UI調整の項目を変更した時のgifです。画面の横幅に合わせてレイアウトが変わっています

▲ぐいーんと変わります


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

 

ホーム画面

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

アークナイツのホーム画面です。画面の幅が広い状態です

アークナイツのホーム画面です。画面の幅が狭い状態です

 

名前とアイコンが被っています

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

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

 

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

 

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

 

 

プロファイル画面

アークナイツのプロファイル画面です

アークナイツのプロファイル画面です。画面の幅を狭くした状態です

プロファイルのメインウィンドウと画面左側に並んでいるコマンド群が被っています

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

 

メール画面

アークナイツのメール画面です

アークナイツのメール画面です。画面の幅が狭い状態です

 

画面右下にある一括受け取りのボタンが7割ほど隠れています

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

 

ショップ画面

アークナイツのショップ画面です

アークナイツのショップ画面です。画面の幅が狭い状態です

画面を狭くすると画面左端に表示されているショップコマンド群が半分近く隠れています

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

 

お知らせ画面

アークナイツのお知らせ画面です

アークナイツのお知らせ画面です。画面の幅が狭い状態です

画面右上にある閉じるボタンが完全に隠れました

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

 

オプション画面

アークナイツのオプション画面です

アークナイツのオプション画面です。画面の幅が狭い状態です

 

オプションの項目名がボタンに隠れています

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

 

 

キャラ詳細画面

アークナイツのキャラ詳細画面です

アークナイツのキャラ詳細画面です。画面の幅が狭い状態です

画面上部に表示されている図鑑画面へのボタンが隠れました

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

 

ファッション画面

アークナイツのファッション画面です

アークナイツのファッション画面です。画面の幅が狭い状態です

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

 

デフォルトの衣装を表示するためのボタン部分を抜粋した画像です

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

 

キャラ詳細画面

アークナイツのキャラ詳細画面です

アークナイツのキャラ詳細画面です。画面の幅が狭い状態です

キャラのスキルの文字列と詳細情報を表示するための虫眼鏡のアイコンが被っています

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

閾値でもあるのかな…。

 

ヘッダーメニュー

アークナイツのヘッダーウィンドウです

アークナイツのヘッダーウィンドウです。画面の幅が狭い状態です

ヘッダーメニューはデザインが固定になっているので、幅を狭めたことで一部ボタンが隠れています

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

 

ガチャ画面

アークナイツのガチャ画面です

アークナイツのガチャ画面です。画面の幅が狭い状態です

画面端にある文字の先頭が数文字程度隠れています

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

 

公開求人画面

アークナイツの公開求人画面です

アークナイツの公開求人画面です。画面の幅が狭い状態です

画面左側に表示されている残り時間が2文字程度隠れています

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

 

章選択画面

アークナイツの章選択画面です

アークナイツの章選択画面です。画面の幅が狭い状態です

 

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

 

エスト選択画面 

アークナイツのくえすと選択画面です

アークナイツのクエスト選択画面です。画面の幅が狭い状態です

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

 

パーティ編成画面

アークナイツのパーティ編成画面です

アークナイツのパーティ編成画面です。画面の幅が狭い状態です

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

 

エスト中画面 

アークナイツのクエスト中の画面です

アークナイツのクエスト中の画面です。画面の幅が狭い状態です

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

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

 

エスト中の会話シーン

アークナイツのクエスト中の会話シーンです

アークナイツのクエスト中の会話シーンです。画面の幅が狭い状態です

 

画面の横幅が狭いと話者のグラフィックが25%くらい隠れています

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

 

エストリザルト画面

アークナイツのクエストリザルト画面です

アークナイツのクエストリザルト画面です。画面の幅が狭い状態です

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

 

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

アークナイツのクエスト中の画面です

アークナイツのクエスト中の画面です。画面の幅が狭い状態です。隠れている情報はありません

 

機能性の向上に関して

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

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

 

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

 

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

アークナイツのクエスト中の画面です

 

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

アークナイツのクエスト中の画面です。画面下部の情報とキャラクターのサムネイルの被り具合が異なっています

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

 

 

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

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

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

 

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

 

まとめ

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

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

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

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

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

 


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

 

【追記】2020/1/31

追記します。

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

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

 

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

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

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

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