トランジション & イージング

定義

トランジションは、ある値がAからBへ変わるときに、その変化を一瞬で終わらせず、時間を かけてなめらかにつなぐ仕組みです。ここで決めることは大きく二つあります。一つはどれくらい かかるかを表す持続時間（duration）で、もう一つはその時間のあいだにどんなリズムで動くかを 表すイージング（easing）です。イージングは、最初から最後まで同じ速さで進むのか、勢いよく 出発してゆっくり止まるのかといった「速度のカーブ」を決めます。この二つを扱えるだけで、 画面の動きはずっと自然で整って見えるようになります。

なぜ重要か

人の目は、いきなりパッと切り替わるものより、流れに沿って続く変化のほうを楽に受け止めます。 ボタンの色が瞬時に変わると目が驚きますが、短いトランジションが入ると変化がなめらかに つながり、いま何が変わったのかを脳が追いつく時間が生まれます。とくにイージングは動きの印象を 大きく左右します。現実の物体は止まった状態から少しずつ速度を上げ、そっと止まるため、その リズムをまねたカーブは画面の上でも自然に感じられます。逆に速度が一定だと、どこか機械的で ぎこちない印象になります。うまく選んだイージングは、同じ持続時間でもずっと洗練された仕上がりを 生みます。結局のところ、よいトランジションは派手な装飾ではなく、変化をユーザーが見逃さないよう 助ける静かな気づかいに近いものです。

よくある間違い

• 持続時間を長く取りすぎることです。500msを超える動きがあちこちに積み重なると、画面全体が もっさりと重く感じられ、ユーザーは次の操作をしようとしてアニメーションが終わるのをただ 待たされます。動きは存在に気づかせる程度に短く抑えるほうが、たいていうまくいきます。
• すべての変化に初期値のlinearやeaseを、何も考えずそのまま使ってしまうことです。場面に合った イージングを選ばないと動きが平坦だったり不自然になったりします。とくに要素が入るときと 出るときで同じカーブを使うと、ぎこちなく感じられます。
• 一つの画面のなかでトランジションの速度やリズムがばらばらなことです。あるボタンは速く、 あるカードは遅く動くと統一感が失われ、個々の動きがどれだけよくても画面全体が散らかって 見えてしまいます。

実務のヒント

• ほとんどのUIの変化には、勢いよく出発してなめらかに止まるease-outを基本にしましょう。linearは ローディングスピナーのように一定の速度が似合う場所だけに使い、少し弾んで生き生きした印象を 与えるspring系は、本当に強調したい一、二か所だけに絞れば十分です。
• 持続時間は変化の大きさに合わせましょう。画面が大きく入ってくる動きは200〜300ms、色や影が 少し変わる小さな変化は150ms前後がだいたい心地よいです。この値をチームでいくつかに決めて おくと、画面ごとにリズムが揺れずに済みます。
• 意味のない場所まで全部を動かそうとしないでください。本当に強調したい変化にだけ トランジションをかけてこそ動きが目に留まり、残りは静かに置くことで画面が散らかりません。

関連概念