ナビゲーション オンボーディング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

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

画面遷移 Android 風ズームZoom Page Transition

次の画面が少しだけ拡大しながら現れ、前の画面も少し拡大しながら消えていく。Android 10 前後の標準の動き。

画面遷移 Hero（共有要素の遷移）Hero Animation

一覧の小さな写真が、そのまま飛んでいって次の画面の大きな写真になる。同じ物だとひと目で分かる。

画面遷移 iOS 風プッシュCupertino Page Transition

次の画面が右から滑り込み、前の画面は少しだけ左へずれて暗くなる。iPhone のアプリでおなじみの動き。

画面遷移 コンテナトランスフォームContainer Transform

押したカードがその場でふくらみ、角を広げながら画面いっぱいの詳細画面に変わる。閉じるとカードに縮んで戻る。

画面遷移 フェードスルーFade Through

今の画面が先に消えきってから、次の画面が少し拡大しながら現れる。関係のない画面同士の切り替えに使う。

画面遷移 フェードフォワードFade Forwards Page Transition

次の画面が右から少しだけ入りながらフェードで現れ、前の画面は左へ少しずれながら消える。最近の Android の動き。

画面遷移 フェード遷移Fade Transition

画面が動かずに、前の画面が薄れて次の画面が浮かび上がる。いちばん控えめな遷移。

画面遷移 ページめくりPage Flip

本や雑誌のように、ページの端をつかんでめくると次のページが現れる。

画面遷移 円形に広がる遷移Circular Reveal

押した場所を中心に円が広がっていき、その円の中に次の画面が現れる。

画面遷移 下からせり上がる画面Full-screen Modal Transition

次の画面が下から上へせり上がってきて全体を覆う。閉じると下へ戻っていく。

画面遷移 共有軸の遷移Shared Axis Transition

手順を進むと画面が同じ向き（横・縦・奥）に送られ、戻ると逆向きに戻る。順番のある画面同士の関係が伝わる。

画面遷移 予測型「戻る」Predictive Back

戻るジェスチャーの途中で今の画面が縮み、後ろに前の画面がのぞく。離せば戻り、やめれば元に戻る。

ボタン いいねボタンLike Button Animation

ハートを押すと、ぽんっとふくらんで縮み、周りに小さな粒が飛び散る。数字も下から入れ替わる。

ボタン スライドして確定Slide to Confirm

丸いつまみを右端まで指で滑らせると確定する。押し間違いが起きない、重い操作用のボタン。

ボタン セグメントボタンSegmented Button

2〜5個のボタンが1本につながっていて、選んだものだけが塗られる。「日・週・月」の切り替えなどに使う。

ボタン チップChips

小さな角丸のボタン。絞り込み・並び替えの選択、入力したタグの表示、すぐ実行できる提案などに使う。

ボタン トグルボタンToggle Buttons

太字・斜体・下線のように、つながったアイコンボタンを押すたびにオンとオフが切り替わる。

ボタン ボタンの種類Button Styles

塗り・トーナル・浮き・枠線・文字だけ、の5段階の目立ち方があり、操作の重要さに合わせて使い分ける。

ボタン ホバーで変わるHover Effect

PC でマウスを乗せると、カードが少し浮き上がって色が変わり、カーソルが指の形になる。押せることが伝わる。

ボタン ローディングボタンLoading Button

押すとボタンが丸く縮んで中でくるくる回り、終わるとチェックマークに変わる。二度押しも防げる。

ボタン 拡張FAB（文字付き FAB）Extended FAB

右下の丸いボタンに「メモを書く」のような文字が付いた横長版。スクロールで読み進めるとアイコンだけに縮む。

ボタン 波紋（インクリップル）Ink Ripple

押した場所から水面の波紋のように色が広がり、「押せた」ことを伝える Material の基本の反応。

ボタン 分割ボタンSplit Button

左側を押すといつもの操作、右側の▼を押すと別のやり方を選ぶメニューが出る、2つに割れたボタン。

メニュー コンテキストメニュー（長押し）Context Menu

写真などを長押しすると、その要素が浮き上がって拡大され、下に操作メニューが出る iOS 風の動き。

メニュー スピードダイヤルSpeed Dial

