デザインエンジニアのカール・コッホが、インターフェースの「瞬間移動」を扱った実践的な論考を公開した。リストから項目を削除すると下の要素が一気に上へ詰まり、行を挿入すれば既存のコンテンツが飛び退く。パネルを開けば隣接する要素が即座に再配置される。DOM上は正しくても、状態の変化と動いた対象とのつながりが一瞬で断たれ、読み手は文脈を見失う。この断絶に目に見える経路を与えるのが「レイアウトの振り付け（layout choreography）」だという。
問題の本質は、技術的な誤りではなく知覚にあると筆者は言う。ユーザーは四つの要素を見て、二番目を消し、三番目と四番目が空いた場所へ「移動してくる」ことを期待する。ところが実際にはただ新しい位置に「到着」するため、連続性が失われる。動きがないことそのものが、体験の綻びを生むのだ。
解法として紹介されるのが、レイアウト変化を滑らかに見せる標準的な手法「FLIP」である。まず要素の現在位置を記録し（First）、状態変化を適用して新しい位置を記録し（Last）、transformで元の位置へ戻したように見せかけ（Invert）、そのtransformをゼロへアニメーションさせる（Play）。ここで肝心なのは、top・left・height・marginといったレイアウトを再計算させるプロパティは動かさず、あくまでtransformだけを動かす点だ。配置の計算はすでに終わっており、動きは新旧の座標を視覚的に橋渡しするためだけに存在する。
実務では手書きのFLIPを毎回書くのではなく、Motionの「layout」プロパティに委ねることが多いと筆者は明かす。AnimatePresenceで消える要素をアニメーションが終わるまで生かし、popLayoutモードで退場する要素を早々にフローから外せば、残った要素はすぐに動き出せる。バネの物理特性を用いた自然な動きも、宣言的に記述できる。
派手な演出を足すための技術ではない、という姿勢が一貫している。要素が並び替わり、パネルが開閉し、項目が出入りするとき、動きは空間的な記憶を保つために働く。マイクロインタラクションの質がプロダクトの印象を左右するいま、日本のUIデザイナーや実装者にとっても、地に足のついた指針となる論考である。
