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

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

「ドラゴンスラッシュ」キャラの演技を見せたい時の会話シーンのUI

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

 

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

 

今回は「ドラゴンスラッシュ」の会話シーンのUIを紹介します。
「ドラゴンスラッシュ」の会話シーンのUIはかなり特殊で、キャラの台詞は吹き出しのUIになっています。

 

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

 

f:id:appgameui:20210609135707p:image

 

 

アニメーションで見ると以下のような演出です。
キャラクターの頭上に吹き出しが表示されていることが分かります。

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

 

「ドラゴンスラッシュ」の会話UIが特殊である部分は主に以下です。

  • キャラクターや文字サイズが小さい
  • 吹き出し内の文章が短く区切られている
  • 複数のキャラが画面内で演技できる

 

スマホはコンシューマと比較して画面が小さいので、キャラクターや文字のサイズを大きくすることが多いです。

 

例えば「ダンジョンに出会いを求めるのは間違っているだろうか~メモリア・フレーゼ~」の場合はマップ上でキャラが小さくても会話すると大きく表示されます。

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

 

文字の大きさについては可読性に関わりますし、キャラクターのグラフィックのサイズについては訴求ポイントであるかと思ったのですが、

「ドラゴンスラッシュ」の場合は個別のキャラクターのグラフィックよりも背景を含めた、キャラクター同士の演技が重視されているように感じました。

 

例えば背景でモブが右往左往する様子が描かれていたり…

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

 

激しい戦闘シーンを描くなどされていました。

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

 

 

カメラをあえて動かさず、舞台を見るかのような視点で捉えているデザインは、他のソシャゲではあまり見られないデザインです。

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

 

以上です。

ソシャゲの会話シーンの多くはキャラグラフィックを大きく表示したり、テキストウィンドウが表示されることが多いです。

複数のキャラクターのアニメーションや、情景を強く描きたい場合などは「ドラゴンスラッシュ」のようなデザインをするのも選択肢としてあるのかもしれません。

 

会話シーンのUIを作成する際の参考になれば幸いです。