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

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

「IDOLY PRIDE アイドリープライド」ホーム画面に設定したキャラに合わせてライブボタンのデザインを変化させているのは、短時間でゲームの世界観を訴求したかったから?

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

 

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

 

今回は「IDOLY PRIDE アイドリープライド」のホーム画面に設定したキャラクターによって一部ボタンのデザインが変化することについて紹介します。

 

該当の画面はこちらです!ホーム画面ですね。

f:id:appgameui:20210711200854p:image

 

 

キャラに合わせてライブボタンのデザインが変化している!

デザインが変化しているUIはこちらの「ライブ」のボタンです!

 

SDキャラクターが表示されていますね。
サインがあるのも、とてもかわいい…!

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

 

このように「IDOLY PRIDE アイドリープライド」では画面中央に表示されている3Dのキャラクターと、UIパーツに乗っているSDキャラが同一であることが分かるかと思います。

 

より分かりやすくするために、他のキャラクターを設定した時の画面デザインも見てみます。

f:id:appgameui:20210711200906p:image

 

UIが切り替わっていますね。

f:id:appgameui:20210711200849p:image

 

こちらも切り替わっています。

f:id:appgameui:20210711200842p:image

 

 

このように設定したキャラクターに合わせて、UIパーツのデザインも変化させていることが分かるかと思います。

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

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

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

 

ちなみに押下時の差分もありました。

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

 

 

UIパーツと通じて視覚情報による単純接触効果を期待したのかも?

「IDOLY PRIDE アイドリープライド」のゲームジャンルは「AFKアリーナ」と同じジャンルです。

主に放置と育成を繰り返すシステムになっており、ひとつのタスクをこなす時間や一度にプレイする時間は短く済ませられるようにデザインされています。
その代わり一日に複数回ゲームを起動させ遊んでもらうデザインです。

 

「AFKアリーナ」と差別化されている点としては、「IDOLY PRIDE アイドリープライド」はキャラクターやストーリーなど、世界観を強く前面に押し出している点です。

 

そこで、キャラクターたちの魅力を伝えるために、短い時間の中で世界観を伝えたり没入感を高めるための工夫が求められます。

ただ、触る時間が短いため、ゲームの没入感が高まる前にプレイが完了してしまう可能性が考えられます。

 

このライブボタンを押すと「IDOLY PRIDE アイドリープライド」のメイン機能であるライブ画面に遷移します。

 

つまり、ユーザーが頻繁に押すボタンです。

 

ゲームシステム的に重要で、且つユーザーが頻繁に押すボタンにSDキャラクターを表示することによって、UIパーツを利用した視覚情報による単純接触効果を期待したのかもしれません。

 

ゲームの世界観を訴求するためのUIパーツをデザインする際の参考になれば!

今回は以上です。

短い時間でゲームの世界観を伝えるために、キャラクターを強く訴求することは一般的なデザインです。

例えば、ホーム画面でキャラクターを大きく見せ視覚情報に訴えることや、キャラクターボイスを流して聴覚に訴えるデザインはよく見かけます。

「IDOLY PRIDE アイドリープライド」では、さらにUIパーツのデザインに落とし込んで訴求力を高めていました。

 

手間はかかりますが、キャラクターの魅力やゲームの世界観を訴求したい場合は有効なのかもしれません。

 

ゲームの世界観を訴求するためのUIパーツをデザインする際の参考になれば幸いです。

 

 

権利者さまへ

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

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

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

 

お問い合わせ

 

「IDOLY PRIDE アイドリープライド」見出しのUIアニメーションが小気味良かったので紹介!

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

 

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

 

 

今回は「IDOLY PRIDE アイドリープライド」の見出しのテキストのアニメーションについて紹介します。

 

 

該当の画面はこちらです!ショップ画面ですね。

f:id:appgameui:20210626195511p:image

 

こちらのショップ画面の見出しですが、
子階層に遷移した際、親階層の見出しが小さく残り、子階層の見出しが表示されるようなアニメーションになっています。

 

実際の挙動はこちらです。

こちらは「ショップ画面」から「メインライブクリアパックの画面」に遷移した時のアニメーションです。

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

 

見出しの役割はユーザーに今いる場所を分かりやすく伝えること! 

分かりやすいように見出し部分を拡大します。

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

 

このように見出し部分のテキストがスムーズに変化していることに気付きます。
非常に丁寧な演出です。

 

 

この見出しの役割は、ユーザー自身が今どこにいるかをユーザーに分かりやすく伝えることです。

親階層が保持されることによって、遷移前後の画面の関係性が分かりやすくなります。
前の画面に戻る際も、戻り先の画面が明確になります。

 

 

必ずしも親階層の画面名が残せるわけではない!

では、必ずしも見出しに上位階層が表示できるかというと難しい部分もあります。

 

例えば、階層が深くなってしまうと、すべての上位階層を表示するにも限界は出てきます。

また、ソシャゲの場合は同じ画面に遷移するための導線が複数用意されていることも珍しくありません。

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

育成の場合などが分かりやすいのですが、
育成メニューを選択してからキャラクターを選択する方法もありますし、
キャラクターの下位階層から遷移できるように導線が設置されていることもあります。

 

こういった事情から、見出しに常に上位階層を表示させ続けることは難しく、ゲーム全体で考えた時に必ずしも一貫性が担保されるわけではありません。

 

 

子階層への遷移の仕方が限られている場合は親階層の見出しが残せる!

以上です。

今回紹介した「IDOLY PRIDE アイドリープライド」のショップ画面のように、親階層と子階層の遷移の仕方が固定化されている場合は、親階層の画面名を表示させたまま子階層に遷移することができます。

見出しをデザインする際の参考になれば幸いです。

 

 

 

