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

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

「グランサガ」エンプティステートの紹介 Vol.24

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

 

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「グランサガ」から、エンプティステートのデザイン事例をご紹介します。
色んなゲームのエンプティステートを紹介して今回で第24回目です。

 

 

まず、「エンプティステート」とはどういうものか、
簡単にお伝えいたします。

エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。

見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない | TechCrunch Japan

 

情報が空(エンプティ)、ということですね。

ゲームUIのエンプティステートの場合、機能性だけではなくエンタメ性のあるデザインにすることが出来るため、多様性に富んでいると感じています。
また、エンプティステートが表示されたときに、ユーザーにどういった情報を与え、誘導するのが適切か考えることも重要です。

 

「グランサガ」のエンプティステート画面の事例は以下の7つです。

 

順に紹介していきます。

 

1:騎士団検索画面

まずは騎士団検索画面です。
これは騎士団に所属していない状態で、所属騎士団を検索すると表示される画面です。

f:id:appgameui:20220308005953p:image

 

以下のように、状態を示すメッセージが表示されていました。

騎士団を作成していません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

猫のグラフィックが表示されています。
一見して騎士団と関連性が無さそうなデザインですね…。

見た目だけで判断すると世界観を取り入れられているのかはちょっと分からず…騎士団とこの猫って関連性あったかな…。見落としたのかも…?

 

2:メール画面

続いてメール画面のデザイン事例です。

f:id:appgameui:20220308095206p:image

 

メール画面では以下のメッセージが表示されていました。

メールがありませんよ!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

分かりやすいメッセージですね。
「ありませんよ!」と呼びかけることで、ややフレンドリーな印象を受けました。

メールのグラフィックもファンタジー要素のある見た目になっており、世界観を表現しようと意識されているように感じました。

 

3:モロの祝福画面(祝福中)

続いてモロの祝福画面の事例です。

f:id:appgameui:20220313204139p:plain

 

この画面では以下のメッセージが表示されていました。

祝福中だにゃ!

う~ん?
エンプティステートというよりは、現状を示すメッセージに見えるかも…?
他の状態だと、よりエンプティ要素が強かったんだけど…どう区分すればいいんだろう。程度の問題だし、明確な定義は無いのかもしれないけど、少し気になりました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

見た目については猫のグラフィックと、語尾の「にゃ」という言葉によって、世界観だけではなく、誰が発したメッセージであるか、というのもの伝えられているように感じました。

 

4:モロの祝福画面(アイテム未所持)

このモロの祝福画面についてはもうひとつメッセージがありました。

f:id:appgameui:20220313215906p:image

 

祝福中で表示するグランウェポンがない時と、グランウェポン自体を所持していない時とでメッセージが分けられています。

モロの祝福ができるグランウェポンがないにゃ!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

確かに2つの状態は似て非なるものなので、メッセージを分けることは間違っては無いし、丁寧な対応に感じました。
アイテム所持画面で例えると、フィルタの結果で表示するアイテムがない時と、所持アイテムがない時とでメッセージを分ける、的な…。

ただ、この条件をゲーム全体で採用した場合、ゲーム内に表示するメッセージのパターン分けが多くなり、結果的に一貫性、統一性が担保しづらくなってしまう。ローカライズが必要な場合は翻訳のコストが多くなる、という懸念はあるかもしれません。

 

5:アイテム売却画面

こちらはアイテムを売却する画面ですね。

f:id:appgameui:20220313215852p:image

 

こちらはフィルタの結果、表示するアイテムが無い状態の時のメッセージです。

売却できる雑貨がありません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「グランサガ」における代表的なアイテムのグラフィックと端的なメッセージが表示されています。
ただ、「アイテム」ではなく「雑貨」としている点が少し気になりました。
というのも、この画面の上部では「売却アイテム」とあります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「アイテム」と「雑貨」という似た言葉の定義が曖昧で、用語の一貫性はまだ十分に担保出来ていないのかもしれません。

 

6:分解画面

分解画面のエンプティステートはこちらです。

f:id:appgameui:20220313215859p:image

 

このように、分解画面では以下のメッセージが表示されていました。

分解できるものがありません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

他の画面にも使い回せるように「表示するアイテムがありません」と汎用的なメッセージにすることも可能ではあると思うのですが、売却可能なアイテム、分解可能なアイテムという括りでメッセージとグラフィックを分けていますね。

ルールが複雑になる側面もありますが、ユーザーにより正確な情報を伝えている点は良い点かなと感じました。これにより前後の文脈が分かっていなかったとしても、メッセージを読むだけで状況が伝えることが可能であると感じました。

 

 

7:衣装変更画面

最後に衣装変更画面です。

f:id:appgameui:20220313204150p:plain

 

この画面では以下のメッセージが表示されていました。

衣装がありません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

こちらも端的なメッセージと、装飾が施された鎧が表示されています。
装飾が煌びやかな鎧があることでファンタジー要素が強調されているように感じました。

 

以上です。

エンプティステートをデザインする際の参考になれば幸いです。

 

参考事例

以下は過去に紹介したデザイン事例です。興味がございましたらご参照ください。

  1. 「ときめきアイドル」
  2. 「キャプテン翼〜たたかえドリームチーム〜」
  3. 「七つの大罪 光と闇の交戦 : グラクロ」
  4. 「三国ロマンス」
  5. 「ドクターマリオワールド」
  6. 「リンクスリングス」
  7. 「ガール・カフェ・ガン」
  8. 「どうぶつの森 ポケットキャンプ」
  9. 「ビーナスイレブンびびっど!」
  10. 「魔界ウォーズ」
  11. 「ポケモンカフェミックス」
  12. 「BLEACH Soul Rising」
  13. 「神無月」
  14. 「Food Fantasy フードファンタジー」
  15. 「三国ブレイズ」
  16. 「三国志名将伝」
  17. 「魂器学院」 
  18. 「ブルーアーカイブ」
  19. 「ドールズフロントライン」
  20. 「カウンター・アームズ -終焉武装少女-」
  21. 「エクリプスサーガ」
  22. 「未定事件簿」
  23. 「崩壊3rd」

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「グランサガ」のガイドラインを確認したところ、二次創作物の制作、SNSや共有サイトの投稿に関しては許諾されている旨の記載がありました。

 

二次創作に関するガイドライン

 

主な参照箇所を抜粋します。

第3条 許諾および遵守事項

  1. 当グループは、利用者に対し、二次創作物の制作、利用を許諾します。
    (例:二次創作物の制作、制作した二次創作物のSNSへの掲載、ゲームキャラクターのコスチュームプレイ(コスプレ)の準備およびイベントへの参加、交流目的の同人イベントへの参加、ゲームプレイの動画化、編集およびオンラインでの掲示、ゲームプレイの共有サイトへのアップロードおよび付随広告収益の創出など)

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