モーダル | UX TIMES

モーダルとは、元の画面の上に表示され、ユーザーに確認や入力などを求める間、元の画面を操作できなくする仕組みである。モーダルを閉じるか、必要な操作を終えると、元の画面で作業を再開できる。

たとえば、編集中の文書を保存せずに閉じようとすると、「保存しますか？」という確認の窓が表示される。背後に文書が見えていても、その間は編集できない。保存するか、保存せずに閉じるか、閉じる操作を取り消すかを選ぶと、確認の窓が閉じる。

モーダルとモードレスの違い

文書を閉じる確認では、たとえば次の3つの選択肢を用意する。

確認の窓が表示されている間、元の文書は操作できない。背後を暗くしたり、ぼかしたりすることもあるが、こうした見た目はモーダルの必須条件ではない。重要なのは、元の画面の操作が制限される点である。

確認や入力のために表示する画面上の領域を「ダイアログ」という。元の画面を操作できないものが「モーダル」、操作できるものが「モードレス（ノンモーダル）」である。たとえば、画像編集ソフトで色やブラシを選ぶパネルを開いたまま、画像の編集を続けられる場合はモードレスにあたる。

窓の種類	開いている間の元の画面
モーダル	操作できない
モードレス（ノンモーダル）	操作できる

モーダルは確認や警告だけでなく、ファイルを開く・保存する操作や、Webページの画像を拡大表示する場面にも使われる。

「モード」とは、操作の働きが変わる状態を指す。たとえば文書の確認窓が開いている間、背後の文書をクリックしても編集はできない。モーダルはこのように、先に手前の窓への対応が必要な状態を作る。

Appleで働いたLarryラリー Teslerテスラー氏は、モードをなくす、または減らすことを訴えた。ユーザーがモードの切り替わりに気づかないと、いつもと同じ操作をしたつもりでも、予想と異なる結果になることがある。

モーダルを使えば、未保存の文書を閉じる前に確認を促し、内容が失われるのを防ぐ機会を作れる。取り消せない操作の前に注意を促す場合や、手続きを進めるために必要な情報を入力してもらう場合にも役立つ。

一方、モーダルが表示されると、ユーザーは作業を中断しなければならない。作業の流れが途切れたり、窓の背後にある情報を確認できず、判断しにくくなったりする。

また、確認を表示すれば必ず誤操作を防げるわけではない。何度も確認が出ると、ユーザーは内容を読まずにボタンを押すようになることがある。

まず、ボタンには押した結果が分かる言葉を使う。「はい／いいえ」よりも「保存／保存しない」の方が、何が起きるかを判断しやすい。

次に、確認画面だけで誤操作を防ごうとしない。必要に応じて、操作後に元に戻せる機能も検討する。

さらに、モーダル内の作業は短くし、閉じ方も明確にする。判断に必要な情報が背後にある場合や、複数の手順を要する場合は、モーダルに詰め込まず、専用ページを使うことを検討する。

現在の作業と関係のないメールマガジン登録の勧誘などでは、モーダルを避ける。不要な中断はユーザーの負担になり、サービスへの信頼を損なうおそれがある。