こんにちは、ちょこです！
「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。
該当の画面はこちらです。
空と地面が一望できるデザイン
「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクターと、空中で戦闘するキャラクターがいます。
陸空の状況を把握しながら戦闘を進めます。
この時のカメラが特徴的で、空から地上を映しつつも、空の広さが感じられる絵づくりになっています。まるでラピュタの様な浮島の先端で戦闘を繰り広げているような絵です。
また、地上のマスと比較して、空の方が枠が少し大きくデザインされており、これが空間的な広がりを更に感じられるデザインに見えます。
このように「空と地上のユニットの両方を同時に見せたい」というオーダーがあった場合、UIデザイナーとしてはこういった絵づくりが提案できることも重要なスキルなのかな、と思います。
絵が先にあったのか、ユニットを配置するなどの情報が先にあったのかは不明ですが、背景グラフィックを担当する方と上手く連携して、一緒になって情報の見せ方を検討していく必要があると感じられました。
シームレスな情報の切り替え
バトル中には情報が頻繁に切り替わるため、シームレスな演出が心掛けられていました。
アニメーションをさせることにより、ユーザーの認知を助ける役割がある。
例えば、画面上部にある行動順を示すUIパーツは状況に応じて、その位置やサイズが変わるのですが、アニメーションさせることによって情報を補完しています。
その結果、 UIのデザインが変わっていたとしても違和感なく同じ情報であると認識することが出来ています。
切り替わる前の小さなUIはこんな感じです。
大きなUIはこんな感じです。
これらのUIがアニメーションで繋がれることにより、自然と同じ情報であると認識することが出来ています。
情報整理には様々な担当者と連携することも大切
情報整理のアプローチは様々です。
今回紹介させていただいたように、背景グラフィックを担当する方や、UIパーツやカメラのアニメーションを担当する方と連携して作っていくこともあります。
画面に表示される情報はUIや文字だけではありません。
グラフィックだけではなく、アニメーションも駆使して、画面の情報をデザインしていくことも大切だなと改めて感じました。
以上です。
UIデザイナー以外の担当パートでも情報の見せ方に寄与することができる参考になれば幸いです。
