管理画面のUIデザインにおける20の改善ポイント

私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。

1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。

使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。

これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。

私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験から、管理画面のUIにおけるよくある改善ポイントをまとめました。

1：リキッドレイアウトにする

リキッドレイアウトとは、webブラウザの横幅に合わせて、コンテンツ幅を変更するレイアウトです。スマホやタブレットなど、デバイスが多様化しコンテンツの横幅を定められないため、最近では多くのwebサイトが取り入れています。

管理画面はPCでの利用がメインですが、PCのディスプレイも横幅は様々です。また管理画面はコンテンツ量が比較的多いため、リキッドレイアウトであれば、横幅の大きなディスプレイではコンテンツを広げて表示でき、見やすくなります。

業務によっては、ブラウザのウィンドウを2つ並べて見るようなシーンも考えられ、横幅が半分になっても問題なく表示できるニーズもあります。このような場合も、横幅の変更に柔軟に対応できるリキッドレイアウトが向いていると言えます。

Jira Software（プロジェクト管理）では、横幅に併せてレイアウトが広がるデザインになっており、横幅が小さい場合ではヘッダーのメニューも省略して表示されるようになっています。

2：一般的なフォントを使う

Google Fontsをはじめとするwebフォントが一般的になり、webサイトではその印象や世界観を表現するための1つの要素として、フォント選定も重要度が高まっています。

しかし、管理画面のような日常的に利用するページでは、印象よりも読みやすさを重視すべきです。可読性（文章の読みやすさ）、視認性（文字の認識のしやすさ）、判読性（誤読のしにくさ）に優れたフォントを選ぶとよいでしょう。

併せて「認知容易性」も意識すべきです。「認知容易性」とは、人は慣れ親しんだものに好意的な印象をもつ心理現象です。デザイン性の高い造形のフォントよりも、普段の業務でよく見る、慣れ親しんだフォントの方が、脳内の処理負荷が下がりやすいのです。

以上のことを踏まえると、Windowsでは、Windows Vista以降のOSで使われているメイリオがおすすめです。最近のwebサイトでは游ゴシックもよく使われていますが、OSやアプリなどのUIのフォントではメイリオほど一般的ではなく、またRegularのウエイトでは細字になり視認性が下がるなど、メイリオと比べて有利な書体とは言い難いのが実状です。なお、Macの場合は標準素体となっているヒラギノ角ゴシックファミリーを表示させるのが一番いいでしょう。

3：アイコンに頼りすぎない

アイコンは、場所を取らずに機能を直感的に伝えるのに有効です。しかし、意味が伝わらなければ、ユーザーは機能を誤解し混乱してしまいます。

アイコンはラベルと併記し、あくまでラベルの意味を補助する役割として考えるべきでしょう。そして、繰り返し利用することでアイコンの意味を学習させる前提で設計することをおすすめします。

BMC Helix ITSM（ITサービス管理）では、グローバルメニュー内の情報カテゴリにアイコンとラベルを併記して、システム内で共通的に利用しています。

アイコン単体で使う場合も、必ず意味の伝わる一般的なものに限定し、念のためツールチップなどで説明を補助することが望ましいです。

同じく、BMC Helix ITSM（ITサービス管理）の案件詳細ページでは、操作エリアにアイコンだけが並んでおり、マウスカーソルを当てるとラベルが表示されます。

4：色に頼りすぎない

色は画面全体の印象を左右する重要な要素です。一方で使う色の種類が多すぎると情報の優先度がわかりにくくなったり、統制がとれなくなったりして、画面全体が煩雑な印象になります。

ベースカラー・メインカラー・アクセントカラーの3色を基本とすれば、色のルールを理解しやすく、情報の優先度も分かりやすいため、利用者を正しい操作に誘導できます。

どうしても特別に強調したい要素を色で差別化すると、全体の統一感が損なわれます。下線、枠、サイズなど、色以外の方法で強調するとよいでしょう。

さらに色については、CUD（カラーユニバーサルデザイン）も意識する必要があります。CUDとは多様な色覚をもつ人に配慮した配色デザインのことです。

