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

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

「白夜極光」プレイヤーの経験値の情報はビジュアルで見せても問題ないのかもしれない

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

 

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

 

今回は「白夜極光」のプレイヤーの経験値ゲージのデザインに新しさを感じたため、紹介いたします。

 

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

f:id:appgameui:20210618095046p:image

 

 

数字の中がゲージになっている! 

画面全体を見せても分かりづらいですよね。
分かりやすく見せるため、拡大表示します!

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

一見すると数字のデザインに見えますが、中のオレンジ部分が獲得した経験値になっています。この場合は8割程度まで経験値が溜まっていますね。

最初は気付きにくいデザインかもしれませんが、新しさを感じることができました。

 

プレイヤーの経験値はそこまで重要な情報ではないのかも?

ゲージや数字などと比較して分かりづらいけどどうなのかな、と思いましたが普通にゲームを遊んでいる分には気になりませんでした。

改めて考えてみると、ゲームを攻略する上でプレイヤーの経験値はそこまで重要な情報ではないのかもしれません。

 

少なくとも「白夜極光」のゲームを攻略する上では、プレイヤーのレベルや経験値はあまり意識する必要が無い情報です。

プレイヤーのレベルよりはキャラクターのレベルやステータスの方がゲームを攻略する上では重要なパラメータです。 

経験値の情報を隠すことにより、画面の情報量を抑えることに繋がるのもある意味ではメリットになるのかもしれません。

 

 

 

以上です。

プレイヤーの経験値ゲージのデザインに悩んだ際の参考になれば幸いです。

「白夜極光」アイテムが不足しているとアイテムアイコンが震えて伝えるデザイン

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

 

 

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

 

今回は「白夜極光」から施設の解放に必要なアイテムが不足していることを、より強調して伝えるUIデザインを紹介いたします。

 

ソシャゲでは何かを強化したり、解放する際にアイテムを消費することは一般的です。汎用性の高いシーンかと思いますので参考になりやすいかな、と思います。

 

 

該当の画面はこちらです。施設を解放する際の確認ダイアログです。

f:id:appgameui:20210618095120p:image

 

 

不足しているとアイテムアイコンが震える!

アニメーションで見るとこんな感じです。

解放する施設を選択し、解放に必要なアイテムが表示されています。
アイテムが不足していると解放されません。

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



ここではアイテムアイコンのアニメーションに注目します。

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

 

このアニメーションを細かく見ていくと、以下の要素が含まれています。

  • アイテム不足している場合は分子の色が赤くなる
  • 不足しているアイテムアイコンが細かく震える
  • 「材料不足です」というエラーメッセージが表示される
  • 分子だけではなく、分母の色も赤く変化する
  • エラーメッセージが消えても分子と分母の色が赤くなったままになる

です。

特に注目しないのは、アイテムアイコンが震えることによって、画面に貼り付いているものではなく触れることが分かる、というデザインになっています。

 

 

 

アイテムが不足している場合、どのように伝えるかも考える必要がある!

触れることが分かる、と書きましたが、実際にタップしてみます。
このように、不足しているアイテムが獲得できるクエストが案内されています。

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



分かりやすく大きくします。

入手方法

メインステージ3-7を初めてクリアした時に獲得できる

と書かれています。 

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

 

 

 

 

アイテムが不足していることを伝えるデザインの参考になれば!

ソシャゲでは強化や機能解放するためにアイテム必要なことが多くあります。
それと同時にアイテムが不足している場合、どのように伝えるかも考える必要があります。

「白夜極光」の場合、数字で示すだけではなく、アニメーションをする点で工夫が見られました。

 

 

以上です。

アイテムが不足していることを伝えるデザインの参考になれば幸いです。

「IDOLY PRIDE アイドリープライド」ボタンが押しやすい位置にあるダイアログ!

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

 

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

 

今回は「IDOLY PRIDE アイドリープライド」のダイアログのデザインを紹介します。

 

「IDOLY PRIDE アイドリープライド」で実装されているダイアログはソシャゲで一般的に使われがちな画面中央に表示されるデザインではありません。
いくつか実装されている場面を紹介します。

 

例えばこちらの画面です!

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

 

 

 

縦画面の場合、画面中央にOKボタンが寄ってしまうことがある…

このように「IDOLY PRIDE アイドリープライド」では画面下部から表示されるダイアログが採用されています。

 

縦画面のゲームの場合、ダイアログのサイズと表示位置によっては画面中央にOKボタンが寄ってしまい、指で押しづらくなってしまうことがあります。

 

例えば「ヴァンガード ZERO」の場合、小さいダイアログのOKボタンが画面中央に寄っています。

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

 

 

 

指が届きやすい位置にボタンが配置されているため、操作しやすいデザイン!

このように一般的なソシャゲのダイアログのデザインの場合、ダイアログの中に表示される情報量によって決定ボタンの位置が変わることがあります。

 

「IDOLY PRIDE アイドリープライド」の場合はそういったことを考慮し、決定ボタンの位置が大きく変わりません。

指が届きやすい位置にボタンが配置されているため、操作しやすいデザインです。

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



サイズが変化するデザインも!

ダイアログのサイズが変化するデザインもあります。

例えばリストのようにスクロールするようなデザインです。

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

 

以上が「IDOLY PRIDE アイドリープライド」の基本的なダイアログのデザインの紹介です。

しかし、すべてのダイアログがこの形式になっているわけではありません。

 

 

見せたい情報によってダイアログのデザインフォーマットを変える柔軟さ!

