#199
心理学・認知バイアス
#199とらんじしょん
トランジション (画面遷移)
別名・表記:TransitionPage Transition画面遷移アニメーション
UIXHERO Definition
「場面転換」。A画面からB画面への切り替わり方。
概要
優れたトランジションは、単なる視覚効果ではない。それは「空間のナビゲーション」である。 ユーザーに対し、新しい画面が「どこから来たのか（右から？下から？）」を伝えることで、アプリ内のメンタルマップ（地図）を作らせる助けになる。
UXでの活用
- 階層構造の理解: 「詳細画面に進む時は右から左へスライド」「一覧画面に戻る時は左から右へスライド」というルールを一貫させることで、ユーザーは無意識にアプリの階層構造を理解する。
- 変化の滑らかさ: 急に画面が切り替わる（カット）と、ユーザーの認知的な負荷がかかる（Change Blindness）。トランジションによって変化を連続的に見せることで、脳の処理を助ける。
💡 使いどころ
ユーザーの操作によって画面が切り替わる時。情報のコンテキスト（文脈）を維持したい時。
⚠️ 注意点・誤用
トランジションが長すぎると、ユーザーは「待たされている」と感じる。一般的には300ms前後が適切とされる。また、意味のない派手なトランジションは、ユーザーを混乱させるだけである。
具体例
- スライド（横移動）：階層の深さ（進む/戻る）を表現する。
- モーダル（下から出現）：一時的なタスクであることを表現する。
- クロスフェード（重なり合う）：文脈の断絶、または緩やかな変化を表現する。
関連する解説記事
関連する記事詳細が見つかりませんでした。