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

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

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」スタミナ一括消費機能を実装する際に報酬の倍率もあるとお得感も増しそう

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からライブにおけるスタミナの一括消費機能の利便性についてご紹介します。

以下、概要です。

 

スタミナ一括消費機能の説明

f:id:appgameui:20240206223036p:image

「シャニソン」にはライブに使用するスタミナを一括消費する機能があります。
流れをアニメーションで見るとこんな感じです。

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

一括で消費するスタミナの量を設定し、ライブを実行します。
画面はライブ画面には遷移せず、簡易的な演出が表示されるダイアログが表示され、報酬が獲得できます。

このようにテンポ良くスタミナを消費し、報酬が獲得できる機能です。
それではいくつかのメリットを考えてみたいと思います。

 

時間短縮につながる

ソシャゲをプレイしている多くのユーザーは可処分時間が限られる中でプレイしています。そのため、ある程度短時間でプレイできることが求められがちです。

また、短時間で報酬などのリターンが得られることは、即時の満足感にもつながります。これは心理学の「即時報酬」の概念に基づくもので、人は将来得られる報酬よりも即時の報酬を得る行動を好む傾向があるとされています。

将来の大きな利益(遅延報酬)より、目の前の小さな利益(即時報酬)を追ってしまうこと。(今すぐかが重要で、今すぐじゃなければどうでもよくなる。)

強化学習入門 ~これから強化学習を学びたい人のための基礎知識~ | DOORS DX

 

継続的なエンゲージメント

スタミナ一括消費機能があると、忙しい中でもゲームを続けやすくなり、習慣化しやすくなります。習慣化した場合、一般的に人はこれまでかけた時間や手間を惜しむ傾向があり、ゲームを続けるほど止めにくく感じます。

これは「サンクコスト効果」「コンコルド効果」がはたらいていると考えられます。

サンクコスト効果 (サンクコストの誤謬) とは、お金や労力、時間を投資した結果、たとえ今後のコストがメリットを上回っても、同じことを続けてしまう傾向のことをいいます。

サンクコスト効果に惑わされない判断をするには [2024] • Asana

 

一括消費するスタミナの量をユーザーが調節できる

「シャニソン」の一括スタミナ消費機能は、消費するスタミナ量をユーザーが決めることができます。ユーザーが任意のスタミナ消費量を設定できることで、細やかなリソース管理ができます。

基本的には最大値を入力することが多いかと思いますが、効率化を求めるなら細かく設定できた方がより便利だよね、という印象です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲平時は0から5倍まで設定可能です

 

常に最大値のスタミナを消費するオプションが便利

「常に最大」の項目にチェックを入れると、現在のスタミナ量に応じて最大値が入力されます。細かく設定できると入力の手間も発生してしまいますが、この機能があることで消費するスタミナ量を設定する手間が省け便利です。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲常に最大量のスタミナを消費する設定

 

獲得できる報酬が倍数で書かれている

f:id:appgameui:20240206223036p:image

スタミナ一括消費機能で見落とされがちなのが報酬の表示かもしれません。
「シャニソン」では消費するスタミナ量に正比例して報酬が獲得できることが表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲消費するスタミナ量に応じて得られる報酬の量

倍数が書かれていることでお得感を強調しているのも興味深い点です。
10回周回することと10倍の報酬を得ることはほぼ同じ意味ですが、10倍と書かれている方がよりお得感を演出できるのかもしれません。

 

以上です。
スタミナ一括消費機能をデザインしたい場合の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」ガシャ履歴画面をデザインしたい貴方へ 必要な情報を簡潔にまとめたデザイン

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からガシャ履歴画面をご紹介します。
これはガシャの購入履歴が確認できる機能ですね。理由は分かりませんが、比較的見かけるようになった印象です。

以下、概要です。

 

階層を分けて表示してる

こちらは「シャニソン」のガシャ履歴画面です。
まず購入したガシャの種類を選択し、次に選択されたガシャで獲得したアイドルなどの情報が確認できるように階層が分かれています。

f:id:appgameui:20240207081138p:image
▲購入したガシャの種類を選択する画面

 

f:id:appgameui:20240207081141p:image
▲選択したガシャから獲得したアイドルなどを表示する画面

階層を分けているということは「段階的開示」の手法が取り入れられていると考えられます。情報の階層が分かれていることで探したい情報が目に留まりやすくなります
各階層に表示されている情報をまとめると以下の通りです。

第一階層

  • ガシャを引いた日時
  • 引いたガシャの名前
  • 消費したリソースと数量

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

※やや余談ですが、この画面で消費リソースが表示されているのが特徴的だと感じました。

 