文字情報ではなくグラフィックを見せたい場合はこれとは違うデザインのダイアログがあります。 

例えばこれは放置ボーナスを獲得する際のダイアログです。
報酬などのアイテムのグラフィックを見せたい意図が感じられました。

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


 

 

以下はこちらはストーリー解放のダイアログです。

ダイアログの左側にストーリーに関係するシーンやキャラクターのサムネイルを大きく表示しています。

 

この場合は閉じるボタンが枠の外にあり、「今すぐ観る」がテキストリンクになっているデザインです。

他の場面で青いボタンが採用されているため、文字が青くなっているだけで押せるものだと認識することができるのもポイントですね。

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

 

 

テキストリンクだけのダイアログもあります。
システム的、メタ的なメッセージであるためか、ゲームの世界観の要素は少なく、隔絶している印象があります。

 

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

 

 

ボタンが押しやすいダイアログをデザインする際の参考になれば!

以上です。

近年は端末の大型化が進んでいます。
そのため、意識しないと端末によってはボタンが押しづらいデザインになってしまうことがあります。

「IDOLY PRIDE アイドリープライド」のダイアログの場合は、ボタンの押しやすさに配慮したデザインになっていると感じました。

 

ボタンが押しやすいダイアログをデザインする際の参考になれば幸いです。

 

 

 

権利者さまへ

以下のガイドラインによりゲーム画面のスクリーンショットの公開については許可されている認識でおります。

著作物利用ガイドライン | 株式会社QualiArts(クオリアーツ)

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

 

お問い合わせ

 

「IDOLY PRIDE アイドリープライド」汗の表現が素晴らしい!アイドル達の存在感が増す表現!

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

 

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

 

今回は「IDOLY PRIDE アイドリープライド」のアイドルの汗の表現について紹介します。

 

「IDOLY PRIDE アイドリープライド」ではアイドルが踊ると汗をかく演出が実装されています。
汗が確認できる場面はいくつかあるのですが、事例となる画面をひとつ紹介します。

こちらです!こちらはライブ中の画面です。

f:id:appgameui:20210713011132p:image

 

 

ライブ途中で汗の表現が! 

ライブ開始直後には汗はかいていないのですが、ライブ中盤以降になると汗をかいている表現になります。

 

こちらがライブ開始直後の表情で…

f:id:appgameui:20210713011156p:image

 

 

こちらがライブ終盤の表情です。

f:id:appgameui:20210713011500p:image

f:id:appgameui:20210713011547p:image

 

 

分かりやすいようにそれぞれ大きくします。

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

 

 

このように汗が光っていたり、髪の毛が乱れているのが特徴的です。
こういった汗の表現はアイドルをモチーフとしたゲームでは初めて見ました。 

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

 

 

リザルトやホーム画面でも汗の表現が見れます!

他にも汗が確認できる場面として、リザルト画面とホーム画面があります。

 

まずリザルト画面はこちらです。
ライブ終了後の控え室という設定ですね。

f:id:appgameui:20210713014033p:image

 

このように汗の表現が確認できます。

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

 

 

こちらはホーム画面です。
普段見せない真剣な表情でアイドルがダンスの練習をしています。

f:id:appgameui:20210713014046p:image

 

 

こちらでもこのように汗の表現が確認できます。

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

 

 

ユーザーの反応も良い!

以前、汗の表現についてブログ内で提案したことはありましたが、まさか実際に実装するアプリが出てくるとは思いませんでした。

アイドルマスター ミリオンライブ! シアターデイズのアイドルの汗の表現をレタッチした画像です。左が汗なし、右が汗ありです

「アイドルマスター ミリオンライブ! シアターデイズ」アイドルだって汗くらいかいてもいいと思うよ! - ゲームアプリのUIデザイン

 

 

個人的には汗があることでアイドルの存在感、リアリティが増すと感じています。

また、Twitterで「アイプラ 汗」で検索した限り、プレイしているユーザーからの評価も高いことがうかがえます。

 

 

CEDEC2021の講演でも触れる予定!

運営側も汗の表現には力を入れている様子が感じ取れます。

 

例えばApp Storeのゲームの紹介文にはこのようにあります。

アイドルの“汗の表現”や、カメラワークにこだわった3Dライブパートは必見!

f:id:appgameui:20210712094535p:image

 

 

またCEDEC2021の講演でも多少なりとも取り上げるみたいです。

CEDEC2021: 「IDOLY PRIDE」の3D美少女キャラクターを魅力的かつ効率的に制作する手法

また、動的な顔形状の制御や、本作の特徴のひとつの「汗表現」といった挑戦も行っているので、このような取り組みについてお伝えします。 

 

 

 

キャラクターの存在感を高めるための参考になれば! 

今回は以上です。

UIデザイナーはボタンやバナーなどのパーツを作るだけではありません。
ゲームの世界観を伝えることや、没入感を高めることも求められます。

「IDOLY PRIDE アイドリープライド」で汗の表現を実装したことはゲームの世界観を伝えることや、没入感を高めることに寄与していると考えます。 

 

実際に汗の表現を実装するためのデータを扱うことは少ないかもしれませんが、 チーム全体として取り組めると良いのかもしれません。

 

今回は以上です!

キャラクターの存在感を高めるための参考になれば幸いです。

 

 

 

 

権利者さまへ

以下のガイドラインによりゲーム画面のスクリーンショットの公開については許可されている認識でおります。

著作物利用ガイドライン | 株式会社QualiArts(クオリアーツ)

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

 

お問い合わせ