シンプル操作
ボタンやトグルなど、ユーザーが直感的に操作できるシンプルなUIコンポーネントの比較
このページでわかること
- ボタン・チェックボックス/ラジオ・ドロップダウン・FAB・カルーセル・スライダーなど、ユーザーが直接トリガーする操作UIの違いと使い分け
- Mantine・Ant Design・shadcn/ui・Chakra UI・MUI の各実装比較
- 選択肢の数・操作頻度・状態管理の複雑さによる選定基準
- フォーカス管理・キーボード操作・アクセシビリティの実装ポイント
シンプル操作UIとは
シンプル操作UIは、ユーザーが画面上で直接トリガーする操作要素。クリック・タップ・ホバーなどの入力で状態を変化させ、フォーム送信・モード切替・コンテンツ送りなどを実行する。
単純そうに見えて、フォーカス管理・キーボード操作・スクリーンリーダー対応など、アクセシビリティ要件が多い領域でもある。デザインだけでなく挙動の正しさが重要で、汎用UIライブラリを使うメリットが大きい。
本ページでは、Reactで頻繁に使われる代表的な操作UIを取り上げ、ライブラリごとの実装と特性を比較する。
目的別の選び方
| UI種類 | 選択肢の数 | 主な用途 | 推奨ライブラリ |
|---|---|---|---|
| ボタン | − | アクション実行 | shadcn/ui（カスタマイズ）/ Mantine |
| チェックボックス | 複数選択 | 複数項目の選択 | Mantine / Chakra UI |
| ラジオボタン | 1〜5 | 排他選択 | Mantine / Chakra UI |
| ドロップダウン | 5〜 | 排他選択（省スペース） | Mantine / shadcn/ui |
| FAB | − | モバイルの主要アクション | Mantine ActionIcon / shadcn/ui Button |
| カルーセル | − | コンテンツの順次表示 | Swiper / Embla Carousel |
| スライダー | − | 数値の連続選択 | Mantine Slider / shadcn/ui |
ボタン（Button）
詳細を見る →クリックで操作を実行するボタンUIの実装比較。バリアント・サイズ・ローディング状態などの違いをインタラクティブに確認
ドロップダウン（Dropdown / Select）
詳細を見る →クリックで開くアクションメニュー・単一選択・複数選択UIの実装比較。グループ化・検索・クリック外閉じなど実践的なパターンをインタラクティブに確認
チェックボックス・ラジオボタン（Checkbox / Radio）
詳細を見る →複数選択・単一選択・トグルスイッチUIの実装比較。グループ化・indeterminate・Radio.Button など実践的なパターンをインタラクティブに確認
FAB（フローティングアクションボタン）
詳細を見る →画面右下などに固定表示される丸いボタン。スピードダイアル・拡張FABなど実践的なパターンをインタラクティブに確認
カルーセル / スライダー（Carousel / Slider）
詳細を見る →Swiper・Embla Carousel・Keen Sliderなど主要ライブラリのカルーセル実装比較。自動再生・複数アイテム表示・フェード・レスポンシブ対応をインタラクティブに確認
スライダー・レンジ（Slider / Range）
詳細を見る →数値や範囲をドラッグ操作で入力するUI。音量・価格フィルター・明るさ調整など幅広い用途で使われる。
基本スライダー
レンジスライダー
ステップ付き
実装の落とし穴
- キーボード操作: Tab・Space・Enter・矢印キーの対応はライブラリで挙動が違う。Radix UI 基盤（shadcn/ui）は標準で網羅
- フォーカススタイル:
outline: noneで見えなくしてしまうと a11y 違反。:focus-visibleでキーボード操作時のみ表示する - ボタンの誤クリック防止: 重要な操作はダブルクリック防止やローディング表示を入れる。disabled 状態の見た目を分かりやすく
- カルーセルとSEO: 多くのカルーセルライブラリは初期表示で1枚目しか描画しない。SEOで全コンテンツを評価させたいなら lazy 設定を見直す
- タッチターゲットサイズ: モバイルでは最低 44×44px（WCAG基準）を確保する
よくある質問
チェックボックスとトグルスイッチの違いは？
チェックボックスは「フォーム送信時に確定する」設定。トグルスイッチは「変更が即座に反映される」設定（例: ダークモード切替）。ユーザーの期待挙動が異なるため、視覚的にも区別する。
ドロップダウンと Combobox の違いは？
ドロップダウンは選択肢のリストから1つ選ぶUI。Combobox は入力欄付きで、絞り込みやフリー入力もできるドロップダウン拡張版。選択肢が10件を超えるなら Combobox が使いやすい。
カルーセルは Swiper と Embla どちらが良い？
高機能（エフェクト多数・複雑な制御）が必要なら Swiper。軽量・モダンなAPIで充分なら Embla Carousel（Mantine・shadcn/ui の内部エンジンとしても採用されている）。
FAB（Floating Action Button）はいつ使うべき？
モバイルアプリで「最も重要な1つのアクション」を画面右下に固定する場合に効果的。複数のアクションを並べたい場合は通常のボタン群やボトムナビが向く。Webサイトでは過剰になりやすいので慎重に判断する。
Zenn