モーションの文法——アニメーションがフレームに値するとき

インターフェースのアニメーションの大半は、機能というバッジを付けた装飾です。私が当てるテストは率直です。そのアニメーションがユーザーに何を伝えているのかを説明できないなら、それはフレームに値しません——削除してください。このテストを生き延びるものは、結局のところ小さな文法に収まります。4つのデュレーション帯、2つのイージング規則、そして静的な変化よりもモーションのほうが本当にうまくこなす、ひと握りの仕事です。それ以外はすべて、16ミリ秒ずつユーザーの負担で自分を楽しませているデザイナーの姿にすぎません。 {.answer-block}

TL;DR

• モーションは情報であるか、さもなくばノイズです。 正当な仕事は4つ。何がどこから来てどこへ行ったのかを示すこと、操作が受け付けられたと確認させること、変化のあいだ注意を導くこと、そして避けられない遅延を覆い隠すこと。それ以外は切り落とします。
• 4つのデュレーション帯でインターフェース全体をカバーできます。 押下とトグルは約100ms、ホバーとフェードは150〜200ms、展開/折りたたみは250〜300ms、ページ遷移とモーダルは300〜400msです。
• 2つのイージング規則で入場と退場をカバーできます。 入ってくるものには ease-out、去っていくものには ease-in。画面上に留まったまま動く要素には ease-in-out を使い、linear はプログレスバーと純粋なフェードのためのものです。
• 削除テストは好みのテストに優先します。 「感じがいいか」は悪いアニメーションを生き延びさせ、「ユーザーに何を伝えるのか」はそれを殺します。
• prefers-reduced-motion は後付けではなく第一級の要件として扱いましょう。 この文法は、即座の状態変化へ縮退してもなお意味が通らなければなりません。

モーションはムードではなく、文である

インターフェースのアニメーションは因果についての主張です。このパネルはあのボタンから現れた、この項目はあのリストへ去った、この変化はあなたが操作したから起きた。 モーションがそうした主張のいずれかを担っているとき、ユーザーのメンタルモデルは無償で更新されます。読む必要も、推論する必要もありません。何も担っていないとき、ユーザーは振り付けが終わるのを待たされ、その待ち時間はどれもが信頼への小さな税となります。

その捉え方から、モーションが実際に担う仕事の実務リストが導かれます。

1. 空間的な連続性——これはどこから来て、どこへ行ったのか。展開するカード、トリガーから立ち上がるシート、アーカイブのアイコンへ向かって畳まれる削除済みの行。
2. 受領の合図——あなたの押下は受け付けられました。100msのボタンの沈み込み、トグルの振れ、チェックボックスのチェック。
3. 注意の誘導——状態が変わるとき、動いた唯一のものが変わった唯一のものである、ということ。モーションはインターフェースが発しうる最も強い注意の信号のひとつであり、だからこそ、値しないモーションはこれほど高くつくのです。
4. レイテンシの隠蔽——スケルトンのシマー、楽観的な差し替え、400msのフェッチを壊れたものではなく意図されたものに感じさせる段階的な開示。

画面上のアニメーションがこの4つの仕事のいずれも担っていないなら、それは5つめの仕事——見せびらかし——をしています。

4つのデュレーション帯

デュレーションは好みではありません。注意に合わせた物理です。私がすべてのインターフェースに課している帯は次のとおりです。

その下にあるパターンはこうです。デュレーションは変化の大きさに比例します。 押下を受け取ったコントロールはほぼ即座でなければなりません。約150msを超えると、受領の合図は遅延として読まれます。全画面の遷移にはもう少し時間が与えられます。ユーザーが方向感覚を取り戻すためにそれを必要とするからです。最もよくある失敗は反転です。400msで跳ねるボタン（喜びを装った遅延）と、100msで切り替わるモーダル（速さを装った混乱）。

400msを超えると、インターフェースのモーションには存在するための例外的な理由が必要になります。オンボーディングの瞬間や祝祭の状態は、ときに500〜600msを勝ち取ります。スマートフォンの画面規模のナビゲーションがそうなることはまずありませんが、大画面でのコンテナ変形は正直な例外です。タブレットやデスクトップの画面は、目の移動距離が長いぶん、正当に500msへと伸びます。ユーザーはあなたの遷移を何千回も走らせます。デモで魅了した振り付けは、3週目には呪われる摩擦なのです。

スプリングベースのシステム（SwiftUI、Framer Motion）はタイミングを固定のデュレーションではなく剛性と減衰で表現しますが、この帯は依然として当てはまります。それらは、あなたが目指して調整する体感上の落ち着き時間を記述しているからです。表記が変わっても文法は生き残ります。

2つのイージング規則

イージングはアニメーションが物理を獲得する場所であり、2つの規則でほぼすべてがカバーできます。

入ってくるものには ease-out。 画面に到着する要素は速く始まり、減速して所定の位置に収まります——着地するのです。ease-out は動きを前寄りに配分するため、目は早い段階で着地点を捉え、要素は反応がよいと感じられます。

去っていくものには ease-in。 立ち去る要素は加速して離れていきます——意図をもって退場するのです。ゆっくりとした始まりは、何かが去りつつあることを目が把握するための一拍を与えます。

