フローティングアクションボタン(FAB)

FAB

画面上に常時浮かんで表示され、そのコンテキストで最も重要な単一のアクションを実行するボタンUI。

○ 使う場面

  • 一覧・フィード画面で「新規作成」など単一の最重要アクションを常時アクセス可能にしたいとき
  • モバイルの片手操作で親指が届く位置に主要アクションを置きたいとき

× 避ける場面

  • 主要アクションが複数あり優先順位をつけられないとき(→スピードダイヤルを検討)
  • コンテンツ量が少なくFABが画面を覆ってしまう懸念があるフォーム中心の画面

別名

フローティングボタン、拡張FAB

近縁種との比較

「FAB(フローティングアクションボタン)」という呼称はMaterial Designが定着させたもの。M3では「Extended FAB」としてラベル付きの横長バリエーションも定義されているが、単一アクションという性質は変わらない。

近縁種違い・使い分け
ボタン画面上に固定表示され、そのコンテキストで最も重要な単一アクションを常に担う点が通常のボタンと異なる。
スピードダイヤルアクションが複数に分岐する場合はスピードダイヤルを使う——FABが常に単一アクションのみを持つのに対し、スピードダイヤルはFAB自体をトリガーに複数のミニアクションを展開する点が違いである。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション