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

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

【メインコンテンツ】プレイしたゲーム、参考動画、参考記事

こんにちは、ちょこです。

 

このブログではアプリのゲームUIを中心に記事を書いています。

ブログ開設以前、ゲームUIに関して調べようと思った際に基本的にはWebデザインかグラフィックデザインの情報しかありませんでした。困った末にゲームUIについてのブログを作成いたしました。

主に実際のゲームである事例を元に、ゲームUIの視点で記事を書いています。
ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。

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

 

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

バナー:ゲーム一覧

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

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

 

 

 

2:参考書籍

参考書籍まとめバナー

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

参考書籍

 

 

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

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

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

 

 

4:おすすめのサイト

バナー:おすすめサイト

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

おすすめのサイト

 

 

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

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

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

 

 

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

ゲームUIデザイナーに関係のある用語を絞って紹介します。

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

 

7:タグ一覧

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

タグ一覧

 

 

8:ゲームUI FAQ

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

ゲームUI FAQ

 

 

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

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

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

 

 

10:ブログ運営

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

 

 

11:その他

「アイドルマスター SideM GROWING STARS」僅かなシャドウを付けてボタンの表現、強弱などをデザインしている

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

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

 

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、フラット寄りのボタンデザインを紹介します!

 

 

シャドウを付けることで立体感を演出

f:id:appgameui:20220930080140p:image

こちらはパネルミッション画面です。

 

 

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

右側の枠はボタンです。
僅かにシャドウを付け、立体感を表現しています。

このわずかな手掛かりでボタンであることが直感的に理解できるデザインになっています。

 

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

左側の枠はボタンではありません。
シャドウが付いておらず、立体感が無いデザインです。

フラットなデザインでは基本的にはこのような僅かな手掛かりによってボタンかそうでないかが区別されます。

 

 

僅かなシャドウでも優先度を付けることは可能

f:id:appgameui:20220930080145p:image

ボタンの強弱の事例を紹介します。
こちらはオプションダイアログです。

 

 

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

ダイアログの中のボタンと閉じるボタンのデザインを比較すると、僅かにシャドウの濃さ、太さが異なっています。並べると分かる程度の僅かな差です。

僅かな差ですが、どのボタンを強調しているか表現できています。

 

三角マークを使うことでボタンと認識させる

f:id:appgameui:20220930080151p:image

ゲーム内にはシャドウが付けられないデザインを採用する場面も考えられます。
こちらはアイドルのユニットの情報を表示する画面です。

 

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

画面左側にユニットを選択するタブが表示されています。
タブの右側に白い三角のマークが表示されています。

この三角マークはwebでは昔から用いられてきた表現ではあるため、一定のユーザーにとっては遷移先があることが理解できると推測できます。

 

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

同じ画面のアイドルの名前の枠にも三角マークが使われています。

これによって三角マークがただの飾りではなく、ボタンであり、遷移先があることが分かるデザインになっています。近い場所に置くことで学習効果を高めているようにも感じます。

 

 

まとめ

フラットなデザインは情報量を最小限に抑えがちです。

「サイスタ」ではシャドウの有無によってボタンかそうでないかの区別を付けるデザインが採用されています。僅かにシャドウの濃さや太さを変化させ、ボタンに強弱を付けています。

また、シャドウが付けられないデザインや場面だった場合、三角マークを利用することでボタンだと伝えるデザインも採用されていました。

 

以上です。

シンプルなボタンをデザインする際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

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

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

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

 

お問い合わせ

「アイドルマスター SideM GROWING STARS」情報の優劣をつけ、ボタンがたくさんあるにも関わらずきれいに見せるメニュー画面

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

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

 

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、情報の優劣が付けられたメニューデザインを紹介します!

 

情報の優劣はデザインをする上で基本的な考えのひとつだと思うのですが、ソシャゲのようにリリース後から要件が変更される場合、きれいにまとめるのは難しいことです。

そんな中でもサイスタのメニューはきれいにまとめられていると感じました。

 

情報の優劣がついたメニュー

f:id:appgameui:20220929212243p:image

こちらがメニュー画面です。たくさんのボタンが並んでいますね。
どんなボタンがあるのか並べてみました。

  1. ユニット編成
  2. アイドルフォト
  3. ピクチャースタジオ
  4. モバイル
  5. プロデューサー
  6. 同僚
  7. アイテム
  8. ショップ
  9. アイドル
  10. タイトル
  11. ヘルプ
  12. サポート
  13. システム
  14. オプション
  15. ホーム設定
  16. ガシャ
  17. 育成
  18. ストーリー
  19. お仕事
  20. ライブ
  21. 各種商品バナー ×5
  22. お知らせ
  23. ミッション
  24. ホーム
  25. 閉じる