実は、日本人男性の20人に1人が色覚に問題を抱えているとも言われています。利用者には色を認識しにくいユーザーもいるという前提に立って、色の違いのみによる情報の区別を避けるべきです。

5：視線誘導を意識したレイアウトにする

視線誘導とは、Webサイトなどで活用されるユーザーの視線をコントロールする心理効果です。管理画面は情報量が多いため、ユーザーにどの情報から見て欲しいのか、視線誘導する必要があります。

画面構造を上下左右に分けた場合、大きくZ型（ユーザーの視線が左上→右上→左下→右下の順に動く）と、F型（ユーザーの視線が左下→右上→左下→右下の順に動く）の２パターンがあります。つまり、この２つの視線誘導の型に当てはまらない位置に重要な情報を載せても、ユーザーにそれを見てもらうことが難しくなります。

さらには、同じビジュアルの情報グループであれば、ユーザーは優先的にその情報を確認します。以下のように見た目が違えば、グループが分かれていることを認識できます。

管理画面のコンテンツエリアでは、これらの視線誘導を意識し、どの情報グループから見てもらうべきかを意識してゾーニング（配置領域の設計）をすることが重要です。

6：構造をできるだけシンプルにする

管理画面は情報構造が複雑になりがちです。整理されていない情報はもちろん見にくいですが、厳密に整理しすぎた多層構造の情報は、かえってユーザーの理解を阻害します。

多層構造は三階層以上になるのは避け、二階層の場合も、その構造を視覚的に把握しやすいようにしましょう。例えば、各階層で見た目が同じタブを使うのではなく、第一階層はタブ、第二階層はサイドナビにするなど表現を変えるとよいです。

7：クリック数に固執しない

管理画面の作業効率の指標に、よくクリック数が使われます。クリック数が減れば、確かにそれだけ操作の手間が省けるため、考え方としては間違いではありません。しかし、本来は業務時間が減っているかを評価すべきであり、クリック数が少ないからといって、業務時間が減るとは限りません。

例えば、利用頻度が月１回程度の管理画面では、ユーザーの習熟度が上がらないため、丁寧に操作ステップを分けて説明し、操作ミスを防ぐことが求められます。場合によってはヘルプ機能やマニュアルを補助として活用します。

Salesmate（顧客管理）では、利用頻度が低く、操作の影響範囲が広い一括アップロード機能でステップナビを利用して操作ミスを防いでいます。併せて、各ステップでTipsを掲載し、利用者のサポートを手厚くしています。

このような画面でクリック数の削減を意識しすぎると、機能の理解に時間がかかったり、ミスを誘発してやり直す手間などが発生したりするため、逆に業務時間が増える可能性があります。クリック数を増やしてでも、より確実に業務を進められるようにすべきです。

一方、利用頻度が高い管理画面では、冗長な操作ステップは作業スピードが上がらず、習熟したユーザーには煩わしく感じます。なるべく短いステップで完了でき、クリック数が少ない、効率的に作業ができるUIデザインが向いています。

8：選択肢を増やしすぎない

一画面内で取り扱う情報や機能が多い管理画面では、それらを整然と並べてしまうと、「何ができるのか？」が理解しにくくなります。取り扱う情報・画面の数を減らして、ユーザーの選択の手間を抑えることが重要です。

数を減らすことが難しい場合、適切に情報・機能をグルーピングして配置すると、視覚的な選択肢が減り、心理的ハードルを下げることができます。このグルーピングの単位の指標として、しばしば「マジックナンバー」という心理学の考え方が用いられます。

「マジックナンバー」とは、人間が短期的に記憶できる情報の個数を指します。1956年にジョージ・ミラー氏が提唱した指標は7個前後（7±2）でしたが、2001年にネルソン・コーワン氏が書いた論文では4個前後（4±1）と述べられており、現在はこの指標が定説となっています。

しかし、管理画面はシステムの特性上、情報・機能が多く、利用頻度も高いため、学習効果を考慮すると、「7±2」を指標としても問題ないと考えます。この個数を基準にグルーピングしていくことをおすすめします。

9：ボタンの優先度をつける

