やわらかいモーションを作るときに、最初に決めていること

モーションを作るとき、最初に触るのはキーフレームではありません。画面の中で何が主役で、何が背景に下がるべきかを決めるところから始めます。

動きは、情報の順番を伝えるためのものです。目立たせたいから揺らす、寂しいから光らせる、という判断だけで足していくと、画面はすぐに忙しくなります。ASTRALTOWNでは、動きが増えても静かに見えることを大事にしています。

まず決める三つのこと

最初に見るのは、速度、距離、余韻です。

速度は、ユーザーに急かされている感じを与えないか。距離は、要素の重さに対して動きすぎていないか。余韻は、止まったあとに画面の空気が残るか。

たとえば小さなラベルなら、短い距離で軽く出るだけで十分です。大きなビジュアルなら、少し遅れて動き出すほうが自然に見えます。全員が同じタイミングで動くと、整っているようで、実は平板になります。

ふわっとさせるより、止まり方を整える

やわらかさは、曲線の丸さだけでは決まりません。止まる瞬間に力が抜けているかどうかで、印象がかなり変わります。

動き始めは少し速くても、止まり際に急にブレーキがかかると硬く見えます。逆に、止まり際が長すぎると、操作への反応が鈍く感じられます。気持ちよく見える場所は、その中間にあります。

ASTRALTOWNのサイトでは、画面全体を大きく揺らすより、カード、装飾、キャラクターの重心が少しだけ呼吸するような方向を選びます。見ている人が動きに気づくけれど、読んでいる内容の邪魔はしない。そのくらいがちょうどいいと感じています。

モーションは最後の飾りではない

実装の最後に動きを足すと、どうしても装飾になります。本当は、レイアウトを考える段階から、何が先に見えて、何が後から追いつくかを決めておくほうがいい。

動きがあることで、画面の意味が少し早く伝わる。クリックする場所が自然にわかる。ブランドの温度が一段深く残る。そこまで働いて、ようやくモーションは役割を持ちます。

派手な動きは、短い時間で印象を作れます。でも長く使うサイトでは、何度見ても疲れない動きのほうが強い。静かに残るモーションを、これからも丁寧に作っていきたいです。