右下の丸いボタン（FAB）を押すと、関連する小さなボタンが上に積み上がるように出るメニュー。

メニュー ドロップダウンメニューDropdown Menu

入力欄のような箱を押すと、選べる候補の一覧が下に開く。文字を入れて絞り込むこともできる。

メニュー ポップアップメニューPopup Menu

「︙」ボタンを押すと、そのボタンの位置に小さな選択肢の箱が浮かぶメニュー。

メニュー ラジアルメニューRadial Menu

中央のボタンを押すと、項目が円を描くように周りへ飛び出すメニュー。

ダイアログ・シート アクションシートAction Sheet

iOS でおなじみの、下から選択肢の束と、離れた「キャンセル」ボタンが出てくるシート。

ダイアログ・シート アラートダイアログAlert Dialog

画面の真ん中に小さな窓が出て、「本当に削除しますか？」のように答えを求める。

ダイアログ・シート ドラッグできるシートDraggable Scrollable Sheet

画面下に出しっぱなしの板を上下に引っ張って高さを変えられる。地図アプリの「近くのお店」一覧のあれ。

ダイアログ・シート フルスクリーンダイアログFull-screen Dialog

画面全体を覆う入力画面。左上の×で閉じ、右上の「保存」で確定する。

ダイアログ・シート モーダルボトムシートModal Bottom Sheet

画面の下から板がせり上がってきて、選択肢や小さなフォームを出す。外側を押すか下に引くと閉じる。

ジェスチャー 2本指で回転Two-finger Rotate

写真やスタンプを2本の指でひねると、その向きに回転する。指を広げれば同時に拡大もできる。

ジェスチャー スワイプでボタンが出る行Slidable List Item

リストの行を横にずらすと、裏から「アーカイブ」「削除」などのボタンが現れ、押して実行する。

ジェスチャー スワイプで削除Swipe to Dismiss

リストの行を横にスワイプすると、下から色付きの背景が現れ、そのまま行が消える。

ジェスチャー スワイプで仕分けるカードSwipe Cards

積み重なったカードの一番上を左右に投げて振り分ける。投げた向きで「行きたい / パス」が決まる。

ジェスチャー スワイプで戻るSwipe Back Gesture

画面の左端から右へ指で払うと、指に合わせて今の画面がずれ、前の画面に戻る。iPhone の基本操作。

ジェスチャー ダブルタップでいいねDouble Tap to Like

写真を2回すばやくたたくと、真ん中に大きなハートがぽんっと出て消え、いいねになる。

ジェスチャー ダブルタップでズームDouble Tap to Zoom

写真を2回たたくと、たたいた場所を中心に拡大し、もう一度2回たたくと元の大きさに戻る。

ジェスチャー ドラッグ＆ドロップDrag and Drop

物をつかんで別の場所まで運び、置き場所の上で離すと受け取られる。

ジェスチャー なぞって範囲選択Drag to Select

写真を長押しして、そのまま指をなぞると、なぞった範囲の写真がまとめて選ばれる。

ジェスチャー ピンチズームPinch to Zoom

2本指で広げると拡大、つまむと縮小、1本指で動かすと見る場所が移動する。

ジェスチャー ピンチで列数が変わるグリッドPinch to Change Grid Columns

写真の一覧を2本指でつまむと列が増えて小さく、広げると列が減って大きくなる。

ジェスチャー フリック入力Flick Input

キーを押すと上下左右に候補が十字に出て、払った向きの文字が入る。日本のスマホの文字入力。

ジェスチャー 引っ張って更新Pull to Refresh

リストの一番上でさらに下へ引っ張ると、くるくる回る印が出て最新の内容に読み込み直す。

ジェスチャー 引っ張ると伸びるヘッダーStretchy Header

一番上までスクロールした状態でさらに下へ引っ張ると、上の画像が伸びて拡大し、離すと戻る。

ジェスチャー 押しっぱなしで連続Press and Hold to Repeat

＋を1回押すと1つ増え、押し続けると連続で増えていき、だんだん速くなる。

ジェスチャー 下にスワイプして閉じるSwipe Down to Dismiss

全画面の写真を下へ払うと、写真が縮みながら離れていき、背景が透けて元の一覧に戻る。

