#086
インタラクション・アニメーション
#086きょうゆうようそせんい
共有要素遷移 (Shared Element Transition)
別名・表記:Shared Element TransitionHero AnimationMagic Move
UIXHERO Definition
「変身する遷移」。リストのサムネイルが、そのまま拡大して詳細画面のヘッダー画像になるような動き。
概要
マテリアルデザインで推奨されているパターンの一つ。 ユーザーは視線を動かすことなく、注目していた対象物が新しい画面のどこに配置されたかを理解できるため、認知負荷が非常に低い。
UXでの活用
- コンテキストの維持: 「さっきタップしたあの画像が、これになった」という因果関係が明確になるため、ユーザーは迷子になりにくい。
- 没入感: 画面の切り替わり（カット）を感じさせないため、アプリの世界観に浸り続けることができる。
- 待機時間の隠蔽: 画像が拡大している間に次の画面のデータを読み込むことで、体感的な待ち時間を短縮できる。
💡 使いどころ
一覧画面から詳細画面への遷移など、情報の連続性を強調したい時。ユーザーに「同じデータを見ている」と感じさせたい時。
⚠️ 注意点・誤用
動きが複雑すぎると実装コストが高いだけでなく、パフォーマンスが悪化する（FPSが落ちる）可能性がある。また、画面構成が大きく異なる場合、無理に繋げると不自然になる。
具体例
- 音楽アプリで、再生中のミニプレーヤーをタップすると、アルバムアートが拡大して全画面プレーヤーになる
- Google Playストアのアプリ詳細画面への遷移
関連する解説記事
関連する記事詳細が見つかりませんでした。