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

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

「テイルズ オブ クレストリア」ミッション画面で一括受け取りボタンをどこに配置すれば良いのか39タイトル比較して結論出しました

こんにちは!ちょこです!

「テイルズ オブ クレストリア」をプレイしていてミッション画面の中にある「一括受け取り」のボタンの位置が気になりました。

テイルズ オブ クレストリアのミッション画面

▲左下に「一括受け取り」ボタンがあります 

 

視線の流れ的に右下にあるのが一般的かなと思って過去にプレイした他タイトルを調べたところ、おおよそ結論が出たのでまとめました。

 

結論としては…

  • 手数を掛けないのであれば自動受け取り機能がオススメ
  • 視線を考慮するなら右下に配置
  • 指の可動域を考慮するなら右上に配置
  • 個別受け取りは手数が掛かるのでオススメしない
  • 左下配置は少数派であり合理性に欠ける

です。
以下は内容の詳細です。

 

  

1:右下に配置されているデザイン 

個人的にはこのレイアウトが一般的かな、と思っていました。
採用率は38タイトル中の10タイトルであり、約26.3%でした。つまり約3/4は他のレイアウトなので、右下に「一括受け取りボタン」を配置しているのが一般的なレイアウトであるとは言い難いのではないか、と感じました。

新テニスの王子様 ライジングビートのミッション画面

▲1「新テニスの王子様 ライジングビート」

 

刀使ノ巫女 刻みし一閃の燈火のミッション画面

▲2「刀使ノ巫女 刻みし一閃の燈火」

 

アスカZEROのミッション画面

▲3「アスカZERO」

 

CUEのミッション画面

▲4「CUE」

 

乃木坂46リズムフェスティバルのミッション画面

▲5「乃木坂46リズムフェスティバル」

 

妖怪ウォッチゲラポリズムのミッション画面

▲6「妖怪ウォッチゲラポリズム」

  

キャプテン翼 たたかえドリームチームのミッション画面

▲7「キャプテン翼 ~たたかえドリームチーム~」

 

キズナストライカーのミッション画面

▲8「キズナストライカー」

 

とある魔術の禁書目録 幻想収束のミッション画面

▲9「とある魔術の禁書目録 幻想収束」

 

ドールズオーダーのミッション画面

▲10「ドールズオーダー」

 

 

2:右上に配置されているデザイン

3つめのデザインパターンは「右上に配置されているデザイン」です。38タイトル中6タイトルがこのデザインで、割合としては約15.7%でした。 

見た限り、このデザインが採用される背景としては以下の2つが考えられます。

  1. web、またはガラケーの頃のメンタルモデルを継承している
  2. 押しやすさを重視している

です。

1つめの「web、またはガラケーの頃のメンタルモデルを継承している」についてですが、昔のソシャゲはガラケーでした。画面は縦長で、画面内をスクロールするのが一般的でした。

画面の解像度に対してあまりに情報が多いため、ファーストビューに必要な情報をまとめる必要があり、「一括受け取り」はファーストビューに配置され、5ボタンキーが割り当てられるなどされていました。

横画面になってもレイアウトに対する意識だけが残り、上部に配置されているのではないか、という仮説です。根拠としては弱い部類ですが、メンタルモデルが更新されていない開発者がいる可能性もあるので仮説として考慮してみました。

2つめの「押しやすさを重視している」についてですが、こちらは親指の可動域的に右下にあるよりも右上にある方が押しやすいためです。視線の流れではなく指の可動域を優先させた配置である、という仮説です。

見た限り、タブ切り替えや閉じるボタンと近くなってしまうので、誤タップの可能性も高まりますが、大きな懸念ではないと考えられているようです。

御城プロジェクト:RE CASTLE DEFENSEのミッション画面

▲1「御城プロジェクト:RE ~CASTLE DEFENSE~」

 

ダンまちメモリアフレーゼのミッション画面

▲2「ダンまち〜メモリア・フレーゼ〜」

 

リボルバーズエイトのミッション画面

▲3「リボルバーズエイト」

 

ビーナスイレブンびびっとのミッション画面

▲4「ビーナスイレブン」

 

きららファンタジアのミッション画面

▲5「きららファンタジア」

アズールレーンのミッション画面

▲6アズールレーン

 

3:画面中央下部に配置されているデザイン

画面中央下部に「一括受け取り」のボタンが配置されているケースもありました。

38タイトル中3タイトルと数は少ないのですが、左右どちらの指でも押しやすい、という特徴があります。 

最果てのバベルのミッション画面

▲1「最果てのバベル」

 

スターホースポケットのミッション画面

▲2「スターホースポケット」

 

ゴエティアクロスのミッション画面

▲3「ゴエティアクロス」

 

4:左下に配置されているデザイン

左下に「一括受け取り」が配置されているタイトルも38タイトル中3タイトルでした。約7.6%であり、これも少数です。

視線の流れ、指の動きとしては不自然な配置であり、iOSガイドラインにも沿っていないので、採用する根拠としてはかなり特殊と言わざるを得ません。

例えば…

  • PCでのみデザインしており端末での検証が不十分であった
  • 開発者のメンタルモデルが特殊であったが、それが基準となった
  • 後付けの機能であり、空いてるスペースに配置された

など…。
デザイン的な合理性があまり感じられないので、その他の開発要因が原因なのかな…。

 

仮面ライダー シティウォーズのミッション画面

▲1「仮面ライダー シティウォーズ」

 

ワールドサッカーコレクションSのミッション画面