権利者さまへ

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

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

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

 

お問い合わせ

 

「IDOLY PRIDE アイドリープライド」通知バッジのデザインに変化をつけることで、より強く訴求したい情報とそれ以外の情報に優先度を付けたいという意図が感じられる

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

 

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

 

 

今回は「IDOLY PRIDE アイドリープライド」の通知バッジのデザインについて紹介します。

 

ここで言うところの「通知バッジ」とは、ボタンなどの上に表示される、情報に更新があったことを示すマークのことを指しています。

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


 

例えばこちらの画面で使われたりしています。これはストーリーのTOP画面です。

f:id:appgameui:20210708194043p:image

 

これは未読のストーリーがあることを示しています。
概ねどのゲームも誘目性を優先してか、赤系のマークを採用するデザインになっている気がします。

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


 

 

さて、この通知バッジのデザインですが「IDOLY PRIDE アイドリープライド」では少し変わったデザインも見かけました。

 

該当の画面はこちらです!

f:id:appgameui:20210708194029p:image

 

無償ダイヤを模した通知バッジなので、報酬が獲得に対して期待が持てるデザイン!

画面左上にある「VENUS RANK」の文字のところと…

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

 

画面左側の中央付近にある「最新話」のボタンのところにあるマークに注目していただきたいです。

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

 

どちらにもこのように宝石のようなマークが表示されています。

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

 

 

これ、何かというと無償ダイヤのアイコンを示すものです。

f:id:appgameui:20210710002100p:image

 

 

赤いダイヤが無償、青いダイヤが有償です。

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

 

  

 

通知バッジに無償ダイヤを使うことにより、報酬が獲得できる、という期待に繋がると考えられます。

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

 

 

実際このボタンを押すと、無償ダイヤが獲得できる画面に遷移します。

f:id:appgameui:20210708194037p:image

 

通知バッジのデザインに変化をつけることで、より強く訴求したい情報とそれ以外の情報に優先度を付けたいという意図が感じられる!

赤いバッジでも報酬を獲得することはできます。

しかし、無償ダイヤという価値の高い報酬が獲得できること仄めかすことによって、 ユーザーにより強く訴求していると考えられます。

 

 

ボタンを押すと報酬が獲得できる、という意味では
プレゼント画面やミッション画面と役割が被るところですが、
通知バッジのデザインを変えるだけで、よりユーザーに強く訴求できるのではないでしょうか?

 

 

「IDOLY PRIDE アイドリープライド」は表示されている通知バッジを消していくことでキャラクターの育成が進むゲームサイクルです。

そういった意味でこのゲームにおいて通知バッジはユーザーの行動を誘導するための重要な要素です。

通知バッジのデザインに変化をつけることで、より強く訴求したい情報とそれ以外の情報に優先度を付けたいという意図が感じられました。

 

通知バッジをどこに表示するか、どのようなデザインにするかなど、迷う部分もあるかと思います。

「IDOLY PRIDE アイドリープライド」のように、強く訴求したいのであれば、獲得できる報酬を模した通知バッジを配置するのもひとつの手段かもしれません。

 

以上です!

通知バッジをデザインする際の参考になれば幸いです。

 

 

 

権利者さまへ

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

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

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

 

お問い合わせ

 

「IDOLY PRIDE アイドリープライド」ライブ中の演出が長押しで倍速に切り替わるUIデザイン

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

 

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

 

今回は「IDOLY PRIDE アイドリープライド」のライブ中に長押しをすると倍速モード切り替わるデザインについて紹介します。

 

 

該当の画面はこちらです!

f:id:appgameui:20210626133745p:image

 

…と言っても動いてないと分からないですよね。
アニメーションで紹介します!

 

こちらが等速の画面です。

上部にライブ映像が流れ、下部はライブ中に発生したスキルと獲得したスコアなどが上から下に流れて表示されています。

これくらい速度であれば、重要な情報は追えるかな、と感じます。

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

 

 

ライブが終わるまでの時間が短縮されて便利!

そしてこちらが倍速モードです。

画面を長押ししている間は倍速モードに切り替わります。
発生したスキルを追うのは難しいように感じますが、ライブが終わるまでの時間が短縮されるという点では便利だと感じます。

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

 

また、倍速モードだと画面上部に倍速モードであることが分かるUIが表示されています。

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

 

正直、この表示が必要なのかは分からないのですが、
現在の状況をユーザーに伝える、という意味で有効なのかな…。

 

 

 

ちなみに、同じようなゲームシステムの「AFKアリーナ」では画面の下部に倍速ボタンが配置されていました。

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


こちらが倍速ボタンです。画面下部、右側の方に配置されています。

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

 

 

 

倍速モードを検討する際の参考になれば!

以上です。

「IDOLY PRIDE アイドリープライド」の場合はボタンを配置せず、長押しで倍速に切り替わるデザインでした。

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

 

長押しは比較的一般化されてきている操作だとは思います。

初見では気付かれにくい部分がありますが、「IDOLY PRIDE アイドリープライド」の倍速モードは気付かれなくても致命的なものではありません。

気付いたユーザーにメリットがあるだけで、気付かないユーザーにデメリットはありません。

 

では、気付かれにくい機能なのか?

と考えてみるのですが、ライブ画面はかなり頻繁に遷移する画面なので、何かのきっかけで気付く可能性は高いと考えます。

 

 

ADVシーンや戦闘中など、倍速モードが実装されているゲームは多くあります。

ボタンを配置するのも手段のひとつではありますが、「IDOLY PRIDE アイドリープライド」のようにデザインによっては長押しでの切り替えも手段の一つなのかもしれません。

 

倍速モードを検討する際の参考になれば幸いです。

 

 

 

権利者さまへ

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

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

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

 

お問い合わせ