👋

エンジニアが管理画面を作るときに考えるべきこと

2024/11/05に公開

はじめに

エンドユーザー向けの画面と比べてなかなか優先度が上げづらい管理画面ですが、そんな中でこれだけは意識したいというポイントを本記事ではまとめました。

管理画面を作るときに考えるべきこと

1. 幹線道路と脇道を意識する

管理画面の各ページには、必ず 主となる機能(幹線道路) と、 補助的な機能(脇道) が存在します。メイン機能に対しては、十分な大きさのタイトルや、最も視認性の高いスタイルを当てたアクションボタンなどを用いて他の機能との差別化をおこなえると良いでしょう。

一方で、補助的な機能についてはメイン機能と比べて控えめなデザインにすることで、画面の主従関係を明確にします。青い塗のボタンが1つの画面に何個も配置されてしまっていることに気がついたら、メインとサブの関係性を一度整理したいところです。

2. 各機能への導線設計

ユーザーが必要な機能にスムーズにアクセスできるよう、適切な導線を設計することが重要です。基本的なアクセス手段としてグローバルナビゲーションを用意しつつ、画面のコンテキストに応じて関連機能へのリンクを適切に配置することで、より効率的な操作が可能になります。

例えば、まだデータが登録されていない画面では、新規作成ボタンを目立つように配置することで、次のアクションへとユーザーを自然に誘導することができます。

3. 破壊的なアクションへの配慮

データの削除や重要な更新など、取り返しのつかない操作については、ワンクッション挟むことを心がけましょう。このような操作を行う前には確認ダイアログを表示するなど、アクションの内容と影響範囲を明確に説明します。

危険な操作を示すボタンには赤系統の色を使用するなど、通常の操作とは異なるデザインパターンを採用することで、ユーザーに慎重な操作を促すことができるだけでなく、非破壊的な操作を快適に利用することにも貢献できます。

4. 適切な情報量の設計

表示する情報量は、ユーザーの目的や利用シーンに応じて適切に調整する必要があります。一覧画面では、本当に必要な情報のみを厳選して表示し、ソートやフィルター機能を提供することで、ユーザーが必要な情報にすばやくアクセスできるようにします。

一覧画面で表示するカラムについても慎重に考えられると良いでしょう。ユーザーリストに本当に「最終ログイン日時」が必要なのかどうか、実際のユースケースを想定して判断しましょう。

5. 学習コストの最小化

新しいユーザーでも直感的に操作できる設計かどうか、いまいちど確認してみてください。標準的なUIコンポーネントを使用しているかどうか、操作があらゆる場面で一貫しているかどうかを確認してください。

ラベルやプレイスホルダーにも気を配れると良いでしょう。エラーが発生した場合も、何が問題で、どうすれば解決できるのかを丁寧に説明することで、操作時のストレスを軽減することができます。

6. 効率的なデータコピー機能

ユーザーは管理画面以外のシステムも併用していることを想定しましょう。管理画面の情報をコピーして貼り付ける場面は意外と多いです。IDやコードなどの識別子については、ワンクリックでコピーできる機能を実装することで、作業効率を大きく向上させることができます。

また、表形式のデータについては、範囲選択してコピーできるようにすることで、他のシステムとのデータ連携をスムーズに行うことができます。

大量のデータを扱う場合は、データのエクスポート機能を提供することで、外部での分析や加工を容易にすることができます。

結論

管理画面の設計・実装において最も重要なのは、実際の利用者と利用シーンへの深い理解です。定期的にユーザーからフィードバックを収集し、実際の業務フローを理解することで、より使いやすい管理画面を作ることができます。

また、フィードバックに基づく迅速な改善や、業務変更への柔軟な対応も欠かせません。システムのパフォーマンスを常に最適な状態に保つことで、ユーザーの作業効率を高く維持することができます。ぜひ管理画面を構築する際の参考にしてみてください。

クエリア

Discussion