第二階層

  • 獲得したアイドル(獲得済の場合は別途リソース)

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

「シャニソン」のガシャ履歴のデザインの特徴は、このように階層を分けている点だと考えています。

 

ガシャ履歴が確認できるとエラーが出たときに便利

ガシャを引くことを商品購入と見なした場合、購入履歴が確認できるのは自然な流れな気がします。商品購入履歴と似ていますが、ガシャ履歴を確認したいと考えるのは以下のような状況が考えられます。

  1. ガシャ演出中にエラーが発生するなどし、結果画面が表示されなかった場合
  2. 連続で回すなどし、ユーザーが結果を見落としていた場合

特に一度に多くのガシャを引いた場合、獲得するアイテムの数も多くなるため、人力での把握は困難です。システム側で情報を表示することで、ユーザーが情報を把握する手間を省くことにも繋がります。

 

ユーザー間のコミュニケーションにも利用される

SNSを見ているとガシャ履歴は以下のような使われ方もされていました。

  • 他プレイヤーとのコミュニケーション(推しが獲得できた)
  • 予算管理(これだけ回した)
  • 確率検証(この回数で獲得できた、獲得できなかった)

ガシャ履歴画面はユーザー間とのコミュニケーションを主軸とした機能ではないと思いますが、共有されても見た目の上では問題ないようにデザインすると良いのかもしれません。

 

以上です。
ガシャ履歴画面をデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」赤文字の使い方をまとめてみました

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)から赤文字の使い方をご紹介します。
赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。

以下、概要です。

 

シャニソンでの赤文字の使われどころを分類してみた

「シャニソン」の画面を見ていると、主に以下の用途で赤文字が使われる頻度が高いと感じました。

  • 注意文言
  • ステータス
  • 減少する数字
  • 開発者が訴求したい情報(ピックアップ)
  • ユーザーの行動を誘導したいとき(ナッジ効果を期待?)

それではそれぞれの詳細を紹介します。

 

1:注意文言

f:id:appgameui:20240315100006p:image

よく使われている箇所として、まずは注意文言が挙げられます。
例えば「シャニソン」ではアイドルの移籍確認ダイアログで使われていました。

 

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

移籍されたフェスアイドルのデータは削除されますが、フェスユニットのデータに影響ありません。

アイドルの移籍はやり直しができないリソースの削除で、やや慎重な操作が求められます。
操作を誤るとユーザーに不利益が生じる懸念もあり、ボタンの近くに注意文言を表示し、色とレイアウトを利用して目に留まりやすくしているのも特徴的です。

ただ、赤で書かれている文章を注意文言と解釈することはできますが、注意文言が必ずしも赤文字になっているわけではありません。

つまり、こういうことですね。

赤文字=注意文言
注意文言≠赤文字

ちょっと分かりにくいかもしれないので、具体例を挙げます。
例えば、通信環境が良い場所でダウンロードを勧める文言は赤文字ではありません。

f:id:appgameui:20240315101756p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
文頭に「※」を付けたり青文字で書いているため、注意を引こうとしている意図は感じますが、だからといって赤文字になるわけではありません

 

2:ステータス

f:id:appgameui:20240315100631p:image

特定のステータスを表示する場合、赤文字を使うこともあります。

「シャニソン」のプロデュース画面では「合宿参加不可」の文字列が赤文字で書かれていました。

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

合宿参加不可

赤文字にすることで「夏合宿」や「シーズン1終了時」などの情報とは異なる性質を持つ情報だと分かります。
また、書かれている内容が「参加不可」であるため、何かしらの条件を達成すれば「参加可能」になることも推測可能です。
実際、ユニットのパラメーターが一定以上であれば合宿に参加可能になります。

このように特定のステータスを赤文字で表示することがあります。

 

3:減少する数字

f:id:appgameui:20240315100629p:image

リソースなど特定の数字が減る際、減った数字を赤文字で表示するケースもしばしば見かけます。
例えば「シャニソン」ではプロデュースを開始する際、消費するSTの数字と消費した後のSTの数字が赤文字で表示されていました。

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

STを10消費してプロデュースを開始します。よろしいですか?

2 ▶ 0/100

ゲームはリソース管理が重要です。
HPを管理したり、残機を管理したり、手持ちの仲間を管理したり…

攻略が難しい場面は特にリソースにシビアになることが多いため、ユーザーが情報を見落とす確率を少しでも下げたいのかもしれません。

 

4:開発者が訴求したい情報

f:id:appgameui:20240207081000p:image

ここまでは強調されることでユーザーにメリットがある箇所を中心に紹介しました。
一方で、ユーザーにメリットは少ないものの、赤文字で書かれている箇所もあります。
これは運営側が特に訴求したい情報かと推測します。

