はじめに
ページ遷移っぽい演出は、単に画面を覆って切り替えるだけだと少し重たく見えがちです。切り替わった感覚を出しつつ、内容は読みやすく残したいなら、画面全体の変化と中身の動きを分けて考えるとまとまりやすいです。
このサンプルでは、まずマスクで空気を変え、そのあとで内容が入れ替わるように順番を組んでいます。ひとつのタイムラインで全部を同時に処理しないことで、見た目も整理しやすくなります。
組み合わせのポイント
- マスクは画面全体の切り替え役として使い、最初に雰囲気を変える
- コンテンツは少し遅れて動かし、何が切り替わったのかを目で追いやすくする
- 入る動きと抜ける動きの速度を同じにせず、流れにメリハリをつける
- カード部分の余白や背景透過を整えて、切り替え中も情報が読める状態を保つ
- 演出の長さは印象より操作感を優先し、待たされている感じを出さない
まとめ
ページ遷移風の表現は、派手な見た目より順番の整理を意識した方がまとまりやすいです。何が先に変わって、何があとから入るのかが明確になるだけでも、複雑な演出が少し自然に見えやすくなります。特に情報量のある UI では、マスクと内容を分離して考えると調整しやすいです。