「8：選択肢を増やしすぎない」でも伝えた通り、多くの機能をもつ管理画面では、ボタンが増えがちで全ての機能を平等に並べると、ユーザーが何をすべきか混乱します。適切なボタン配置を前提に、それでもボタンの数が多い場合は、ボタンの見た目でグルーピングするのが最適です。

画面の目的に応じて主機能、サブ機能に分け、ボタンの色や形、文字の大きさなどの見た目で区別すると、ユーザーを適切な操作に誘導できます。さらに、主機能のボタンは必ず画面の右下に配置するなど、レイアウトのルールをシステム全体で統一すると、より分かりやすくなります。

機能が多すぎる場合は、全てをボタンで表現する必要はありません。サブ機能をメニュー化して開閉式のボタンに隠すことで、画面が機能だらけで複雑にならず、すっきりした印象になります。ただし、隠すことで機能を見つけにくくなる場合も考えられるため、利用頻度の低いサブ機能に限定しましょう。

Quickbooks（会計管理）の請求書登録では、右下の緑ボタンをメイン機能とし、その他の機能は同型の無彩色のボタン、またはテキストリンクで優先度をつけています。

10：グローバルナビゲーションの位置はコンテンツエリアで決める

グローバルナビゲーションは画面の上部または左部に配置されますが、その使い分けは、ボディーのコンテンツ特性を踏まえて検討するとよいです。

画面上部の場合は、ボディーの幅を最大限活用できるため、ボディが複数カラムからなる複雑な情報構造の画面に向いています。SugarCRM（顧客管理）では、ボディーの取引情報が２カラムある複雑な画面であるため、グローバルナビゲーションが画面上部にあるほうが見やすいです。

一方、画面左部の場合は、ある程度縦スクロールを許容する単一カラムのシンプルな情報構造の画面に向いています。Twillo（クラウド電話管理）は、グローバルナビゲーションが画面左部しており、メニューを細かく構造化しているため、各画面の内容にあたるコンテンエリアの情報がシンプルになっています。

以上の傾向はあるものの、グローバルナビゲーションの配置に正解はありません。実際には、ユーザーテストなどで、ユーザーの使い方やメニューの探しやすさを調査した上で、最終決定することをおすすめします。

11：固定表示エリアは薄くする

画面の四隅に固定表示されるエリアには、すべての画面で共通して閲覧したい情報や機能が配置されます。その多くはメニューやユーザー情報ですが、管理画面ではその他にも配置したい情報が多いため、固定表示エリアが分厚くなる傾向にあります。

一方、管理画面は操作のメインとなるコンテンツエリアも情報量が多く、固定表示エリアが分厚くなるほど、コンテンツエリアが狭くなり操作性が損なわれます。そのため、固定表示エリアは可能な限り薄くしたほうがよいでしょう。

固定表示エリアを薄くすることが難しい場合は、開閉式にしてコンテンツエリアの広さを確保することをおすすめします。Salesmate（顧客管理）では、左固定メニューを開閉式にすることで、コンテンツ量の多い顧客情報を閲覧しやすくしています。

12：カスタマイズ・パーソナライズできるようにする

多くの情報を抱える管理画面の使い勝手の良し悪しは、いかにユーザーが目的の情報にすぐにアクセスできるかに左右されます。また、業務によってはいつも見る情報が決まっている場合があり、そのたびに情報を探すのは手間です。

このようなユーザーの使い方に配慮すると、ユーザー自身で普段利用するメニューや情報をカスタマイズできる管理画面であれば、非常に便利です。

BMC Helix ITSM（ITサービス管理）では、情報更新頻度の高い案件情報をフォロー登録すると、トップページのショートカットからすぐにアクセスできるようになるため、業務効率が上がります。

13：ショートカットを用意する

多くの機能を保有する管理画面は、業務の種類によってメニューが細分化されています。しかし、ユーザーが利用する機能は限られていることが多く、使うたびにメニューから目的の機能まで辿る作業は面倒です。

そのため、想定されるユーザーにあらかじめ合わせて、機能へのショートカットを設けると親切です。例えば、登録作業がメインのユーザーのために、各業務の新規登録を集約したメニューや、最近見たページを集めたメニューを配置します。