例えば「シャニソン」では、ガシャに含まれる排出確率アップ中のアイドルの排出確率は赤文字で表示されています。

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

情報を強調し他の情報と差別化することで、開発者とユーザー間で「このアイドルの排出確率がアップされているのだな」と認識を合わせやすくなると考えられます。

 

5:ユーザーの行動を誘導したいとき

f:id:appgameui:20240315100001p:image

やや特殊な使用例ですが、違和感を利用しユーザーの行動を誘導する際にも利用できそうです。
「シャニソン」ではアカウント連携が済んでいない場合、連携のステータスが赤文字で表示されていました。

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

アカウント連携
未連携

ステータスが赤文字で表示されていることで、視線が向きやすい情報になっていると感じます。アイコンの横などに赤い丸を表示させる、いわゆる「ナッジ」のような使われ方に似ているかもしれません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲赤い丸を表示しユーザーの注意を引くデザイン

 

実際、アカウント連携をすると文字色が赤から青に変わります。
文字色が青に変わると周囲の色と馴染みやすくなり、違和感がなくなります。

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

アカウント連携
連携済

以上、「シャニソン」でどのような場面で赤文字が使われているかの事例を紹介しました。

 

頻繁に使わないから伝わる

赤文字に限りませんが、強調表現を行う際に注意したい点としては「使う場面を絞る」です。「シャニソン」は赤文字を使う場所を絞っており、基本的には画面内に1箇所程度です。

使う場所を絞っているからこそ、使われている場所に注目しやすくなっています。
あちこちに使われていると見慣れてしまい、目に入る刺激として弱くなります。

どういったときに強調表現を使うかだけではなく、どのように使うのかも気をつけたいと思いました。

 

以上です。
強調表現として赤文字を使いたい場合の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」ガシャ結果画面を見たらシェアする情報が3パターンもあった!細かな差分にも注目!

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。

以下、概要です。

 

シェアする情報を選択できる

f:id:appgameui:20240207080834p:image

「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。
結果をシェアできるゲームはしばしば見かけますが、シェアする情報が選択できるのは珍しいと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
シェアする情報は以下の3つから選択できます。

  • アイドルのみをシェア
  • アイドルとガシャ結果をシェア
  • ガシャ結果のみをシェア

つまり「A」or「A+B」or「B」の3パターンですね。

 

アニメーションで一連の流れを確認するとこんな感じです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

動いていると何をやっているか分かりにくいかもしれませんね。
状況を説明すると、以下の工程に分かれています。

  1. ガシャ結果画面に遷移完了
  2. シェアする情報を選択(アイドルのみ or アイドルとガシャ結果 or ガシャ結果のみ)
  3. シェアするアイドルを選択
  4. シェアする手段を選択

という流れです。

 

シェアする文言が変わる

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

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

シェアする情報が3パターンあるのは分かりましたが、一見して見落としがちなのはシェアする文言も異なる点です。
シェアする情報が変わるため、文言も変わっていると考えられます。

 

シェア可能なアイドルの上限数も変わる

もうひとつ見落としがちなのは、シェア可能なアイドルの上限数も変わる点です。
片方は1人~3人、もう片方は1人~4人になっています。

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

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

シェアするアイドルの数に違いがある点は、シェアする画像の枚数に関係があるようです。
結論から書くと、シェアする内容によって画像が以下のように変化します。

  • アイドルのみをシェア:アイドルのイラスト
  • アイドルとガシャ結果をシェア:アイドルのイラスト+ガシャ結果のスクショ
  • ガシャ結果のみをシェア:キービジュアル+ガシャ結果のスクショ

つまり、ガシャ結果のスクショをシェアしたい場合、シェアできるアイドルの数を減らす必要があったようです。

このようにシェアする情報が変わると細やかな差分が生まれます
結果的にプランナーさんとエンジニアさんの担当業務に近いかもしれませんが、UIデザイナーも影響範囲の見落としがないか常に注意したいところです。

 

以下、シェアする内容と画像の一覧です。

f:id:appgameui:20240315135143p:image
▲アイドルのみをシェア

 

f:id:appgameui:20240315135212p:image
▲アイドルとガシャ結果をシェア

 

f:id:appgameui:20240315135104p:image
▲ガシャ結果のみをシェア

 

シェアする画像にはタイトルロゴとコピーライトが追加

シェアする画像をよく見ると、左上に「シャニソン」のタイトルロゴ、右下にコピーライトが追加されていました。

イラストの魅力を損なわないように、どこにどのように表示するかは注意したいところです。

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

 

以上です。
ガシャ結果をシェアする機能をデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