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

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

「仮面ライダー シティウォーズ」プレゼントボタンと一括受け取りボタンが左側にあり、他のゲームの位置関係を調べてみました。

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

 

仮面ライダー シティウォーズ」のプレゼントの一括受け取りボタンが左側なのが気になりました。

f:id:appgameui:20191230165819p:plain

▲ひだりにある

理由としては、過去プレイしたゲームには右側にあるのが多くあったので、違和感を感じています。

 

左側に配置されている理由

f:id:appgameui:20191231052146p:image


一括受け取りボタンが左側に配置されている理由ですが、おそらく…

「プレゼントボタンが左側に配置されているため、画面遷移の前後で指の位置を変えたくないという意図があったのかな」

と推測します。

 

f:id:appgameui:20200105212259p:plain

▲画面の左側に配置されるプレゼントボタン。

 

他のタイトルを見てみる

では、「一括受け取り」はどの位置にあるのか他のタイトルを見てみます。 

リボルバーズエイト

f:id:appgameui:20200105212603p:plain

f:id:appgameui:20200105204133p:plain

プレゼントボタン、一括受け取りボタンは右上に配置されています。前後の画面の繋がりを考えるとプレゼントボタン、一括受け取りボタンはお互いの近くに寄せているのかな…。
 

マクロス

f:id:appgameui:20200105212708p:plain

f:id:appgameui:20200105200448p:plain

プレゼントボタン、一括受け取りボタンは画面右上にあります。これもプレゼントのボタンと一括受け取りのボタンとが近くに配置されています。

 

御城プロジェクト:RE ~CASTLE DEFENSE~

f:id:appgameui:20200105213013p:plain

f:id:appgameui:20200105200637p:plain

プレゼントボタン、一括受け取りボタンは画面右下に配置されていました。さきほどのゲームとは位置は異なりますが、これもプレゼントボタンと一括受け取りボタンはお互いの近くに配置されています。

 

テニスの王子様 ライジングビート

f:id:appgameui:20200105213258p:plain

f:id:appgameui:20200105201413p:plain

一括受け取りボタンは画面右下にあります。これもプレゼントボタンと近い位置にあります。

 

アイドルマスター ミリオンライブ! シアターデイズ

f:id:appgameui:20200105213747p:plain

f:id:appgameui:20200105202640p:plain

これもプレゼントボタン、一括受け取りボタンが画面右下に配置されています。

 

ダンまち〜メモリア・フレーゼ〜

f:id:appgameui:20200105213856p:plain

f:id:appgameui:20200105203921p:plain

プレゼントボタンが右上、一括受け取りが中央、というパターンです。

この場合は前後の繋がりというよりは、各々の場面での見栄えや汎用的な操作性を意識されたのかな、と推測します。

プレゼントボタンが下にあるとキャラクターの情報を隠してしまうので上に配置。

一括受け取りボタンが中央にあるのは左右の指のどちらでも押しやすいように、という意図が考えられます。

 

ゴエティアクロス

f:id:appgameui:20200105214035p:plain

f:id:appgameui:20200105204316p:plain

プレゼント(贈り物)ボタンは画面中央、一括受け取りは右下にあります。

ホーム画面の情報がかなり多い部類のデザインなので、プレゼントボタンは優先度を下げて、空いてるスペースに押し込まれた感じになってます。

 

とある魔術の禁書目録 幻想収束

f:id:appgameui:20200105214545p:plain

f:id:appgameui:20200105204715p:plain

プレゼントと一括受け取りのボタンの位置が近く、右下に配置されていました。

 

乃木坂46 リズムフェスティバル

f:id:appgameui:20200105214615p:plain

f:id:appgameui:20200105204912p:plain

こちらもプレゼントと一括受け取りのボタンの位置が近く、ほぼ同じ位置にあります。

 

千銃士

f:id:appgameui:20200105213401p:plain

f:id:appgameui:20200105201835p:plain

プレゼントボタンが左上、一括受け取りのボタンが中央下にあるデザインです。

ところで、一括受け取りの上限が10件までという実装はともかく、300件超えると古いプレゼントから消えるんか…。プレゼントを消すって判断は凄いな…。

 

刀使ノ巫女

f:id:appgameui:20200105213430p:plain

f:id:appgameui:20200105202147p:plain

プレゼントボタンが左下、一括受け取りが右下にあります。両手を使うので少しストレスかも知れません。

右側に優先度の高い情報を配置しているので、プレゼントボタンは左側に配置することになったのかな、と思います。

 

キャプテン翼 ~たたかえドリームチーム~

f:id:appgameui:20200105213835p:plain

f:id:appgameui:20200105203046p:plain

プレゼントボタンが左側の中央、一括受け取りボタンが右下に配置されています。

これも右側に優先度の高い情報を配置しているので結果的にプレゼントボタンが左側に配置されたパターンだと考えられます。

 

 

パレットパレード

f:id:appgameui:20200105214653p:plain

f:id:appgameui:20200105205921p:plain

プレゼントボタンが左上、一括受け取りは中央下のパターンです。

おそらく「Fの法則」 を意識したデザインをさへたのかな、と推測します。

情報には気付きやすいけど、この画面でそこまで見せたいものでもない気がしています。

 

ドールズオーダー

f:id:appgameui:20200105214749p:plain

f:id:appgameui:20200105210111p:plain

プレゼントボタンが左側中央付近、一括受け取りが右下にあります。

 

どうすれば良いのか

いくつかのタイトルを見ましたが、思ったよりバリエーションがあって驚きました。「仮面ライダー シティウォーズ」の場合はどうしたら良いのかですが…

 

プレゼントボタンと一括受け取りを右に配置し、指の移動距離を短くすれば操作性とメンタルモデルの両方が活かせるのではないかな、と思いました。

 

少し補足します。
横画面の場合ですが、傾向を整理すると…

  • プレゼントボタン、一括受け取りボタンは前後の画面を意識して指の移動が少なくなるように配置されている。
  • 一括受け取りのボタンは全体で統一されているデザインなので個別に動かすことはできない。
  • プレゼントボタンの位置を一括受け取りボタンの位置に寄せるほうが簡単。
  • その結果、一括受け取りボタンが上の方に配置されているケースも見られる。
  • 左側にプレゼントボタンがあるとプレゼント画面に遷移した時に指の移動が大きくなる。

なのかな、と思いました。

 

左側にプレゼントボタンと一括受け取りボタンがあると確かに指の動きは少ないのですが、それと引き換えにユーザーは学習コストを支払う必要があります。

多くのユーザーは覚えることはゲームを楽しむこと以外の学習はストレスに感じてしまいます。ですので不要な学習コストは極力省くのが良いかなと思います。