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

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

「この悪い子猫ちゃんめ!」ヘッドホンを利用してより良いゲーム体験の訴求案内をするデザイン

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」におけるヘッドホンを着けてサウンドの魅力を訴求するデザインをご紹介します。

 

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

  1. サウンドを聴くことでより良いゲーム体験を提供しようとしている
  2. ヘッドホンのグラフィックを目立たせている
  3. 世界観にあわせた見た目になっている
  4. デザインにバリエーションを設けて飽きさせないようにしている

 

該当の画面はこちらです。
楽曲が流れる画面に遷移する際、イヤホンまたはヘッドホンを利用してサウンドを聴くように促す画面が表示されています。

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

©2021 xeen Inc.

 

サウンドを聴くことでより良いゲーム体験を提供しようとしている

画面をよく見ると、画面上部に以下のメッセージが表示されていることに気付きます。

イヤホン/ヘッドホンをしてプレイするとよりお楽しみいただけます

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©2021 xeen Inc.

このメッセージがあることでユーザーはサウンドを聴くメリットが伝わります。
このゲームは特に楽曲に力を入れています。

公式サイトを確認すると、トップページに有名クリエイターの楽曲を多数収録している旨がアピールされています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©2021 xeen Inc.

この悪い子猫ちゃんめ!(わるこね) | 世界100ヵ国以上に向けて配信予定!!

 

そういったことから、このグラフィックはゲームの魅力を十分に伝えるためのデザインだと考えられます。

 

ゲーム体験の中でサウンドは非常に重要な要素だと考えています。

スマホゲーはライトユーザーが多く、イヤホンやヘッドホンを着けてまでプレイする人はまだ稀であると推測します。
もしヘッドホンを利用してゲームをプレイしたことが無い方は、ヘッドホンを利用してゲームをプレイすることで今までとは違った新しい刺激になるのかもしれません。

 

ヘッドホンのグラフィックを目立たせている

見た目の話ですが、瞬間的にヘッドホンを目立たせたデザインになっていることが分かります。

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

©2021 xeen Inc.

 

特に以下の要素により、ヘッドホンが目立つデザインになっていると感じました。

  • 暗い背景にヘッドホンが明るく光るデザイン(判別性)
  • アニメーションをさせることでヘッドホン付近に視線が誘導される(視線誘導)

コントラストによる判別性の向上、画面内で最も早く動かすことで視線を誘導するなど、自然なデザインにより分かりやすい見た目になっています。

 

世界観にあわせた見た目になっている

元々のグラフィックは暗いので分かりにくいのですが、人物のシルエットの部分はゲームキャラが使われています。
少しでも分かりやすくするために画像のコントラストと明るさを調整してみました。
女性のキャラクターが使われていることが分かるでしょうか。

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

©2021 xeen Inc.

イヤホン/ヘッドホンを利用することを促すだけではなく、ゲームのキャラクターを採用することで「わるこね」ならではの見た目を達成しています。

これによりゲームの中にいる印象を与え、ユーザーのゲームに対する没入感を阻害しないデザインになっていると感じました。

 

ただ、通常はこのように暗くなっています。
この画面で伝えたいことはキャラクターの魅力ではなく、ヘッドホンを装着してサウンドを聴いてもらうこととし、一貫した情報の優先度を付けがなされているようにも感じました。

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

©2021 xeen Inc.

 

デザインにバリエーションを設けて飽きさせないようにしている

デザインにバリエーションがある点も魅力的なUIのひとつかなと感じました。
自分が確認したのは3種類ですが、見つけた範囲で紹介します。

まずはデザインパターンその1。
1人でバストアップのデザインです。基本形ですね。

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

©2021 xeen Inc.

 

デザインパターンその2は全身が映る構図です。
先ほどのバストアップの構図には無かった同心円が表示されています。見た目にも大きな変化がありますね。

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

©2021 xeen Inc.

 

アニメーションで見るとこんな感じです。
ケーブルがどこから出ているのか気になります。

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

©2021 xeen Inc.

 

デザインパターンその3は3人に増えたバリエーションです。
それぞれヘッドホンを装着していますね。

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

©2021 xeen Inc.

 

アニメーションで見るとこんな感じです。
元々の情報量が多いことに加え、画面内で動いているものが多く、賑やかさが増してきています。

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

©2021 xeen Inc.

このようにデザインのバリエーションを用意されています。
頻繁に見せる画面だからこそ少しでも刺激になるような要素を仕込んでいき、ユーザーが退屈しないように工夫をしているように感じました。

 

 

