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

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

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」わかりやすいダイアログのデザインをAppleのヒューマンインターフェイスガイドラインを交えて紹介

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)から分かりやすいダイアログのデザインをご紹介します。

以下、概要です。

 

視線が誘導されやすい配色

f:id:appgameui:20240216095638p:image

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

「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。
ダイアログが全体的に無彩色で構成されていることもあり、有彩色のボタンに視線が誘導されやすくなっています。

 

Appleの「ヒューマンインターフェイスガイドライン」のボタンについて書かれたページには以下のように書かれています。

複数の選択肢の中で推奨するものを視覚的に差別化する場合は、サイズではなくスタイルを使用する。複数の選択肢を提示する際に同じサイズのボタンを使うと、それらが一まとまりの選択肢であることが分かります。推奨される選択肢や最もよく使われる選択肢を強調したい場合は、その選択肢に目立つボタンスタイルを適用し、ほかの選択肢にはそれよりも目立たないスタイルを適用します。

https://developer.apple.com/jp/design/human-interface-guidelines/buttons

「ヒューマンインターフェイスガイドライン」が絶対ではありませんが、一定のガイドラインに沿ったデザインになっている、と解釈しても良いのかもしれません。

 

押させたい選択肢は右に配置し視線を誘導

f:id:appgameui:20240216095619p:image

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

「シャニソン」では押させたい選択肢は一貫して右側に配置しています。
アプリのUI場合、基本的には左側に「戻る」や「キャンセル」などのボタンを配置し、右側に「決定」や押させたいボタンを配置します。

LTR(Left To Right、左書き)の文化圏では右側に配置することで、自然と視線が誘導されるレイアウトになります。

 

2択に絞って迷わせない

f:id:appgameui:20240216095625p:image

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

ダイアログの選択肢を絞っている点にも注目です。
ざっくり見た感じ、「シャニソン」では基本的には選択肢は2択に絞っています。
選択肢を少なくすることでユーザーの認知コスト、判断するコストを抑えることに繋げられていると考えます。

 

本文を読まずに選択肢だけ読んでも判断できるテキスト

f:id:appgameui:20240216095631p:image

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

すべてではありませんが、いくつかのダイアログの選択肢はテキストが簡潔に書かれているため、本文を読まず選択肢を見るだけで判断できます。

Appleの「ヒューマンインターフェイスガイドライン」のボタンについて書かれたページにも以下のように書かれています。

アイコンより短いラベルの方がもっと明確に意図を伝達できる場合は、テキストを使う。テキストを使用する場合は、ボタンによって何が起きるのかを簡潔に説明する文言にします。

https://developer.apple.com/jp/design/human-interface-guidelines/buttons

 

一方でゲーム内の選択肢すべてを対応するとコストがかかる場合があります。
ゲームの規模にもよりますが、例えば以下の3点のコストは大きいかと思います。

  1. 文言を統一するコスト
  2. ローカライズを対応するコスト
  3. 調整やチェックなど運用するコスト

このデザインを採用する場合は、優先度を絞って対応を検討すると効率的かもしれません。

 

 

以上です。
分かりやすいダイアログをデザインする際の参考になれば幸いです。

 

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

 


権利者さまへ

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

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

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

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

 

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

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

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

 

お問い合わせ