アーム代表の伊藤です。有名サービスに似せたのに使いにくい管理画面が生まれるのは、参考から抜き出すものを間違えているからです。管理画面デザインの参考は見た目を写す手本ではなく設計原則を観察するための素材で、集めるのは多くて3サイト、抽出するのは6つの原則で足ります。この記事では、参考を開く前に決める3つの準備と、原則の抜き出し方、自社の画面への翻訳手順を解説します。
こんな方におすすめのコラムです
- 「参考サイトを20枚集めたのに、どれを真似ればいいのか決められない」という方
- 「有名サービスの管理画面に似せたのに、使いにくいと言われてしまった」という方
- 「SaaSや業務システムの管理画面をこれから設計するが、参考の選び方が分からない」という方
- 「デザイナーに参考のURLを渡しても、見た目だけ寄せた画面が返ってくる」という方
- 「ニッチな業務システムで、そもそも近い参考が見つからない」という方
管理画面デザインの参考は、見た目を真似ると失敗します
管理画面デザインの参考とは、完成した見た目を写すための手本ではなく、なぜその配置なのか、なぜその言葉なのかという設計原則を観察するための素材です。
管理画面の使いやすさは、配色や余白の美しさでは決まりません。その画面を毎日使う人の業務に、配置と言葉が合っているかで決まります。参考サイトに載っている画面は、そのサービスのユーザーと業務に最適化された答案です。あなたの会社の答案ではありません。設問が違えば、答案を写しても点は取れません。
参考ギャラリーは、完成写真だけのレシピ本のようなものです。火加減も分量も、なぜその順番で調理するのかも写っていません。写真を眺めるだけで料理が上達しないのと同じで、画面の表層を真似ても、迷わない管理画面にはなりません。逆に、写真の裏にある原則さえ抜き出せれば、見た目が地味でも迷わない画面は作れます。
参考を開く前に決める3つのこと
参考探しがうまくいかないときは、探し方ではなく、探す前の準備が抜けています。ブラウザのタブを開く前に、次の3つを書き出してください。A4用紙1枚で足ります。
1. 誰が使う画面か
同じ「管理画面」でも、1日8時間張りつく専任オペレーターと、月末だけ開く管理職では、最適な画面がまったく違います。前者には情報密度と操作速度が要ります。後者には迷わないことのほうが大事で、密度はむしろ邪魔になります。
参考にしたSaaSがどちらのユーザーを想定して作られているかを確かめないまま真似ると、想定が入れ替わったまま画面だけが移植されます。似せたのに使いにくい、の典型がこれです。
2. どの業務のどの瞬間に使うか
画面は業務の一場面に置かれる道具です。受注登録なのか、問い合わせ対応中の検索なのか、月次の締め作業なのか。同じ一覧画面でも、電話を受けながら急いで探すのか、腰を据えて突き合わせるのかで、置くべき情報も操作も変わります。
業務のどこで使いにくさが起きているのかを先に切り分けたい場合は、業務システムが使いにくい原因はどこにあるのかを先に読んでください。
3. どのくらいの頻度で使うか
毎日使う操作と、年に数回の設定を、同じ重みで画面に置いてはいけません。頻度は導線の深さを決める物差しです。ここを決めておくと、参考サイトを見たときに「この会社はこの操作を一等地に置いている。つまり毎日使われる前提だ」と読み解けるようになります。
この3つが決まると、参考は「良さそうな画面」ではなく「同じ設問を解いている画面」で選べるようになります。
参考から抽出すべき6つの設計原則
参考サイトを開いたら観察するのは、次の6点だけで十分です。いずれも、アームが管理画面の改善案件で実際にズレを見てきた箇所です。
1. ラベルと印（アイコン）が一致しているか
アイコンが指す意味と、隣のラベルが指す意味が微妙に違う。アームが実案件で最も多く見てきたズレです。ラベルは「ブックマーク」なのに、アイコンはハート。ユーザーは操作の前に一瞬止まり、その一瞬が毎日積み重なります。
参考サイトでは、アイコン単体で意味が通じるか、ラベルと同じ概念を指しているかを確認してください。優れた管理画面は印と言葉が一対一で対応しています。この論点は管理画面のUI改善はどこから始めるかでも詳しく扱っています。
2. 破壊的操作がどう隔離されているか
リセットや削除のような、取り返しのつかない操作の置き場所です。私たちが改善に入った画面には、リセットボタンが保存ボタンの隣に同じ見た目で並んでいるものがありました。押し間違えた人を責めるわけにはいきません。並べたほうに原因があります。
参考サイトでは、破壊的操作が距離、色、確認ステップの三段構えでどう守られているかを見てください。三つとも備えている画面は、そのチームが事故を経験して学んだ跡です。
3. 閉じる操作に一貫性があるか
モーダルのキャンセルボタンと右上の×です。キャンセルは入力を破棄するのか、×は保存するのか破棄するのか。両者の挙動が画面ごとに違い、どちらを押せばよいか迷う管理画面を実際に見てきました。
参考サイトでは、閉じる操作の挙動が全画面で統一されているかを観察します。地味な観点ですが、迷いの総量に直結します。
4. 一覧テーブルが業務の単位で組まれているか
管理画面のUIで主役になるのはテーブルです。ユーザーが最も長く見つめ、最も多く操作するのが一覧画面だからです。それなのに、テーブルは参考探しでいちばん軽く見られています。
観察するのは3点です。列が業務の判断に必要な順に並んでいるか。1行がユーザーの頭のなかの1単位（1件の受注、1人の従業員）と一致しているか。絞り込みと並べ替えが、実際にやりたい探し方に対応しているか。
とくに列の順番は、そのサービスがユーザーの判断順序をどう理解しているかがそのまま出ます。左から順に、ユーザーが確認したい順に並んでいるか。数字が右揃えになっているか。この2つを見るだけでも、設計の丁寧さは判別できます。
5. 情報の優先順位が業務に合っているか
画面で一番大きく表示されているものは何か。それはユーザーが一番知りたい情報か。参考サイトの画面で最初に目が行く場所に何が置かれているかを見て、その理由を推測してください。理由を言語化できた参考だけが、自社の設計に転用できます。
6. 頻度に応じた導線になっているか
毎日使う操作は浅い階層に、月に一度の設定は深い階層に。参考サイトのナビゲーションで、どの操作が一等地を占めているかを数えると、そのサービスがユーザーの業務頻度をどう理解しているかが読み取れます。自社の頻度分布と重ねて見るのが正しい使い方です。
公開されているデザインシステムを、原則で読み解く
参考として質が高いのは、画面のスクリーンショットよりも、公開されているデザインシステムです。判断の結果だけでなく、なぜそう決めたのかの理由が文章で残されているからです。ここでは3つを、先ほどの原則と結びつけて読み解きます。数を集める必要はありません。
SmartHR Design System｜言葉の設計まで公開されている
SmartHR, Inc.が公開しているデザインシステムです。色やコンポーネントに加えて、アクセシビリティの方針と、伝わる文章・ライティングのガイドラインまで公開されています（SmartHR Design System、2026年8月時点）。
ここで読み取るべきは原則1です。管理画面の使いにくさは、多くの場合ボタンの形ではなく言葉の不統一から生まれます。同じ操作を画面ごとに違う言葉で呼んでいないか。専門用語が現場の言い方と食い違っていないか。言葉の基準を明文化している組織がある、という事実そのものが、参考にすべき態度です。
デジタル庁デザインシステム｜そのまま流用しない、を教えてくれる
デジタル庁が公開しているデザインシステムです。UIコンポーネント、ガイドライン、Figmaのデザインデータが公開されています（デジタル庁デザインシステム、β版 v2.16.0、2026年8月時点）。
注目したいのは、想定利用者が明記されている点です。行政機関や公共性の高い組織のウェブサイトでの利用を想定している、と公式に書かれています。つまりこれは、誰でも使えるが誰にでも最適ではない、と作った側が宣言しているということです。
質の高いデザインシステムほど、前提を明示します。参考を選ぶときは、この前提が自社と重なるかを最初に確認してください。前提が違えば、そのまま持ち込んだ瞬間に最適解ではなくなります。
Shopify Polaris｜管理画面のために書かれた設計ガイダンス
Shopifyのデザインシステムです。公式に「Fundamental design guidance for creating quality admin experiences」と書かれており、管理画面のための設計ガイダンスであることが明示されています（Shopify Polaris、2026年8月時点）。
ここには、参考の扱い方そのものを教えてくれる事実があります。同ページの上部には「(Deprecated)」と表示され、Polaris Web Componentsへの移行が案内されています。つまり、実装は数年で入れ替わりました。
真似る対象を実装に置いていた人は、ここでやり直しになります。原則に置いていた人は、何も失いません。参考は古くなりますが、抜き出した原則は古くなりません。デザインシステムを自社で持ちたい場合の始め方は、デザインシステムの導入はまず3点だけに整理しています。
参考サイトの正しい使い方（4つの手順）
参考は、集めてから考えるのではなく、問いを立ててから探すのが正しい順序です。手順は4つです。
手順 | やること | ポイント |
|---|---|---|
1. 頻出画面を決める | 利用ログや現場ヒアリングで、最も使われる画面を2〜3枚に絞る | 全画面を一度に直そうとしない |
2. 近い参考を選ぶ | 扱うデータと業務が近いサービスを3つまで選ぶ | 見た目の好みで選ばない |
3. 原則で分解する | 前章の6原則で、配置と言葉の理由を言語化する | 言語化できない参考は捨てる |
4. 自社の言葉に翻訳する | 抜き出した原則を、自社ユーザーの業務用語と頻度に当てはめて再設計する | 用語は現場で使われている言葉を優先 |
この分解と翻訳は、アームが業務システム・SaaSのUIデザイン支援で実際に行っている工程です。自社の画面をどう分解すべきか迷う場合は、気軽にご相談ください。参考の選び方だけでもお答えできます。
よくある失敗：参考を集めて、迷子になる
参考集めで最も多い失敗は、量を集めすぎて判断基準を失うことです。20枚のスクリーンショットを並べると、どれも良く見えます。どれも良く見えるのは、それぞれが別の設問への答案だからです。
良いところだけを合成すると、原則同士が画面の中で衝突します。ヘッダーはA社、テーブルはB社、モーダルはC社。部品は一流でも、操作の文法がバラバラな画面ができあがります。参考は多くて3サイト、観察するのは原則だけ。この制約が迷子を防ぎます。
アームの管理画面デザインの考え方
参考は答えではなく、観察対象です
アームは参考サイトを、真似る対象ではなく設計判断の事例集として扱います。優れた管理画面の裏には、そのチームが自社ユーザーの業務を観察して下した無数の判断があります。私たちが借りるのはその判断の理由であって、結果の画面ではありません。だから参考が古くなっても、抜き出した原則は古くなりません。
事業の因数分解を、UIに翻訳します
管理画面のデザインは美観への出費ではなく、PLに効く投資です。迷わない画面はサポートへの問い合わせ工数を減らし、現場の作業時間を縮め、SaaSであれば解約の理由をひとつ消します。
逆に、使いにくい画面を放置する費用は、毎日の操作時間と問い合わせ対応という固定費として払い続けることになります。作り直しの見積もりだけを見て高いと感じたときは、放置し続けた場合の3年分と並べてみてください。判断の材料が変わります。アームの支援内容は業務システム・管理画面のUIデザインにまとめています。
よくある質問
管理画面UIの参考はどこで探せばいいですか？
ギャラリーサイトも有効ですが、一番の参考は自社が業務で契約しているSaaSの画面です。毎日使っているぶん、なぜ使いやすいか、どこで迷うかを一次情報として観察できます。探す前に、自社の頻出画面と問いを決めるのが先です。
参考サイトを丸ごと真似てもいいですか？
おすすめしません。ユーザーと業務が違えば最適な配置も言葉も変わるため、丸写しは高い確率で使いにくい画面になります。真似てよいのは見た目ではなく、本文で挙げた6つの設計原則です。
SaaSの管理画面の参考はどう選べばいいですか？
業種の近さより、扱うデータ構造と利用頻度の近さで選んでください。たとえば大量の一覧を毎日さばく業務なら、業種が違ってもテーブル操作の優れたサービスが参考になります。
参考が見つからないニッチな業務システムの場合は？
問題ありません。6つの設計原則は業種をまたいで通用します。近接する領域の管理画面から原則だけを借り、用語と頻度を自社の業務に合わせて翻訳すれば設計できます。
デザイナーに参考を渡すときのコツはありますか？
URLだけを渡さず、その参考のどこを良いと感じたかを一言添えてください。見た目ではなくどの原則を評価したのかが伝わると、デザイナーは表層ではなく構造を再現できます。
公開されているデザインシステムをそのまま導入してもいいですか？
前提が自社と重なるかを確認してからにしてください。デジタル庁のデザインシステムのように、想定利用者を明記しているものもあります。前提が違うまま導入すると、あとから例外だらけになり、かえって統一が崩れます。
参考にしたサービスの実装が古くなったらどうすればいいですか？
抜き出したものが原則であれば、何もする必要はありません。Shopify Polarisのように実装が入れ替わることは珍しくありませんが、なぜその配置なのかという理由は残ります。実装を真似ていた場合だけ、やり直しになります。
アームは、伝言ゲームなしで課題の整理からデザイン、実装までを一人が担う戦略デザインスタジオです。
- サイトはあるのに、売上につながっていない
- 問い合わせは来るが、質が合わず商談にならない
- 何に投資すれば伸びるのか、判断がつかない
動くものなら数日で作れる時代です。問われるのは、何を作るかより、なぜ作るか。事業の分解から画面と実装まで同じ人間が担当するので、決めた方針が形になるまで薄まりません。ぜひアームに一度ご相談ください。
まとめ
管理画面デザインの参考は、見た目を写す手本ではなく、設計原則を観察するための素材です。
参考を開く前に、誰が・どの業務で・どの頻度で使うのかを決めてください。そのうえで、ラベルと印の一致、破壊的操作の隔離、閉じる操作の一貫性、一覧テーブルの単位、情報の優先順位、頻度に応じた導線という6点で分解します。抜き出した原則を自社ユーザーの言葉と頻度に翻訳すれば、参考と似ていなくても迷わない画面になります。
参考の見方を含めた改善全体の進め方は管理画面のUI改善はどこから始めるかで整理しています。まずは自社で一番使われている管理画面のUIをひとつ選び、6つの原則で眺め直すところから始めてみてください。
