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

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

「サッカースピリッツ」制限のある中でキャラクター達をどう見せるか。会話シーンで工夫しているところ

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

 

「サッカースピリッツ」の会話シーンのキャラクターのトリミングが独特だったので、デザインのアイディアとして紹介してみます。

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

 

 

早速ですが「サッカースピリッツ」の会話シーンのUIは以下のようなデザインになっていました。
f:id:appgameui:20201013000622p:image

左右にキャラクターを寄せるレイアウトになっています。
画面の中央は場面がよく見えるように空けています。

 

多くの会話シーンはこんな感じで2Dなり3Dの立ち絵が表示されていることがほとんどです。

ああああああああ

▲「ビーナスイレブン」の会話シーン

 

全身が表示されていると、こんな感じでキャラクターのポーズも付けれます。

ああああああああ

▲「テイルズオブクレストリア」の会話シーン

 

「サッカースピリッツ」の場合、キャラクターの全身イラストはあるようなのですが、その上でトリミングしています。

f:id:appgameui:20201013000627p:image

▲斜めにトリミングしているので躍動感があります

ん~…このイラストになっている事情は分かりかねますが、極端にポーズが付いているイラストは会話シーンには向いてないことが多いです。

  • キャラクターのパーツが他のキャラクターを隠してしまう
  • カメラの距離や角度が揃わないこともある

などの理由が挙げられます。

ですので、全身イラストではなく、顔をトリミングするようなデザインの方が扱いやすかったりします。

ああああああああ ▲「ゴエティアクロス」の会話シーン

 

顔だけではなく、全身のイラストがあるメリットとして

  • 衣装やポーズなどでキャラクターの情報が伝えられる
  • キャラクターの位置関係が説明しやすい

ということが考えられます。
顔のみにしてしまうとそういった情報が無くなってしまいます。

そういった場合、画面の中央に情景を説明するイラストなどがあると間が持ちます。

ああああああああ

▲「コルヌコビア」の会話シーン

 

以上です。

カードイラストの素材を流用する際、マスクで処理することが必要になります。

「サッカースピリッツ」のデザインの場合はキャラクターをなるべく大きく見せようとする意志が感じられました。

 

必ずしもUIに使う素材をUIデザイナーがコントロールできるわけではありません。
すでに使用する素材が決まっており、その上でより良いUIになるように最善を尽くす場面もあります。

 

「サッカースピリッツ」の場合は…

  • キャラクターを大きく見せる
  • 躍動感のあるトリミング

といった工夫が感じられました。

制限の上でデザインをする方の参考になれば幸いです。

 

以下、参考書籍の紹介です。

ノンデザイナーズ・デザインブック [第4版]

デザイナーじゃないのに!

「少女歌劇 レヴュースタァライト -Re LIVE-」演劇舞台の演出がたくさん取り入れられていた!バトル演出の紹介

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

 

「少女歌劇 レヴュースタァライト -Re LIVE-」のバトル周りで世界観を演出するデザインがいくつかあったので紹介します。

UIでも世界観を表現する演出やデザインを考えることがあるかと思うので、その参考になれば幸いです。 

f:id:appgameui:20201008101709p:image

 「少女歌劇 レヴュースタァライト -Re LIVE-」では主に以下の部分が世界観を表現していると感じました。

  1. バトル開始時の「開演」という文字
  2. バトル開始時の画面遷移演出で幕が開く演出がある
  3. キャラクターの足元の影の落ち方
  4. キャラクターがフォーカスされている時にスポットライトが当たる演出
  5. バトル終了時の画面遷移演出で幕が降りる演出がある

 などです。順番に見ていきたいと思います。

 

 

1:バトル開始時の「開演」という文字

まず最初にバトル開始時の「開演」という文字が表示されるのが、世界観を表していると感じました。

ああああああああ

 

流れで見るとこんな感じです。

ああああああああ

最近だと「UXライティング」という言葉が流行ってきています。これがUXライティングに該当するのか分かりませんが、少なからずUIの要素が含まれていると感じたので紹介させていただきました。

 

2:バトル開始時の画面遷移演出で幕が開く演出がある

先程の「開幕」とタイミング的にはほぼ同じなのですが、幕が開く演出でバトル画面に遷移しました。

ああああああああ

 

流れで見るとこのような演出です。

ああああああああ 

  1. 幕が開ける
  2. ライトが動く
  3. キャラクターがシルエットで浮かび上がる
  4. 舞台上が明るくなり、キャラクターが見えるようになる

という流れですね。

この演出により、舞台上で戦っていることが強調されています。

 

3:キャラクターの足元の影の落ち方

先程のライトに関係するのですが、足元に落ちている影が特徴的です。

ああああああああ

 

この部分です。

ああああああああ

舞台上では他方向からライトが当てられています。それを表現するため、このような特徴的なな影の落とし方をしているのだと推測します。

この辺りはUIデザイナーが指示したり、作成することは少ないとは思いますが、世界観を表現するための工夫として紹介させていただきました。

 

4:キャラクターがフォーカスされている時にスポットライトが当たる演出