Quickbooks（会計管理）では、業務毎のグローバルメニューとは別に、新規作成専用のメニュー群を配置しています。利用頻度の高いメニューを初期表示し、その他のメニューを拡張で開く二段階表示になっています。

14：通知がすぐ目につくようにする

管理画面では、ユーザーが取るべきアクションを自分で探さずとも、システムが通知し誘導することで、効率的に業務を行えます。しかし、ユーザーが気づかなければ、その通知に意味はありません。

ここでの通知とは、以下のようなものです。

• 対処すべき情報の残件数と概要
• 新しく受け取った情報の件数と概要
• サービス提供側からの重要なお知らせ

ユーザーに通知を気づかせるためには、画面の四隅に配置される固定表示エリアの中でユーザーの目に留まりやすい場所に通知機能を設け、通知がある場合にアイコンで目立たせるようにします。

それ以外にも、ユーザーが管理画面にアクセスした直後表示されるトップページに通知情報を掲載するとより親切です。そのようにすれば、ユーザーがその日の業務で優先すべきタスクを把握できます。

Salesmate（顧客管理）では、右上のベルアイコンと赤色の件数で、サービスから利用者へのお知らせを通知しています。左メニューのメール機能では、同様に未読件数を目立たせて通知しています。

15：現在地が分かるようにする

管理画面は、管理する対象の業務が多くなるほど、システム全体の構造が複雑になり、ユーザーが迷いやすいポイントが生まれます。その対処法として、ユーザーが現在地を知るためためのUIの工夫を施すことが有効です。

WEBサイトでは一般的ですが、例えばグローバルナビゲーションで選択している項目の見た目を変えると、ユーザーは現在いるメニューを理解できます。しかし、メニューにない下層画面の場合、グローバルナビゲーションだけでは現在地を表現しきれません。

システム全体における現在地を正確に示すには、画面の階層構造をを示した「パンくずリスト」を併せて配置すると、よりユーザーがシステム内で迷いづらくなります。

Twillo（クラウド電話管理）は、左のメニューの構造に合わせて、画面上部の固定エリアに「パンくずリスト」を表示しており、複雑なメニュー階層でも現在地がかわるよう補助しています。

16：ダッシュボードが本当に必要かよく考える

昨今、管理画面のトップページにダッシュボードを置くことが当たり前になっていますが、そのダッシュボードは本当に必要でしょうか。

ダッシュボードとは、管理画面に関わるデータの集計結果をグラフで可視化した情報です。ダッシュボードに載せる集計情報は、導入時は何を載せるか決まっていないことも多く、後付けの理由で内容が決められることもよくあります。

しかし、それらの多くはユーザーが求める情報ではありません。画面を開いてすぐ綺麗なグラフが並んでいると確かに見栄えは良いですが、その効果は利用開始のときだけです。

また、ダッシュボードを見ただけではユーザー自身が何をすべきか判断できず、分析してその後のアクションを考える手間が発生します。それよりも、先述のパーソナライズしたメニューを配置したり、ユーザーが気づくべき通知情報をより明確に伝えたりすることが適切だと考えます。

17：テーブル内の情報を見やすくする

管理画面のテーブルは項目、件数ともに量が多くなりがちです。単に情報を並べるだけでは量が膨大になり、必要な情報を見つけることが困難です。これを解消するために、テーブルにはこれらの機能を設けるとよいでしょう。

• 主要な縦列の項目を固定して、横スクロールの対象から外す
• ヘッダーによるソート（並び替え）ができる
• 文字検索による絞り込みができる

Salesmate（顧客管理）のテーブルには、情報を検索しやすいように様々なテーブルの機能が具備されています。

ユーザーの情報検索行動は様々で、1種類に決められるものではありません。各々の機能が干渉するわけでもないため、上記のいずれかだけではなく、全ての機能に対応していることが望ましいです。

さらに、テーブルのヘッダー項目や値の「揃え」にも注意が必要です。よく目にする中央揃えで配置された情報は、一見綺麗に見えますが、情報を読み取りにくくおすすめできません。