余談ですが、「ソード&ブレイド」と「ロマンシング サガ リ・ユニバース」でもイヤホンを付けてプレイするように案内されています。

こちらもデザインの事例としてご紹介しておきます。
もし良かったら見てみてください。

appgameui.hatenablog.com

 

appgameui.hatenablog.com

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」のヘッドホンを着けてサウンドの魅力を訴求するデザインについて感じたことは以下の4点です。

  1. サウンドを聴くことでより良いゲーム体験を提供しようとしている(ゲームの魅力を訴求)
  2. ヘッドホンのグラフィックを目立たせている(情報の優先度付け、視線の誘導)
  3. 世界観にあわせた見た目になっている(世界観の没入)
  4. デザインにバリエーションを設けて飽きさせないようにしている(主観的満足度の向上)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

サウンドを利用してより良いゲーム体験を検討したい場合の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

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

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

「この悪い子猫ちゃんめ!」ロード中のメッセージを『女の子が準備中』とすることで、ストレスに寛容になれる

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」におけるゲームデータダウンロード中のメッセージをご紹介します。

 

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

  1. 世界観にあわせた表現になっている

 

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

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

©2021 xeen Inc.

 

 

 

 

世界観にあわせた表現になっている

データDLのメッセージはタイトル画面からゲーム内に遷移するタイミングで表示されます。

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

©2021 xeen Inc.

 

文字を読みやすくするために該当部分を大きくします。

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

©2021 xeen Inc.

女の子たちが支度中です
もう少し待ってね

と、表示されています。

 

状況をユーザーに伝えるという意味では正確性に欠けますが、ゲーム開始前に表示されることで、ゲームの期待値と没入感を高めていると感じました。

また、データロードには時間がかかりますが、ゲームのキャラクターたちが支度中ということであれば、キャラクターたちの好印象を持っているユーザーは待ち時間のストレスにも寛容なのかな、と推測します。

 

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」のゲームデータダウンロード中のメッセージについて感じたことは以下の1点です。

  1. 世界観にあわせた表現になっている(期待値と没入感を高める、ストレスの緩和)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

待ち時間が長いロード画面でのメッセージを検討する際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

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

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

「この悪い子猫ちゃんめ!」事前アラート。ユーザーにとって不利益を与える可能性がある情報を最初に伝える親切な情報設計

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」における非推奨端末でゲームを開始する際の事前アラート表示をご紹介します。

 

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

  1. この端末だとちゃんと遊べない可能性を事前に伝えている
  2. 情報を能動的に伝えている

 

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

f:id:appgameui:20220611080325p:image

©2021 xeen Inc.

 

この端末は推奨されていない端末となっています。
適切なプレイが出来ない恐れがあります。
プレイを続けますか?

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

©2021 xeen Inc.

 

この端末だとちゃんと遊べない可能性を事前に伝えている

ユーザーにとってゲームがプレイできない状況というのはかなり大きなストレスです。
そのため、この端末ではゲームがちゃんとプレイできない、という事実はユーザーにとって重要な情報であると考えられます。

事前に適切にプレイできない可能性があることを伝えることで、ユーザーと認識を合わせ了承を得るように試みています。

そのため、仮に適切なプレイができなかったとしてもユーザーは原因が分かっているため、ストレスを抑えることに繋がっていると感じます。

 

ちなみに文中では「適切なプレイが出来ない恐れ」と記載されていますが、具体的な内容についてはここでは定義されていません。

少なくとも自分の端末では以下の現象を確認しました。

  • ゲームが落ちる
  • ゲームが進行しない
  • 読み込みに時間がかかる

 

情報を能動的に伝えている

情報をどのように伝えるのかによってユーザーの印象も変わるかと思います。
ユーザーにとって不利益を与える情報を能動的に伝えることで、ユーザーは不利益を回避する選択肢が与えられています。

例えば、今回の場合は「端末を変更する」という選択肢が考えられます。

情報は一方的に与えるだけではなく、正しく伝達されてこそであるため、このように能動的に情報を伝えることは重要な情報設計かと考えます。

 

ちなみに、情報が表示されるタイミングとしては、
タイトル画面をタップした直後、ユーザーアカウントを生成する前に表示されています。

仮にユーザーアカウントを作成した後に、ユーザーにとって不都合な情報を伝えてしまうと騙し討ちにあったような不信感を覚えてしまう可能性があります。

適切な表示タイミングかと考えます。

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

©2021 xeen Inc.

 

まとめ

