SaaS・業務
業務画面の操作を、速く・迷わなくする。
業務画面の操作を速く・迷わなくする部品のカテゴリ。インライン編集、カンバン D&D、⌘K のコマンドパレット、ドラッグで幅を変える分割ビュー、一括選択と操作バー、変更差分ビュー、通知センター、ショートカット一覧、アバターグループがある。原則はプログレッシブ・ディスクロージャ。一括操作バーは1件選んだときだけ現れ、ショートカット一覧は「?」で呼び出すように、熟練者向けの操作は初見の画面には出さず、必要になった瞬間に出す。毎日使う画面で「操作が多すぎて重い」か「熟練者が速く動けない」のどちらかが起きたときに引く。
使い分け値の修正は inline-edit、複数行の処理は bulk-select、どこからでも操作を呼ぶなら command-palette（shortcut-help を必ず対にする）。状態の移動は kanban-dnd、比較は diff-view / split-view。notification-center は既読で未読数が減る形にする。
まず見る3件
- 入力
インライン編集
Inline Editing
テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。
- 表示テキスト自体を button にする。span にクリックを付けると Tab で辿り着けず、編集できる人が限られる
- ホバーで破線の下線を出して「押せる」を予告する。常時出すと入力欄に見え、出さないと発見できない
- 開始時に入力欄へフォーカスして全選択する。カーソルが末尾に置かれると打ち直しに Backspace 連打が要る
- JS
- クリック
コマンドパレット解説あり
Command Palette
ボタンまたは ⌘K／Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。
- 開くボタンと ⌘K の両方を用意する。ショートカットだけだと存在に気づけず、ボタンだけだと熟練者が遅い
- 絞り込むたびに先頭の候補をアクティブにする。打ってすぐ Enter で最有力を実行でき、矢印キーが要らない
- 入力欄は role=combobox＋aria-activedescendant で「今どの候補か」を伝える。見た目の背景色だけでは読めない
- JS
- クリック
一括選択
Bulk Selection
行チェックボックスと「全選択」で複数行を選び、1件以上選択すると削除・複製の一括操作バーがスライドインする。
- 操作バーは選択が 1 件以上のときだけ出す。常設すると「何を消すのか」が無い状態で削除が押せてしまう
- 隠したバーは transform／opacity だけでなく inert と visibility:hidden も付ける。見えないボタンに Tab が入る
- 全選択は checked と indeterminate の 3 状態にする。一部だけ選んだときに「全選択」が空のままだと嘘になる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| インライン編集 Inline Editing | 入力 | JS | 設定画面・詳細画面で 1 項目ずつ直したい業務 UI・一覧の行内でタイトルや担当を書き換える場面 | default / hover / focus |
| カンバン D&D Kanban Board | ドラッグ | JS | タスク・案件を段階で管理する業務ボード・列間の移動が主操作の少量カード | default / active |
| コマンドパレット Command Palette | クリック | JS | 機能が多く名前で直接呼びたい SaaS の管理画面・⌘K の慣習を知る熟練ユーザー向けツール | default / hover / active / empty |
| 分割ビュー Resizable Split View | ドラッグ | JS | ツリー＋エディタなど 2 ペインの作業画面・利用者が左右の広さを自分で決めたいツール | default / hover / focus / active |
| 一括選択 Bulk Selection | クリック | JS | 一覧から複数行を選んで削除・複製する管理画面・全選択と部分選択を区別したいテーブル | default / hover / active |
| 変更差分ビュー Diff View | クリック | JS | 設定・記事の変更前後を確認する承認画面・版管理の履歴比較 | default / active |
| 通知センター Notification Center | クリック | JS | アプリ内通知をヘッダーからまとめて見せる SaaS・未読数を常に見せたいダッシュボード | default / hover / active |
| ショートカット一覧 Keyboard Shortcut Overlay | クリック | JS | ショートカットが多いエディタ・管理画面・? キーの慣習を採るツール | default / hover |
| アバターグループ Avatar Group | ホバー | JS | 共同編集者・参加者を省スペースで示すヘッダー・人数が 5〜10 人で全員を見せたい場面 | default / hover / focus / active |
すべての見本（9件）
- 入力
インライン編集
Inline Editing
テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。
- JS
- ドラッグ
カンバン D&D
Kanban Board
カードを「ToDo／進行中／完了」の列間でドラッグして移動できる。Pointer Events で実装しタッチ操作にも対応。矢印キーでも移動できる。
- JS
- クリック
コマンドパレット解説あり
Command Palette
ボタンまたは ⌘K／Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。
- JS
- ドラッグ
分割ビュー
Resizable Split View
中央の仕切りをドラッグして左右ペインの幅を自由に変えられる。Pointer Events で実装しタッチ操作にも対応。
- JS
- クリック
一括選択
Bulk Selection
行チェックボックスと「全選択」で複数行を選び、1件以上選択すると削除・複製の一括操作バーがスライドインする。
- JS
- クリック
変更差分ビュー
Diff View
変更前後のテキストを行単位で比較し、追加行を緑・削除行を朱でハイライト表示する。+/− 記号付きでひと目で差分を把握できる。
- JS
- クリック
通知センター
Notification Center
ベルアイコン（未読バッジ付き）をタップすると通知リストのパネルが開く。各通知をタップして既読化すると未読数が減る。
- JS
- クリック
ショートカット一覧
Keyboard Shortcut Overlay
「?」ボタン（または ? キー）でキーボードショートカット一覧のオーバーレイを表示。kbd 風のキー表示で見やすく整理する。
- JS
- ホバー
アバターグループ
Avatar Group
共同編集者のアイコンが少しずつ重なって並び、末尾に「+N」で残数を表示。ホバー/タップで扇状に広がって全員が見える。
- JS