【UIパーツ大全】フローティングアクションボタン[FAB]参考パーツ一覧

アプリやWebサービスのインターフェースにおいて、フローティングアクションボタン（FAB：Floating Action Button）はユーザーの主要アクションを強調するための重要なUIパーツです。特にモバイルアプリでは視認性が高く直感的に操作できるため、ユーザー体験（UX）を向上させる要素として重宝されています。本記事ではFABの基本設計から最新のUIトレンド、さらに参考になる実例・UIパーツを一覧で紹介します。

フローティングアクションボタン（FAB）とは？

フローティングアクションボタン（FAB）は画面上に浮かぶように表示される丸いボタンで、ユーザーにとって「最も重要な行動」を促すための要素です。

主な特徴

• 画面上で浮かぶ（floating）ため、他の要素と明確に差別化される。
• 円形デザインで、視覚的にアイコンを中心に配置。
• 一貫した位置（通常は右下）に表示される。
• タップ時にアクションを実行、もしくはサブアクションが展開される。

使用例

• 新規作成（＋）
• チャット開始
• 写真撮影・アップロード
• ナビゲーションのトリガー　など

FABがUX/UIに与える効果

FABはユーザーの注目を集める構造になっており、以下のようなUX上の利点があります。

• ユーザーの迷いを減らす：主要アクションが一目でわかる
• 操作の効率化：よく使う機能に素早くアクセス
• ビジュアルの一貫性：GoogleのMaterial Designに準拠した美しい統一感
• スペースの有効活用：限られた画面内でも邪魔になりにくい

ただし使いすぎや誤用はUXの悪化を招くため目的を明確にし、コンテキストに合った使用が求められます。

フローティングアクションボタンの種類とバリエーション

通常のFAB（スタンダード）

最もシンプルな形。1つの主要アクションのみに使用。

例

• Gmailの「＋」ボタン（新規メール作成）

拡張FAB（Extended FAB）

テキストラベル付きでアイコンと文字の両方を表示。視認性が高く、意味を明確に伝えられる。

例

• Googleマップの「出発」ボタン

スピードダイヤルFAB（マルチアクションFAB）

タップすると複数のサブボタンが展開。複数アクションをグループで提供したい場合に有効。

例

• LINEのチャット画面での＋アイコン → 送信、画像、位置情報などの選択

UIデザインの参考になるFABパーツ一覧

ここからは実際のデザイン参考になるFAB UIパーツを一覧形式で紹介します。Figma、Adobe XD、Sketch、Reactコンポーネントなど多様な形式をカバーしています。

Material Design FAB by Google

URL: https://m3.material.io/components/floating-action-button/overview

提供元：Google

特徴：公式ガイドライン付きで、状態・サイズ・モーションの詳細が掲載。

MUI (Material-UI for React)

URL: https://mui.com/material-ui/react-fab/

特徴：Reactで簡単に導入でき、テーマや色、アイコンのカスタマイズが豊富。

Figma Community – FAB UI Kits

キーワード：FAB, Floating Action Button, Material UI

特徴：多数のFigma UIキットが公開されており、モバイルUIに即適用可能。

Ant Design Mobile

URL: https://mobile.ant.design/components/fab

特徴：中国系アプリに強いデザインシステム。軽量でミニマルなUI。

Bootstrap Floating Button（非公式）

URL: CodePenやGitHubで「bootstrap floating action button」と検索

特徴：Bootstrapを用いた軽量な実装例が多く、カスタマイズ性も高い。

Tailwind CSS + Headless UIでの実装例

検索キーワード：Tailwind Floating Action Button

特徴：自由度が高く、独自モーションも実装しやすい。SPA向け。

FABデザインで気をつけるべきポイント

✅ アクセシビリティ対応

• スクリーンリーダー対応（aria-labelなど）
• タップ領域は48dp以上を確保

✅ カラーとコントラスト

• 画面背景と十分なコントラストを確保
• 状態ごとの色（ホバー、フォーカス、無効状態など）を明示

✅ モーション設計

• 展開アニメーションやトランジションを自然に設計
• ユーザーに「何が起きたか」が明確に伝わるように

成功しているFAB実装事例

◉ Google Keep

• スタンダードなFABで「新規メモ作成」を明示
• サブアクションなしのシンプル設計

◉ Instagram

• プラスボタンで「投稿作成」へ誘導
• ユーザー行動の起点として強い導線を担う

◉ Uber

• 「出発地入力」「目的地入力」に連動したFAB変化
• 状況に応じてFAB内容が変化し、ユーザーの文脈に合わせる

まとめ：FABは強力だが「文脈主義」が鍵

フローティングアクションボタンはUX/UIデザインの中でも非常に効果的な要素ですが、あくまで文脈に即した配置と使用が成功の鍵です。

✔️ FABは目立たせすぎると他要素を妨げる
✔️ ユーザーが本当に求めるアクションに限定する
✔️ シンプルで一貫性のある動作を意識する

デザインの初期段階で「FABは必要か？」「何をさせたいのか？」を自問し、設計に組み込むことで、より完成度の高いインターフェースが実現します。