良いUIアニメーションとは
こんにちは。アプリボットでUnity開発をしております、畑山です。普段は3D関連のエンジニア業務をしていますが、時折UIアニメーションもやらせて頂いています。
なぜエンジニアがアニメーションも作るのか？ というと、私の経歴に関係しています。もともとWeb業界でFlashエンジニアとしてキャリアをスタートしました。当時のFlashエンジニアは、エンジニアリングも行いつつアニメーションも作るという、今考えると珍しい職種でした。過去、wonderflというFlash投稿サイトの作品を集めた書籍に自分の作品を掲載させて頂いた事もあります。THA 中村勇吾さんに憧れ、プログラムを絡めた色々な表現について考えてきました。今年でFlashが完全に無くなってしまうと聞き、とても寂しい思いです。
参考に、最近作成したアニメーションの作例をご紹介します。これらはUnity上で動いている動画です。
純粋なモーショングラフィックと違い、
- ユーザーが操作するものである
- 動的に変化する部分があり、プログラム制御が必要になる部分がある
といった点が難しい所だと思っています。自分がいつも意識している、抑えるべきポイントをご紹介します。
何のためのアニメーション？
まず、UIアニメーションが持つ役割について自分の考えを説明します。大きく分けて２つの要素に分かれると考えています。
- ゲームを盛り上げる演出のため
- 情報を伝えるため
です。
はっきりと2つに分かれるのではなく、ほとんどが2つの要素を持っており、分量が違うというイメージです。この２つの要素について、説明していきます。
『情報を伝える』とは
mac osのUIアニメーションは非常に洗練されており、これを例にとって説明します。
例1: 状況説明 > 注意喚起 > 誘導
これはchromeで何かをダウンロードした時のDockの様子です。
- download中、実行中である事を知らせるバーが表示され、進捗が伝えられる
- download完了時、dockでアイコンが跳ねる
- 跳ねた場所をクリックすると、DLしたものが表示される
という流れになっています。
人は視界の中で動いている部分に無意識に注意が向かいます。静止している状態の派手なデザインパーツよりも、地味であっても動いているパーツは注意を引きます。また、静的なデザインとは独立した要素のため、バッティングせずに組み合わせる事が出来ます。例えば、デザイン的に目立つ配色は使えない部分に動きを取り入れる事で目立たせる、といった事が可能です。
例2: 何が起きたのかを説明する
ウィンドウを最小化・最大化する例で説明します。
ウィンドウがドックに吸い込まれ、吸い込まれた場所にアイコンが追加されました。ウィンドウがドックに移動した、という事が直感的に理解できます。
次に、吸い込まれるアニメーションを無くしたバージョンをご覧下さい。
アニメーションが無くなると、何が起こったのか一瞬では判断できないと思います。
まとめると、この一連のUIアニメーションは下記を説明しています。
- ウインドウが最小化され、dockに収まった
- 収まった箇所に表示されるアイコンはウィンドウと関連がありそう
- タップしたらdockから最大化され、元に戻った
アニメーションが無くなると、windowが突然消えるため混乱したり、どこに行ったのか探す事になります。アニメーションするための時間はかかりますが、何が起きたのかを理解する時間は短縮されます。
アニメーションにかかる時間 < 状況把握にかかる時間
(アニメーションにかかる時間の方が小さい)
になっているため、時間コストに見合うアニメーションだと言えます。また、動く部分に無意識で注意が向かうので、ユーザーは意識的な注意力を使う必要が無くなります。
windowsはmacに比べるとこういったアニメーションが省略されているように感じます。ただ、ここには一長一短があります。ある行動の結果、何が起こるのかを十分に把握している場合はアニメーション時間をスキップできるため、時短になるという側面があります。windowsの挙動を十分に把握している人にとっては時短になっているという訳です。windowsユーザーが『macはもっさりしている』と感じるのはこういった一面があると思っています。
UIアニメーションで避けるべき点
長く、スキップできない
必要以上にユーザーを待たせる事は好ましくありません。開発側の押し付けにならないよう配慮する必要があります。
情報を伝える際に意味の無い部分が目立った動きをする
動いた箇所にはユーザーの注意が向かいます。伝える必要のない部分が注意を惹く動きをすると、本当に必要な情報が伝わりづらくなります。情報の重要性・種類と動きが見合っているのか、考える必要があります。
ストレスの大きい動きが何度も繰り返される
何度見ても心地良いものにするべきです。激しい動きが頻繁に繰り返されると、見ている事が辛くなってしまいます。ゆっくりと時間をかけてアニメーションさせ、前フレームとの変化を少なくしたりといった工夫が必要です。
『ゲームを盛り上げる演出面』『感覚的な部分』について
もうひとつの要素、『ゲームを盛り上げる』について説明します。
例えば、エフェクトはこの要素が多いと思います。ユーザーの感情を盛り上げたり、世界観を出すために使われます。ガチャを引く際の演出などは、この要素の見せ所かと思います。視覚的なデザインに拠るところも大きいですが、純粋なモーションだけでも印象はかなり変わります。この要素について気をつけるポイントを挙げていきます。
レスポンスが良いか
レスポンスにラグがあると、気持ち悪さに繋がります。また、そもそも気づかれない可能性もあります。操作に対して即アニメーションが反応する事で、キビキビした印象を与えます。
自然・心地良い動きである
自然で、心地よい動きについて有効だと考えている要素を2つ説明します。
1. イージング
イージングというのは、動きに緩急を取り入れる事です。
イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。
https://ics.media/entry/18730/ より引用
大きく分けてeaseIn, easeOut, easeInOut、linear (イージングなし) の4パターンがあります。
In: 初め、Out: 終わり、InOut: 初め + 終わり
で、動きが遅くなる部分がどこにあるか？ と覚えると良いです。
linearだと、初めから終わりまで、ずっと同じ速度で動きます。
ユーザー操作が伴うUIで考えると、通常はeaseOutが安定です。
初動が速いため、ユーザーのアクションに対して即反応する印象を与えられます。
例えば、ボタンに反応するアニメーションがeaseIn、easeInOutだと動き初めが遅くなります。ラグを感じる反応になってしまう為、ストレスに繋がります。
ユーザーアクションに直接紐付いていない箇所でeaseInを使う事を検討するのが良いでしょう。
2. 現実世界にある動き
何度も見ている・身の回りにある動きというのは、自然で、親近感・心地良さを感じるものです。ボールのバウンドアニメーションで説明します。
まずは違和感のある動きから見て下さい。
ボールがバウンドしている事は伝わりますが、不自然で奇妙な感じがします。これは動きの加減速の無いのlinearで作成しています。
こちらだと自然な感じがします。これは普段見ている重力を伴った落下が再現されているからです。
また、ボールの重さ・硬さといった情報までも伝わってくるようになりました。
ゲームにあった動きを選択する
以上を踏まえて弊社ロゴのアニメーションで説明します。
このアニメーションで感じるキーワードとして、『落ち着いた』『高級感』『しっとり』などが浮かぶはずです。
キーワードとして、『ポップ』『元気』『楽しい』などが浮かぶはずです。
キーワードとして、『映画的』『シンプル』などが浮かぶかと思います。
このように、動きだけで与える印象はガラッと変わります。さらに動きに個性を与えるものとして、下記があります。
共有されている文化・イメージを使う
下記ムービーの文字の出現アニメーションを例に説明します。
これらのモーションの特徴ですが
- 一つのアニメーションにかける時間が長め
- イージングはリニアか、かなり緩めのイーズイン
- 文字が小さい状態からかなり大きい状態まで拡大される
- fpsが低い
といった動きにより、レトロ感を感じます。
これらは私達が子供の頃からTVや映画などで良く見た動きであるため、このように感じてるはずです。
もし全く文化が違い、これらの映像に触れてこなかった人には伝わらないので、注意が必要かと思います。
先程と同じようにロゴで表現すると、こんな感じになります。
まとめ
適切な動きを取り入れる事でユーザー操作の理解を手助けでき、ゲームの雰囲気も盛り上げる事ができます。プログラム制御が必要になり、デザイナーとエンジニアの協業が必要になる点が難しい所です。
しかし、UIアニメーションのポイントを抑えて仕上げる事で、ゲームのクオリティアップに大きく貢献できる箇所であると思います。
今回の記事ですが、社内勉強会向けに発表した資料が元になっています。
新型コロナや業務の影響で、当初2月に発表予定だったものが5月にzoomを使っての発表となりました。
弊社ではクライアント・サーバーと業種を分けての勉強会を月１で行っております。普段自分が担当していない領域の技術交換が行われ、エンジニアのスキルアップに繋がっています。
ここまで読んで頂き、ありがとうございました。
この記事へのコメントはありません。