アクションシート

Action sheet

別名: アクションシート、選択肢シート、Action sheet、iOS action sheet

生態(さわってみる)

一言定義

画面下端から現在の操作に関連する選択肢のリストをせり上げて表示し、1つを選ばせるiOS由来のオーバーレイUI。

分類

使う場面

  • 共有・複製・削除など、2〜4個程度の関連アクションから1つを選ばせたいとき
  • 選択肢の中に取り消し不能な破壊的操作を含み、視覚的に区別して見せたいとき

避ける場面

  • 選択肢に収まらない自由な内容(フォームや詳細情報)を表示したいとき(→ボトムシート)
  • PC幅でカーソル位置の近くに小さく出す方が自然なとき(→コンテキストメニュー)

近縁種との比較

ボトムシートとはどちらも画面下端からせり上がる点で似ているが、Apple HIGのAction sheetが現在のアクションに関連する選択肢リストに用途を絞るのに対し、Material Design 3のBottom sheetは任意のコンテンツを自由に配置できる汎用コンテナである、という設計思想の違いがある。本図鑑ではこの区別に沿って両者を別カードとして扱い、選択肢のみを並べる場面ではアクションシートを、フォームや詳細情報など自由な内容を載せる場面ではボトムシートを使う。ドロワーも同じオーバーレイ層のUIだが、ナビゲーション項目を画面端からスライド表示する用途に使われるのに対し、アクションシートは1回限りの操作選択に用途を絞る点で異なる。

実例リンク

アクセシビリティ

role
選択肢の並びはWAI-ARIA APGのメニューボタンパターンに倣いrole="menu"/"menuitem"とする(1回選んだら閉じる一過性の操作リストのため)。値をトグルし続ける設定リストならrole="listbox"/"option"の方が適する場面もある
キーボード操作
矢印キーで項目間を移動、Enter/Spaceで実行、Escでキャンセルして呼び出しボタンへフォーカスを戻す
補足
破壊的操作(削除など)は視覚的に警告色にしつつ、既定フォーカスにはしない(誤操作の防止)