ジェスチャー 回すダイヤルRotary Knob

丸いつまみの周りを、円を描くように指でなぞると、つまみが回って音量などの値が変わる。

ジェスチャー 振って元に戻すShake to Undo

端末を振ると「入力を取り消しますか？」と聞かれ、直前の操作を元に戻せる。iPhone の昔からの操作。

ジェスチャー 端までスクロールしたときの反応Overscroll Effects

一覧の端を越えて引っ張ったときの反応。中身が伸びる（新しい Android）、光る（古い Android）、跳ね返る（iOS）の3種類。

ジェスチャー 長押しで確定Hold to Confirm

ボタンを押し続けると色が溜まっていき、端まで溜まると実行される。途中で離すと溜めた分が抜ける。

ジェスチャー 長押しで編集モードJiggle Mode

アイコンを長押しすると全部がぷるぷる揺れ始め、−を押して消したり並べ替えたりできる。完了で止まる。

ジェスチャー 並べ替えグリッドReorderable Grid

アイコンを長押ししてつかみ、ほかのアイコンの上へ運ぶと、その場で並びが入れ替わる。

ジェスチャー 並べ替えリストReorderable List

行をつかんで上下にドラッグすると、他の行がよけて順番を入れ替えられるリスト。

入力・フォーム OTP 入力（コード入力）OTP / PIN Code Input

4〜6桁のコードを1文字ずつの箱に入れる入力欄。打つと次の箱へ進み、全部埋まると自動で確認が始まる。

入力・フォーム スイッチSwitch

押すとつまみが横へ滑って、オンとオフが切り替わる。設定画面で「すぐに効く」切り替えに使う。

入力・フォーム スライダーSlider

つまみを横へドラッグして値を決める。目盛りを付けると決まった刻みに吸い付き、動かしている間だけ上に値が出る。

入力・フォーム タグ入力（チップ入力）Tag Input / Chip Input

文字を打って Enter を押すと、その言葉が丸いチップになって欄の中に並ぶ。×を押すと消える。

入力・フォーム チェックボックス / ラジオボタンCheckbox / Radio Button

四角に✓を付けるのがチェックボックス（いくつでも選べる）、丸を塗るのがラジオボタン（1つだけ選べる）。

入力・フォーム テキスト入力の種類Text Field Styles

文字を打つ欄の見た目は「枠線」「塗り」「下線」の3種類。押すと中のラベルが上へ縮んで、枠の色が変わる。

入力・フォーム パスワード表示切替Password Visibility Toggle

パスワード欄の右にある目のアイコンを押すと、●●● で隠していた文字が見えるようになる。もう一度押すと隠れる。

入力・フォーム ログイン画面Login Screen

メールとパスワードを入れてログインする画面。新規登録との切り替えや、Google などでのログインボタンも並ぶ。

入力・フォーム 署名パッド（手書き）Signature Pad

枠の中を指でなぞると、その通りに線が描ける。受け取りのサインや手書きメモに使う。

入力・フォーム 数量ステッパー（＋−）Quantity Stepper

「−」と「＋」のボタンで数を1つずつ増減する。上限・下限に来るとボタンが押せなくなる。

入力・フォーム 星評価Star Rating

星を押すと、その星まで塗られる。横になぞると星が増えたり減ったりする。半分の星で 0.5 刻みにもできる。

入力・フォーム 選択できる文字Selectable Text

普通は選べない画面の文字を、なぞったり長押ししたりして選び、コピーできるようにする。

入力・フォーム 入力エラー表示（バリデーション）Form Validation

入力が間違っていると、欄が赤くなって下に理由が出る。直すとその場で消える。

入力・フォーム 範囲スライダーRange Slider

つまみが2つあるスライダー。下限と上限を動かして「〇〇円から〇〇円まで」のような範囲を決める。

入力・フォーム 複数行の自動伸長テキストAuto-growing Text Field

1行で始まり、改行や折り返しで行が増えると欄が伸びる。決めた行数を超えると、それ以上は伸びずに中でスクロールする。

入力・フォーム 文字数カウンターCharacter Counter

入力欄の右下に「12 / 140」のように打った文字数が出る。上限に近づくと色が変わり、それ以上は打てない。