など、表示数が変動するバナーを1つとカウントしても全部で25種類のボタンがあります。このようにたくさんのボタンがありますが、情報の優劣がしっかり出来ているため、複雑には見えづらく感じます。

 

どのように情報の優劣をつけているのか要素を分析してみます。

 

1:上部ボタン

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

主観ですが、画面内で最も優先度が高いボタンがこのグループです。
ボタンが大きく文字も見やすいデザインに加え、視線が誘導される配色が採用されています。

 

分類 備考
色数

彩度の高い色が使われている。また、この色は他画面でも強調色として使われているため、ルールの一貫性もある。

大きさ 画面内ではもっとも大きいサイズのグループ。
可読性

ボタンが横に長いため、長い文字列でも大きい文字を入れることができる。画面をぱっと見た時に自然と目に入る程度の大きさ。

配置 左右どちらの指でも押しやすい

 

 

2:下部ボタン

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

2番目に優先度が高いと感じたのはこのボタン群です。

このボタン群はメニュー画面にも表示されていますが、ホーム画面にも表示されており、ライブ、育成、ガシャなど、基本的なゲームサイクルが並んでいます。

ホーム画面にも表示されていることから、アクセスのしやすさではこのボタン群が最も高いと考えられます。

ボタンの枠が太く、同系色のなかでも色分けされており、意匠性を含めつつ、統一感のあるデザインだと感じます。

 

分類 備考
色数

大きなフチに同系色の色が使われています。
ラベルの中の文字も濃淡を用い、目立たせる文字と、目立たせない文字を区別しています。

大きさ 画面内では大きい方ですが、ボタンの周囲に余白を設けることで押しやすさに配慮されています。
可読性

文字は大きく可読性は高いサイズです。
アイコンもありますが添えてある程度で、アイコンによる区別より、文字による区別を優先しているデザインです。

配置 ホーム画面での位置を踏襲し、一貫性があります。
アクセシビリティも高いと感じます。

 

 

3:各種バナー

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

画面左側に表示されている各種訴求バナーです。
色数は多いのですが、文字の可読性は高いとは言えないデザインです。

導線としての役割というより、画面内を華やかにする効果があるように感じます。

 

分類 備考
色数 世界観や華やかさなど、ボタンを魅力的に見せるデザインがされています。
大きさ 押しやすいサイズ。画面内の序列的には2~3番目に大きいグループです。
可読性

文字の可読性より、見た目の綺麗さを優先しており可読性は高くはないと感じました。ここでの可読性は必ずしも重要ではないと考えたのかもしれません。

配置

画面左側に配置し、優先度はやや下げているように見えます。

ゲーム内の多くの場面で右側にボタンを配置する傾向があります。そういった意味では、左側に配置することで少しだけ優先度を下げているように見えます。

 

4:真ん中のボタン

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

4番目に優先度が高いと感じたのはこのボタン群です。

このボタンで注目したいのは青くフチ取りされたボタンです。
この要素があることで下位のボタンとの差別化が明確にできています。

また、ボタンの中の文字は同じ大きさに統一する代わりに、長い文字列は長体をかけたり、文字間を詰めるなど調整しています。

 

分類 備考
色数

ボタンのフチの色が特徴的。
この要素があることで下位のボタンとの優先度が明確になっています。

大きさ 押しやすさには問題ない程度の大きさです。
可読性

文字が小さいため、人によっては読みづらさを感じるかもしれませんが、文字間や長体を調整し、なるべく文字を小さくしようと努力している様子がうかがえます。

配置 画面中央に配置され、上下左右にボタンが並んでいます。
周囲に十分なマージンが確保されていないため、タップする際にはやや慎重になる配置です。

 

 

5:下ボタン

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

どれも頻繁にアクセスする機能ではく、情報の優先度としては低くデザインされています。ボタンのサイズはメニュー項目の中では最も小さボタン群です。

 

分類 備考
色数

アイコンと文字が同系色でまとめられシンプルなデザインです。

大きさ メニューコマンドの中では最も小さいボタン群です。
可読性

上で紹介したボタンのラベルより若干小さいか同じくらいです。

配置 視線誘導としては最後の方に誘導される位置です。

 

 

6:下ボタン

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

メニューコマンドではなく、戻る導線のボタンです。
ボタンの大きさ、面積、ラベルの有無など、いずれも情報の優先度が高くないことを示しています。レイアウト的には画面端にあることで視線が留まる位置になっています。

 

分類 備考
色数

アイコンとHOMEの文字が若干異なるデザイン。
同じ色だと同じグループに見えるため、若干色をズラしているのかもしれません。

大きさ 小指の先程度の大きさです。
押しやすさがギリギリ担保されるかどうか、というサイズに感じます。
可読性

「HOME」と英語で書かれています。
問題なく理解できますが、あくまで補足的な情報です。

