ナビゲーション

ナビゲーション オンボーディングOnboarding

初回起動時に、アプリの特徴を数枚の画面で横スワイプしながら紹介する。下のドットで今何枚目かが分かる。

ナビゲーション スクロールで隠れるバーHide on Scroll

下へ読み進めると上下のバーが引っ込んで画面が広くなり、少しでも上へ戻すとすぐに出てくる。

ナビゲーション スクロールで縮む見出しCollapsing App Bar

最初は大きな画像と見出しが出ていて、上にスクロールすると縮んで普通の細い見出しになって上に残る。

ナビゲーション ステッパー（手順表示）Stepper

「お届け先 → 支払い → 確認」のように手続きの段階を番号付きで並べ、今どこにいて残りいくつかを見せる。

ナビゲーション タブバー（上タブ）Tab Bar

画面上部にカテゴリ名が横に並び、押すか中身を左右にスワイプすると切り替わる。選択中の下線が付いてくる。

ナビゲーション ナビゲーションドロワーNavigation Drawer

左上の「≡」を押すと、画面の左から行き先の一覧が引き出しのように滑り出てくる。

ナビゲーション ナビゲーションレールNavigation Rail

画面の左端に細い縦のバーがあり、アイコンを押すと画面が切り替わる。広げると文字も出る。

ナビゲーション パンくずリストBreadcrumb

「ホーム › 写真 › 2026年」のように今いる場所までの道すじを並べ、途中を押すとそこへ一気に戻れる。

ナビゲーション ボトムナビゲーションNavigation Bar

画面の一番下にアイコンと文字が横に並び、押すとアプリの主な画面が切り替わる。

ナビゲーション マスター/ディテールList-Detail Layout

一覧と詳細の組み合わせ。スマホでは「一覧 → 詳細」と画面を移り、タブレットでは左右に並べて同時に見せる。

ナビゲーション 検索バーSearch Bar

角の丸い検索欄を押すと全画面の検索画面に広がり、文字を入れるたびに候補が絞られていく。

ナビゲーション 切り欠き付きボトムバーBottom App Bar with Notch

下のバーの真ん中がくぼんでいて、そこに丸い「＋」ボタンがはまり込んでいる形。

ナビゲーション 戻る前の確認Confirm Before Leaving

入力の途中で戻ろうとすると、「変更を破棄しますか？」と確認が出て、うっかり消えるのを防ぐ。