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

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

「ドールズフロントライン」再発防止について書かれているエンプティステートは珍しい

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

 

今回は「ドールズフロントライン」のエンプティステートの紹介です!
色んなゲームのエンプティステートを紹介して今回で19回目です。流行ってきてる気がする…!

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

 

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

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

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

副次的に導線が設置されたりしますが、本来的には情報が空であることを示すデザインです。 

 

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

ゲームUIにおいてエンプティステートをデザインすることにより、以下のメリットが考えられます。

  1. 世界観の訴求
  2. 遊び心の提供
  3. エンプティステートをデザインしていないタイトルとの差別化
  4. ユーザーのストレス緩和
  5. 文字だけの表示より、ユーザーフレンドリーさがアピール可能
  6. 画面が賑やかになり、ゲームプレイ中の没入感が削がれない
  7. キャラクターの表情を利用して、キャラクターとユーザーの感情を一致させることにより、ユーザーの気持ちに寄り添うことが出来る

 

他にもあるかもしれませんが、気付いた範囲で列挙しました。
気付いたら次回更新時に追加します。

 

例えば「七つの大罪 光と闇の交戦(グランドクロス」のデザインではゲームのキャラクターを表示させることによって、ゲームの世界観の没入感を阻害していません。

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:20210320091723p:image

 

エラー内容と、解決方法が提示されている

「ドールズフロントライン」のデザイン事例を見ると、エラー内容と解決方法が示されています。

 

エラー内容については

チュートリアル画像がダウンロードされていませんね。

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


 

解決方法については

画像をタップすることでダウンロードできますよ!

(ダウンロードには150kbほどデータ通信量を消費します)

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

 

このように書かれています。
エンプティステートでは、最低限、エラーの内容と解決方法が示されていれば良いのですが、データ通信量に関する言及があるのは手厚いですね。

 

 

再発防止の情報も提供されている

さらに再発防止の情報まで添えられているのは手厚いデザインです。

設定内の【自動ダウンロード】をONにしておくと、
こういう問題を回避できるよ~

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

 

再発防止が簡単であれば、ユーザーに対して対策を取ってもらうことも選択肢の一つです。

 

しかし反論として…

「それであれば最初から自動的にダウンロードする方が良いのではないか?」
「画面遷移前に画像データをダウンロードしてから遷移すれば良いのではないか?」

という考え方もあります。

もちろんその考え方もできるのですが「ドールズフロントライン」の場合、その方式を採ると大量の画像データをダウンロードする必要があります。

ネットワーク状態によっては時間がかかってしまったり、ユーザーによっては通信料が発生してしまう可能性が考えられます。

すこしだけヘルプを見たいだけなのに、無関係の画像データをダウンロードすることになり、結果ストレスに感じてしまう可能性があります。

 

ですので「ドールズフロントライン」の場合は画像データは画面遷移後に任意でダウンロードする方式が採られたのかな、と推測します。

 

ちなみに、すでに画像データをダウンロード済みの場合は綺麗にヘルプ画像が表示されるようになっています。

あくまで端末に画像データがダウンロードされていない場合のデザインです。

f:id:appgameui:20210325232111p:image

 

 

キャラクターが添えられているため、世界観の没入感の維持に貢献している

今回紹介したエンプティステートはエラーの属性を含んでいます。

エラー表示はゲームのテンポを悪くします。
没入感の阻害に繋がりかねません。

 

「ドールズフロントライン」のエンプティステートは文字だけではなく、可愛いキャラクターが描かれたデザインです。

出来るだけゲームの没入感を削がない、自然な形でエラーを伝えられるように配慮されていると感じます。

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

 

 

以上です。
ゲーム内のエンプティステートのデザインを検討する際の参考になれば幸いです。

 

 

参考事例

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

 

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