スプリットボタン

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で閉じてトリガーへフォーカスを戻す
補足
実行ボタンとメニュートリガーは別要素として明確に分離し、クリック領域が誤操作しないよう十分な幅を確保する