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

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

【メインコンテンツ】プレイしたゲーム、参考書籍、用語集などまとめ

こんにちは、ちょこです。このブログでは主にゲームUIの紹介をしています。

ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。

以下、メインコンテンツを紹介いたします。

 

1:紹介させていただいたゲーム

バナー:ゲーム一覧

このブログで紹介したゲームの一覧ページです。
プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。

紹介させていただいたゲーム

 

 

 

2:参考書籍

参考書籍まとめバナー

ゲームUIデザイナーさんの参考になりそうな書籍の一覧ページです。
自分で購入して読んだ範囲で紹介させていただいています。

参考書籍

 

3:ゲームUIデザイナー向け用語集

読んだ書籍の中で、ゲームUIデザイナーさんに関係のある用語を紹介します。

ゲームUIデザイナー向け用語集

 

4:ゲームUIの画面ナレッジ

画面ごとのナレッジをまとめます。随時編集します。

ゲームUIの画面ナレッジ

 

5:ゲームUIデザイナーにオススメしたい動画

講演や用語解説など、ゲームUIデザイナーさんの学習に参考になりそうなプレイリストです。随時追加、更新いたします。

ゲームUIデザイナーにオススメしたい動画

 

 

6:おすすめのサイト

バナー:おすすめサイト

ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。

おすすめのサイト

 

 

7:ゲームUIデザイナーの参考になりそうな事例の記事

ゲームUIに関係するインタビューや制作事例などの記事を紹介します。 
(採用目的が強い記事は除外)

ゲームUIデザイナーの参考になりそうな事例の記事

 

 

8:タグ一覧

当サイトのタグ一覧ページです。
スマホではタグ一覧が表示されないのでタグ一覧ページを作成しました。

タグ一覧

 

 

9:ゲームUI FAQ

過去に書いた記事が「どのような問題解決になるのか」という視点でまとめたページです。自分自身がデザインをする際に困った時用の備忘録も兼ねています。

ゲームUI FAQ

 

 

10:ゲームUIデザインを検討するメモ

ゲームUIについて感じたことなど。メモ。 

ゲームUIデザインを検討するメモ

 

11:UE5

UE5の操作について、UIデザイナーが関わりそうな部分のTipsを記載します。

【UE5】初心者向けTips

 

12:ブログ運営

以下はブログ運営に興味のある方向けの記事です。

 

13:その他

「アイドルマスター シャイニーカラーズ 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日制定版です

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

 

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」レビューに誘導するイラストが新ユニットのコメティックだった

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。

以下、概要です。

 

イラストには新ユニットが描かれている

f:id:appgameui:20240207080815p:image

こちらが「シャニソン」のレビュー誘導ダイアログです。
アイドルが描かれた魅力的なイラストが目を引きます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
描かれているユニットがナビキャラではないのが意外でした。
…というのも、ここで描かれているキャラクターは新ユニットのアイドルたちです。

アイドルたちは基本的には公平に描かれることが多いため、こういった場面ではナビキャラか、アイドルを描いたとしてもチュートリアルでプロデュースする「イルミネーションスターズ」を描くのが無難な気がしていました。

疑問に思って開発者インタビューを読んでみたところ、新しいユニットを訴求したい意図が感じ取れました。以下は開発者のインタビュー記事です。

『シャニソン』高山祐介氏インタビュー。『シャニマス』らしいリズムゲームを目指して開発。コメティックは、ルカに本当の意味での居場所を作ってあげたいという想いから誕生など、開発経緯や秘話を聞いた。(ファミ通.com) - Yahoo!ニュース

『シャニマス』コメティックが今冬に登場決定。『シャニソン』に参加が発表されていた新ユニットがenza版にも登場 | ゲーム・エンタメ最新情報のファミ通.com

記事のタイトルにも新ユニットやユニットに所属するアイドルに触れられている通り、ユーザーの関心度が高く、開発側としてもアピールしたい要素だと考えられます。

レビュー誘導ダイアログにどのようなイラストを表示するのが適切か、と考える際の視点の幅が広がったように感じました。

 

イラストにアイドルからのメッセージが書かれている

ダイアログを見ると、2つのメッセージが書かれています。
1つ目はダイアログに書かれているメッセージです。

お楽しみいただけていますでしょうか?
引き続き改善に努めてまいります。

 

もうひとつはイラストの中に書かれているメッセージです。

プロデューサーさん
よろしくお願いします!

文脈から察するに、イラストの外の文字は運営からのメッセージ、イラストの中の文字はアイドルからのメッセージと解釈できるかと思います。
おそらく「近接の法則」が自然にはたらいているものと推測します。
これは近くに配置されている情報は同じ仲間だと認識する、という法則ですね。

また、アイドルからのメッセージと解釈すると、「単純接触効果」によりメッセージの内容も肯定的に受け入れやすくなる可能性が考えられます。

f:id:appgameui:20240207080815p:image

このようにユーザーにメッセージを伝える際は、メッセージの内容だけではなく「誰からのメッセージであるか」も意識するとより良いのかもしれません。

 

イラストはボタンが埋もれないような配色

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

このダイアログでは魅力的なイラストも重要な要素ですが、ボタンを押してもらうことも重要です。

ボタンは元々やや目立つ色ですが、イラストの配色やコントラストがボタンの色よりも控えめでデザインされているため、ボタンに視線が向きやすくなっています。

