フローティングアクションボタンとは

画面の右下などに常に浮いて表示され、スクロールしても付いてくる丸いボタン。

概要

画面の右下などの決まった位置に常に浮いて表示され、ページをスクロールしても付いてくる丸いボタンです。FAB は Floating Action Button の略で、「新規作成」や「チャットを開く」のように、そのページで最も使ってほしい 1 つの操作に絞って配置します。position: fixed で画面に固定するため、他の要素の上に重なって隠れてしまわないよう配置場所に注意します。

別名

表記ゆれ：FAB、フローティングボタン、追従ボタン、floating action button

Android の Material Design で広まった呼び方で、日本語では「追従ボタン」と説明されることもあります。

AI への伝え方

「右下に固定の丸い FAB を置いて、+ アイコンでチャットを開くようにして」のように、位置とアイコン、押したときの動作を伝えます。画面に固定される部品なので、他のボタンやフッターと重ならないか確認してほしい旨も添えると安心です。

似たパーツとの違い

「アイコンボタン」はページの流れの中に配置される通常のボタンで、FAB は画面に固定表示される点が異なります。「トップへ戻るボタン」も同じ固定表示の丸ボタンですが、FAB は新規作成などページ固有の主要操作、トップへ戻るボタンはページの先頭に戻るという決まった操作という違いがあります。

デモ

コード

HTML

<div class="fab-demo">
  <p class="fab-demo__note">このページのどの位置でも、右下に FAB が固定表示されます。</p>
  <button class="fab-demo__button" type="button" aria-label="新規作成">
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </button>
</div>

CSS

.fab-demo {
  font-family: sans-serif;
}

.fab-demo__note {
  margin: 0;
  color: #333;
  line-height: 1.8;
}

.fab-demo__button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #0017c1;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: background-color 0.15s ease;
}

.fab-demo__button:hover {
  background: #000f8c;
}

.fab-demo__button:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 3px;
}