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

画面の右下などに固定表示される丸いボタン。主要なアクション（追加・編集・共有など）へのショートカットとして使われる。モバイル・PCどちらにも使えるUIパターンを Mantine・shadcn/ui・CSS/Tailwind の3種で比較できます。

@mantine/corev8.3.15 shadcn/uiv4.2.0

Mantine ActionIcon FAB

Mantine の ActionIcon を size={56} + radius="xl" でFABスタイルに設定し、Tooltip でホバー時に「新規追加」を表示するパターンです。

ActionIcon size=56radius="xl"Tooltipposition: absolute

読み込み中...

tsx

'use client';
import { ActionIcon, MantineProvider, Tooltip } from '@mantine/core';
import '@mantine/core/styles.css';
import { Plus } from 'lucide-react';

export function MantineFab() {
  return (
    <MantineProvider>
      {/* 実際のアプリでは layout.tsx などのルートコンポーネントに配置 */}
      <Tooltip label="新規追加" position="left" withArrow>
        <ActionIcon
          size={56}
          radius="xl"
          variant="filled"
          color="blue"
          style={{
            position: 'fixed',
            bottom: 24,
            right: 24,
            zIndex: 100,
            boxShadow: '0 4px 12px rgba(37,99,235,0.35)',
          }}
          onClick={() => console.log('FAB clicked')}
        >
          <Plus size={24} />
        </ActionIcon>
      </Tooltip>
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったFAB（フローティングアクションボタン）を実装してください。
- 使用ライブラリ: @mantine/core の ActionIcon コンポーネント
- size={56} radius="xl" で丸い大きめのボタンに設定する
- variant="filled" color="blue" でデフォルトの青塗りスタイルにする
- position: fixed, bottom: 24, right: 24 で画面右下に固定する
- boxShadow で浮き上がった印象を演出する（例: '0 4px 12px rgba(37,99,235,0.35)'）
- Tooltip コンポーネントで position="left" withArrow を使ってホバー時に「新規追加」ラベルを表示する
- lucide-react の Plus アイコン（size={24}）を ActionIcon の子要素に配置する
- layout.tsx やページのルートコンポーネントに配置してページ全体に表示する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	shadcn/ui	CSS / Tailwind
実装方法	ActionIcon + Tooltip	Button + className	button + inline style
ツールチップ	✅ Tooltip 内蔵	⚠️ 別途 Tooltip 追加が必要	⚠️ 自作 or ライブラリ追加
スピードダイアル	⚠️ 自作が必要	✅ Button + state で実装しやすい	✅ CSS transition で実装可
リップルアニメーション	✅ Mantine が自動付与	⚠️ 自作が必要	⚠️ @keyframes で自作
拡張FAB	⚠️ 自作が必要	⚠️ 自作が必要	✅ width transition で実装しやすい
アクセシビリティ	✅ WAI-ARIA準拠	✅ Radix UIベース	⚠️ aria-label を手動で付与
カスタマイズ性	⚠️ テーマ依存	✅ Tailwind で自由に変更可	✅ 完全自由
バンドルサイズ	⚠️ 中（全体で大）	✅ 使った分だけ	✅ ゼロ追加

選択のポイント

Mantine —ActionIconとTooltipの組み合わせだけで完結し、すでに Mantine を採用しているプロジェクトではほぼゼロコストで実装できる。リップルアニメーションは自動付与されるため追加実装不要。
shadcn/ui — コードがプロジェクトに直接コピーされるため、デザインを完全にコントロールできる。スピードダイアル展開など複雑なインタラクションも React state と CSS transition で組み合わせやすい。 Tailwind CSS との相性が抜群。
CSS / Tailwind CSS — 外部ライブラリへの依存を避けたい場合に最適。拡張FABの width transition やスピードダイアルのステガード展開など、 CSS だけで多彩な表現が可能。アクセシビリティは実装者がaria-labelなどを手動で付与する必要がある。