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