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

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

「エクリプスサーガ」キャラクターがメッセージを入力中であることが伝わるチャット画面

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

 

 

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

 

 

今回は「エクリプスサーガ」のキャラクターとのチャット画面のデザインを紹介いたします。

 

最近、特に中国系のゲームに多い気がするのですが、キャラクターとショートメッセージをやりとりできる要素が実装されています。

 

「エクリプスサーガ」の場合はこのような画面でした。

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

 

 

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

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



特にここのUIが良いと感じました。
「現在入力中…」と表示され、相手がメッセージを入力している様子が伝わります。
実際にキャラクターとやりとりしている印象
を強く与えます。

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

 

 

また、顔アイコンが吹き出しの横に表示されることによって、キャラクターと会話している印象が強くなる。

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

 

 

先日紹介した「白夜極光」でも同じような機能の画面がありました。

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

「白夜極光」キャラクターがメッセージを入力中であることが伝わるチャット画面

 

人気なんですかね、この機能。

 

「白夜極光」同様に「エクリプスサーガ」でも画面左側にキャラクターのリストが並んでいます。
「白夜極光」と異なるのは、キャラクターのリストの近くに、キャラクターが発信した最新のメッセージが反映されている点です。

 

アニメーションで見るとこんな感じですね。
表示されているメッセージが次々と切り替わり、リアルタイムにメッセージが更新されていることが分かります。

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

 

うぅ~ん…ここをアニメーションさせても視線はチャット欄の方を向いていると思うので、見落としやすいような気がします。
どうしてここもアニメーションさせてるんだろう…?

複数のキャラクターが仲間になった時に、同時にメッセージのやりとりが出来るようになる、とかなのかな…?謎!

 

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

 

 

以上です。

「エクリプスサーガ」のキャラクターとのチャット画面のデザインを整理すると…

  • 「現在入力中…」というメッセージを表示することでタイピング中であること
  • 吹き出しの近くに顔グラフィックを表示させることで、キャラクターと会話している印象が強まる

などが分かるデザインになっていました。

特に「現在入力中…」の表現は存在感、リアリティ、没入感といった観点で見たときに、ユーザーの印象に強く残るデザインだと感じました。

 

画面の見た目をデザインする際に、こういったテキストや世界観を意識してデザインできると良いのかもしれません。

 

キャラクターとのチャット画面をデザインする際の参考になれば幸いです。