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

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

「キャラバンストーリーズ」チャット画面に実装しておくと汎用性がぐっと高まる3つの機能の紹介

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

 

今回はチャット画面のデザインについて紹介します。

  • 「チャット画面の機能にはどんなものがあれば良いのかな?」
  • 「人によって求めるものがバラバラでまとめられない!」
  • 「右にあった方が良い?左にあった方が良い?」

 など、悩んでいる方の参考になれば幸いです。 

「キャラバンストーリーズ」 のチャット画面は以下のデザインです。

ああああああああ

 

機能自体は多くあるのですが、いくつか特徴的な仕様を紹介してみます。

 

 

1:チャットウィンドウのサイズを自由に変更できる

サイズを切り替えられるゲームはあるのですが、自由に変更できるアプリは初めて見たかも。

右下を引っ張ると…

ああああああああ

 

サイズが変更できます。

ああああああああ

「チャット枠は左右にあるのが良いか下部にあるのが良いのかな?」
「サイズはどれくらいが良いのかな?」

など、答えが出しづらい問題があります。

端末のサイズが多くありますし、ユーザーの主観によって意見が分かれる部分です。

 

「キャラバンストーリーズ」のように、位置やサイズが変更できる機能があると、ユーザーの要望に柔軟に対応できます。

 

 

2:定型文が登録できる

「キャラバンストーリーズ」には定型文の機能があり、ユーザー自身でそれを編集することも可能です。

ああああああああ

 

 

スマホでもPCでも、キーボードで文字を打つと、予測変換を使ったとしても手数がかかってしまいます。また誤字をする可能性もあります。

ああああああああ

そのため、よく使う文章を登録する機能があると、手数の省略や誤字の防止にも繋がります。

チャットを頻繁に使うようなゲームの場合はユーザーがチャットに使う時間も増えます。そのため、実装の優先度はユーザーがチャットに触れる時間に比例するのかな、と思います。

込み入ったやりとりではなく、短文を中心としたやりとりのゲームに実装すると効果的かもしれません。

 

3:文字サイズが変更できる

3つ目は「チャットの文字サイズを変更する機能」の紹介です。

ああああああああ

 

サイズは大・中・小の3種類です。

ああああああああ

▲文字の大きさとスタンプの大きさを分けて設定できます

端末の画面サイズが大きい場合は文字を小さくして、一画面内の情報量を多く得たいと考えます。上級者程多くの情報を一度に処理できるので、そういった要望も高まります。

端末の画面サイズが小さい場合、文字が小さいと読みづらいことが考えられます。
その場合は文字が大きい方が読みやすいです。

このように、ユーザーの習熟度やプレイ環境を考慮した上で、任意で設定できる機能が実装されています。

 

以上です。
繰り返しになりますが、

  1. チャットウィンドウのサイズを自由に変更できる
  2. 定型文が登録できる
  3. 文字サイズが変更できる

という機能が実装されていました。

チャットは初心者から上級者まで利用するコミュニケーションツールです。
ユーザーのペルソナも多岐に渡ります。

「キャラバンストーリーズ」のチャット機能ではカスタマイズ機能を取り入れることにより、幅広いユーザーの要望に対応できるように工夫されていました。

 

チャット機能をデザインする際に参考になれば幸いです。

 

 

▼参考書籍

UIデザイン みんなで考え、カイゼンする。

実践ペルソナ・マーケティング 製品・サービス開発の新しい常識

「キャラバンストーリーズ」吹き出し型の会話シーンのデザインの特徴を6つ挙げてみた

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

 

今回は「キャラバンストーリーズ」の会話シーンを紹介します。

f:id:appgameui:20201017160403p:image

横画面のゲームで会話シーンをデザインする際の参考になれば幸いです。

 

さて、早速ですが「キャラバンストーリーズ」の会話シーンのデザインの特徴はこんな感じ!

  1. キャラクターの顔が大きく表示されている
  2. ログとしてひとつ前のセリフが表示されている
  3. 吹き出しのデザインのバリエーションが豊富
  4. 吹き出しがアニメーションすることにより、目を引くデザインになっている
  5. どちらのセリフであるかシルエットだけで分かるようになっている
  6. メッセージが話者の顔に近い位置に表示されている

などです。

ああああああああ

このようにかなり丁寧に作られています。
ひとつずつ簡単に補足します。

1:キャラクターの顔が大きく表示されている

ああああああああ

 

横画面であれば、このようにキャラクターの下部にセリフ枠が表示されるデザインが多く見られます。

ああああああああ

▲「バンドリ! ガールズバンドパーティ!」の会話シーン

 

このデザインの欠点として、グラフィックの一部がUIで隠れてしまう点があります。

