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

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

「夢職人と忘れじの黒い妖精」文章を読まなくてもユーザーが判断できる選択肢

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

 

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)のレベルアップの確認ダイアログにおいて、分かりやすい選択肢について紹介します!

 

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

f:id:appgameui:20220913101718p:image

こちらは「おまかせレベルアップ」を実行したときに表示されるダイアログです。
これはRPG系のソシャゲではしばしばみかける機能ですが、所持リソースを消費してキャラクターのレベルを可能な範囲で上限までレベルアップさせる機能です。

 

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

このダイアログの選択肢に注目すると「キャンセル」「レベルアップ」と書かれています。

一見すると普通に見えますが、確認ダイアログが多いとつい「いいえ」「はい」といった汎用的な選択肢を用意しがちです。

しかし、文脈に沿った選択肢にすることで、ユーザーは文章を読まずに判断を下すことができ、ストレスの軽減に繋がります。

全てのダイアログの選択肢を個別に用意することは現実的ではないかもしれませんが、ユーザーの目に留まりやすいダイアログは優先的に対応しても良いのかもしれません

 

 

以上です。
ダイアログの選択肢を検討する際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト

 

主な参照箇所を抜粋します。

2. 本サービス内の素材利用について

1. 画像及び動画

本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。

夢職人と忘れじの黒い妖精のコンテンツ利用ガイドラインです。2022年9月15日に確認したものです

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

 

お問い合わせ

「夢職人と忘れじの黒い妖精」主人公の名前や誕生日が表示されていると困るから、一時的に非表示にする機能を実装しました

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

 

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)のプロフィール画面から、スクショ用に情報を非表示にする機能を紹介します!

まだあまり見かけない機能ではありますが、地味に浸透してきている印象を受けます。

 

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

f:id:appgameui:20220913101630p:image

画面左側の眼鏡のアイコンをタップすると、「主人公」「誕生日」の項目の表示、非表示が切り替えられます。

 

情報を非表示に切り替えると、画面中央に以下のメッセージが表示されます。

一時的に非表示にします(スクリーンショット用)

このメッセージにより、機能の目的がより明確になっていると感じます。

 

 

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

アニメーションで見るとこんな感じです。
主人公と誕生日の情報が切り替わっているのが分かりますでしょうか…?

 

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

分かりやすいようにもう少し大きく表示してみます。
主人公の名前、誕生日の日付がそれぞれ「-(ハイフン)」に置き換わっていますね。

 

 

情報が表示されることで何か悪影響があるわけではないと思いますが、人によっては気にする方もいるのかもしれません。

例えば主人公の名前と実名を関連付けたり、誕生日の欄に自身の誕生日を設定してゲームをプレイしているユーザーが考えられます。

そういったユーザーにとっては、名前はや誕生日が表示されていることで、SNSなどに画像をアップしづらく感じたり、画像を加工する手間が発生すると推測します。

 

ユーザーの需要を考慮し、スクリーンショット撮影しやすくすることで、引いてはSNSに投稿するためのハードルも下げる効果も見込まれると感じました。

 

以上です。
プロフィール画面をデザインする際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト

 

主な参照箇所を抜粋します。

2. 本サービス内の素材利用について

1. 画像及び動画

本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。

夢職人と忘れじの黒い妖精のコンテンツ利用ガイドラインです。2022年9月15日に確認したものです

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

 

お問い合わせ

「夢職人と忘れじの黒い妖精」キャラクターを長押しすると表示される、ハート型のゲージがかわいい

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

 

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)から、画面を長押しした時に表示されるゲージのデザインを紹介します!

 

サムネイルなど、一部の画像を長押しした際にゲージが表示されるゲームは増えてきていますが「ゆめくろ」のUIにも採用されていました。

このデザインによって、以下の特徴があると感じました。

  1. 長押しすることで何かが起きることを伝えている
  2. どの程度長押しすれば良いのか伝えている
  3. キャラの近くに表示することで、キャラに関連していることを示している
  4. 世界観、没入感を意識したデザインが採用されている

色々ありますね。

 

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

f:id:appgameui:20220913095656p:image

この画面はキャラクターとスキンシップを図る画面です。
基本的にはボディタッチを中心にアクションを取ります。

 

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

真ん中に表示されているのが今回紹介しているゲージです。
ハートの形になっており、大変可愛らしいデザインになっています。

キャラクターの身体を長押しするとこのようなゲージが表示され、ユーザーにフィードバックを返すデザインになっています。

 

アニメーションで見るとこんな感じです。

ゲージが満タンになったらハートマークが輝いて消えていく演出も、ユーザーの共感を得る演出であるように感じました。

 

 

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

より分かりやすいように拡大してみます。

長押しは一定時間後にリアクションが返される挙動のため、フィードバックまでに時間差があります。

なので、このように即時フィードバックが返され、ゲージが表示されることでユーザーは安心してゲームを遊ぶことができます。

 

 

以上です。

画面を長押しした時に表示されるゲージをデザインする際の参考になれば幸いです

 

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

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

 


権利者さまへ

 

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

「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト

 

主な参照箇所を抜粋します。

2. 本サービス内の素材利用について

1. 画像及び動画

本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。

夢職人と忘れじの黒い妖精のコンテンツ利用ガイドラインです。2022年9月15日に確認したものです

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

 

お問い合わせ

デザイン比較:長押しした時に表示されるゲージ

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

 

今回は今まで紹介したアプリの中から、長押しした時に表示されるゲージのデザインの共通項をまとめ、一覧で比較してみました。
デザインの共通項は以下の4点に絞りました。

  1. サムネイル暗化…ゲージの視認性を意識しているか
  2. 指で隠れない調整…ゲージの視認性を意識しているか
  3. デザイン…世界観を取り入れるタイプのデザインか、フラットなデザインか
  4. 満タン演出…ゲージが満タンになった時の演出の有無。好み。

各ページにはgif画像も添付してあります。
デザインを検討する際の参考になれば幸いです。

 

 

1:ブレイブリーデフォルト ブリリアントライツ(BDBL)

世界観に寄せたグラフィックが特徴的

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- 世界観寄り -

 

2:モンスターハンター ライダーズ(MHR)

6時の方向から始まるゲージ

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
×(6時の方向からゲージが開始するため、満タンになる瞬間が見えない) フラット -

 

3:カウンターサイド

先端が発光しているので視線が強く誘導されがち

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
フラット -
備考
# 先端を光らせる

 

4:崩壊3rd

ゲージが光ってる!

 

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- フラット -

 

5:オクトパストラベラー 大陸の覇者

シンプルながら世界観を意識した装飾が加えられているデザイン

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- 世界観寄り -

 

6:ディープインサニティ アサイラム

がっつり世界観に寄せたデザイン!

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- 世界観寄り -

 

7:ワールドエンドヒーローズ

色が見やすい!満タンになった時の演出もきれい。

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
フラット

 

8:ドラゴンクエスト ダイの大冒険 -魂の絆-

シンプルなザ・リングゲージデザイン

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- フラット -

 

 

9:夢職人と忘れじの黒い妖精

キラキラしたハートがかわいい

サムネイル暗化 指で隠れない調整 デザイン 満タン演出
- 世界観寄り