テックブログ
医療システムの画面遷移 —「一瞬白くなる」をなくすまでに捨てた3つの方法
目次
医療システムの画面遷移は、地味ですが毎日くり返し通る道です。ログインしてダッシュボードを開く、それだけの操作を、外来のある日は病棟のスタッフが何十回とくり返します。
その切り替わりの一瞬だけ、画面が白くなっていました。
技術者から見れば0.5秒に満たない描画の隙間です。しかしITに不慣れな方から見ると、白い画面は「エラーが出た」「操作をやり直したほうがいい」に見えます。実際に「ログインし直したほうがいいですか」と聞かれる種類の現象です。一瞬の見た目は、機能の信頼性の印象そのものになります。
今回、ログインから画面が開くまでの全行程を作り直しました。試した方法は3つあり、うち2つは実測で捨てました。同じことをする方の役に立つよう、判断の過程をそのまま公開します。
白い一瞬の正体は、背景ごと透明にしていたこと
最初に犯人を特定しました。画面全体を——背景の色面ごと——透明にしてから切り替え、次の画面をまた透明から戻す、という書き方をしていたのです。
背景の薄い色ごと透明になるので、その約0.6秒だけその裏にある白い地が透けて見えていたわけです。「フェードで滑らかにしたつもり」が、逆に白い一瞬を作り出していました。
対策は、背景は動かさず、その上に乗っているカードだけを動かすこと。これは以後ずっと効く原則になりました。
標準の仕組みは、5回に1回くらい壊れた
次に、ブラウザ標準の View Transitions API を使いました。旧画面と新画面をブラウザが両方持った状態で入れ替えてくれる、まさにこの用途のための仕組みです。
ところが、動くときと動かないときがありました。ログインし直すと、体感で半分くらいの確率でアニメーションが一瞬で終わってしまいます。
原因を探すため、ライブラリの実装まで読みに行きました。
| 実測して分かったこと | 結果 |
|---|---|
| 遷移中に別の画面更新が届くと、走行中のアニメーションは打ち切られる | 途中の状態から終端へ飛ぶ＝「一瞬で終わった」に見える |
| ログイン直後は、認証の完了通知・利用者情報の読み込みが同時に飛び交う | 打ち切りの条件を高い確率で踏む |
| 古い書き方のままだと、指定したオプション自体が無視される | エラーも警告も出ないまま、何も起きない |
3つ目がとくに厄介でした。書いたコードは正しく、エラーも出ず、しかし何も起きていない。動いていないことに気づくまでに時間がかかります。
打ち切られる条件を避ける努力もしましたが、避けきれないと判断しました。認証の通知がいつ届くかは、こちらで決められないからです。確率的に壊れるものは、確率を下げても壊れます。
各ページの中で完結させる方式に変えた
3つ目の方法で落ち着きました。ページをまたぐ仕組みを使わず、アニメーションを各ページの中で完結させるやり方です。
素朴に見えますが、打ち切られる仕組みがそもそも存在しません。認証の通知が何回飛ぼうと、再生中のアニメーションに干渉できるものがない。結果として、何度くり返しても同じ速さで動きます。
安定して動くようになったので、そのうえで動きの中身を作り込みました。ログインは2段階（施設の認証 → 個人の認証）なので、上に進行状況の表示を置いています。この表示は画面が切り替わってもまったく動きません。動くのは下のカードだけです。
施設の認証が通った瞬間、進行状況の「1」がチェックに変わり、線が左から右へ伸び、「2」が点灯します。そのあとにカードが動き出す。進行状況の表示は画面をまたいで残り続けているように見えます。実際には別のページに移っているのですが、同じ位置に同じ見た目で描かれるので、利用者から見れば「1歩進んだ」だけです。
躓いた5つの点
同じ実装をする方が確実に踏むところを挙げます。
| # | 起きたこと | なぜ起きるか |
|---|---|---|
| 1 | アニメーションが始まる前に画面が切り替わる | 別の場所にある「ログイン済みなら転送する」処理が先に走っていた。演出を追い越す経路は1つずつ塞ぐ |
| 2 | 動きがカクつく | 色を変えるアニメーションは、描画の本線が混んでいると滑らかに描けない。位置と透明度だけで作ると、混雑と無関係に動く |
| 3 | 要素が再表示されてから消える | 入場の指定を「今の状態を見ながら決まる書き方」にしていた。次の遷移で状態が変わった瞬間、入場が再生し直される。方向は最初に一度だけ決めて固定する |
| 4 | 遷移の最後にリロードが走る | ログアウト処理が内部で強制的にページを読み込み直していた。数百ミリ秒遅れて発火するので、演出が終わったあとに台無しになる |
| 5 | 進行状況の表示がわずかにズレる | 2つの画面で同じ見た目を別々に書いていた。実測で32ピクセルずれていた。1つの部品にまとめれば、構造的にズレようがなくなる |
とくに2番は分かりにくい問題でした。コードは正しく、条件によってだけ汚く見える。ログイン直後は裏で処理が集中する時間帯なので、そこで色を動かすアニメーションを走らせると滑らかに描けません。位置と透明度だけで作り直したら、同じタイミングでも滑らかになりました。
色を変えたい場合は、変わったあとの状態を下に敷き、変わる前の状態を上に重ねて薄くしていくという作り方に置き換えられます。見た目は色が変わっていますが、動かしているのは透明度だけです。
4番は「疑うべき場所」の教訓でした。演出の外側にある処理が、演出を壊しにくる。ログアウトの内部実装まで読んで、ようやく原因にたどり着きました。
動きを減らす設定にも対応しています
アニメーションが体調に影響する方がいます。端末側で「視差効果を減らす」を設定している場合、今回入れた動きはすべて止まり、待ち時間なしで画面が切り替わります。演出のために誰かが我慢する状態は作りません。
これからも、小さく直し続けます
問診票を開く、録音のボタンを押す、記録を確定する。日々の業務は、こうした小さな操作の積み重ねでできています。1回あたり0.5秒の引っかかりでも、1日30回なら15秒、外来のある日が続けば無視できない時間になります。そして時間より先に、「なんとなく使いにくい」という感覚が残ります。
私たちは、こうした細部を機能追加と同じ重さで扱っています。今回の画面遷移も、新しくできることが増えたわけではありません。それでも作り直したのは、毎日通る道こそ、いちばん効くと考えているからです。この考え方は設計の指針として明文化し、今後の画面すべてに適用していきます。
現場で「これは使いにくい」と感じられた点があれば、そのままお聞かせください。実際に、いただいたご指摘から生まれた改善がいくつもあります。「うまく言葉にできないが、なんとなく引っかかる」という段階のお話でも歓迎です。お問い合わせからお気軽にどうぞ。
よくあるご質問
アニメーションの長さは、どう決めましたか
退場を短く、入場をそれより長く取っています。退場が長いと押した反応が鈍く感じられ、入場が短すぎると画面が突然入れ替わったように見えるためです。数値そのものよりも、この前後関係を保つことのほうが効きます。
動きを減らす設定にすると、見えなくなる情報はありますか
ありません。止まるのは動きだけで、画面に出る内容は変わりません。演出でしか伝えていない情報を作らないようにしているので、動きを全部止めても操作の流れは同じようにたどれます。
画面遷移を作り直す必要は、どうやって分かったのですか
現場からの「ログインし直したほうがいいですか」というお問い合わせが入口でした。0.5秒に満たない描画の隙間は、作っている側から探しに行って見つかるものではありません。使っている方の言葉をそのまま持ち帰るのが、こうした細部では一番の近道です。