画面が切り替わる0.3秒に何が起きているか

ボタンを押すと、いまの画面がすっと退き、次の画面が滑り込んでくる。要した時間はおよそ三百ミリ秒。瞬きより少し長いその一瞬に、設計上の判断が幾重にも折り畳まれている。画面遷移のアニメーションは、装飾ではない。状態と状態のあいだを、利用者の注意がどう渡るかを決める設計だ。

切り替えではなく、移り変わり

初期のソフトウェアでは、画面はぱっと差し替わるものだった。ある瞬間に古い表示が消え、次の瞬間に新しい表示が現れる。これは速いが、利用者にとっては唐突でもある。何がどこへ移ったのか、視線が一瞬迷う。遷移アニメーションは、この迷いを減らすために生まれた。要素が押されたボタンから展開する、あるいはカードがスライドして次の階層に入る。動きが因果の手がかりになり、利用者は「自分の操作がこの変化を引き起こした」と納得できる。

グーグルが公開してきたマテリアルデザインの指針は、こうした動きに具体的な時間の目安を与えている。多くの画面遷移は概ね数百ミリ秒——短い動きで二百ミリ秒前後、画面全体の切り替えでより長め——を基準としており、要素の出入りには加速と減速のカーブを持たせることが推奨されている。等速の動きは機械的で、現実の物体の動きに反するからだ。

速さと滑らかさの綱引き

ここで設計者は、相反する二つの要請のあいだに立つ。一方には、ヤコブ・ニールセンの示した応答時間の壁がある。0.1秒以内に反応すれば操作は即座に感じられる。百ミリ秒の壁は、遷移の世界でも生きている。他方には、滑らかさの要請がある。物体の移り変わりを自然に見せるには、ある程度の時間が要る。速すぎる動きは認識される前に終わり、ちらつきとして残る。

三百ミリ秒前後という値は、この綱引きの落としどころだ。即座とまでは言えないが、待たされたとも感じない。動きを認識できるが、苛立つほど長くもない。設計者は、この狭い帯の中に遷移を収めようとする。

長すぎる動きは待ち時間になる

もっとも、滑らかさを追って動きを長くしすぎると、別の問題が顔を出す。一度や二度なら美しい遷移も、一日に何百回も繰り返せば、そのたびに半秒待たされることになる。凝ったアニメーションは初見の印象を高めるが、使い込むほど邪魔になる。熟練した利用者ほど、動きを飛ばして結果だけを早く見たいと望む。

近年、利用者が「視差効果を減らす」設定を選べる仕組みが広がったのは、この緊張への一つの答えだ。動きに酔いやすい人への配慮であると同時に、遷移を待ち時間と感じる人への配慮でもある。裏を返せば、滑らかさは万人にとっての正解ではない。

あいだの数百ミリ秒

画面遷移は、操作の結果が現れるまでの空白を、意味のある移り変わりに変える試みだ。うまく設計された動きは、利用者を次の状態へそっと連れていく。下手な動きは、結果を見たい利用者を足止めする。スワイプやスクロールのジェスチャーがこの移り変わりと結びつくとき、遷移はさらに身体的なものになる。瞬きほどの数百ミリ秒は、注意の渡し方を巡る設計判断が静かに働く時間なのである。