linear のイージングは機械的に読まれます。物理世界にそのように動くものは何ひとつないからです。等速であること自体が情報であるプログレス表示と、何も移動せずカーブが形づくるべき動きの存在しない純粋な不透明度や色のフェードに限って使いましょう。そして対称的な ease-in-out は、2つの規則が意図的に外した第三のケースのものです。行の並べ替えやパネルのリサイズのように、画面上に留まったまま動く要素がそれにあたります。着地も退場もしないので、静止から加速し、また静止へと落ち着くわけです。ease-in-out が悪評を買うのは、入場と退場に対する吟味されない既定値として使われるときであり、そこでは到着を鈍重にし、同時に退場を唐突にしてしまいます。

削除テストの実践

モーションのシステムを誠実に保つレビュー手順です。

1. 画面上のすべてのアニメーションを棚卸しします——誰も意図して選んでいないフレームワークの既定値も含めて。
2. それぞれについて、「このモーションはユーザーに___を伝える」という文を完成させます。 空間的な出自、受領、注意、レイテンシ——4つのうちのどれかを、平易な言葉で。
3. 空欄のままのものは、議論を経ても空欄のままです。 「洗練が加わる」「高級感がある」は、語彙の立派な空欄にすぎません。そのモーションを削除して、1日その画面を眺めてみましょう。モーションの中にしか存在しなかった洗練は、最初から洗練ではなかったのです。
4. 生き残ったものを帯に照らして計測し、イージングを直し、reduced-motion の経路をテストします。 prefers-reduced-motion は、即座の状態変化だけで完全に筋の通ったインターフェースを生み出さなければなりません。アニメーションを外すと理解が壊れるなら、そのアニメーションは静的にも存在すべき情報を運んでいたということであり、それはそれで1つの発見です。

成熟したプロダクトでこれを走らせると、たいてい棚卸しの半分が死にます。ある一巡で挙がった代表的な抹殺リストは、カードの400msのホバーリフト（カーソルの変化が伝えていない何かをユーザーに伝えてはいない）、ナビゲーションのたびに再生される時差付きのリスト入場（「行があります」と告げるのに600ms）、脈打つ保存アイコン（注意は要求するが、注意を向けるべき変化は起きていない）でした。誰も惜しみません。残ったものはより速く、より一貫し、そして逆説的により目立つようになります。モーションが環境音であることをやめた瞬間に、信号としての価値を取り戻すからです。

システムとしての視点

デザインシステムにおいて、モーションはスペーシングやカラーとまったく同じようにトークンに属します。名前の付いたデュレーション（--motion-press: 100ms、--motion-surface: 300ms）、名前の付いたイージング（--ease-enter、--ease-exit）、そしてインラインでタイミングを発明するのではなくトークンを消費するコンポーネント。体系化されていないモーションの失敗モードは醜さではなくドリフトです。5つのモーダルに5つのデュレーションがあり、それぞれに言い分はあるのに、全体としては支離滅裂になります。スペーシングのスケールを統べるのと同じ規律がモーションのスケールを統べます。すべての値はシステムから来るか、文書化された理由を携えているか、そのどちらかです。

モーションはまた、デザインシステムの中で最も傷みやすい層でもあります。貢献者が最初に勝手をやる場所——単発の250msのトゥイーンは無害に感じられるからです。実際、11回までは無害でしょう。そして製品は、動機のない動きの11通りの訛りでちらつき始めます。この文法は、削除テストが走り続けているあいだだけ保たれるのです。

よくある質問

UIのアニメーションはどれくらいの長さにすべきですか

変化の大きさにデュレーションを合わせます。コントロールの受領（押下、トグル）は約100ms、ホバーとフェードは150〜200ms、展開/折りたたみは250〜300ms、ページ遷移とモーダルは300〜400msです。400msを超える場合は例外的な正当化が必要になります。ユーザーはインターフェースの遷移を何千回も繰り返すのですから。

UIのアニメーションにはどのイージングを使うべきですか

入ってくる要素には ease-out（速く始まり、減速して所定の位置へ）、去っていく要素には ease-in（加速して離れる）、画面上に留まったまま動く要素には ease-in-out を使います。linear はプログレス表示と、純粋な不透明度や色のフェードに取っておきましょう。入場において linear は機械的に読まれ、ease-in-out は到着を鈍重にします——ここでの規則は ease-out です。

そもそもインターフェースはいつアニメーションを使うべきですか

静的な変化では運べない情報をモーションが運ぶときです。空間的な連続性（何がどこから来て、どこへ行ったのか）、入力の受領、変わったものへ注意を導くこと、避けられない遅延を覆い隠すこと。そのどの仕事をしているのかを言えないアニメーションは取り除きましょう。装飾的なモーションは、触れるすべてのインタラクションに税を課します。

prefers-reduced-motion はモーションのシステムにどう組み込むべきですか

第一級の要件としてです。縮退した経路は動きを即座の状態変化に置き換え、それでもインターフェースは完全に理解可能でなければなりません。アニメーションを外して理解が壊れるなら、そのモーションは静的な等価物を必要とする情報を運んでいたということであり、アクセシビリティの発見であると同時にデザインの発見でもあります。