【マテリアルデザイン】FAB

FAB(Floating Action Button)

• 画面上で最も重要なアクションにはFABを使う。
  FABは画面上の他のすべてのコンテンツの前に表示され、丸みを帯びた形と中央のアイコンによって認識できる。

  • ただし、画面が主要なアクションを表す場合など、すべての画面にFABが必要なわけではない。

• FABは、スクリーンの主要なアクションの提示にのみ使用する。

• FABは左寄せ、中央寄せ、右寄せのいずれでもよい。
  ナビゲーションバーの上に配置することも、バーの中に入れ子にすることも可能。

• サイズは標準（56dp×56dp）／小（40dp×40dp）／大（96dp×96dp）の3つがある。

  • 小を使う場面：

    • セカンダリー、サポートアクション、またはコンパクトなウィンドウサイズでのデフォルトFABの代わりに使用。

    • 1つまたは複数のスモールFABを標準FABまたは大FABと組み合わせることが可能。

    • 複数の重要なアクションが必要な場合は、アクションの1つに小さなFABを使用する。

  • 大を使う場面：

    • レイアウト上、主要なアクションが明確で目立つ必要があり、フットプリントが大きい方がユーザーの興味を引きやすい場合に有効。中くらいのウィンドウサイズで表示される場合など。

    • FABのサイズが大きいと画面上の重要な情報が見えなくなってしまう場合は、大きなFABを使わない。代わりに標準FABを使用する。

FAB – Material Design 3

見た目

標準

• ボタン幅：56dp × 56dp

• アイコン幅：24dp

• ボタン周囲の余白：16dp

小

• ボタン幅：40dp × 40dp

• アイコン幅：24dp

• ボタン周囲の余白：16dp

大

• ボタン幅：96dp × 96dp

• アイコン幅：36dp

• ボタン周囲の余白：16dp