creator's
column
【第6回】動けばそれっぽくなる説― UIアニメあるある10連発。
🌀 動けばそれっぽくなる説
― UIアニメあるある10連発。
どうもこんにちは、ElEngineの青木です。
今回は誰もが一度は感じたことがあるであろう、
「とりあえず動かしたら“それっぽく”見える現象」に切り込んでいきます。
そう、それが――
UIアニメの魔力。
🎞️ UIアニメって何なの？
UIアニメーションとは、ボタンがポヨンとしたり、画面遷移がスーッと出たりするアレです。
ユーザーの気持ちを 「ちょっと嬉しい」「なんか心地いい」 に持っていく、大事なスパイス。
でもね、時に僕らUIデザイナーはこう思ってしまうんです。
「デザイン…なんかパッとしないな…」
→ 動かしてみよっか
→ 「あ、なんかそれっぽくなったわ」
💥 UIアニメあるある10連発
① とりあえずイージングかけがち
ease-in-outしとけば 上品っぽく見えると思ってる節ある。
② ズームインで登場しがち
最初は ちっちゃく登場してドーン！ で「おぉ…それっぽ…」
③ フェードさせとけば大体OK
出ても消えても とりあえずフェードで包んでおけ理論。
④ アニメつけた瞬間、全部良く見える
「うわ、動くだけで完成度10％アップした気がする！！」
⑤ チームの誰かが「気持ちいい〜」って言い出す
→ もうそのUIは採用される。“気持ちいい”は最強ワード。
⑥ 動きすぎてうるさいやつ爆誕
全ボタンがビヨンビヨンしてて、ユーザーが酔う。
⑦ ゲーム系UIほど派手にしたくなる
RPGの装備画面なのに、毎回スライドイン＋発光演出。もはや必殺技。
⑧ めちゃくちゃアニメ頑張ったのに1秒で終わる
「…見た？今の？」「え、もう終わった？」切なさMAX。
⑨ 実装してみたらカクカクして萎える
Figmaでは神だったのに…UnityでなぜかガクンガクンUI。
⑩ 「ここのアニメ、必要ある？」と聞かれる
→ 心の中で「魂だよ。」と答える。
🎯 で、結局“動かす”って大事なの？
大事です。めちゃくちゃ大事です。
でも「動かせば正解」じゃなくて、「伝われば正解」なんですよね。
アニメは“体験を補足するもの”。
ただ派手にすればいいわけじゃなくて、ユーザーの動きや気持ちをガイドするための“演出”なんです。
…とか言いつつ、今日も僕はとりあえずease-in-outしてます。
📣 次回予告！
次回は「エフェクトで盛りすぎた件」をお届けします。
爆発音が鳴るボタンとか作ったこと、ありますか？私はあります。
ではまた！動かしすぎ注意で、お会いしましょう。
（ElEngineの青木でした）
