「アッシュアームズ-灰燼戦線-」ロード画面に隠されたデザイン

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

「アッシュアームズ-灰燼戦線-」のロード画面のビジュアルデザインが、凝っていたのでご紹介します！

該当の画面はこちらです。
ロード画面は比較的頻繁に表示されるので情報の見せ方は絞っているものの、かなり凝ったデザインであることが分かります。

全体的に黒く、モノトーンの画面で構成されています。
その中で特に強調したいのはこのオレンジ色の進捗ゲージです。

ゲーム内では一瞬しか表示されないのですが、しっかりと視線が誘導されるデザインかと思います。

同時にこの飛行船のようなシルエットにも目線が行くかなと思います。
これにより、世界観を強く印象付けるように仕向けられています。

こちらはホーム画面ですが、背景に映っているのはこの飛行船です。
この飛行船に乗って各地を移動しているようです。

更にこの進捗ゲージをよく見ると、９ずつ目盛り刻まれていることに気が付くと思います。 

そして大きい目盛りは10ではなく11で刻まれています。

つまり「９×１１」で９９の目盛りで構成された進捗ゲージのデザインになっていることが分かります。

軍事的なデザインなのか分かりませんが、明らかに意図的なものを感じます。

背景の波形グラフや円にも何かしらの意味が隠されているのかな…
この画面だけだと推測不可です…。

以上です。

読み込み画面では読み込み時間を短くするためにあまり凝ったデザインを採用するケースは少ないのですが、「アッシュアームズ-灰燼戦線-」のように情報量を多くするゲームもあるのですね。

その際、読み込み時間とトレードオフでユーザーに何を提供するのか、ということを考える必要があるのですが、「アッシュアームズ-灰燼戦線-」のデザインを見る限り、世界観や設定などを伝えているように感じました。

ロード画面のデザインを検討する際の参考になれば幸いです。

「アッシュアームズ-灰燼戦線-」背景の見せ方やUIアニメーションを使った情報設計

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

「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。

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

 

空と地面が一望できるデザイン

「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクターと、空中で戦闘するキャラクターがいます。

陸空の状況を把握しながら戦闘を進めます。

この時のカメラが特徴的で、空から地上を映しつつも、空の広さが感じられる絵づくりになっています。まるでラピュタの様な浮島の先端で戦闘を繰り広げているような絵です。

また、地上のマスと比較して、空の方が枠が少し大きくデザインされており、これが空間的な広がりを更に感じられるデザインに見えます。

このように「空と地上のユニットの両方を同時に見せたい」というオーダーがあった場合、UIデザイナーとしてはこういった絵づくりが提案できることも重要なスキルなのかな、と思います。

絵が先にあったのか、ユニットを配置するなどの情報が先にあったのかは不明ですが、背景グラフィックを担当する方と上手く連携して、一緒になって情報の見せ方を検討していく必要があると感じられました。

シームレスな情報の切り替え

バトル中には情報が頻繁に切り替わるため、シームレスな演出が心掛けられていました。

アニメーションをさせることにより、ユーザーの認知を助ける役割がある。

例えば、画面上部にある行動順を示すUIパーツは状況に応じて、その位置やサイズが変わるのですが、アニメーションさせることによって情報を補完しています。

その結果、 UIのデザインが変わっていたとしても違和感なく同じ情報であると認識することが出来ています。

切り替わる前の小さなUIはこんな感じです。

大きなUIはこんな感じです。

これらのUIがアニメーションで繋がれることにより、自然と同じ情報であると認識することが出来ています。

情報整理には様々な担当者と連携することも大切

情報整理のアプローチは様々です。

今回紹介させていただいたように、背景グラフィックを担当する方や、UIパーツやカメラのアニメーションを担当する方と連携して作っていくこともあります。

画面に表示される情報はUIや文字だけではありません。
グラフィックだけではなく、アニメーションも駆使して、画面の情報をデザインしていくことも大切だなと改めて感じました。 

以上です。
UIデザイナー以外の担当パートでも情報の見せ方に寄与することができる参考になれば幸いです。

「ドールズフロントライン」フラットデザインでもUIパーツのアニメーションによって質感の情報は付与できそう

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

「ドールズフロントライン」のホーム画面に遷移した直後のアニメーションが良かった。

具体的には以下のようなアニメーションでした。

画面全体はこんな感じです。

メインコンテンツのボタンを大きく表示してみます。

サブコンテンツの部分はこんな感じです。

 

アニメーションのおかげで、フラットながら奥行きが感じられる

ボタンのUIパーツ一つにしても多階層的な構造で作られています。
なぜこのアニメーションがあるのか、という理由を推測してみました。

「ドールズフロントライン」UIパーツはフラットなデザインで構成されています。

フラットデザインは情報の整理が重要です。
なるべくなら、UIのパーツ単位ではなく、画面全体の情報量をコントロールする必要があります。
したがって、ある程度はキャラクターのグラフィックや背景との連携が求められるデザインです。

