フローティングアクションボタン（FAB）
FAB
別名: FAB、フローティングボタン、拡張FAB、Floating action button、Floating button、Extended FAB
生態（さわってみる）
一言定義
画面上に常時浮かんで表示され、そのコンテキストで最も重要な単一のアクションを実行するボタンUI。
分類
使う場面
- 一覧・フィード画面で「新規作成」など単一の最重要アクションを常時アクセス可能にしたいとき
- モバイルの片手操作で親指が届く位置に主要アクションを置きたいとき
避ける場面
- 主要アクションが複数あり優先順位をつけられないとき（→スピードダイヤルを検討）
- コンテンツ量が少なくFABが画面を覆ってしまう懸念があるフォーム中心の画面
近縁種との比較
FAB（フローティングアクションボタン）という呼称はMaterial Designが定着させたもので、画面上に 固定表示され、そのコンテキストで最も重要な単一アクションを担う点が通常のボタンと異なる。アク ションが複数に分岐する場合はMUIが「Speed dial」として独立部品化しているように、本図鑑でもスピ ードダイヤルを別エントリーとして扱う——FABが常に単一アクションのみを持つのに対し、スピードダ イヤルはFAB自体をトリガーに複数のミニアクションを展開する点が違いである。M3では「Extended FAB」 としてラベル付きの横長バリエーションも定義されているが、これも単一アクションという性質は変わら ない。
実例リンク
アクセシビリティ
- role
- button（アイコンのみのため aria-label が必須）
- キーボード操作
- Tabで到達、Enter/Spaceで実行
- 補足
- 固定表示のためスクロールに追従してコンテンツと重なりやすい。タッチターゲットは48px角以上を確保し、末尾コンテンツがFABの下に隠れないよう本文側に余白を取る