4つ目はスポットライトを使った演出です。

ああああああああ


「少女歌劇 レヴュースタァライト -Re LIVE-」では、バトル中にスキルを発動させるとこのように該当キャラにスポットライトが当たる演出が入ります。

ああああああああ

これもゲームの設定を活かした独自の演出です。

 

 

5:バトル終了時の画面遷移演出で幕が閉じる演出がある

最後はバトルが終わった後の演出です。

ああああああああ

 

幕が閉じる演出があるのですが、開始時の幕とはデザインが異なり、飾りが付いたデザインになっているのが特徴的です。

ああああああああ

推測するに…

  1. 速やかに次の画面に遷移させたかった
  2. 幕が上から閉じる演出だと、上から素早く落ちてくるように見える
  3. 左右から閉じる幕の方が移動距離が長い分、演出をきちんと見せることができる

 

  1. キャラクターを見せたかった
  2. 左右から閉じる方が最後までキャラクターを見せることができる

といった理由が推測できます。

 

以上です。

繰り返しになりますが

  1. バトル開始時の「開演」という文字
  2. バトル開始時の画面遷移演出で幕が開く演出がある
  3. キャラクターの足元の影の落ち方
  4. キャラクターがフォーカスされている時にスポットライトが当たる演出
  5. バトル終了時の画面遷移演出で幕が降りる演出がある

といった部分で世界観が表現されていると感じました。

総じてみると、

文字やグラフィックなど、画面の情報量が極端に少なく、世界観を強く訴求してもノイズにならない場面

で表現されているようです。

UIが世界観を盛り上げるための演出をデザインすることも珍しくありません。
デザインを考える際の参考になれば幸いです。

 

 

少女☆歌劇 レヴュースタァライト -Re LIVE- ビジュアルブック

はじめてのUIデザイン 改訂版

図解舞台美術の基礎知識 (舞台技術入門新シリーズ (4))

「少女歌劇 レヴュースタァライト -Re LIVE-」チャット画面にカテゴリが設定されていた。色んなチャットがあるなぁ

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

 

今回は「少女歌劇 レヴュースタァライト -Re LIVE-」のチャットが話題別に分けられているデザインになっていたので、事例として紹介してみたいと思います。

チャット画面のデザインや仕様を検討する際の参考になれば幸いです。

 

「少女歌劇 レヴュースタァライト -Re LIVE-」のチャット画面としては全体の雑談チャンネルとは別に【ストーリー】【攻略】【質問】【募集】のカテゴリに分けられています。

f:id:appgameui:20201008101655p:image

運営としてはそれぞれ以下のように役割を区別しています。

 

【ストーリー】
メインストーリーやイベントストーリーの内容や登場する舞台少女について語りましょう!

【攻略】
イベントの攻略やチャレンジレヴューの攻略方法について共有しましょう! 

【質問】
舞台少女の育成方法やレヴューについてなど、困ったら気軽に質問しましょう! 

【募集】
フォローの募集やVSレヴューの対戦相手、トワイライトシアターの仲間などを募集しましょう!

f:id:appgameui:20201011122528p:image

 以上のように定義され、カテゴリが分けられています。

このようにカテゴリを分けるメリットとしては…

  • ユーザーが求めるコミュニティを見つけやすい

ということが考えられます。
上手く機能すれば目的に沿った円滑なコミュニケーションが取れます。 

ただ、見た感じ【募集】除いては、目的別にコミュニケーションを取っているようには見えませんでした。

観察している感じ、以下の様な性質が原因なのかなと感じました。

  • 話題の境界が曖昧
    雑談からの流れで攻略にも質問にもなります。攻略情報を共有する流れで詳細を質問されるケースも想定されます。そういった性質があるので、話題の境界が曖昧になります。
  • ユーザーはヘルプを見て書き込んでいない
    ユーザーは必ずしもヘルプを見て書き込んでいません。したがって、運営とユーザー間でのカテゴリの定義の共通認識が出来ていない可能性が高いです。
  • 書き込みの頻度が少なく、分けるほどではない
    細かく分割してしまうとコミュニティが分断され、テンポの良いコミュニケーションができなくなります。特に質問などは人の目に触れる場所に書き込んだ方が返信が得られる確率が高いです。

そのため【ストーリー】【攻略】【質問】【募集】というように項目を分けるメリットは少ないのではないか、という印象を受けました。

 

コミュニティが分断されるとコミュニケーション自体が成立しづらくなってしまいます。

ですので、チャットの仕様を検討する際はその点に注意すると良いかもです。

例えば…

  • フォルダ分けではなくフィルタで抽出するようにする
  • 任意の書き込みに対して返信できるようにする

などすると、一つのコミュニティの中でやりとりできるのと、目的の話題も見つけやすいのかな、と思いました。

最近プレイしたゲームにチャットが実装されているケースが多いので、人気の実装なのかな…。

 

以上です。仕様の参考になれば幸いです。

 

IAシンキング Web制作者・担当者のためのIA思考術

IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン

「少女歌劇 レヴュースタァライト -Re LIVE-」キャラクターのイメージカラーの話

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

 

今回は「少女歌劇 レヴュースタァライト -Re LIVE-」の会話シーン中において、キャラごとのイメージカラーが反映されているデザインを紹介します。

  • イメージカラーをどこに反映させているか
  • 影響範囲はどの程度になるか
  • 影響範囲のUIパーツのデザイン

などを検討する際の参考になれば幸いです。

少女歌劇 レヴュースタァライト -Re LIVE-の会話シーンです

 

 

キャラクターの数はどの程度か?

キャラクター別にイメージカラーを設定するのですが、総勢何名で、どのように色分けされているのか確認してみました。

聖翔音楽学園…9名

ああああああああ

ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ
ああああああああ

 

凛明館女学校…5名

ああああああああ

ああああああああ

ああああああああ

ああああああああ

ああああああああ

 

シークフェルト音楽学院…5名

ああああああああ

ああああああああ

ああああああああ

ああああああああ

ああああああああ
 

フロンティア芸術学校…5名

ああああああああ

ああああああああ

ああああああああ

ああああああああ

ああああああああ

 

その他

ああああああああ

ああああああああ

ああああああああ

ああああああああ

 

結果!

9+5+5+5+4=28

です!多っ!

 

この辺とか横に並べないとどっちがどっちか分からないな…

 

ああああああああ

 ああああああああ

 

 

ああああああああ

ああああああああ

 

ああああああああ

ああああああああ

 

 

また、主人公は比較的目立つ色が設定されていることが印象的でした。

ああああああああ

 

キャラクターにイメージカラーを設定する理由について

ゲームUIの評価軸ではキャラクターのイメージカラーを設定する理由は説明しづらいです。どちらかというと、マーケティング側。カジュアルなブランドイメージに近いです。

色の商標登録も認められているので、色をブランドイメージに用いて訴求する流れはあるように感じます。

セブンイレブンの“あの色”が商標登録。簡単そうで実はシビアな「色彩のみからなる商標」の登録条件

 

「この色を見たらセブンイレブンである」という認識を持つように、
この色を見たら「○○」を思い浮かべて欲しい、というような意図が感じられます。

これは何もエンタメ関係に限った手法ではなく昔からある手法です。

例えば聖母マリアのイメージカラーは赤と青なので、絵画の中に説明が無くても赤と青の服を着た女性がいたら、マリアと紐づけることが可能である、という構造になっています。

デザインを省略したい時であったり、関係性を暗に仄かしたい時などにも使えます。

 

イメージカラーを設定しやすい環境

イメージカラーを設定しやすい環境としては…

  • キャラクターの数が極端に増えない
  • キャラクターの数を制限してキャラを深掘りしたい

といったゲームと相性が良さそうです。

100名を越えるキャラクターが登場するようなゲームだと色を設定することが物理的に困難です。10名程度であれば比較的まとめやすいかなと思います。

28名はちょっと…と言うか結構苦労しそうな範囲になってきているかと思います。

将来的に登場するキャラクターの分もある程度想定しておかないといけないので尚更…。

 

その他イメージカラーを設定する場所

他にどういった場所でイメージカラーが使われているのか確認してみました。

1:データDL画面

ああああああああ

データDL画面でイメージカラーが反映されていました。
最初に表示される画面であること、色の面積が大きい、といった理由でユーザーの印象に残りやすいデザインです。

 

2-1:コレクション画面

f:id:appgameui:20201010232232p:image

コレクション画面でもキャラクターのカラーが反映されていました。

 

2-2:コレクション画面

f:id:appgameui:20201010232238p:image

子階層でも反映されていて…

 

2-3:コレクション画面

f:id:appgameui:20201010235449p:image

更に子階層でも左上のUIのパーツにキャラクターのイメージカラーが反映されていました。 

ああああああああ

こちらのUIパーツですね。

コレクション画面はキャラクターと強く結びつけることができる画面なので、UIパーツに反映しやすい画面です。 

 

3:ホーム画面

f:id:appgameui:20201010235444p:image

またホーム画面でもキャラクターの会話の枠でキャラクターのイメージカラーが反映されています。

 

こちらのパーツですね。

ああああああああ

枠がオレンジ色であることが確認できます。
 

4:番外編(他のタイトル)

最後に番外編として。
今回紹介した「少女歌劇 レヴュースタァライト -Re LIVE-」ではないのですが「キズナストライカー」ではフィルタ画面で用いていました。 

ああああああああ

キャラクターとイメージカラーの関係性と一貫性が強く結びつけられている事例だと感じました。

 

まとめ

以上です。整理すると、

  • 「少女歌劇 レヴュースタァライト -Re LIVE-」ではキャラクター毎にイメージカラーを設定していた
  • イメージカラーを設定することにより、色とキャラクターを結びつける意図が感じられる
  • 色だけでキャラクターを想起することが可能
  • キャラクターが多いゲームには向いていない

などです。

キャラクターのイメージカラーを設定する際のデザインや影響範囲の参考になれば幸いです。

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色