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

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

会話シーンの主なレイアウトまとめ(横画面編)

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

 

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

 

今回は横画面のゲームに登場する主な会話シーンのUIを紹介します。
よくみかけるレイアウトを5つ紹介します。
デザイン案の参考になれば幸いです。

 

 

 

1:オーソドックス

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

以下、主な特徴

  1. スチルイラストやムービーを挿入してもテキストの表示位置を変えなくて良い
  2. ナレーションを入れることが可能
  3. キャラクターを揺らすなど、記号的な演出ができる
  4. キャラクターをアップにできる
  5. 同時に画面に表示するのは3〜4人が限度
  6. ある程度身長差を考慮する必要がある
  7. 誰が話しているか分からせる工夫が必要
  8. 最近はキャラクター名の文字や下地にキャラクターごとに色を設定しているケースもある
  9. 少人数でのやり取りに向いている

 

2:吹き出し+表示位置固定

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

以下、主な特徴

  1. 吹き出しのデザイン次第でキャラクターの声色や感情を表現することが可能
  2. 誰のセリフか分かりやすい
  3. キャラクターの画像サイズを小さく抑えることができ、省エネ
  4. やりとりしているキャラクターのセリフがしばらく残るので会話の流れがつかみやすい
  5. 必ず話者が存在するためナレーションを入れるのは工夫が必要になる
  6. 少人数でのやり取りに向いている

 

3:吹き出し+劇場

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

以下、主な特徴

  1. キャラクターの演技の幅が広い
  2. カメラ演出を取り入れやすい
  3. シーンを描くので複数人のやりとりをする際に何が起きているのか分かりやすい
  4. 吹き出しの位置に気をつけないとキャラクターの顔などに吹き出しが被る可能性がある
  5. 吹き出しの表示位置が予想できないので視線が散る可能性が高い
  6. 大人数でのやりとりに向いている

 

4:劇場+キャラグラフィック

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

以下、主な特徴

  1. より広い範囲でキャラクターの配置や演技を見ることが出来る
  2. メッセージ枠付近にキャラクターのグラフィックが表示されることにより、誰のセリフであるか分かりやすい
  3. カメラ演出が入れやすい
  4. 大画面向き。スマホだと情報量が多いかも…
  5. 文字が表示される場所が予測可能なので視線が散りづらい
  6. 大人数でのやりとりに向いている

 

5:クラシックRPG

ああああああああ

以下、主な特徴

  1. レトロ感を演出できる
  2. プレイヤーの想像力に委ねる部分が大きい
  3. 情報量が少ないため、スマホでも見やすい

 

以上です。

他にもあると思うので適宜追加、更新したいと思います。
こんなレイアウトもあるよ、というデザインを見かけましたらコメントやtwitterにてお知らせいただければ幸いです。