その連携が出来ないままイラストや背景のグラフィックがデザインされると、世界観としてのまとまりが失われてしまい、同じ画面にした時にチグハグな印象になってしまいます。

「ドールズフロントライン」のボタンパーツには模様やアイコン、ボタンの中にはグラデーション、そしてドロップシャドウでなどの情報があります。

これだけでもフラットデザインの情報としては多い方ですが、そこに更に多階層であるアニメーションを付けることにより、さらに情報量を増やしています。

そういった細かい工夫と足し算のデザインによって、精細なキャラクターイラストや背景とUIパーツの調和が取れているのかな、と感じます。

 

最初にUIパーツがない画面を見せることによって、圧迫感を軽減させることを狙っている

アニメーションを使うことによって得られるメリットとしては、最初にUIが表示されていない状態を表示することによって、空間の広がりが演出されていると感じます。

 

「ドールズフロントライン」のホーム画面の情報量は多いため、少しでも圧迫感を軽減させ、ユーザーのストレスを抑えようとする意志が感じられます。

UIパーツが軽やかに動くことにより質感が生まれる

UIパーツはフラットデザイン寄りであるため、パーツにはグラフィック的な面での質感が与えられません。しかし、アニメーションを付けることによって、UIパーツそのものの軽さや質感などが表現できます。

そういった一つ一つの試みによって、

• イラストとUIパーツの世界観の調和
• 情報量の多さからくる視覚的な圧迫感の軽減
• ユーザーのストレスの軽減

などのメリットがあるのかな、と感じました。

フラットなUIパーツをデザインする際は、画面内に表示される他の情報との調和、アニメーションを含めた情報のコントロール、など見えない部分も意識すると良いのかな、と思いました。

デザインを検討する際の参考までに。

各ゲームのグリッチ表現比較

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

最近、中国でSF系の世界観のゲームが流行ってますね！
そこで、ゲーム内で実装されているグリッチ表現についてまとめてみました。

各ゲームごとに趣向が凝らされており、非常に見応えのある演出になっています！
それでは目次です！

「エクリプスサーガ」

「パニシング：グレイレイヴン」

「タイムリフレイン」

「タイムリフレイン」ではお知らせ画面のバナーにグリッチ表現が使われていました。
キャラクターはそのままで、背景にフィルタをかけているデザインですね。
主な要素としては以下の２つでしょうか？

• 歪み
• ノイズ

「ドールズフロントライン」

「ドールズフロントライン」ではADVパートでグリッチ表現が使われていました。
表現の内容を見てみると、キャラクターは静止画で、ホログラムではなくモニターに投影されている形式ですね。

• モニターに投影されている
• 静止画

「ブルーアーカイブ」

「ブルーアーカイブ」もADVパートでグリッチ表現が使われています。こちらは先ほどの「ドールズフロントライン」と異なり、モニターに投影されているのではなく、ホログラム的な表現になっています。

• キャラクターはホログラムで表示
• 静止画

「魂器学院」

「魂器学院」はADVパートではなく、キャラクター選択時にグリッチ表現が使われていました。

グリッチ表現は本来はデジタル機器のノイズを表現するものなのですが、これはそういったものではなく、リアリティは控えめで、どちらかというと記号的に扱われています。ですので、モニターに投影するデザインでもホログラムで表示するデザインでもありません。

• 投影方式不明
• 静止画

「ファイナルギア」

「ファイナルギア」の場合はホログラムとモニターに表示する形式のハイブリッドのような形式です。

ホログラムをカメラに映してモニターで覗いてるような…。

この辺りはあまり深く考えず、ビジュアルの「らしさ」を重視して見た方が良いのかもしれません。

それ以外の大きな特徴としてはキャラクターのアニメーションがあることでしょうか。
先に紹介したゲームはキャラクターのアニメーションはなく、静止画での表現でした。

キャラクターアニメーションがあると、ホログラム特有の柔らかい質感が表現されているように感じます。

• 投影方式はホログラム+モニター？
• キャラクターアニメーションあり

「ガール・カフェ・ガン」

「ガール・カフェ・ガン」ではADVパートでグリッチ表現が使われていました。
「ファイナルギア」と同様にキャラクターのアニメーションがあります。

また、通信状況によってノイズの差分があるのが大きな特徴です。

• ホログラムで投影
• キャラクターアニメーションあり
• ノイズの程度差分あり

通信状況差分があるのが非常に特徴的。
開発者の拘りがうかがえます。

常時ノイズが多いのですが、一定間隔で大きくグラフィックが乱れます。

今回はここまでです。

グリッチ表現の細かいデザイン差分はあるにしろ、キャラクターアニメーションの有無やノイズ差分の有無など、大きなところでの差別化もあるのだな、と感じました。

今後も表現の幅は広がっていくと思うので、気付いたら追記していきたいと思います。