こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ポケモンユナイト」から、アバター作成の流れの事例をご紹介します。
特に編集パーツごとのキャラクターとカメラの位置、キャラクターのポーズ、シームレスな画面遷移など３Dを使ったデザインなどに注目してみます。
該当の画面はこちらです。
大きく分けて以下の５つの段階でアバターを作成していきます。
- みため
- かお
- ヘアスタイル
- ヘアカラー
- ファッション
まずは「みため」です。
「性別」と表現せず「みため」と表現している点において、性的マイノリティを意識しているのかもしれません。個人的には配慮という感覚は無く、表現として定着しているようにも感じます。
２つめは「かお」です。
さきほどの「みため」よりも顔が大きく表示されるようにカメラが移動しています。
よく見ると背景の模様も変わっています。
若干の工夫ですが、背景の情報量を減らすことにより、ユーザーが顔パーツを選ぶことに集中できるようにしているのかな、と感じました。
顔周辺がすっきりした見た目になっています。
３つめは「ヘアスタイル」です。
９つのデザインから任意のひとつを選択します。
カメラの距離が少し遠くなり、髪型全体がバランスよく表示される位置になっています。
４つめは「ヘアカラー」です。
緑、ピンク、紫のような奇抜な色は無く、自然な色が並んでいます。
髪型と比較してカメラの位置は若干遠ざかります。
髪の色を変えるだけであれば遠ざける必然性は無いように感じるのですが…なぜだろう。
若干服の色が見えるようになるので、全体の雰囲気を見せようとしているのかな…。
あるいはゲームなので、操作に対するフィードバックが弱いとつまらない印象を受けることもあります。画面に変化を持たせることで工程が進んだことに対するフィードバックを表現したかったのかもしれません。
５つめはファッションです。着ている服装を選択します。
カメラは大きく遠ざかり、身体全体が表示される位置になります。
ポーズも少し変わり、腕を腰に当てるポーズから自然と直立しているポーズに変化しています。
アバターを設定したら確定します。
演出としては、SF風なカメラにスキャンされ、認証カードの様なものに登録される、といったストーリーが展開されています。
かなり手が込んでおり、この演出を通じて世界観を伝えているように感じました。
振り返ってみるとデザインの特徴としては以下の４点をあげてみます。
- 設定するパーツに合わせてカメラとの距離を細かく設定する
- 工程が進んでいることが自然と認識できるように、工程が進んでいるならカメラは遠くなる、というルールを守っている
- 頻繁に見せない演出は尺を長くして豪華にし、世界観を表現する演出を取り入れている
- シームレスな画面遷移で没入感を阻害しない
以上です。
アバター作成画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ポケモンユナイト」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。
Pokémon UNITEの動画や静止画の利用に関するガイドライン | 『Pokémon UNITE』公式サイト
主な参照箇所を抜粋します。
非営利目的に限り、動画共有サイトを含むウェブサイトやSNSへPokémon UNITEに関する動画や静止画を投稿することができます。ただし、YouTubeやニコニコ動画等が正式に提供するパートナー機能等を使用する場合には、投稿による収益化も可能です。
以下は確認したガイドラインページのキャプチャです。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
