社内管理画面のデザイン：チームが一度でわかる画面

要点

社内管理画面のデザインとは、自社のチームが毎日使うWebシステム（注文、在庫、対応、経理）の配置で、初見の印象ではなく、繰り返す作業のために組むものです。サイトや店舗との違いは、使う人がそこにいることを選んでいない点です。仕事をするために管理画面が必要で、一日に何度も開きます。大事なのは、記録をすぐ見つけること、誤りなく入力すること、各件の状態を推測なしで見ること、今何をすればよいかわかることです。この作業のほとんどは四つの画面に集まります。表、フォーム、ステータス付きの詳細、最初の画面です。以下では、Nielsen Norman Groupの調査とW3Cのアクセシビリティの規則に基づき、それぞれに何が必要か、コードにする前にチームとどう確かめるかをまとめます。

1. 社内管理画面のデザインはサイトのデザインではない

サイトは、初めて来た人を納得させる必要があります。社内管理画面は、毎日戻ってくる人の役に立つ必要があります。これでデザインの優先順位が変わります。

• 使う速さは見た目より重い。 一日中繰り返す作業でクリックが一つ増えると、月末には大きな時間のロスになります。
• 密度は許容できる。 チームはものの場所を覚えます。列の多い表のほうが、画面を三つに分けるよりよいことがあります。
• 一貫性は新しさより価値がある。 保存ボタンの位置が画面ごとに変わると、人は間違えます。
• 誤りは高くつく。 住所の違う注文、在庫の二重引き落とし、別の顧客への割引。デザインは、あとから知らせるだけでなく、防ぐ側に立つ必要があります。

まだ管理画面が必要かどうか決めているなら、スプレッドシートをシステムに置き換えるときの記事がその判断を扱います。ここでは、管理画面は作る前提で、画面をどう設計するかを見ます。オーダーメイドのシステムと管理画面のページでは、このデザインの仕事がプロジェクト全体のどこに入るかを示しています。

2. 画面の前に、作業から始める

いちばん多い誤りは、その画面で人が何をするかを知らないまま「注文の画面」を描き始めることです。Figmaを開く前に、誰が使い、その人が何を片づける必要があるかの短い一覧を作ります。

注文の管理画面の例です。

1. 対応： 電話してきた顧客の注文を見つけ、ステータスを見て、返事をする。
2. 出荷： 今日の支払い済み注文を見て、ピッキングし、一括で発送済みにする。
3. 経理： 一致しなかった入金を確認し、解決済みにする。
4. 管理者： 遅れているものと、誰が何を持っているかを見る。

この一覧の各行が、画面の決定になります。対応にはよい検索が必要です。出荷には保存済みフィルタと一括操作が必要です。経理には比較が必要です。管理者には、普通でないものが載った最初の画面が必要です。一覧がなければ、管理画面はデータベースの鏡になります。すべての列、すべての欄、優先順位なしです。

一つの画面に、主な仕事は一つ

各画面には主な仕事が一つあり、その仕事はスクロールせずに見えるべきです。副次的な操作はメニューに置けます。Nielsen Norman Groupのミニマルなデザインのヒューリスティクスは、ほとんど誰も使わない情報や、関係のない情報を界面に置かない、と言います。管理画面では、いつも使うものは視界に置き、月に一度使うものはワンクリック先に置きます。

3. 表：チームが一日を過ごす画面

ほとんどの管理画面で、いちばん使われる画面は表形式の一覧です。Nielsen Norman Groupは、データテーブルの使い方を四つの作業に分けています。条件で記録を見つける、データを比べる、行を見る・編集する・追加する、記録に対して操作する。よく設計された表は、この四つを楽にします。

見つける

• 最初の列は、人が認識できるもの。 Nielsen Norman Groupの勧めは、システムが生成したコードではなく、読める識別子です。メールに出る顧客名や注文番号であり、データベースの内部IDではありません。
• 列の順は、使う人にとっての重要さであり、欄を作った順ではありません。
• 検索は、手元にあるものを受け付ける。 名前、電話、注文番号、一部のCPF。正確なコードでしか動かない検索は、対応の役に立ちません。
• その日の見え方を、保存したフィルタにする。 「支払い済みで未発送」「遅延」「自分の担当」。出荷が毎朝同じフィルタを組み直す必要はないはずです。

比べる

• 表が長いときはヘッダーを固定する。 スクロールしても、どの列かがわからなくならないためです。Nielsen Norman Groupは、大きな表では行と列のヘッダーを固定するよう勧めています。
• 行を目で追う助け。 薄い罫線、交互の行、マウスを乗せたときの強調。
• 数値は右揃えで、桁をそろえる。 値を目で比べられるようにします。
• 列の非表示と並べ替えを、少ない手間で。 同じ表を別の役割が使うときです。