配置 画面端に表示されているため、若干視線は留まります。

 

 

7:下ボタン

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

最も簡素で優先度が低いボタンです。大きさ、位置、ボタンのラベル、色数など、情報量を絞って目立たないデザインになっています。

 

分類 備考
色数

アイコン部分のみ色が乗っています。

大きさ 非常に小さいサイズです。押せなくは無いですが、慎重さが求められます。
可読性

ラベルが無いため一見して分からず、何の機能であるか学習することを求められます。

配置 閉じるボタン、ホーム画面に戻るボタンの近くに配置され、誤タップが懸念されます。

 

 

以上です。

このような要素、情報量の組み合わせによって、情報の優劣が付けられています。
メニュー画面をデザインする際
の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

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

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

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

 

お問い合わせ

「アイドルマスター SideM GROWING STARS」想定外の文字数が表示されるキャラクターのプロフィール画面

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

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

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、アイドルのプロフィールに柔軟に対応するデザインがありました!

レイアウトを考える時に最大文字数は考慮されますが、ソシャゲの場合はリリース後の更新やコラボなどの関係でかなりコントロールしづらいことが多いです。

そういった背景を踏まえた上で「サイスタ」のアイドルのプロフィール画面が面白かったので紹介します。

 

プロフィール画面はこちら

f:id:appgameui:20220929212145p:image

該当の画面はこちらです。
画面左にキャラクターのグラフィック、右側にプロフィールやステータスなどが表示されています。

画面左側には戻るボタン、右側には「アルバム」「参加楽曲」など、詳細情報を閲覧するためのボタンが配置されています。

多くのソシャゲに見る、ベーシックなレイアウトのように感じます。

 

ルビと誕生日に注目

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

そのベーシックなレイアウトの中で注目したいのは「キャラクターのルビ」と「誕生日」の項目です。

 

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

ただでさえ「アスラン=BBⅡ世」と9文字と長い上に、ルビは15文字になっています。
その中でも「BB」の箇所には「べぜるびゅーと」とルビが振られています。

これは他のキャラクターにはない特徴で、かなりイレギュラーな対応かと思いますが、レイアウトが崩れることなく収まっています。

 

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

続いて「誕生日」の項目を見てみます。

通常は「10月9日」のように「月日」だけが表示されることを想定しますが、このキャラの場合は「マヤ暦5174年」と8文字も追加の文字列が含まれています。

 

これは完全に想定外!

 

想定文字数を大きく上回る文字数かと思いますが、それでも文字を縮小することなく配置できています。

 

 

イレギュラーな文字数でも見事に配置

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

このようにかなりイレギュラーな文字列が入力されているのにも関わらず、比較的きれいなレイアウトが担保されている点が素晴らしいなと感じました。

また、どういった文字列が入力されるかを事例を知り、想定することで、より強固なレイアウトをデザインすることにも繋がると考えました。

 

 

以上です。

キャラクターのプロフィール画面をデザインする際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

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

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

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

 

お問い合わせ

 

 

「アイドルマスター SideM GROWING STARS」無料体験させることで商品購入のきっかけを作るデザイン

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

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

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、お試しで購入できるアイテムがありました!

 

まずは体験させてみる

f:id:appgameui:20220929212216p:image

サイスタのショップには色々な商品が販売されており、その中の1つが無料で試せるようになっていました。

 

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

具体的にはこちらの商品です。

プレミアムパック トライアル

効果としては「3日間STの回復速度が大きくアップ」です。
STの回復時間を短くなるため、ゲームのプレイ時間を延ばすことができます。

 

行動経済学で以下のバイアスがあります。

商品の無料体験は概ねこれらが作用するデザインだと感じました。

 

無料で3日間試せる

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

保有効果」

人間は自分の所有物に価値があると考える傾向があります。
商品を無料で試させることで一時的に所有物だと感じさせ、価値を高める確率を高めていると考えます。

 

正常性バイアス

現状維持バイアスとも言いますが、人は変化を避ける傾向があります。
STの回復速度アップの効果が切れ、現状から変化することをストレスに感じます。

そのため、変化を抑えるために商品の購入を検討すると考えます。

 

「損失回避」

人は損失を回避する傾向があります。
この場合はSTが上限を超えて時間回復できない状態を損失と捉えます。

お金を払ってSTの回復速度がアップさせているため、時間回復の損失はさらに大きく感じます。結果、ユーザーはSTの上限が超えないように小まめにゲームにログインしたいと考えます。

 

効果が一定期間続く商品の無料体験

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

サブスクを中心に無料体験させるサービスは多くあります。
ソシャゲの場合でも同様に、継続して購入される商品に絞ればユーザーに無料体験をさせることで商品の購入のきっかけを作れるのかもしれせん。

 

以上です。

商品を訴求する際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

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

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

 

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

 

お問い合わせ