このように、ボタンが埋もれない程度のトーンでまとめられているのも興味深いデザインだと感じました。

 

ダイアログを表示するタイミングはガチャを引いた直後

f:id:appgameui:20240207080815p:image

背景がボケていて分かりにくいのですが、レビューを誘導するダイアログを表示するタイミングはガチャを引いた後でした。

ガチャ結果に満足していればポジティブなレビューを書いてくれる、という期待があるのかもしれません。
f:id:appgameui:20240207080818p:image

ガチャ結果の直後に限らず、何かしら達成感を感じてユーザーがポジティブな感情を抱いているタイミングに表示するなど、「いつどのようにレビューに誘導するか」も重要な要素なのかもしれません。

 

以上です。
レビューに誘導するダイアログをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲーム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:20240206222930p:image

 

顔アイコンが表示され直感的に分かりやすい

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

「シャニソン」のアイドルたちのフィルタ画面は、アイドルたちの名前だけではなく顔アイコンやユニットのモチーフも表示されています。

直感的に分かりやすく伝える工夫がされていると感じました。

 

アイドルたちの名前を覚える前のユーザーにとって分かりやすい

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲名前が表記されているのでわかりやすい

アイドルの顔アイコンの隣にアイドルの名前が表示されている点も、分かりやすいデザインだと感じました。

アイドルの数が多いと最初から全員の名前を覚えるのは困難かなと思います。
実際、この画面で表示されるアイドルは2024/3/7時点では28名います。
全員の名前を覚えるのはしばらく時間がかかりそうです。

アイドルの中には初見で読めないキャラクターもいますし、ユーザーの年齢によっては学校で習っていない漢字が使われているケースもあります。

顔アイコンを表示することで学習コストが抑えられ、名前が読めなくても任意のアイドルを選択することができます。

 

キャラのイメージカラーは取り入れられていない

「シャニソン」のフィルタ画面をよく見ると、アイドルごとのイメージカラーは取り入れられていません。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「シャニソン」のフィルタ画面

「シャニソン」よりも前にリリースされている「シャニマス」にはイメージカラーが採用されています。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「シャニマス」ではアイドルごとのイメージカラーが採用されていた

イメージカラーよりもアイドルの顔アイコンの優先度を上げたかったのだろうか…?

 

アイドルの顔アイコンの優先度を上げたかった可能性

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

先ほど「イメージカラーよりもアイドルの顔アイコンの優先度を上げたかったのだろうか…?」と書きましたが、それを裏付ける材料として「チェックボックスと顔アイコンの大きさの違い」があげられます。

「シャニソン」の画面をよく見ると、チェックボックスよりも顔アイコンの方が大きくデザインされています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「シャニソン」はチェックボックスよりも顔アイコンの方が大きく目立つデザイン

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「シャニマス」は顔アイコンよりもチェックボックスの方が大きく目立つデザイン

もしかすると、イメージカラーで区別するのではなく、アイドルの顔アイコンで区別できるようにしたいと考えたのかもしれません。

通常、人が何かを見る時は、まず色の情報が入り、次にその物体が何かを認識します。
色の情報が強すぎるとアイドルの顔アイコンの情報が埋もれてしまう懸念があります。
このような考えで、「シャニソン」では色やチェックボックスの情報量を減らし、相対的にアイドルの顔アイコンが目立つようにしたかったのかもしれません。

 

以上です。
タイトル画面をデザイン、運用する際の参考になれば幸いです。

 

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


権利者さまへ

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

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

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

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

 

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

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

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

 

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」『出勤日数』や『初出勤日』という表現でアイマスの世界観への没入感をさらに高めるテキストライティング

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からゲームの没入感を高めるテキストライティングの事例をご紹介します。
UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。

以下、概要です。

 

世界観に合ったテキストライティングで没入感アップ

「シャニソン」では世界観に合ったテキストライティングがなされており、没入感を高める意図を感じました。

以下の画面はプロデューサー情報画面です。これまでのユーザーの行動実績を一覧できます。
基本的には累積する数字なので、日々の積み重ねが視覚化され、ゲームを継続するモチベーションに繋がるかと思います。

f:id:appgameui:20240206222909p:image
▲プロデューサー情報の画面

色々な項目が並んでいますが、ここで注目するのは以下の2つの項目です。

  • 出勤日数
  • 初出勤日

見やすいように該当箇所を大きくしました。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

各項目の意味は以下の通りです。

  • 出勤日数…ログインした合計日数
  • 初出勤日…ゲームプレイ開始日

当然ですが「出勤日数」も「初出勤日」も現実的な意味ではなくゲーム内の設定として定義されています。正確な表記ではありませんが、文脈から意味は伝わるので問題ない範囲かと思います。

この2つの項目が特にゲーム内の世界観を強く表していると感じました。
出勤日数はアイドルたちを支えてきた日々、初出勤日はアイドルたちと出会いユーザーにとって特別な日になるように、それぞれゲームの没入感を高める意図を感じました。

仮にこれが「ログイン日数」「ゲーム開始日」と表記されていた場合、ゲームの没入感は高まりにくいかと思います。

また、最初の項目というのも重要です。
目に留まりやすく、特に重要な項目だと印象付けされています。

 

以上です。
ゲームの没入感を高めるテキストライティングの参考になれば幸いです。

 

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

 


権利者さまへ

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

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

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

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

 

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

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

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

 

お問い合わせ