こんにちは、ちょこです！
「ドールズフロントライン」のホーム画面に遷移した直後のアニメーションが良かった。
具体的には以下のようなアニメーションでした。
画面全体はこんな感じです。
メインコンテンツのボタンを大きく表示してみます。
サブコンテンツの部分はこんな感じです。
アニメーションのおかげで、フラットながら奥行きが感じられる
ボタンのUIパーツ一つにしても多階層的な構造で作られています。
なぜこのアニメーションがあるのか、という理由を推測してみました。
「ドールズフロントライン」UIパーツはフラットなデザインで構成されています。
フラットデザインは情報の整理が重要です。
なるべくなら、UIのパーツ単位ではなく、画面全体の情報量をコントロールする必要があります。
したがって、ある程度はキャラクターのグラフィックや背景との連携が求められるデザインです。
その連携が出来ないままイラストや背景のグラフィックがデザインされると、世界観としてのまとまりが失われてしまい、同じ画面にした時にチグハグな印象になってしまいます。
「ドールズフロントライン」のボタンパーツには模様やアイコン、ボタンの中にはグラデーション、そしてドロップシャドウでなどの情報があります。
これだけでもフラットデザインの情報としては多い方ですが、そこに更に多階層であるアニメーションを付けることにより、さらに情報量を増やしています。
そういった細かい工夫と足し算のデザインによって、精細なキャラクターイラストや背景とUIパーツの調和が取れているのかな、と感じます。
最初にUIパーツがない画面を見せることによって、圧迫感を軽減させることを狙っている
アニメーションを使うことによって得られるメリットとしては、最初にUIが表示されていない状態を表示することによって、空間の広がりが演出されていると感じます。
「ドールズフロントライン」のホーム画面の情報量は多いため、少しでも圧迫感を軽減させ、ユーザーのストレスを抑えようとする意志が感じられます。
UIパーツが軽やかに動くことにより質感が生まれる
UIパーツはフラットデザイン寄りであるため、パーツにはグラフィック的な面での質感が与えられません。しかし、アニメーションを付けることによって、UIパーツそのものの軽さや質感などが表現できます。
そういった一つ一つの試みによって、
- イラストとUIパーツの世界観の調和
- 情報量の多さからくる視覚的な圧迫感の軽減
- ユーザーのストレスの軽減
などのメリットがあるのかな、と感じました。
フラットなUIパーツをデザインする際は、画面内に表示される他の情報との調和、アニメーションを含めた情報のコントロール、など見えない部分も意識すると良いのかな、と思いました。
デザインを検討する際の参考までに。
