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

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

「魂器学院」ゲーム画面におけるエンプティステートの事例紹介。画面によってデザインに差を持たせている。

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

 

「魂器学院」 でエンプティステートがデザインされていました。

エンプティステートがあるとエンタメ感が表現され、楽しい気持ちになります。

 

まずはエンプティステートについて簡単に説明します。

 

 

エンプティステートの役割

エンプティステートの役割は基本的には以下です。

  • 情報が空であることを示す

 

エンプティステートを使うメリット

ゲーム中にエンプティステートに画像を使うことのメリットとしては…

  • ユーザーのストレス緩和
  • 文字だけの表示よりユーザーフレンドリーさが増す
  • 画像があるとゲームの世界観を伝えることができる
  • 画面が賑やかになり、ゲームプレイ中の没入感が削がれない
  • キャラクターの表情を利用して、キャラクターとユーザーの感情を一致させることにより、ユーザーの気持ちに寄り添うことが出来る

 

などが考えられます。

f:id:appgameui:20190609164920p:plain

 

 

 

エンプティステートが使われる場面

過去のタイトルの事例を参考にすると、エンプティステートは以下の場面で使われていました。

  • メールがない時
  • フレンドがいない時
  • 受け取れるプレゼントが無い時

f:id:appgameui:20190417231409p:plain

この辺が上位ですね。採用頻度が高い画面です。

 

 

以下はタイトルによって文脈は異なりますが、アイテムがない時にも使われます。

  • 表示するアイテムがない時
  • ショップの商品が売り切れている時

f:id:appgameui:20200518083646p:image

 

 

どういった時にデザインを採用すれば良いか?

では、どういった時にエンプティステートに画像を用いれば良いのか、についてですが

  • 他タイトルで使われている場面
  • ユーザーがストレスを感じる場面(ストレスを感じる程度が大きいほど優先度は高い)

などが無難です。
ストレスに感じる場面については、ユーザーの主観、表示頻度、エラーの重要度にもよるので一律には決めづらいところです。

ですので、開発側の匙加減で良いかなと思います。

ゲームであれば「ここにあったら面白いかな」とかでも良いかもしれません。

 

 

エンプティステートをデザインする際に注意したいこと

エンプティステートをデザインする際に注意したいこととしては

  • 問題を解決するための導線を配置すること
  • キャラクターにしゃべらせる場合はキャラクターの人格を意識すること

 

などでしょうか。

 

エンプティステートが表示されるのはユーザーの期待結果ではありません。

なので期待結果が表示されるように、問題解決のための導線を配置すると利便性は高まります。

f:id:appgameui:20201108180052p:image

 

 

「キャラクターの人格を意識」とは、ユーザーが「このキャラクターはこのセリフを言わない」と思われないようにするための配慮です。

 

IPであれば原作中のセリフを使うのが無難ですが、必ずしもそうはいきません。
ゲーム独自でメッセージを用意する場合は、使用するキャラクターの人格にも配慮する必要があります。

f:id:appgameui:20190415225745p:plain

 

 

 

「魂器学院」のデザインの事例

「魂器学院」のデザイン事例を紹介していきます。 

 

 

フレンドリスト

フレンドがいない時に表示されます。よく見かけるエンプティステート第一位じゃなかろうか。

 

 

f:id:appgameui:20210213132521p:image

 

 

エラーメッセージは以下のように書かれています。

フレンドがいません~
「フレンド管理」からフレンドを
登録してください!

 

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

 

 

問題を解決するための導線も設置されています。

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

 

 

 

お願いボード

「お願いボード」はギルドメンバーにリソースの寄付をお願いする画面です。

 

f:id:appgameui:20210213132535p:image

 

 

画面に表示されている文章を確認すると、以下のように書かれています。

願いはまたありません
“願う”をクリックして参加しましょう

ちょいちょい翻訳が気になります。  

あと、四角い枠を持ってるのなんでだろ…?

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

 

 

こちらも問題を解決するための導線が画面下部に設置されています。

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

 

 

メールボックス 

メールがない時のエンプティステートです。
ビジュアル的に大分凝ったデザインになっています。

 

f:id:appgameui:20210213132525p:image

 

 

魂器画面

 

表示する魂器(キャラ)がない時に表示されるエンプティステートです。
 

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

 

「ここはからから獲得しに行く」とちょっと翻訳が怪しいのですが、
画面をタップすると、魂器を獲得するための導線が表示され、ガチャか欠片合成の導線が表示されます。

 

アニメーションで見るとこんな感じです。
画面をタップすると以下の導線が表示されています。

  • 募集に行く
  • 魂器の欠片の合成

 

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

 

解決方法が複数提案されているエンプティステートも中々趣深いデザインだと感じました。

 

 

まとめ 

以上です。

「魂器学院」のエンプティステートの特徴として

  • ゲームキャラの表示
  • 問題解決のための導線の設置
  • 複数案の解決がある場合、その案内
  • 画面によってデザインコンセプトが異なるデザインの実装

などがあげられます。

画面によってデザインを変えるのは面白い発想だと感じました。

エンプティステートの実装を検討する際の参考になれば幸いです。

 

 

 

参考事例

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

 

  1. 「ときめきアイドル」
  2. 「キャプテン翼〜たたかえドリームチーム〜」
  3. 「七つの大罪 光と闇の交戦 : グラクロ」
  4. 「三国ロマンス」
  5. 「ドクターマリオワールド」
  6. 「リンクスリングス」
  7. 「ガール・カフェ・ガン」
  8. 「どうぶつの森 ポケットキャンプ」
  9. 「ビーナスイレブンびびっど!」
  10. 「魔界ウォーズ」
  11. 「ポケモンカフェミックス」
  12. 「BLEACH Soul Rising」
  13. 「神無月」
  14. 「Food Fantasy フードファンタジー」
  15. 「三国ブレイズ」
  16. 「三国志名将伝」