ナビゲーション — 空間を「感じさせる」動き

アプリには「空間」があります。前のページ・次のページ・サブメニュー・オーバーレイ——それらは「どこか」に存在しています。

動きがなければユーザーはどこにいるか分かりません。アニメーションは「今自分がどこにいて、どこから来て、どこへ行ったか」をユーザーに伝えるナビゲーションシステムです。

タブの切り替え

タブをクリックしてみてください。インジケーターが「スライド」することで空間構造が伝わります。

左：コンテンツ切り替えのみ / 右：インジケーターがスライド。右は「左右に並んでいる」空間構造が伝わる

「進む」「戻る」を体感してください。

フォルダをクリックして進む→戻る。進むとき右からスライドイン、戻るとき左にスライドアウト

「進む」ときは右からスライドイン、「戻る」ときは左へスライドアウト。この方向の一貫性が「今自分は深いところにいる / 浅いところに戻った」という空間感を作ります。

この方向ルールを一貫して守ることで、ユーザーはアプリの「地図」を脳内に構築できます。

「メニューを開く」でドロワーが左端からスライドイン。オーバーレイが「サイドパネル空間」を演出する

ページ遷移のアニメーションを 200ms 以下 にしてはいけない理由——ユーザーは「どこから来てどこへ行ったか」を認識するために、最低限の時間を必要とします。

200ms 以下では「瞬間移動」に見えて、空間の移動感が消えます。ユーザーは「今自分はどこにいるのか」を失います。

推奨は 280〜400ms。これが「空間的な移動感を保ちながらテンポよく進む」最適な範囲です。