▲2「ワールドサッカーコレクションS」

 

ガールカフェガンのミッション画面

▲3「ガールカフェガン」

 

 

5:個別受け取りするデザイン

実は最も多かったのはこのデザインです。 38タイトル中13タイトルは「一括受け取り」のボタンが配置されておらず個別受け取りするデザインでした。

特に日本以外の開発タイトルに多く見られた特徴で、13タイトル中9タイトルは海外の開発です。

残りの4タイトルに関しても「TEPPEN」は主に海外市場を中心にサービスすることを狙っていたように伺えますし、「マジカミ」「りっくじあ~す」はアプリではなくブラウザが母体となっており、デザインの文脈が異なっているのかもしれません。

 

なぜ海外タイトルには「一括受け取り」ではなく「個別受け取り」が多いのか仮説を立ててみたのですが…

  • 目標達成に対するフィードバックをユーザーに丁寧に伝えたい
  • 何度も押させることにより、お得感を演出したい
  • 滞在時間を延ばしたい、ユーザーの可処分時間を得たい

という文化があるように感じます。

日本のソシャゲはガラケーから発展した経緯がありますが、中国、韓国などのアジアはどちらかというとPCゲームからソシャゲに発展した経緯があります。

つまり日本と違って短い隙間時間で楽しんでもらう、というよりもユーザーの可処分時間の奪い合いにフォーカスされます。

 

その結果、報酬を受け取るために色々な画面を回遊させる設計が取られたり、一括受け取りといった時短につながる機能の実装はデメリットであると考えられている可能性があります。

また、ユーザー側もそういったメンタルモデルに慣れ、手数よりもお得感の演出を重視しているのかもしれません。

三国ロマンスのミッション画面

▲1「三国ロマンス」

 

歌マクロスのミッション画面

▲2「歌マクロス

 

永遠の七日のミッション画面

▲3「永遠の七日」

 

ワンダータクティクスのミッション画面

▲4「ワンダータクティクス」

 

アークナイツのミッション画面

▲5「アークナイツ」

 

ロードオブダンジョンのミッション画面

▲6「ロードオブダンジョン」

 

TEPPENのミッション画面

▲7「TEPPEN」

 

りっくじあーすのミッション画面

▲8「りっくじあ~す」

 

マジカミのミッション画面

▲9「マジカミ」

 

マギア カオスサーガのミッション画面

▲10「マギア カオスサーガ」

 

 

 

キングスレイドのミッション画面

▲11「キングスレイド」

 

スタートリガーのミッション画面

▲12「スタートリガー」

 

フィッシングスーパースターズのミッション画面

▲13「フィッシングスーパースターズ」

 

6:自動受け取りが採用されているデザイン

興味深かったのは、報酬の自動受け取りを採用しているタイトルです。

このタイトルはミッション画面で報酬を受け取るという概念が無く、達成した瞬間に報酬が受け渡されます。ミッション画面はあくまで報酬獲得のための条件が書かれている画面、という設計になっています。

手数の省略を優先させており、UI的には実に正しいデザインになっています。

ときめきアイドルのミッション画面

▲1「ときめきアイドル

 

ときめきアイドル ミッションを達成していたら自動で報酬受け取りをする

画面遷移時に達成しているミッションの報酬を自動でプレゼントBOXに送る仕様

 

 

アイドルマスター ミリオンライブ! シアターデイズのミッション画面

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

 

 

アイドルマスター ミリオンライブ! シアターデイズではミッションを達成した瞬間に自動的に達成処理が行われる

 こちらもリアルタイムで報酬がプレゼントに送られる仕様

 

クレヨンしんちゃん 一致団ケツ! かすかべシティ大開発のミッション画面

▲3「クレヨンしんちゃん 一致団ケツ! かすかべシティ大開発」

 

クレヨンしんちゃん 一致団ケツ! かすかべシティ大開発のミッション達成から報酬獲得までの流れ

このタイトルの場合は達成から報酬配布まで一括で行われる仕様でした。プレゼント画面を経由しなくて済むため、3タイトルの中でも最も少ない手数で済みます。

 

 

 

まとめ

このように他のタイトルを検証してみたときに、左下に「一括受け取り」のボタンが配置されることは稀です。

ユーザーのメンタルモデル、指の可動域、視線の流れ、iOSガイドラインなどから、一括受け取りボタンを配置するのであれば、右下か右上が推奨されます
どちらを採用するかは他の画面のデザインとの一貫性を考慮して判断することをお勧めします。

それ以外の選択肢ですと、受け取りボタンを配置せずに自動で受け取る仕組みが最も手数が少なく済み、UIとしては評価が高いです。

逆に、一括受け取りボタンを配置せずに個別に受け取るデザインは、UIとしては評価が低いです。
報酬設計にもよりますが、ゲーム開始直後はミッション達成の報酬を多く配布しがちであり、ユーザーの手数をかけるため、それがストレスに繋がります。UIとしては手数がかかる設計はお勧めしません。
手数をかけることにより、ゲームの楽しみが増すのであれば評価も変わりますが、この場合はゲーム本体の部分ではなく、手数をかける必要はないかと考えます。

 

以上の理由から「一括受け取り」のボタンを左下に配置することは再検討したほうが良いと考えます。

 

余談ですが、こんな感じでAIがアドバイスをしてくれる機能がもうちょっとしたら出来そうな気はしてます。

 

 

売れるゲームのUI/UX 制作現場の舞台裏

新品価格
¥2,420から
(2020/7/20 08:08時点)