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

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

「東京コンセプション」情報はまとめた方が視線が散らない。ロード画面の事例。

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


「東京コンセプション」ですが、ロードを示す情報が画面の四隅にあり、情報がまとまっていないのが気になりました。

f:id:appgameui:20191006214310p:plain

右上には「LOADING...」

右下には「CONNECTING」の表示があります。

 

f:id:appgameui:20191006214146p:plain

ロードの進捗を示すゲージは左下に表示されます。

 

gifで見るとこんな感じになっています。

f:id:appgameui:20191006214714g:plain

 

静止画で個別に見るとあまり気にならないかもしれませんが、やはり動いているものを見ると視線が散ってしまうことが分かるかと思います。

 

この場合「LOADING...」と「CONNECTING」のどちらかを消す。

あるいは通信が発生している間は「CONNECTING」を優先し、データの読み込み中は「LOADING...」を表示する。

というように、画面に表示される情報を整理した上で、情報を画面下にまとめるのが良いのかな、と思いました。

 

常に意識しておきたいのは、ユーザーに余計なストレスを与えないことかな、と思っています。

 

この画面の場合は、情報が散って視線や意識が余計な情報に向くことがストレスなので、情報を整理して配置もまとめておくと、余計なストレスを与えずに済むのかな、と考えました。

 

人間って、動いているものを本能的に捉えてしまいます。特に素早く動いているもの、視野において大きな面積を占めるものなどに反応しがちです。

なので、画面上に不規則に情報が出たり消えたりすると、嫌でも目がいっちゃうんですよね。

 

「妖怪ウォッチぷにぷに」お知らせバナーが動いてた。デザインのパターンの参考までに。

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

 

妖怪ウォッチぷにぷに」のお知らせ画面のバナーが動いてた!

f:id:appgameui:20191006112107p:plain

 

 

f:id:appgameui:20191006112022g:plain

 動いてる

 

ラクロ以外で初めて見たかも。

 

ある程度テンプレ化すれば基本的には素材の置き換えでいけると思うので、コストとしては静止画とそんなに変わらないかも?

 

とはいえ、テンプレを作るコストが大きいのと、画面の全体の情報量が増えるので無闇に訴求しても意味がありません。使う場面は限定したほうが良さそう。

 

 

表現もどんどん増えているので、選択肢を増やす意味でもどんどん新しい表現を学んでいく必要がありますね。

 

 

効果のほどは分かりませんが、クオリティやビジュアルを追求していくと静止画から動画になる、という流れはあるので、デザインの参考にしても良いのかな、と思い紹介させていただきました。

 

 

もう少し採用数が増えてけばデザインの意図なんかも見えてくると思うので、引き続き注目していきたいと思います。

 

 

 

 

 

おまけ。グラクロのデザイン貼っておきます。

グラクロ イベントページ

厳密にはお知らせ画面ではないけど 

 

▼gif (エリザベスver)

グラクロ イベントバナー

▼gif (エリザベスver2)

グラクロ イベントバナー

▼gif (バンver)

グラクロ イベントバナー

 

▼gif (ディアンヌver)

グラクロ イベントバナー

 

appgameui.hatenablog.com

「妖怪ウォッチぷにぷに」シリーズの画面遷移の演出を比較してみました。(全部ウィスパー)

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

 

妖怪ウォッチ」をいくつかプレイしてみて気付いたのですが、遷移時のアニメーションは必ず共通してウィスパーのシルエットで抜いてるんですよね。

 

早速見ていきますー。 

 

妖怪ウォッチぷにぷに

f:id:appgameui:20191005150204g:plain

 

 

 

妖怪三国志

f:id:appgameui:20191005151124g:plain

ぷにぷにと同じ速度ですね。

 

妖怪ウォッチメダルウォーズ

f:id:appgameui:20191005150258g:plain

はやっ!

 

妖怪ウォッチゲラポリズム

f:id:appgameui:20191005150858g:plain

固い。

 

ほらこのように。

 

すべての場面がウィスパーのデザインというわけではないのですが、ある程度強調したい場面転換の場合には使われているように感じました。

 

先日、メニューのアイコンの共通点も紹介しましたが、こういった部分でもブランドイメージやメンタルモデルを利用しているのかな、と思いました。

 

 

appgameui.hatenablog.com

「妖怪ウォッチぷにぷに」セーブデータの仕様があるのはターゲットを意識しているから?

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

 

先日の妖怪ウォッチゲラポリズムに引き続き「妖怪ウォッチぷにぷに」でもセーブデータを分ける実装がなされてました。

f:id:appgameui:20190927085334p:image

ぷにぷにはこんな感じ

 

f:id:appgameui:20191006105116p:plain

ゲラポリズムはこんな感じ

 

ソシャゲだと本当に珍しい仕様なのですが、妖怪ウォッチだと頻出する実装ですね…。

 

妖怪ウォッチはある程度一貫した意図のあるデザインや実装をしている節が見え隠れしているので、この仕様に関しては「DQのUIは白黒。セーブは教会」みたいなコンテンツ独自の思想があるのかな。

 

仮説を考えてみます。

 

 

 

 ターゲットの家族でプレイして欲しいと想定しているから

セーブデータがある理由の一つに、ターゲットに家族がいる可能性を想定しているのかな、と思いました。妖怪ウォッチの戦略の一つに、子供だけでなく親御さんも楽しんでほしい、という部分があります。

(子供に分からないネタをする、とか)

 

小さい子供はまだ端末を持たせて貰えないことも多いと思うので、親の端末を借りてプレイするか、おさがりの端末でプレイするとか、いずれにしろ親の監視下に置かれることがほとんどだと思います。

 

そういった際に、妖怪ウォッチを通じて親子間のコミュニケーションとなるようにセーブデータを用意したのかな、と思いました。

 

 

ターゲットのメンタルモデルに「ゲームを始める前にセーブデータを選択する」というフローが組み込まれているから

セーブデータを選ぶというのが儀式的な意味合いなのかも?という仮説です。

 

小さい子にとって、セーブデータの意味や必然性、そもそもスマホと据え置き機の区別もあまり付いてないのかな、と考えられます。

 

つまりセーブデータを選択させないと、セーブデータが消えてしまったのではないか、という不安をユーザーに感じさせてしまうがゆえに、この実装を用意しているのかな、とも考えられます。

 

この辺りは厳密にはユーザーインタビューをしないとダメですが、据え置きでもネットワークにつなげられたり、ブラウザや動画も見れるので、子供にとっては似たようなものと認識されていたも不思議ではありません。

 

 

というか、ライトユーザーなら尚更そういう認識を持っていてもおかしくないかも。

 

まとめ

明確な理由は分かりませんが、まとめると…

1:ターゲットに兄弟がいると想定しているから
2:ターゲットのメンタルモデルに「ゲームを始める前にセーブデータを選択する」というフローが組み込まれているから

という仮説を立ててみます。

 

あくまで私の仮説ですが、セーブデータの必要性という視点でデザインされているようには思えなかったんですよねー。