デザイナー

UIアニメーションについて

投稿日:2017年1月18日 更新日:

新卒デザイナーの小久保です。
 
今回はゲーム内のUIアニメーションについてお話しします。
 
 
UIアニメーションとは
「ユーザーがアクションを起こした時に、視覚的に何が起こったのかを
よりわかりやすく伝える為のもの」だと私は考えています。
アニメーションで表現できるものは様々です。
UIアニメーションの主な役割として以下のものが挙げられます。
 
 
・見てほしいものを強調する
 アニメーションを加えることで画面を華やかにするだけでなく、
 プレイヤーを次の行動に誘導する指針になります。
 (例:イベントボタンにアニメーションを追加することで
    イベント開催中であることをユーザーに伝え、ページへ誘導することができます)
 
・情報をより伝えやすくする
 要素が何か変化する時にその過程を見せることで、
 より変化の因果関係が伝わりやすくなります。
 (例:ユニットの強化で強化素材がユニットに吸い込まれる演出を追加すると、
    ユニットと強化素材の関係をより強調することができます)
 
・見落としをなくす
 目まぐるしく変わるゲームの中では見落としがちな情報もあります。
 見落としやすい数字の変化などもアニメーションを追加し、
 視覚的変化を大きくすることで見落としを防ぐことができます。
 (例:獲得した経験値やコインを既存の数値に足していく演出などで
    どの数字がどこに追加されたのか一目でわかります)
 
・不安にさせない
 ボタンを押したときに何の反応もないとユーザーは不安になってしまいます。
 全ての動作に対して何らかの反応を即座に返すことで不安の防止になります。
 (例:全てのボタンに押したことがわかるような動きをつける)
 
 
アニメーション制作
上記を考慮してアニメーションを作っていきます。
私の所属するチームでは2つのアニメーション方法があります。
・デザイナーがアニメーションツール(SpriteStudio)を使用して作成するもの
・エンジニアさんがUnityで設定して動かすもの
この2つの使い分けは主にデザイナーでしか再現できないか否かと、
容量を割くべきかどうかの2点で判断されています。
f:id:kokubom:20170116011343j:plain
調節と実機確認を何度か繰り返します。
 
エンジニアさんがUnityで動かす場合でもデザイナーがサンプル動画を作成する場合もあります。
エンジニアさんにお願いする場合はコミュニケーションをとりながら、
データの作り方を相談して制作を進めます。
 
 
まとめ
UIアニメーションは画面作りの味付けのイメージがあるかと思いますが、
ユーザー様へ確実に情報を伝えるためにもアニメーションは必要不可欠な要素だと思います。
 今回のブログでアニメーションにも様々な意図があることを知っていただけたなら幸いです。
色々な制約はありますがその中でよりわかりやすくワクワクするものを作っていける様に、
これからも頑張ります。
 
途中に出てきたSpriteStudioについて詳しく知りたい方は
こちらの公式サイトをご覧ください。

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-デザイナー
-

© WonderPlanet Inc.