アーム代表の伊藤です。
管理画面の使いにくさの正体は、機能の不足でもセンスでもなく、名前と印と操作のズレです。毎日使う画面から着手すれば、デザイナー不在の組織でも改善は進みます。
この記事は、最初の表で直す順番を決め、現場で繰り返し見てきた3つのズレの具体例と直し方、自社で直すか外注するかの線引きまで最短でたどる構成にしています。
全面刷新の前に、毎日触る画面の「名前と印のズレ」から直す
- 優先順位は頻度と影響の掛け算
- 問い合わせログと利用頻度を照合
- 上位3画面を直す方が全面刷新より早い
管理画面のUI改善は、毎日使う操作の、名前と印のズレから始めます。全部は直せないので、直す順番は頻度と影響の掛け算で並べます。毎日通る画面のズレが最優先、めったに開かない設定画面は後回しで構いません。
優先度 | 頻度×影響 | 例 |
|---|---|---|
最優先 | 高い・大きい | 毎日使う登録・検索画面の破壊的操作 |
高 | 高い・小さい | 毎日通る画面のラベルとアイコンの不一致 |
中 | 低い・大きい | 月次の締め処理や一括削除の確認まわり |
低 | 低い・小さい | ほとんど開かない設定画面の見た目 |
実務では、サポート問い合わせのログと画面の利用頻度を並べるところから始めます。「どこを押せばいいか」系の質問が集中している画面が、だいたいそのまま最優先の画面です。
フルリニューアルを検討する前に、上位3画面のズレを閉じる方が早く、確実に数字が動きます。UI/UX改善の進め方の全体像は「UI/UX改善についてまとめたコラム」でも整理しています。
管理画面が使いにくいのは機能不足でなく「名前と印のズレ」
- ユーザーは画面を読まず記憶で操作
- つまずきは離脱と問い合わせ工数に転化
- 直す作業はセンスでなく名寄せに近い
管理画面の使いにくさとは、機能の不足ではなく、名前（ラベル）と印（アイコン・配置・見た目）と操作（実際に起きること）のズレが積み重なった状態です。
使う人は画面を読まず、他サービスの記憶で操作している
UI設計の言葉ではシグニファイアの問題などと呼ばれますが、要は「表示から予測したことと、実際に起きることが食い違っている」だけの話です。
ユーザーは画面を読みません。これまで使ってきた別のサービスで作られた、頭の中の地図をもとに操作します。この頭の中の地図をメンタルモデル（※過去の経験から作られた「この印はこう動くはず」という予測・思い込み）と呼びます。
ユーザーは印からメンタルモデルを引き当て、意味を予測して操作する。予測が当たっているあいだは無意識に進み、外れた瞬間に手が止まります。1回のつまずきは一瞬でも、業務システムは毎日同じ画面を何十回も通る場所です。つまずきは足し算ではなく、掛け算で積み上がります。
小さなつまずきが、問い合わせ工数と人件費に化ける
そしてこの掛け算は、見た目の問題ではなく経営の数字に変換されます。オンボーディングの序盤でつまずきが続けば、トライアルはそこで離脱します。「どこを押せばいいですか?」という問い合わせは、サポート工数として毎月積み上がります。
現場の操作時間はそのまま人件費です。SaaSであれば、更新のたびに乗り換え、つまり解約の検討材料になります。
デザイナーがいなくても、名寄せ作業として着手できる
逆に言えば、直すのにセンスは要りません。ユーザーのメンタルモデルとのズレを1つずつ特定して閉じていく設計の仕事で、センスというより、名寄せに近い地味な作業です。だから、社内にデザイナーがいない組織でも着手はできます。
管理画面によくある「ズレ」3つと、直し方
- 名前と印のズレは右上配置で解消
- リセットは格下げして誤操作防止
- 閉じる操作の意味を1つに定める
アームが業務システムやSaaSの改善で繰り返し見てきた、代表的な3つのズレを紹介します。どれも珍しい失敗ではありません。症状、なぜ起きるか、どう直したかの順で書きます。
「このアイコン、何ですか?」名前と印がすれ違う
症状：ある案件で見た画面は、カードが何枚も並ぶ一覧でした。当初は、各カードの下に「♥ブックマーク」というラベル付きのボタンが、すべてのカードに1つずつ置かれていました。ラベルは「ブックマーク」、アイコンはハート。
操作を見せてもらうと、ボタンの前でためらいが生まれ、最後に「このアイコン、何ですか?」という質問が出ました。
なぜ起きるか：問題は2つ重なっていました。1つは、名前と印のズレです。ハートは多くのサービスで「お気に入り」や「いいね」を表す印として、ユーザーのメンタルモデルにすでに刷り込まれています。
ラベルは「ブックマーク」なのに、印は別の意味を指している。頭の中の予測と目の前の印が食い違うから、確信が持てず、手が止まります。もう1つは、認知負荷です。
カードが何枚も並ぶ画面で、すべてのカードに同じラベル付きボタンが並ぶと、視線はそのたびに文字を読み直します。1枚なら一瞬でも、何十枚も重なると画面全体がうるさくなります。
直し方：2つまとめて直しました。まず、アイコンをメンタルモデルに合ったブックマークのアイコンに変更しました。次に、各カードの下に置いていたラベル付きボタンをやめ、カードの右上にアイコンとして配置しました。
右上は、多くのサービスで保存やブックマークが置かれる慣習的な位置です。慣れた印を、慣れた位置に。これだけで、文字を読み直す負荷が消え、「このアイコン、何ですか?」も出なくなりました。
ただし、意味が一般的でないアイコンは、無理にアイコンだけにせずラベルを添えます。判断の軸は、格好よさではなく、ユーザーのメンタルモデルに合うかどうかです。
「条件検索」の隣に、同じ見た目の「リセット」がある
症状：ある管理画面では、「条件検索」ボタンのすぐ隣に、同じボタンデザインで「リセット」が置かれていました。時間をかけて入力した検索条件が、1クリックで消えます。
なぜ起きるか：リセットは入力を消す破壊的操作です。それが実行ボタンと同じ見た目・同じ距離で並ぶと、手は2つを同じ重さで扱います。見た目が同じなら、指は区別しません。この誤操作はユーザーの不注意ではなく、レイアウトが誘発しています。
直し方：破壊的操作は降格させるのが定石です。この案件では、リセットをボタンからテキストリンクに格下げし、検索ボタンからやや離して配置しました。機能は1つも削っていません。それでも、押し間違いは構造的に起きにくくなります。
「キャンセル」と「×」が1つのモーダルで干渉する
症状：同じモーダルの中に「キャンセル」ボタンと右上の「×」が同居していました。入力の途中で×を押したら、内容は残るのか、消えるのか。使う人によって解釈が割れていました。
なぜ起きるか：作った当人は、まず気付きません。ただ、×が「閉じる」なのか「取り消し・破棄」なのかは、UI設計者のあいだでも議論が続く論点です。
NN/gの日本語版記事「「キャンセル」か「閉じる」か：この2つを区別するためのデザイン」や、Goodpatchの「キャンセルのキャンセル問題から考えるダイアログデザイン」でも整理されているとおり、2つの閉じ方が1つの画面に同居すると、意味が干渉します。
直し方：閉じる操作の意味を1つに定めることです。閉じたときに入力が破棄されるなら、確認ダイアログや「変更を破棄」という文言で明示する。自動保存されるなら、その旨を示す。どちらの仕様でも構いません。決めていないことだけが問題です。
直したのに「前の画面のほうが良かった」と言われたら
ズレを直すと、今度は慣れていた人から「前のほうが分かりやすかった」という声が出ることがあります。これは改善が失敗したのではなく、古いメンタルモデルへの慣れが、まだ新しい印に上書きされていないだけの状態です。ラベルや配置を変えた直後は、旧名称を注記として一時的に残す、変更点だけをまとめた1枚の案内を出す、といった対応で定着までの摩擦を減らせます。数週間で声はおさまることがほとんどです。
直した「ズレ」が管理画面で再発しない、小さな基準の作り方
- 基準がないと直した数だけズレ増加
- 整えるのはボタン種別・用語集・破壊操作の3点
- 小さく作り開発のたびに育てる
デザインシステムとは、UIの部品（ボタンや入力欄）と使い方のルールをまとめた、チーム共通の基準です。ズレを直しても、次の機能開発でまた新しいズレが生まれます。基準がなければ、直した数だけ増えるからです。
とはいえ、最初から立派な仕組みを建てる必要はありません。アームが業務システムの現場でまず整えるのは3点だけです。
整えるのは3点だけでいい
ボタンの種類と使い分け（実行・通常・破壊的操作）、用語集（「ブックマーク」か「お気に入り」か、呼び名を1つに決める）、そして破壊的操作の扱いのルール。この3点があるだけで、新しい画面が既存のズレを再生産しにくくなります。
小さく作って、開発のたびに育てるのが現実解です。作ったあとにどこから崩れるのかは別記事で詳しく整理しています。
自社で直すか外注か。分かれ目は能力でなく距離の近さ
- 分かれ目は能力でなく距離の近さ
- 自社洗い出し後の依頼は費用対効果が向上
- 画面をまたぐ基準づくりは外注が早い
線引きはこうです。個別のズレの修正は自社でも進められます。画面をまたぐ基準づくりは、外の目を入れる方が早いことが多いです。
自社で進めやすいこと | 外注を検討したいこと |
|---|---|
ラベルとアイコンの不一致の洗い出し | 画面をまたぐ操作ルールの統一 |
破壊的操作をテキストリンクに降格する | デザインシステムの初期設計 |
用語の統一（呼び名を1つに決める） | オンボーディング導線の再設計 |
問い合わせログと画面の突き合わせ | 解約・利用データと結びつけた改善計画 |
分かれ目は能力ではなく、距離です。中の人はUIに慣れすぎていて、ズレが見えなくなります。作った本人はドアを迷わず引けてしまうからです。逆に、自社でズレの洗い出しまで済ませてから依頼すると、外注の費用対効果は上がります。
頼み方にも、切り分けが要る
診断から頼むのか、直す作業から頼むのか、スコープを分けて考えてみてください。
アームでも、業務システムやSaaSの管理画面UIの相談を受けています。「これはズレなのか、機能不足なのか」という切り分けの段階からで構いません。よければ「管理画面・業務システムのUIについて相談する」からご連絡ください。
直すか作り直すかを、画面・業務・データ・運用の4つの層で決める基準は、こちらの記事で整理しています。
頼む前に、アームが管理画面の何を最初に聞くか
- 解約理由や操作時間の数字から着手
- 使われて数字が動くまでが設計範囲
- 公開後の計測と改善を繰り返す
最後に、アームが管理画面や業務システムのUIに向き合うときの前提を3つ書きます。
解約理由や問い合わせログから、直す画面を決める
アームは、解約理由・問い合わせログ・現場の操作時間といった事業の数字をほどいてから、画面に手を入れます。どのズレがどの数字を動かしているかを特定せずに直すのは、痛い場所を聞かずに湿布を貼るようなものだからです。
きれいな画面より、問い合わせが減って業務時間が縮む画面を
整った管理画面は、ツールが進歩した今、作れて当たり前になりました。問われるのはその先です。その画面で誰の作業が何分縮み、事業のどの数字が動いたのか。アームは使われて、事業の数字が動くところまでを設計の範囲と考えています。
支援の内容は「業務システムUI/UXデザインのサービス紹介」にまとめています。
リリース後も問い合わせ数を見て、管理画面を直し続ける
リリースは完成ではなく、計測の開始です。問い合わせは減ったか。オンボーディングの完了率は上がったか。数字を見て、次のズレを直す。この繰り返しだけが、管理画面を事業の資産にします。
よくある質問
管理画面のUIは何から直すべきですか?
毎日使う操作の、名前と印のズレからです。利用頻度が高く、誤操作の影響が大きい画面を優先してください。サポート問い合わせが集中している画面から見ると、迷いません。
UIが使いにくいと解約は本当に増えますか?
使いにくさが解約理由として直接語られることは多くありません。ただ、オンボーディングの離脱、問い合わせの増加、現場の不満として静かに蓄積し、更新や乗り換え検討のタイミングで背中を押す材料になります。
解約そのものより手前の指標（初期設定の完了率や問い合わせ件数）とあわせて見るのが現実的です。
管理画面のUI改善を外注する場合、費用はどう考えればいいですか?
解決したい課題の難しさと範囲で変わります。全面リニューアルを前提にせず、問い合わせが集中している画面に絞った部分改善から見積もる形が現実的です。診断（課題の切り分け）と改修を分けて依頼する方法もあります。
デザインシステムは小規模なSaaSにも必要ですか?
フルセットは不要です。ボタンの使い分け・用語集・破壊的操作のルールの3点から始めれば、小さなチームでもズレの再発は防げます。育てる前提で小さく作るのがおすすめです。
SaaSや業務システムのUIデザインは誰に頼めばいいですか?
グラフィックの実績ではなく、管理画面や業務システムの改善実績があるデザイナー・会社を選んでください。作例に管理画面が含まれているか、問い合わせログや利用データを見て判断するタイプかが、見極めのポイントです。
社内にデザイナーがいなくてもUI改善はできますか?
できます。ラベルとアイコンの不一致の洗い出しや、用語の統一は、デザイナーがいなくても進められます。画面をまたぐ基準づくりや再設計が必要になった段階で、外部の力を検討すれば十分です。
管理画面のUI改善は、名前と印のズレを頻度と影響の掛け算で直す
管理画面の使いにくさの正体は、機能の不足ではなく、名前と印と操作のズレです。直す順番は頻度と影響の掛け算で決め、再発は小さなデザインシステムで防ぐ。まずは、いちばんよく使う操作の名前と印を揃えるところから始めてみてください。