ヘッダー項目と値は基本的に左揃えとし、読み始めの視点を揃えることで読みやすくなります。ヘッダーのみ中央揃えにしているものも散見されますが、ヘッダーも忘れず左寄せにします。

ただし、位（くらい）を意識すべき金額などの数値情報は、右揃えにしたほうが情報を比較しやすいです。値を右揃えにする場合は、視点を揃えるためにヘッダー項目も右揃えにしましょう。

18：複数選択は、関連する操作が分かるようにする

リストやカードといった複数のデータに対して一括で処理したい場合、対象データにチェックボックスなどの選択機能を配置し、選択対象に対して処理するUIが一般的です。

しかし、多くの管理画面では、チェック対象が把握しにくく、チェックしたものに対してできる操作ボタンの位置が離れすぎて分かりにくいなどの問題を抱えています。

Gmailのテーブルは、チェックしたデータをハイライトして、選択対象が認識しやすいUIになっています。また、一括チェックボックスのすぐ隣に対象の操作アイコンが表示されるため、チェックしたものに対してできる操作も明確です。

19：トグルスイッチは正しく使う

ON／OFFを瞬時に切り替えるための「トグルスイッチ」は、昨今よく使われるようになったUIパーツです。しかし、流行したことにより、本来とは異なる使われ方をされるケースが頻発しています。

例えば、ON/OFFの切り替えではなく、単純に2つのうちどちらかを選択させるために使われる場合です。トグルスイッチは、現在の選択状態と、選択後の状態を同時に理解させる必要があるため、ON/OFF以外だと複雑になりがちです。

また、瞬時に切替わらないトグルスイッチの利用も、ユーザーのメンタルモデルに反するため、あまり好ましくありません。切替えた後に、別の処理ボタンで反映される画面では、従来型のUIパーツであるラジオボタンやチェックボックスを利用することをおすすめします。

Quickbooks（会計管理）の設定画面ではON/OFFの設定を「Save」ボタンで反映させるため、トグルスイッチではなくチェックボックスを使っています。さらに、ラベルでもOn/Offを表示しており、現在の状態を分かりやすくしています。

20：一貫性を保つためのガイドラインを作る

管理画面は管理する対象によって業務が分かれていることが多く、それぞれに対して、検索、一覧表示、詳細表示、編集、削除といった画面や機能を同じように持っています。

それにも関わらず、業務ごとに画面の遷移方法や操作フローが違うと、複数業務を行うユーザーはなかなか管理画面の操作を習得できません。

操作フローの違いが発生しうる例としては、以下が考えられます。

• 検索条件指定後に一覧を表示するか、初めから一覧を表示し後から絞り込むか
• 詳細画面が編集画面を兼ねているのか、別々か
• 削除は一覧画面でするか、詳細画面でするか、編集画面でするのか

これらのフローをシステム全体で統一すると、複数の業務を取り扱うユーザーの学習コストを削減できます。

画面のフローだけではなく、UIパーツもシステムで統一すれば、ユーザーが初めて使う画面でも機能や操作感をイメージしやすくなります。

さらには、このルールをガイドライン化し運用することで、その後の機能追加時でもルールに基づいた効率的な設計・開発が可能になります。大規模なシステムであれば、デザインシステムのような形に落とし込むことも検討しましょう。

さいごに

ここで紹介したそれぞれのポイントは、ユーザビリティの観点で既に語られている内容ではありますが、この全てに配慮されたデザインを実現することは非常に難しいです。

そのため必ずしもこれらの全てを満たす必要はありません。業務特性や取り扱うメニュー量、情報量により配慮すべきポイントも最適解も変わります。

ユーザビリティの基本はあくまで一般的な指標です。実際にユーザーが利用している様子を分析して、そこから見える課題を解消していきながら、個別最適化していくと、より使い勝手のいい管理画面になります。

そのためにも、まずはこの指標をもとに基本となるポイントを抑えた画面を設計し、ユーザーに利用してもらうことで、より早く理想のUIデザインに近づけることが可能になります。ぜひ開発現場で活用してください。