ボタン/複数の操作をまとめるボタン

複数の操作を1つのボタンにまとめる場合のパターンを定義します。

構成

複数の操作をまとめるボタンは、以下の要素で構成されています。

  1. アクションボタン
  2. ドロップダウン

複数の操作をまとめるボタン

1. アクションボタン

複数の操作がまとまっていることを示唆するために、SecondaryButtonアイコン付き(右)タイプで、「展開」アイコン(fa-caret-down)を使用します。

2. ドロップダウン

Dropdownを用いて、操作をリスト形式でまとめて表示します。
まとめ方は、種類から用途にあったものを選択してください。

操作の個数

レイアウトの一貫性やユーザーの利便性に応じて適切な個数を設定してください。ひと目で把握できるようにできるだけ少ない個数が望ましいです。

例外として、類似する画面とのレイアウトの一貫性を保つために、操作が1つの場合(例:オブジェクトの削除のみ)でも、あえてドロップダウンの中に配置することがあります。

操作の順序

使用頻度が高い順を推奨しますが、破壊的なアクション(例:オブジェクトの削除)に関しては、順序を下げて配置してください。
操作の順序の典型的な例は以下のとおりです。

複数の操作をまとめるボタン

種類

用途によって5つのパターンを定義します。

#パターン名用途
A単一のオブジェクトに対する操作オブジェクトに関する複数の操作をまとめるときに使用します。
B単一のオブジェクトに対する操作(オブジェクト名省略)特定のオブジェクトの操作であることがレイアウト上自明なとき(例えばよくあるテーブルの行の中など)に使用します。
C同一の操作同じ種類の操作をまとめるときに使用します。
D異なる複数の操作異なる複数の操作を適切に分割できなかったり、まとめ方が無いときに、異なる複数の操作をまとめるために使用します。
E異なる複数の操作(ラベル省略)Dのパターンに該当し、ボタンを配置するスペースを十分確保できないときに使用します。

A. 単一のオブジェクトに対する操作

{オブジェクト名}の操作ボタン

オブジェクトに関する操作をまとめるときに使用します。

要素説明
アクションボタンラベルは{オブジェクト名}の操作とします。
ドロップダウンオブジェクトに対して行なう操作を入れます。

B. 単一のオブジェクトに対する操作(オブジェクト名省略)

操作ボタン

操作の対象になるオブジェクトがレイアウト上自明なときに使用します。(例えばよくあるテーブルの行の中など)

要素説明
アクションボタン基本的に「A. 単一のオブジェクトに対する操作」のようにオブジェクト名を表示しますが、狭い場所にレイアウトするときにオブジェクト名を省略できます。ラベルは操作にします。
ドロップダウンオブジェクトに対して行なう操作を入れます。アクションボタンのラベルと同様にオブジェクト名を省略できます。

C. 同一の操作

同じ種類の操作ボタン

同じ種類の操作をまとめるときに使用します。

要素説明
アクションボタン操作をまとめるラベルにします。
ドロップダウン同じ種類の操作を入れます。

D. 異なる複数の操作

その他のボタン

他のA~Cのパターンに該当しないときに、異なる複数の操作をまとめるために使用します。

要素説明
アクションボタンラベルはその他の操作とします。
ドロップダウン異なる複数の操作を入れます。

E. 異なる複数の操作(ラベル省略)

ラベル省略ボタン

「D. 異なる複数の操作」に該当し、ボタンを配置するスペースを十分確保できないときに使用します。

要素説明
アクションボタンSecondaryButtonアイコンのみタイプで「その他の操作」アイコン(fa-ellipsis-h)を使用します。ラベルは視覚的に省略しますが、必ず代替テキストを含めて何のボタンなのかを伝えるようにしましょう。
ドロップダウン「D. 異なる複数の操作」と同様です。
次へ