operational-expert-tool-ui

運用担当者向けエキスパートツールの UI

運用担当者向けエキスパートツールとは、倉庫作業員、配車担当者、プランナー、アナリストなど、専門分野の訓練を受けた担当者が主な作業画面として使うソフトウェアです。多くの場合、勤務時間のほぼ全体を通して使用します。これらのユーザーは、製品を初めて試す初心者ではありません。ツールを道具として、定められた業務を遂行するプロフェッショナルです。

これは、コンシューマー向けソフトウェアや、たまに使う SaaS とは根本的に異なる設計の文脈です。設計上の優先事項は逆転します。見つけやすさや視覚的なゆとりよりも、情報密度と操作速度が優先されます。

---

主な設計原則

1. 余白よりも情報

エキスパートユーザーは、状況を把握するための余裕を必要としません。ツールを使い慣れているからです。何も表示されていないピクセルはすべて、業務に必要なデータを表示できる機会を逃していることになります。

• データテーブルにはコンパクトな行の高さ（28～36px）を使用します
• 補助属性（ステータス、タイプ、日付）は、ホバー時や詳細パネルではなく、行内に表示します
• アイコンだけよりもテキストラベルを優先します。エキスパートは素早く読み取るため、アイコンだけの UI は細かな場面で操作を遅らせます

2. 直線的なワークフロー

エキスパートツールは、定められた一連のタスクを完了するために使われ、情報を閲覧するためのものではありません。タスクのメンタルモデルに合わせて、左から右、または上から下へと、ワークフローの順序を反映したレイアウトにします。

[Step 1: Select items]  →  [Step 2: Configure]  →  [Step 3: Execute]

現在のコンテキストから離れたり、メニューの背後に隠れた項目を探したりしなくても、どの時点でも次のステップが明確にわかる UI にします。

3. 状態の保持

フィルター、列幅、表示モード、パネルの開閉状態は、作業担当者の業務コンテキストの一部です。ユーザーが明示的にリセットしない限り、ページを再読み込みしても保持され、セッション間でも一貫している必要があります。

アクセスするたびに UI をリセットしないでください。エキスパートは、自分のワークフローに合わせて設定するために時間をかけています。

---

階層型アコーディオンテーブル

多くの運用分野には、自然な階層構造を持つデータがあります。注文には明細があり、ルートには停留所があり、プロジェクトにはタスクがあります。適切なパターンは、別ページへドリルダウンすることではなく、同じ場所で展開するアコーディオンです。

▶ Order #1042   ACME Corp    3 lines    Pending
▼ Order #1089   Globex       2 lines    Ready
    ├─ Line 1   Widget A    Qty: 12    ✓ In stock
    └─ Line 2   Widget B    Qty:  4    ✗ No stock
▶ Order #1091   Initech      5 lines    Pending

ページ遷移よりもアコーディオンが適している理由：

• コンテキストが維持され、作業担当者は複数の注文を同時に確認できます
• 戻る操作をしなくても、同じ階層にある項目のステータスを確認できます
• キーボードナビゲーション（矢印キーでの展開／折りたたみ）により、キーボードから手を離さずに操作できます

行ごとの対象切り替え： 計画や準備のワークフローでは、各行を一括操作の対象に含めるか、除外するかを明示的に指定する必要がある場合があります。ホバー時にだけ表示するのではなく、常に表示されるチェックボックスまたは切り替えスイッチを各行に配置します。

---

一目でわかるステータス表示

作業担当者はステータスに基づいて判断します。ステータスは、操作しなくても見えるようにします。

適切な例	避けるべき例
行に常に表示される色付きのドットまたはピル	ホバー時またはツールチップ内でのみ表示されるステータス
色で明確に区別できる2～3種類のステータス	5色を超えるステータス色（覚えにくくなります）
アクセシビリティのために、色の横にステータスラベルを表示する	色だけを唯一の目印にする
ツール全体で色の意味を統一する	テーブルごとに同じ色の意味を変える

ステータスの色の慣例は、status-colors-and-errors に合わせる必要があります。準備完了／完了は緑、警告／保留中は琥珀色、エラー／ブロック中は赤、非アクティブはグレーです。

---

ワークフロー状態フィルターと検索フィルター

エキスパートツールでは、多くの場合、UI 上で異なる方法で扱うべき2種類のフィルターがあります。

ワークフロー状態フィルターは、データセットを作業担当者の現在の作業範囲に絞り込みます。状態が保持され、対象範囲は広く、「今日の注文のうち、まだ割り当てられていないものを処理する」といった判断を表します。常に表示される固定のフィルターバーまたはサイドバーに配置します。

検索フィルターは、現在の対象範囲内から特定の項目を探します。一時的なものです。すぐにクリアできる検索入力欄に配置します。

これらを単一のフィルター UI にまとめないでください。作業担当者は、「どの範囲の作業に取り組むのか」と「特定の項目はどこにあるのか」で、考え方を切り替えます。

[Workflow scope: Today ▾]  [Status: Unassigned ▾]  [Stock: Available ▾]
                                                     ↑ Persistent workflow-state filters

    Search within scope: [___________]
                                                     ↑ Transient search

---

キーボード操作

熟練ユーザーはキーボードショートカットを覚えます。必須にする必要はありませんが、習熟したユーザーの作業効率を大幅に高めます。

• 矢印キーでテーブルの行を移動します
• スペースキーまたは Enter キーでアコーディオンの行を展開します
• Escape キーで開いているパネルまたはダイアログを閉じます
• よく使う操作には、見つけやすいショートカットを用意します（ツールチップに表示：Delete [Del]、Include [Space]）

操作への唯一のアクセス手段として右クリックのコンテキストメニューに頼らないでください。見つけにくく、キーボードだけで操作するワークフローの妨げになります。

---

大規模操作のフィードバック

一度に多数の項目に影響する操作（一括割り当て、大量のステータス更新）では、操作規模に応じたフィードバックが必要です。

• 約10件未満の場合：インラインの確認で十分です
• 10～100件の場合：件数を含むトースト通知（「42件の注文を更新しました」）
• 100件以上の場合：操作中は進行状況インジケーターを表示し、完了時に概要を表示します

フィードバックなしで一括操作を完了してはなりません。熟練ユーザーは、操作が反映されたことを確認する必要があります。

---

レビューチェックリスト

• 習熟した日常的なユーザーに適した情報密度になっていますか（コンパクトな行、インラインのステータス）？
• レイアウトはワークフローの順序（左から右、または上から下へのタスクの流れ）を反映していますか？
• フィルター、表示モード、開いているパネルはセッションをまたいで保持されますか？
• 階層データは別ページではなく、その場で展開するアコーディオンとして表示されていますか？
• 行ごとの対象選択コントロールは、ホバー時に隠れず常に表示されていますか？
• ステータスインジケーターは操作せずに常に確認できますか？
• ワークフロー状態のフィルターは、一時的な検索フィルターと分けられていますか？
• よく使う操作にキーボードでアクセスできますか？
• 一括操作のフィードバックは、影響を受ける項目数に応じて調整されていますか？