セグメントボタン
Segmented control排他的な選択肢を横並びのボタン群として常時提示し、押した項目に応じて設定値や表示モードを即座に切り替えるUI。
選択中: リスト表示
○ 使う場面
- 2〜5個程度の排他的な表示モード・設定値を、常に選択肢を見せたまま切り替えたいとき
- コンテンツ量が少なく、画面遷移やパネル切り替えを伴わない設定値の選択
× 避ける場面
- 選択肢が多く1行に収まらないとき（→ドロップダウン）
- 選んだ結果が別コンテンツパネルの表示切り替えであるとき（→タブ）
別名
セグメンテッドコントロール、セグメントコントロール、トグルボタングループ、コンテンツスイッチャー
近縁種との比較
排他的な選択肢を横並びのボタン列として常時提示するこのUIは、デザインシステムによって呼び名が大き
く割れている代表例で、Apple HIGは「Segmented control」、Material Design 3は「Segmented
buttons」、MUIは「Toggle button group」、IBM Carbonは「Content switcher」と、同一の部品に対して4
通りの名称を与えている。本図鑑では国内での定着度からセグメントボタンを見出し名として採用し、
Segmented control/セグメンテッドコントロールを含む他の呼称はすべてaliasesに収録した。「Segmented control」という呼称自体はAppleが初代iPhone SDK以来提供してきたUIKitのコンポーネントUISegmentedControlに由来するとされ、他社の呼び名より先にこの名前が広まった背景になっている。
| 近縁種 | 違い・使い分け |
|---|---|
| タブ | タブとは見た目が近いが、タブがコンテンツパネルの切り替え（ナビゲーション）であるのに対し、セグメントボタンは単一の設定値・状態を選ばせる入力に近い役割を持つ点で異なる。 |
| ラジオボタン | ラジオボタンとは選択の排他性という点で同じ性質を持つが、ラジオボタンが縦並びや個別の丸印で並ぶフォーム部品であるのに対し、セグメントボタンは連結されたボタン列の見た目を取る点が違いである。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション