スプリットボタン
Split button
別名: 分割ボタン、Split button
生態(さわってみる)
一言定義
既定の主操作を実行するボタンと、関連する副次的な操作を選べるメニュートリガーを一体化したボタンUI。
分類
使う場面
- 既定の主操作は明確だが、稀に別バリエーションを選びたいとき(「保存」+「名前を付けて保存」など)
- ツールバーで場所を節約しつつ副次的な選択肢も提供したいとき
避ける場面
- 主操作と副次操作の使用頻度が同程度のとき(→ボタングループやドロップダウンメニュー)
- 選択肢が多く一覧性が必要なとき(→ドロップダウンメニュー単体)
近縁種との比較
スプリットボタンは既定の主操作を担うボタン部分と、関連する副次的な選択肢を開くメニュートリガ ー部分を1つの視覚的な塊として連結したUIで、NN/gやFluentが早くから定義してきたパターンである。通 常のボタンが単一の役割しか持たないのに対し、スプリットボタンは主操作とその亜種(「保存」と 「名前を付けて保存」など)をセットで提示できる点が異なる。スピードダイヤルも1つのトリガーから 複数のアクションへ分岐する点は共通するが、スピードダイヤルは全アクションが対等な立場で展開される のに対し、スプリットボタンは主操作と副次操作の間に明確な優先順位(クリック一発で実行されるのは主 操作のみ)がある点で区別される。
実例リンク
アクセシビリティ
- role
- 実行ボタンは通常のbutton、隣接するメニュートリガーは button[aria-haspopup="true"][aria-expanded]、展開メニューはrole="menu"+各項目role="menuitem"
- キーボード操作
- 実行ボタンはEnter/Spaceで即実行、メニュートリガーはEnter/Space/↓で展開、展開後は↑↓で項目移動、Escで閉じてトリガーへフォーカスを戻す
- 補足
- 実行ボタンとメニュートリガーは別要素として明確に分離し、クリック領域が誤操作しないよう十分な幅を確保する