業務システムの画面デザイン｜使われる管理画面にするために発注側が決めること
業務システムや管理画面を作るとき、デザインの話になると配色やアイコン、今風の見た目に目が向きがちです。しかし、管理画面のデザインで本当に差が出るのは、毎日使う担当者が迷わず、速く、間違えずに作業できるかどうかです。見た目が整っていても、探したいデータにたどり着けない画面は使われなくなり、結局Excelや紙の運用に戻ってしまいます。
業務システムのUIデザインは、Webサイトのデザインとは評価の軸が違います。Webサイトは初めて訪れた人に伝わるかが重要ですが、管理画面は同じ人が同じ操作を何百回も繰り返します。1回あたり数秒の遅さや、1画面に1つある紛らわしい表示が、積み重なって大きな負担になります。
そして、使われる画面になるかどうかは、開発会社のデザイナーの腕だけでは決まりません。誰がどの頻度でその画面を使うのか、1日に何件処理するのか、間違えたときに何が起きるのか。こうした情報は発注側にしかなく、伝えなければ画面に反映されません。
この記事では、業務システムの画面で使われる・使われないを分ける要素を、一覧、検索、入力の流れ、エラー表示、権限ごとの表示に分けて整理します。そのうえで、発注時に決めておくこと、画面一覧とワイヤーフレームの確認の仕方を説明します。
管理画面のデザインで差が出るのは見た目より作業の速さ
管理画面のデザインを評価するときは、「きれいかどうか」ではなく「1件の作業が何クリック、何秒で終わるか」「間違いがどのくらい起きにくいか」で見ます。業務画面は、突き詰めると一覧で探す、詳細を見る、入力・更新する、集計を見る、という操作の組み合わせです。この基本の操作が速く確実にできることが、使われる画面の条件になります。
使われなくなる管理画面には、いくつか共通点があります。
- 一覧に必要な項目が出ておらず、1件ずつ詳細を開かないと判断できない
- 検索条件が多すぎる、または少なすぎて、目的のデータが絞り込めない
- 入力の途中でエラーになると、それまでの入力が消える
- どの項目が間違っているかがエラー表示から分からない
- 権限に関係なく全員に同じメニューが出ており、触ってはいけないボタンが押せてしまう
どれも配色やフォントの問題ではありません。業務の流れと画面の構成が合っていないことが原因です。逆に言えば、見た目は既製の部品を組み合わせた標準的なものでも、業務の流れに沿っていれば十分に使われます。
見た目の統一には、公開されているデザインシステムを参考にする方法もあります。たとえばデジタル庁は、デザイン言語、UIコンポーネント、ユーザビリティとアクセシビリティを踏まえたガイドラインから構成される「デジタル庁デザインシステム」を公開しています。ボタンやフォームの見た目を一から決める手間を減らし、その分の検討時間を業務の流れの設計に回すという考え方です。
一覧と検索の画面で使われるかどうかが決まる
管理画面でもっとも長く開かれているのは、多くの場合一覧画面です。一覧の出来が悪いと、どれだけ入力画面を作り込んでも使われません。
一覧に出す項目は「そこで判断できるか」で決める
一覧に出す項目は、「この一覧を見て、担当者が次に何をするかを決められるか」で選びます。たとえば受注の一覧なら、受注番号と顧客名だけでなく、納期、ステータス、担当者が出ていれば、詳細を開かずに今日対応すべきものが分かります。逆に、データベースの項目を全部並べると横に長くなり、必要な情報が埋もれます。
一覧について発注時に決めておきたいのは次の点です。
- 初期表示の並び順（新しい順、期限の近い順、ステータス順など）
- 1ページあたりの表示件数と、ページ送りか無限スクロールか
- 行の色やアイコンで区別したい状態（期限切れ、未承認など）
- 一覧から直接できる操作（一括承認、CSV出力、ステータス変更など）
検索は「よく使う条件」を前に出す
検索画面でよくある失敗は、すべての項目で検索できるようにしてしまうことです。検索項目が20個並ぶ画面は、作る側には親切に見えますが、使う側はどれを入れればよいか迷います。実際の業務で使う条件は数個に限られることが多いので、よく使う条件を上に、まれに使う条件は「詳細条件」として折りたたむ形にすると、迷いが減ります。
また、「今日対応が必要なもの」「自分が担当のもの」のように、毎回同じ条件で検索しているなら、検索画面ではなくメニューやタブとして用意する方が速くなります。業務の入口から画面を組み立てる考え方です。発注側は、現在の業務で「どんな条件で探しているか」を具体的に書き出して渡すと、検索画面の設計が的確になります。
入力の流れとエラー表示で手戻りを減らす
入力画面で大切なのは、紙の伝票やExcelの並びをそのまま再現することではなく、入力する人が情報を手に入れる順番に合わせることです。電話を受けながら入力するのか、届いた書類を見ながら入力するのかで、項目の並びは変わります。
入力の流れで確認すること
- 項目の並びが、情報を手に入れる順番と一致しているか
- 前回の値、顧客マスタ、選択肢などから自動で入る項目を増やせないか
- 同じ情報を2回入力させていないか（請求先と送付先が同じ場合など）
- キーボードだけで次の項目に移れるか（大量入力がある画面の場合）
- 途中で保存できるか、一時保存が必要な業務か
同じ情報の再入力を避けることは、アクセシビリティの観点でも重視されています。W3CのWCAG 2.2では「Redundant Entry（重複入力）」が新しい達成基準として加えられ、同じ手続きの中で以前に入力した情報は、自動で入力されるか選択できるようにすることが求められています。社内向けの管理画面でも、考え方はそのまま使えます。
エラー表示は「どこを、どう直すか」まで出す
エラー表示が不親切な画面は、問い合わせと手戻りを生みます。画面上部に「入力内容に誤りがあります」とだけ出る表示では、どの項目が問題なのか探す手間がかかります。業務画面のエラー表示は、次の3点を満たすようにします。
- エラーのある項目のすぐ近くに表示する
- 何が問題で、どう直せばよいかを書く（「日付の形式が違います」ではなく「2026/11/02の形式で入力してください」）
- エラーが出ても、それまでの入力内容を消さない
入力時点でチェックするか、保存ボタンを押したときにまとめてチェックするかも決めておきます。項目ごとに即座にチェックすると早く気づけますが、入力の途中で赤い表示が次々に出ると煩わしく感じる人もいます。入力量が多い画面ほど、どちらにするかを利用者と一緒に試して決めると失敗が少なくなります。
もう一つ重要なのが、取り消せない操作の扱いです。削除、確定、送信など、実行すると戻せない操作には確認の表示を出し、可能であれば一定時間内の取り消しや、削除ではなく無効化で残す設計を検討します。間違えたときに何が起きるかは発注側の業務知識がないと判断できないので、操作ごとの影響を伝えておきます。
参考：Web Content Accessibility Guidelines (WCAG) 2.2／W3C
権限ごとに表示を変えると迷いと事故が減る
業務システムには、入力担当、承認者、管理者、閲覧のみの人など、立場の違う利用者がいます。全員に同じ画面を見せると、使わないメニューやボタンが増えて迷いやすくなり、権限のない操作を試みてエラーになる場面も増えます。
権限ごとの表示には、大きく分けて3つの段階があります。
| 段階 | 内容 | 向いている場面 |
|---|---|---|
| メニュー単位で出し分ける | 権限のない画面はメニューに出さない | 部署ごとに使う機能がはっきり分かれている |
| 操作単位で出し分ける | 同じ画面でも、承認ボタンや削除ボタンは権限のある人にだけ出す | 入力者と承認者が同じ一覧を見る |
| データ単位で出し分ける | 自分の部署や担当のデータだけを表示する | 拠点や取引先ごとに見せてよい範囲が違う |
注意したいのは、画面に表示しないことと、操作を禁止することは別だという点です。ボタンを隠しても、サーバー側で権限を確認していなければ、URLを直接開くなどの方法で操作できてしまう場合があります。見た目の出し分けと、サーバー側の権限チェックの両方が行われているかを、受入テストで確認します。
発注時には、利用者の種類ごとに「見てよい画面」「できる操作」「見てよいデータの範囲」を表にしておくと、開発会社との認識が揃います。人事異動や兼務がある会社では、1人に複数の権限を持たせられるか、権限の変更を誰が行うかも決めておきます。
発注時に決めておくことと画面の確認の仕方
ここまでの要素を画面に反映するには、発注側が業務の情報を整理して渡す必要があります。見た目の好みより先に、次の3つを用意します。
誰が、どの頻度で使う画面かを書き出す
画面ごとに、使う人、頻度、1回あたりの処理件数、使う場所と端末を書き出します。毎日100件を処理する画面と、月に1回設定を変える画面では、作り込むべき度合いがまったく違います。開発の予算が限られているなら、使用頻度の高い画面に工数を寄せ、頻度の低い設定画面は標準的な作りで済ませる、という配分ができます。
| 画面の使われ方 | 重視すること |
|---|---|
| 毎日、大量に処理する | キーボード操作、一覧での一括処理、自動入力 |
| 毎日、少数を確認・承認する | 一覧での判断のしやすさ、承認までのクリック数 |
| 月に数回、設定を変える | 間違えにくさ、変更履歴、確認表示 |
| 外出先のスマートフォンで使う | 表示項目の絞り込み、片手で押せるボタンの大きさ |
画面一覧で抜けと重複を確認する
画面一覧は、システムにある画面をすべて並べ、それぞれの目的、利用者、主な操作を1行ずつ書いた表です。開発会社が作成する場合も、発注側は「業務の中でこの画面はいつ使うのか」を1画面ずつ確認します。業務の流れを追って画面をたどったときに、使う画面がない場面や、同じ目的の画面が2つある場面が見つかれば、その時点で修正できます。
パソコンとスマートフォンのどちらで使うかを決める
管理画面をスマートフォンでも使えるようにするかどうかは、費用と使い勝手の両方に影響します。パソコンの広い画面で一覧と詳細を並べて見る作業と、外出先で承認ボタンを押すだけの作業では、必要な画面がまったく違います。すべての画面をスマートフォンに対応させるのではなく、外出先で本当に使う操作だけを選んで対応させる方が、費用を抑えつつ使いやすくなります。たとえば、承認、在庫の確認、日報の入力のように、現場や移動中に行う作業を洗い出しておくと、対応させる画面を絞り込めます。
ワイヤーフレームは実際の業務で試す
ワイヤーフレームは、色や装飾を省いて、項目の配置と画面の流れだけを示した設計図です。確認するときは、画面を眺めて感想を言うのではなく、実際の業務の1件を思い浮かべて、最初から最後まで操作をなぞります。
- 先週実際に処理した案件を1件選び、その情報で入力を最後までなぞる
- 例外的な案件（キャンセル、分割納品、差し戻しなど）でも同じようになぞる
- 実際にその画面を使う担当者に見てもらう（管理職だけで確認しない）
- クリックで画面遷移できるモックアップがあれば、それで操作してもらう
確認の結果は、「この操作はどの画面で行うか」「この項目はなぜ必要か」の形で記録しておくと、開発会社への修正依頼が具体的になります。「使いにくい」「分かりにくい」といった感想だけでは、どこをどう直せばよいかが伝わりません。どの作業で、どの項目を探すのに時間がかかったのか、どの操作で迷ったのかまで書くと、修正の方向が明確になります。
この段階で出た指摘は、開発に入ってからの修正より小さな手間で反映できます。デザイン（色や装飾）の確認は、ワイヤーフレームで流れが固まったあとに行うと、手戻りが少なくなります。
まとめ
管理画面のデザインで使われるかどうかを分けるのは、見た目の新しさではなく、一覧で判断できるか、よく使う条件ですぐ探せるか、入力の流れが業務と合っているか、エラーから直し方が分かるか、権限に応じて必要なものだけが見えるか、という点です。
これらを画面に反映するには、発注側が「誰が、どの頻度で、どんな件数を処理するか」を画面ごとに書き出し、画面一覧で抜けと重複を確認し、ワイヤーフレームを実際の業務の1件でなぞることが必要です。明日からできることとしては、現在の業務で最も頻繁に行っている作業を1つ選び、その手順と探し方、よくある間違いを書き出しておくことです。それが、開発会社に渡す画面設計の一番の材料になります。