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

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

「ポケモンユナイト」ネットワークアイコンをタップするとPing値が表示されるデザイン

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

 

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

 

今回は「ポケモンユナイト」から、ネットワークを示すアイコンをタップすると、ゲームサーバーからの応答速度(Ping値)が表示されるデザインをご紹介します。

あまり見たことが無かったのですが、Ping値の表示方法の参考になれば幸いです。

 

該当の画面はこちらです。

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

 

こちらはホーム画面ですが、画面右上にネットワークを示すWifiのようなアイコンが表示されています。
普段はアイコンのみですが、このアイコンをタップすると、大まかなPing値が表示されます。

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

 

 

アニメーションで見るとこんな感じですね。
タップで表示のオンとオフが切り替えられるようになっています。

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

 

分かりやすいように該当部分を拡大します。
このようにリアルタイムでのPing値が表示されます。

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

 

このようにゲームプレイ外で詳細なPing値が確認できることで、ゲームプレイ中の環境が快適かどうか、ユーザーがより正確な判断をすることが可能になります。

少し見つけづらい情報かと感じられるかもしれませんが、Ping値を気にするユーザーはこのジャンルのゲームに慣れているユーザーであると考えられます。

したがって、多少の学習コストが必要な点、手数が必要な点は許容されると考えられるのかもしれません。

 

 

以上です。

Ping値の表示方法について検討する際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

ポケモンユナイト」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

Pokémon UNITEの動画や静止画の利用に関するガイドライン | 『Pokémon UNITE』公式サイト

 

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

非営利目的に限り、動画共有サイトを含むウェブサイトやSNSへPokémon UNITEに関する動画や静止画を投稿することができます。ただし、YouTubeニコニコ動画等が正式に提供するパートナー機能等を使用する場合には、投稿による収益化も可能です。

 

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

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

 

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

 

お問い合わせ

 

 

「ポケモンユナイト」ゲーム設定に色覚多様性対応があった、オンにすると自キャラのHPゲージが目立ちやすくなる

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

 

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

 

今回は「ポケモンユナイト」から、ゲーム設定の中に色覚サポートがある事例をご紹介します。

 

該当の設定はこちらです。

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


このようにゲームのシステム設定の中に「色覚サポート」の項目があります。

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

色を調整し、バトル中に相手チームと味方チームを見分けやすくします。

 

実際に設定のオンオフを比較して見てみます。

こちらは「色覚サポート・オフ」です。

f:id:appgameui:20220108234537p:image

 

こちらが「色覚サポート・オン」です。

f:id:appgameui:20220108234528p:image

 

 

PhotohopのP型フィルタをかけるとこんな感じです。
基本的には差異は無いように見えますが、よく見ると自キャラのHPゲージの色が変わっており、自分と相手が判別しやすくなっています。

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

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

 

分かりやすいように拡大してみます。

「色覚サポート・オフ」の場合、自キャラと相手とのHPゲージの色は黄色周辺でまとまっています。

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

 

「色覚サポート・オン」の場合、自キャラのHPゲージがやや青みがかっており、相手キャラとの比較が分かりやすくなっています。

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

 

ポケモンユナイト」は陣取りゲームであり、競技性の高いゲームシステムです。
瞬間的に情報が判別しやすくなることで、ユーザーの認識に関するストレスが軽減できると考えられます。

特にチーム戦の場合は混戦状態になることも多く、自分のHPゲージが見やすくなることは重要です。

 

一般的には色覚多様性対応はC型以外のユーザーのサポートと考えられがちですが、上手くコントロールすることでC型のユーザーにも大きなメリットがあります。

 

以上です。

色覚多様性対応の取り組みの参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

ポケモンユナイト」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

Pokémon UNITEの動画や静止画の利用に関するガイドライン | 『Pokémon UNITE』公式サイト

 

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

非営利目的に限り、動画共有サイトを含むウェブサイトやSNSへPokémon UNITEに関する動画や静止画を投稿することができます。ただし、YouTubeニコニコ動画等が正式に提供するパートナー機能等を使用する場合には、投稿による収益化も可能です。

 

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

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

 

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

 

お問い合わせ

 

 

「ポケモンユナイト」ポケモンらしいUIパーツの事例紹介

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

 

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

 

今回は「ポケモンユナイト」から、IPらしいデザインを取り入れたUIパーツの事例をご紹介します。

 

該当のUIパーツはこちらです。

f:id:appgameui:20211231100504p:image

 

画面下部にあるこちらの丸いパーツ群です。
よーく見ると画面左端だけポケモンボールになっています。

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

 

さりげない!

 

隠れミッキーのような趣のあるデザインですが、これくらいのさりげなさが大切だと感じています。

 

例えば、この画面ではUIパーツ自体を見せたいわけではありません。