見て、編集する

記録を、表全体を覆う窓で開くと、閉じて戻り、次を開くことになります。Nielsen Norman Groupは、一覧を隠さずに詳細を出す非モーダルのサイドパネルを検討するよう勧めています。続けて複数の記録を確認する人には、往復が大きく減ります。

操作する

同じ操作が複数の記録で繰り返されるとき（発送済みにする、誰かに割り当てる、書き出す）は、チェックボックスと一括操作を使い、今のフィルタにあるものをすべて選ぶ近道を置きます。それがないと、人は同じ操作を行ごとに繰り返します。

4. フォーム：見えるラベルと、欄のそばのエラー

フォームは、誤ったデータがシステムに入る場所です。フォームのデザインは、データベースの検証より前の、最初の防御です。

ラベルと説明

W3CのWCAG達成基準3.3.2は、人が何かを入力するときは必ずラベルまたは説明を置くよう求め、欄に独自の規則があるときは形式も含みます。実務では次のとおりです。

• ラベルは欄の上か横に、いつも見える。 欄の中の例文（プレースホルダー）は入力を始めると消え、ラベルの代わりにはなりません。
• 形式は、エラーの前に説明する。 欄の下に「日付は日/月/年」と書けば、エラーメッセージを避けられます。
• 必須欄は文字か記号で示す。 色だけにはしません。
• 話題ごとにまとめる。 顧客データ、住所、支払い。まとまりのない長いフォームは、実際より大きく見えます。

知らせる前に、防ぐ

Nielsen Norman Groupのエラー予防のヒューリスティクスは、よいエラーメッセージは大事だが、丁寧なデザインは問題が起きる前に止める、と思い出させます。社内管理画面では、選択肢がわかっているときは自由入力ではなく一覧、いちばん多い値であらかじめ埋まった欄、最低限が埋まるまで保存ボタンを押せないこと、戻せない操作の前の明確な確認、を指します。

役に立つエラーメッセージ

Nielsen Norman Groupのエラーメッセージの指針が求めるものは次です。

• 問題のある欄のそばにメッセージを置く。画面の上部だけにしない。
• システムのエラーコードではなく、人の言葉。
• 問題の正確な説明と、直すために何をするか。
• 入力した人を責めない、中立的な調子。
• すでに入力した内容を残す。 最初からやり直させない。

長い流れは、一つずつ

チームがめったに作らない長い登録（新しい仕入先を開く、複雑な商品を設定する）は、段階に分ける価値があります。英国政府のデザインシステムは、1ページに質問を一つにするよう勧めています。何を聞かれているかがわかり、その答えに集中できるからです。毎日の繰り返し作業では、一つにまとまりよく組んだフォームのほうが速いことが多いです。

チームが、一度ではわからないシステムに長い登録を入力しているなら、業務と、使っている人数を送ってください。作業のために描いた管理画面が要るか、今あるものの調整で足りるかをお伝えします。

プロジェクトを相談

5. ステータスと色：色だけにはしない

社内管理画面はステータスで動きます。支払い済み、保留、発送済み、遅延、キャンセル。それを緑、黄、赤の点だけで表すことがよくあります。色がよく見え、凡例を覚えている人には働きます。それ以外には失敗します。

WCAGの達成基準1.4.1は、色を情報を伝える唯一の視覚手段にしてはならない、と言います。W3C自身が、必須欄だけを赤く塗る例を挙げています。ステータスの実務上の規則は次です。

• 文字のラベル（「遅延」「支払済み」）を置き、色は補強にする。
• 場所が狭いときは、状態ごとに違うアイコン。
• ラベルの文字に十分なコントラスト。 達成基準1.4.3は通常の文字に4.5:1を求めます。黄色の上の白文字は、ほとんど通りません。
• 状態は少なく。 ステータスの色が多すぎると、どれが何か誰も覚えません。まとめるか、文字を使います。

記憶ではなく認識するヒューリスティクスも同じ方向です。人ができることを見えるようにし、暗記させません。覚えなければならない色の凡例は、その逆です。

6. システムは応える：読み込み中、保存済み、エラー

Nielsen Norman Groupの最初のヒューリスティクスは、システムの状態が見えることです。人は、今何が起きているかを知る必要があります。社内管理画面でこれがないと、保存ボタンの連打、記録の重複、「保存されたのか、されていないのか」という質問になります。

Jakob Nielsenは、何を出すかを決める助けになる応答時間の三つの限界を述べています。

• 0.1秒までは、応答が瞬間に感じられます。結果を出せば足ります。
• 1秒までは、待ちは感じますが、思考の流れは途切れません。
• 10秒前後が、注意を保つ限界です。それを超えたら、進捗の表示が勧められます。