まとめると「この悪い子猫ちゃんめ!」の非推奨端末でゲームを開始する際の事前アラート表示について感じたことは以下の2点です。

  1. この端末だとちゃんと遊べない可能性を事前に伝えている(エラーの事前告知)
  2. 情報を能動的に伝えている(損失回避)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

ユーザーにとって不利益を与える可能性がある情報を伝える際の参考になれば幸いです

 

 

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

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

 


権利者さまへ

 

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

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

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

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

「ロックマンX DiVE」クイック強化があることで手数や時間の省略、損失回避に対する配慮がなされていると感じました

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

 

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

 

今回は「ロックマンX DiVE」におけるクイック強化のUIをご紹介します。

キャラクターが登場するタイプのソシャゲは様々な手段でキャラクターを育成します。
そのため、強化のプロセスを繰り返すことがゲームサイクルに組み込まれがちです。

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

  1. キャラクターの育成の手間をいくらか省ける
  2. 消費リソースのコントロールが可能

 

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

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

 

これはキャラクターのスキルを強化する画面です。
ダイアログ上部にどの程度強化するか設定できるスライドバーがあります。
最大値は現状強化可能な数字が設定されます。◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

前後の画面を含めて、流れをアニメーションで確認するとこんな感じです。

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

 

キャラクターの育成の手間をいくらか省ける

この機能とUIによって、キャラクターを強化する手数が大幅に省けます。
例えば今回紹介している例では一度にレベルを最大で11上げることが出来ます。

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


クイック強化のように一括でレベルを上げる機能が無かった場合、レベルを11上げるために大体は以下の1~3手順を繰り返す手間が発生するかと思います。

  1. レベルアップ確認
  2. レベルアップ成功演出
  3. レベルアップ完了演出

見た目の手数としては1セットで3手ですかね。

レベルを11上げる場合はこれを11セット繰り返すので単純計算で33手になります。
ロックマンX DiVE」のようなクイック強化機能があるとどれだけレベルを上げても1セットで済むため手数と時間の省略に繋がると感じました。

 

消費リソースのコントロールが可能

ロックマンX DiVE」のクイック強化機能は強化するレベルをコントロールすることが可能である点も特徴的です。

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

強化するレベルを選べることで消費リソースをある程度コントロールすることができます。

レアリティの高いリソースや膨大なリソースを消費する際は特に慎重な判断をすることがあります。仮に誤って消費してしまった場合、元に戻すことは出来ません。

人間は損をしたくないと考える傾向がある生き物であるため、リソースの消費については敏感になることがあります。

 

損失回避性とは、利益から得られる満足より同額の損失から得られる苦痛の方が大きいことから、損失を利益より大きく評価する人間心理のことをいう。

損失回避性とは - コトバンク

 

また、消費リソースをユーザーがコントロールすることで以下の2点に貢献しているのかなと感じました。

  • リソースの消費に対する細かい部分での合意と納得感
  • 誤操作の防止弁

 

まとめ

まとめると「ロックマンX DiVE」のクイック強化について感じたことは以下の1点です。

  1. キャラクターの育成の手間をいくらか省ける(手数と時間の省略)
  2. 消費リソースのコントロールが可能(損失回避の法則)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

キャラクターを強化する手間を省く機能を検討する際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

ロックマンX DiVE」のガイドラインを確認したところ、権利者のカプコン公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

カプコンのゲームの画像を動画サイトやSNS・個人サイト等に掲載してもいいですか? (著作物に関するQ&A) | 株式会社カプコン : サポート

 

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

ご自身で撮影されたゲーム映像のスクリーンショットに関しては、動画投稿のガイドラインカプコン動画ガイドライン)に沿った内容であれば、使用していただくことが可能です。

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

 

以下は上記のQ&Aにて示されているリンク先の画面のキャプチャです。

カプコン動画ガイドライン(個人向け) | CAPCOM

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

【投稿できるもの】

  • PCのキャプチャーボード・PCソフト(Steamクライアントを除く)など、ゲーム機やゲームの機能以外を使用する場合は、「ご自身がプレイした映像を編集する」「ご自身のコメントを付ける」など、ゲーム映像に独自の付加価値を付けたもの

【投稿できないものの主な例】

4:タイトル個別でガイドラインを設けているタイトルはありますか?

現時点では、ございません。

 

10:ガイドラインの対象になるゲームソフトは何ですか?

機種にかかわらず、カプコンから発売されているゲームソフト(ゲームアプリも含む)全てが対象です。

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

 

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

 

お問い合わせ