そのUIのままキャラグラフィックを表示しようとすると、必然的に文字を小さくするか、キャラを小さく表示せざるを得ません。

ああああああああ

▲「アークナイツ」

 

このように吹き出しを中央に寄せることにより、画面の左右でキャラクターのグラフィックをしっかりと見せることができます。

ああああああああ

 

2:ログとしてひとつ前のセリフが表示されている

ああああああああ

ログとしてひとつ前のセリフが表示されていることも特徴です。

もちろん通常の会話ログの機能もあります。

f:id:appgameui:20201017211100p:image

 

その上で、直前の会話を見せるデザインです。

ああああああああ

このデザインがあることにより、連続してタップしてメッセージを読み終えず次のメッセージに進んでしまった場合の保険になります。

 

ああああああああ

▲「うたわれるもの ロストフラグ」

一つ前の会話のログを見せる機能は、こういった画面デザインにはない要素なので、デザインを検討する際の判断軸のひとつになるのかもしれません。

 

3:吹き出しのデザインのバリエーションが豊富

吹き出しのデザインもいくつかのバリエーションが確認できました。

ああああああああ

▲通常の吹き出しデザイン

 

ああああああああ

▲シャウトする吹き出しデザイン

 

ああああああああ

▲明るい雰囲気を感じる吹き出しデザイン


以上の3パターンが確認できました。
吹き出しのバリエーションが用意されていると、台詞に感情が乗ります。

 

「ビーナスイレブン びびっど!」でも吹き出しのデザインが採用されています。
また同様に吹き出しのデザインのバリエーションも存在しています。

ああああああああ

▲「ビーナスイレブン びびっど!」の会話シーン

 

ああああああああ

▲「ビーナスイレブン びびっど!」の会話シーン

こういったデザインが採用できるのも吹き出しのデザインの特徴なのかもしれません。
吹き出しのデザインを採用する際はセットで採用するのが良いのかなと思います。
 

4:吹き出しがアニメーションすることにより、目を引くデザインになっている

視線誘導はUIの基本のひとつです。

「キャラバンストーリーズ」の会話シーンは吹き出しが拡縮アニメーションしています。

ああああああああ 

このデザインにより、視線が自然と台詞周りに集中します。

 

 

5:どちらのセリフであるかシルエットだけで分かるようになっている

先ほど紹介した「バンドリ! ガールズバンドパーティ!」だとどちらが話しているか、静止画では分かりません。

ああああああああ

▲「バンドリ! ガールズバンドパーティ!

 

 

これに対する対応策としては、このように話者のみ明るくして表示するデザインの方法も一般的です。

ああああああああ

▲「うたわれるもの ロストフラグ」

 

ただ、登場人物が多くなると、画面が全体が暗い印象になること、「キャラクターを見たい!」という要望も考えられます。
そういった意味で暗くすることに対してネガティブな反応を示すユーザーも考えられます。

ああああああああ

▲「刀使ノ巫女 刻みし一閃の燈火」

 

ああああああああ

▲「千銃士」

 

それに対して吹き出しのデザインを採用した場合は、話者から吹き出しが伸びているデザインであるため、静止画であっても話者が分かりやすいデザインになっています。

ああああああああ

▲話者から吹き出しが伸びている

 

6:メッセージが話者の顔に近い位置に表示されている

メッセージが話者の顔に近い位置に表示されていることも特徴として挙げさせていただきます。

ああああああああ

 

画面下部にメッセージを表示すると、どうしても顔グラフィックとメッセージの位置が離れがちです。

ああああああああ

▲「とある魔術の禁書目録 幻想収束」

 

ああああああああ

▲新テニスの王子様 ライジングビート

 

吹き出しだと、話者と近づけた方が相性が良いです。

ああああああああ

▲「スタンドマイヒーローズ」

 

そのため、視線の移動も短く済み、ストレスなく会話シーンを楽しむことが出来ます。

 

 

以上です。

繰り返しになりますが「キャラバンストーリーズ」の会話シーンの特徴は以下のものでした。

  1. キャラクターの顔が大きく表示されている
  2. ログとしてひとつ前のセリフが表示されている
  3. 吹き出しのデザインのバリエーションが豊富
  4. 吹き出しがアニメーションすることにより、目を引くデザインになっている
  5. どちらのセリフであるかシルエットだけで分かるようになっている
  6. メッセージが話者の顔に近い位置に表示されている

ああああああああ

会話シーンのデザインを考える際の参考になれば幸いです。

良いUIはその良さに気付かれないことが多いです。他にも私が気付けていないメリットがあるかもしれません。
何かありましたらコメントにて教えていただければと思います!

 

▼参考書籍

売れるゲームのUI/UX 制作現場の舞台裏

誰でもつくれる!UIデザイン入門

