私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から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」を指標としても問題ないと考えます。この個数を基準にグルーピングしていくことをおすすめします。