業務システムのミスは、機能そのものの不具合よりも「操作した結果が分かりにくい」ことで起きるケースが少なくありません。
ボタンを押した後に何が起きたのか分からない、うっかり別の処理を実行してしまった、スマホで見たら操作しづらかった、といった問題です。
これらは実装の正しさではなくUI/UXの設計で防げる領域です。この記事では、実務でよく使う「見せ方」のパターンと、それぞれをどう使い分けるべきかを整理します。
操作によって状態が変わる処理の設計については、 GETとPOSTの違いとセキュリティ もあわせて確認すると、なぜ確認画面が必要になるのかが理解しやすくなります。
以下は、この記事で解説している「ミスを防ぐUI」の実物サンプルです。チェックボックス・個数・届け先を選んで、次の4つを実際に操作しながら確認してみてください。
チェックボックスとプルダウンを選んで、そのまま送信するのではなく、モーダルで一度人の目に確認させたうえで送信することで、選択ミスや個数・届け先の入力ミスを劇的に減らせます。さらに送信前に「はい」「いいえ」の確認ダイアログを挟むことで、うっかりミスによる誤送信も防げます。
商品一覧
| 商品名 | タイプ | 単価 | 個数 | 届け先 | |
|---|---|---|---|---|---|
| オフィスチェア | 什器 | ¥18,000 | |||
| デスク | 什器 | ¥25,000 | |||
| モニターアーム | OA機器 | ¥6,500 | |||
| ノートPCスタンド | OA機器 | ¥3,200 | |||
| ワイヤレスマウス | OA機器 | ¥2,800 |
届け先別 送料・納期
| 届け先 | 送料 | 納期 |
|---|---|---|
| A事務所 | ¥800 | 翌々営業日 |
| B事務所 | ¥1,200 | 3営業日後 |
| C事務所 | ¥1,500 | 5営業日後 |
※本デモは記事内で仕組みを確認していただくためのサンプルです。実際の送信・注文処理は行われません。
ユーザーがボタンを押したとき、知りたいことは基本的に次の3つです。
この3つが伝わらない画面は、二重クリックや誤操作の原因になります。逆に言えば、処理の重さや取り消しやすさに応じて「見せ方」を正しく選ぶだけで、ミスの大半は防げます。
実務でよく使う見せ方は、大きく分けて次の3パターンです。
最もシンプルな確認手段がダイアログボックスです。典型的なのは次のようなパターンです。
「終了しますか」 [ はい ]
「はい」を押すとダイアログが閉じ、処理が実行されます。構造はシンプルですが、役割は重要です。
ダイアログボックスは、取り消しが難しい操作の直前に、もう一段階の確認を挟むための仕組みです。削除・送信・退室・保存せずに閉じるといった、後戻りしづらい操作に向いています。
逆に、頻繁に行う軽い操作にまでダイアログを挟むと、ユーザーは内容を読まずに反射的に「はい」を押すようになります。こうなると確認の意味がなくなり、事故防止の効果が失われます。
ダイアログを使うべきかどうかは、次の基準で判断すると迷いません。
両方に当てはまる場合だけダイアログを使う、というのが実務的な線引きです。
ダイアログよりも情報量が多い操作には、モーダルを使います。よくある例が、一覧に項目を追加する画面です。
モーダルには「追加」ボタンと「×」ボタンを置き、入力後に「追加」を押すと、背後の画面を切り替えることなく、その場で一覧に行が追加されます。
このとき、ページ遷移やリロードを挟まずJavaScriptで一覧に行を差し込むのがポイントです。処理のたびに画面が切り替わると、ユーザーは「今どこにいるのか」を見失いやすくなります。モーダルはその場に留まったまま完結させることで、この迷いを防ぎます。
また、入力項目が複雑な場合は、モーダル内の入力欄の下に解説用のスライダーを配置すると効果的です。各項目の意味や入力例を、操作の流れを止めずに確認できるようにするためです。
モーダルが向いているのは、次のようなケースです。
一方で、ボタンを押した結果を別ウィンドウで開く設計が適しているケースもあります。
たとえば、元の画面の情報を見ながら別の作業を並行して進めたい場合や、印刷用画面・外部ツールへの遷移など、元の画面から完全に切り離して扱いたい場合です。
別ウィンドウを立ち上げる設計は、モーダルと異なり「元の画面と同時に見比べたい」という要求に向いています。ただし、次のようなデメリットも把握しておく必要があります。
このため、別ウィンドウを使うのはPC操作が前提の業務画面や、頻度が低い操作に限定するのが実務的な判断です。
ここまでの3パターンは、画面サイズによって最適な見せ方が変わります。特に重要なのが、要素のカラム配置です。
PCでは横幅に余裕があるため、複数カラムを並べて情報量を確保できます。一覧と詳細を左右に並べたり、入力項目を2列で配置したりする設計です。
一方スマホでは、横幅が限られるため、カラムを維持すると要素が小さくなりすぎ、誤タップの原因になります。実務では、次のようにカラム数を画面幅に応じて切り替えるのが基本です。
このとき注意したいのが、単に見た目を縮小するのではなく、操作の優先順位に合わせて要素の並び順を変えることです。スマホでは特に、確認・実行系のボタンを親指の届く範囲に配置するなど、誤操作を防ぐ工夫が必要になります。
また、ダイアログやモーダルもデバイスによって挙動が変わります。スマホではモーダルを画面全体に広げて表示する、別ウィンドウの代わりに新しい画面へ遷移させる、といった調整が一般的です。
UI/UXの見せ方は、装飾の問題ではなく、ミスを防ぎ効率を上げるための設計要素です。
判断のポイントは次の3つに集約されます。
そのうえで、PC・タブレット・スマホそれぞれの画面幅に合わせてカラム配置を切り替えることで、どのデバイスでも迷わず操作できる画面になります。