この画面での目的は「ユーザーが選択肢の中から好みの見た目を選んでもらうこと」です。

仮にUIパーツが主張してしまうと視線が散り、本来目立たせたい情報に意識が向かわない可能性が生まれます。

 

別の見方をすると、ここをモンスターボールにする必然性はありません。
アクティブ、非アクティブが分かれば十分です。

しかし、敢えてポケモンらしいデザインを取り入れることで、より意味のあるデザインに仕上がっています。

また、ユーザーがデザインの工夫に気付いた時に、よりポケモンの世界観に没入し、ゲームを楽しめるようになると考えられます。

 

こういったひとつひとつのUIパーツのデザインがゲームらしさ、IPらしさを構築しているのだと感じました。

 

以上です。

IPらしいUIパーツのデザインを検討する際の参考になれば幸いです。

 

 

 

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

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

 


権利者さまへ

 

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

ポケモンユナイト」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

Pokémon UNITEの動画や静止画の利用に関するガイドライン | 『Pokémon UNITE』公式サイト

 

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

非営利目的に限り、動画共有サイトを含むウェブサイトやSNSへPokémon UNITEに関する動画や静止画を投稿することができます。ただし、YouTubeニコニコ動画等が正式に提供するパートナー機能等を使用する場合には、投稿による収益化も可能です。

 

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

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

 

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

 

お問い合わせ

「ポケモンユナイト」アバター作成画面の流れと4つの特徴に注目してみた

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

 

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

 

今回は「ポケモンユナイト」から、アバター作成の流れの事例をご紹介します。

特に編集パーツごとのキャラクターとカメラの位置、キャラクターのポーズ、シームレスな画面遷移など3Dを使ったデザインなどに注目してみます。

 

該当の画面はこちらです。

f:id:appgameui:20211231100504p:image

 

大きく分けて以下の5つの段階でアバターを作成していきます。

  1. みため
  2. かお
  3. ヘアスタイル
  4. ヘアカラー
  5. ファッション

 

まずは「みため」です。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

「性別」と表現せず「みため」と表現している点において、性的マイノリティを意識しているのかもしれません。個人的には配慮という感覚は無く、表現として定着しているようにも感じます。

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

 

 

2つめは「かお」です。

さきほどの「みため」よりも顔が大きく表示されるようにカメラが移動しています。
よく見ると背景の模様も変わっています。

若干の工夫ですが、背景の情報量を減らすことにより、ユーザーが顔パーツを選ぶことに集中できるようにしているのかな、と感じました。

顔周辺がすっきりした見た目になっています。

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

 

3つめは「ヘアスタイル」です。

9つのデザインから任意のひとつを選択します。
カメラの距離が少し遠くなり、髪型全体がバランスよく表示される位置になっています。

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

 

4つめは「ヘアカラー」です。
緑、ピンク、紫のような奇抜な色は無く、自然な色が並んでいます。

髪型と比較してカメラの位置は若干遠ざかります。
髪の色を変えるだけであれば遠ざける必然性は無いように感じるのですが…なぜだろう。
若干服の色が見えるようになるので、全体の雰囲気を見せようとしているのかな…。

あるいはゲームなので、操作に対するフィードバックが弱いとつまらない印象を受けることもあります。画面に変化を持たせることで工程が進んだことに対するフィードバックを表現したかったのかもしれません。

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

 

5つめはファッションです。着ている服装を選択します。
カメラは大きく遠ざかり、身体全体が表示される位置になります。

ポーズも少し変わり、腕を腰に当てるポーズから自然と直立しているポーズに変化しています。

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

 

アバターを設定したら確定します。

演出としては、SF風なカメラにスキャンされ、認証カードの様なものに登録される、といったストーリーが展開されています。
かなり手が込んでおり、この演出を通じて世界観を伝えているように感じました。

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

 

振り返ってみるとデザインの特徴としては以下の4点をあげてみます。

  1. 設定するパーツに合わせてカメラとの距離を細かく設定する
  2. 工程が進んでいることが自然と認識できるように、工程が進んでいるならカメラは遠くなる、というルールを守っている
  3. 頻繁に見せない演出は尺を長くして豪華にし、世界観を表現する演出を取り入れている
  4. シームレスな画面遷移で没入感を阻害しない

 

 

以上です。

アバター作成画面をデザインする際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

ポケモンユナイト」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

Pokémon UNITEの動画や静止画の利用に関するガイドライン | 『Pokémon UNITE』公式サイト

 

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

非営利目的に限り、動画共有サイトを含むウェブサイトやSNSへPokémon UNITEに関する動画や静止画を投稿することができます。ただし、YouTubeニコニコ動画等が正式に提供するパートナー機能等を使用する場合には、投稿による収益化も可能です。

 

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

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

 

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

 

お問い合わせ