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

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

「IDOLY PRIDE アイドリープライド」ハッシュタグを利用して登場人物を紹介するデザイン

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

 

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

 

今回は「IDOLY PRIDE アイドリープライド」のストーリーに登場する人物紹介のデザインについて紹介します。

 

最近のソシャゲではストーリー内で誰が登場するか、予め分かるように情報を外に出しているケースがあります。

過去に紹介したゲームの例を挙げると

などがあります。

記事の最後にもリンクを貼って紹介しておきますので、興味があったら見てみてください!

 

さて「IDOLY PRIDE アイドリープライド」の画面デザインはこちらです!
こちらがストーリー選択画面です。

f:id:appgameui:20210725112800p:image

 

 

どこに登場人物の情報が書かれているかと言うと、画面内にあるストーリーのプレビュー画像の中です。

画像の中に「#川咲さくら」といったようにハッシュタグが付いているのが分かるかと思います。

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


このように「登場人物」という見出しを付けずに「#」という記号で登場人物であることを示しているのが特徴的なデザインです。

 

また、ストーリーが開始された後も、登場人物について詳しく紹介されています。

f:id:appgameui:20210725112806p:image

 

 

以上が「IDOLY PRIDE アイドリープライド」のデザインの事例です。 

他のゲームの画面も見てみます。

f:id:appgameui:20201029000107p:image

「プロジェクトセカイ カラフルステージ! feat.初音ミク」ストーリー選択画面にて登場キャラの情報が見れるデザインの紹介。最近音ゲー界隈で流行ってるのかな - ゲームアプリのUIデザイン

 

 

「ブラックスター -Theater Starless-」ゲームUIの情報設計の学習には、なんだかんだで既存のゲームをたくさん触る必要があるという話に落ち着いて - ゲームアプリのUIデザイン

 

 

f:id:appgameui:20200911093944p:image

「ヒプノシスマイク-A.R.B-」シナリオ選択画面で読了ボーナスを訴求するのではなく、登場キャラ紹介の導線が引かれている件 - ゲームアプリのUIデザイン

 

このように…

  • 「登場人物」という見出しがある
  • 階層が深くなっている

 といった特徴があります。
相対的に「IDOLY PRIDE アイドリープライド」のデザインを見ると…

  • 見出しがなくスッキリしている
  • 階層が深くならず、情報が確認できる

という点が異なる点です。

 

また、ハッシュタグを利用しているため…

  • 画像ではなく文字での説明

という点も大きく異なる点です。

この辺りはゲームより先にアニメを放送していたIP作品であるため、
主なターゲットとなるユーザーにとってはすでに顔と名前が一致している、と判断したのかな…。

 

小さいグラフィックだとキャラが判別できない、ということもないと思うんですよね…。

というのも他の画面では小さい顔グラフィックが採用されているので、判別性が理由ではない気がします。
f:id:appgameui:20210726223420p:image

 

 

 

もしかすると、視線誘導が関係しているのかもしれません。

 

ストーリー画面に配置されているプレビュー画像は顔が中心にトリミングされています。
人間は人の顔に対して視線が誘導されてしまうため、画面内に不規則に顔グラフィックが表示されてしまうと、目立たせたい情報が曖昧になってしまう懸念があります。

その点を考慮して、この画面では顔グラフィックの情報を控えたのかもしれません。

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

 

以上です。

ストーリーに登場するキャラクターを紹介する機能は最近見かけるようになってきた気がします。

顔グラフィックを利用するデザインもありますが、世界観によってはハッシュタグを利用するデザインもあるのだな、と勉強になりました。

登場人物を紹介する画面をデザインする際の参考になれば幸いです。

 

 

最後に、登場人物を紹介する機能を有したゲームをいくつか紹介します。
こちらもあわせて参考になれば幸いです。

 

権利者さまへ

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

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

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

 

お問い合わせ