ナビゲーション設計標準｜メニュー・パンくず・タブの使い分け

業務システムのナビゲーション設計が難しいのは、機能数が多いのに、1人の利用者が使うのは1割程度という構造にあります。全機能を平等に並べると、自分に関係ない項目を毎回読み飛ばすことになります。

メニュー階層は3段まで

推奨する階層構成

4段目が必要になった時点で、それは階層の問題ではなく 検索で解決すべき問題 です。メニュー内検索（機能名で絞り込む入力欄）を用意してください。数百機能あるシステムでは、階層をたどるより検索のほうが速くなります。

実務のコツ

利用頻度は人によって偏ります。「よく使う機能」をユーザーごとにピン留めできる仕組みを1つ入れるだけで、階層設計の粗さはかなり吸収できます。

利用者が迷う原因のほとんどは「今どこにいるか分からない」ことです。次の3か所を必ず一致させてください。

ブラウザのタブタイトルは軽視されがちですが、業務システムでは複数タブを開いて並行作業するのが普通です。全部同じタイトルだと、タブの切り替えコストが跳ね上がります。

販売管理システム

◯

受注入力 - 受注No.20260728-001 | 販売管理

同じ受注データに対する「基本情報／明細／履歴／添付」のような切り替えに使います。タブをまたいで1回で保存できるのが原則です。タブごとに保存が必要な設計は、保存漏れを量産します。

「詳細条件」「オプション設定」など、普段は不要な項目に使います。必須項目をアコーディオン内に隠さないこと。開かないとエラーの原因が見えない状態になります。

一覧 → 詳細 → 編集のように、工程が切り替わる場合はURLを変える画面遷移にします。URLが変われば、ブックマーク・共有・タブ複製がすべて機能します。

業務システムで最も回数の多い移動は「一覧 → 詳細 → 一覧に戻る」です。ここが重いと、体感速度が大きく落ちます。

実装上の注意

行クリックを onclick だけで実装すると、Ctrl+クリックでの別タブ表示・中クリック・右クリックのメニューがすべて効かなくなります。遷移は必ず <a href> をベースにしてください。

業務システムでよくある事故が、ブラウザの戻るで二重登録が発生するケースです。

避けるべき設計

登録処理は POST後にリダイレクト（PRGパターン）で完了画面へ遷移させ、完了画面から戻っても再送信されない状態にします。

入力途中に別の機能へ移動しようとしたら、必ず警告を出します。

補足

変更がないのに毎回警告が出る実装は、利用者を「警告を読まない人」に育ててしまいます。本当に変更があるときだけ出すことが、警告の価値を保つ条件です。