「サッカースピリッツ」ガチャ画面で詳細な排出状況が見れるんじゃが…デバッグ機能みたい…

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

 

「サッカースピリッツ」のガチャ画面にて、レアリティ別に排出数と排出割合が表示されていました。

f:id:appgameui:20201013000539p:image

 

ああああああああ


 

 

しかも日毎にも対応…!

f:id:appgameui:20201013000543p:image

これもうデバック機能じゃなかろうか…。

 

何年か前のソシャゲでは高レアリティを獲得したユーザーがリアルタイムで流れていました。

使い方としては…

  • ユーザーをギルドに勧誘する
  • フレンド申請する

そんな感じの使い方が主です。

その後、MMORPG系を中心に一部で残ってるけど、以前よりは少なくなってきた仕様という印象。

 

今回の「サッカースピリット」のように、時間ごとの排出状況、レアリティ別の排出状況をユーザーに見せる仕様は初めて見ました。

データを信頼するかどうかは別にして、詳細な数字を見せることによって、信頼性を高めようとする意図が感じられます。

 

以上です。

ガチャを始めとしたショップ周りは訴求が非常に強くなりがちです。

つまり、ユーザーにどんなメリットがあるかではなく、運用側にとってどんなメリットがあるのかが、評価基準になりがちです。

そういった背景がある画面で、ユーザーに対して説明を果たそうとしている稀有なデザインの事例だと感じました。

 

ガチャ画面を考える際、どういった情報を含めるかの参考までに。

「サッカースピリッツ」スタンプに英語だけではなくハングルもあったのでポジティブな効果を考察してみた

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

 

「サッカースピリッツ」のスタンプにハングルが採用されていました。

スタンプの多言語対応を考える際、UIデザインの考え方の選択肢の一つとして参考になれば幸いです。

 

該当の箇所はチャット画面の右下の場所ですね。

f:id:appgameui:20201013000600p:image

 

はい、こちらです。

f:id:appgameui:20201014091527j:image

 

汎用的なスタンプには英語も含まれています。

f:id:appgameui:20201014095917p:image

その上で、あえてハングルのスタンプも残してるんですよね。

なぜ他言語版にハングルが混じっているのか、理由としては以下が考えられます。

  • 開発、運営は韓国の会社である
  • 多言語対応のコストが払えなかった

 

開発運営会社については以下の2社が担当しています。

BIGBALL

本社所在地

ソウル特別市江南区 テヘラン
441 10F(三成洞, ソンアムビル III)

Com2uS

株式会社Com2uS(代表:James Song)は1999年韓国で初めてモバイルゲームを開発・サービスを開始しました。

 

 

多言語対応については、2020/10時点で以下の言語に対応しています。

f:id:appgameui:20201014100101p:image

上から順に

  1. 韓国語
  2. 英語
  3. フランス語
  4. ドイツ語
  5. 中国語(簡体字)
  6. 中国語(繁体字)
  7. スペイン語
  8. タイ語
  9. 日本語

となっています。9言語!多い!!

 

 

スタンプの中にハングルがあることについては正直、あまり見慣れなかったため、最初は違和感を感じました。OKのような簡単な英語であれば、小学生くらいのユーザーでも理解できます。ハングルの認知度はどうなんだろう…?といった理由です。

 

ただ、今の若い子は簡単なハングルが分かるのかも…?とも考え直しました。

確かに2000年代以降は韓流ブームという流れはあり、ファッションや食事、エンタメを中心に影響を及ぼしていることは実感できます。

そういった環境下であれば、簡単な言葉なら自然と目に触れている可能性が高いのかもしれません。

 

また、最近のチャットには翻訳機能が実装されているものもあります。

ああああああああ

▲「AFKアリーナ」のチャット画面にて自動翻訳機能の挙動

 

問題解決のための意思疎通であれば、翻訳する方が確かに合理的です。

 

ただ、感情を伝える際はネイティブの言語で伝えることによって相手の受け止め方も変わります。

よく、芸能人や公人などが海外に行った際、現地の言葉で簡単な挨拶を述べるシーンがあります。これをどう受け止めるかは人それぞれですが、歓迎されたり、親近感を覚える人が多いように感じます。

 

相手の母国語に合わせて挨拶をする、感謝を伝えるなどのやりとりをすることによって、表面的な意思疎通だけではなく、相互に尊重しあえる関係性を構築できるかもしれません。

 

そう考えると、あえて他言語のスタンプを残すという考え方もアリなのかもしれません。

 

以上です。

スタンプの多言語対応を考える際、UIデザインの考え方の選択肢の一つとしてご紹介させていただきました。

 

▼参考書籍

基礎から学ふ? LINEクリエイターズスタンプ

文字のレイアウトで魅せる広告デザイン