デザインの実務では次のとおりです。

• クリックすると状態が変わるボタン（「保存中...」）で、終わるまで押せなくし、二度押しを避ける。
• 保存のあとの見える確認を、人がいた場所のそばに置き、読む前に消さない。
• 時間がかかる取り込み、書き出し、一括操作には進捗バー。
• 空の画面は説明する。 「今日の遅延した注文はありません」は、読み込みエラーかもしれない白紙の表とは違います。

7. 最初の画面：今やることは何か

多くの管理画面は、最初の週のあと誰も見ないグラフだらけの経営ダッシュボードで開きます。仕事のために管理画面を使う人にとって、最初の画面が答える問いは一つです。今、自分の注意が必要なものは何か。

• グラフより先に、作業の列。 「ピッキングする支払い済み注文」「未確認の入金」。それぞれ当日の件数と、絞り込んだ一覧への直接リンク。
• 例外を前に出す。 遅延、止まったもの、エラー。普通のものは叫ぶ必要がありません。
• 役割が大きく違うときは、役割ごとの最初の画面。 管理者と出荷が同じものを見る必要はありません。
• グラフは、判断の助けになるときだけ。 グラフのせいで誰も行動を変えないなら、役に立つものの場所を取っています。

これは、みんなが最初に見る画面に当てた、ミニマルなデザインのヒューリスティクスです。関係のない情報や、めったに要らない情報が、要る情報と競います。

8. コードの前に、使う人と確かめる

社内管理画面のデザインには、めずらしい利点があります。使う人が手の届くところにいます。会社で働いています。だから、コードを一行も書く前に画面を確かめられます。

使う手順は単純です。

1. クリックできるプロトタイプを、第2節の一覧の作業について、実データに近いデータで作る。
2. 各役割から一人が、プロトタイプで自分の作業をし、考えていることを声に出す。描いた人は見るだけにして、どこで人が止まったかをメモする。
3. 直して、次の人で繰り返す。
4. 開発に渡す前に、下の表の技術的な基準を確かめる。

WCAG 2.2の達成基準2.5.8の24 x 24 CSSピクセルは最小です。マウスで一日中使う管理画面では、小さすぎてくっついた操作アイコンが、誤クリックのよくある原因です。「編集」のつもりが「削除」になる、といったものです。破壊的な操作とほかの操作のあいだの間隔は、デザインの一部です。

今の疑問が見積もりなら、オーダーメイドのWebシステム開発にはいくらかかるかの記事が、この種のプロジェクトで価格を押し上げるものを示しています。

よくある質問

社内管理画面のデザインと、サイトのデザインはどう違いますか？

サイトは、初めて来た人を納得させる必要があります。社内管理画面は、仕事のために毎日使う人の役に立つ必要があります。だから管理画面では、繰り返す作業の速さ、画面のあいだの一貫性、誤りの予防が、見た目の印象より重くなります。

社内管理画面にデザイナーは必要ですか。開発者だけで足りますか？

規模と、使う人数によります。開発者は構造をよく扱えます。デザインは、作業、情報の順、状態、メッセージを整理するために入ります。一日中複数の人が使う管理画面では、コードの前にチームと確かめたプロトタイプが、手戻りを避けることが多いです。

管理画面の記録一覧は、表とカードのどちらですか？

多くの記録を比べ、操作するなら、表のほうが働くことが多いです。並べ替え、絞り込み、一括選択ができます。カードが向くのは、各項目に画像があるか情報が少なく、一つずつ見るとき、または画面が小さいときです。

色に頼らずステータスを出すには？

文字のラベル（「支払済み」「遅延」）を使い、色は補強にします。WCAGの達成基準1.4.1は、色を情報を伝える唯一の手段にしてはならない、と言います。場所が狭いときは、状態ごとの違うアイコンも助けになります。

社内管理画面は携帯電話で動く必要がありますか？

誰が、どこで使うかによります。出荷が倉庫で携帯電話から注文を確認するなら、その作業は小さい画面でよく動く必要があります。コンピュータだけで行う作業は、大きい画面を優先してよいです。第2節の作業一覧が、役割ごとにこれに答えます。

まとめ

よい社内管理画面とは、チームが考えずに使えるものです。記録をすぐ見つけ、誤りなく入力し、各件の状態を見て、開いたときに何をするかわかる。それは、実際の作業から描き、表、フォーム、ステータス、最初の画面を繰り返しの使用のために考え、コードの前に使う人と全部確かめることから来ます。チームが、スプレッドシートか、誰も使いたがらないシステムで業務を回しているなら、業務、誰が使うか、今日いちばん何が間違うかを書いてください。先にオーダーメイドのシステムと管理画面の進め方を見てください。

プロジェクトを相談