モーダル

定義

モーダルは、いま見ている画面の上にもう一枚重なって浮かび上がり、ユーザーの注意をその中へ ぐっと引き寄せる対話ウィンドウです。開くと背後の画面を半透明のスクリム(scrim)で覆って 暗くし、その下にある要素はクリックすらできないように塞ぎます。だからユーザーは、モーダルの 中の用事、つまり大事な確認をしたり、どうしても必要な値を入力したりを終えるまで、ほかの場所へ 抜け出せません。「本当に削除しますか?」のような確認ウィンドウや、短いログインフォームが 代表的なモーダルです。つまりモーダルは、いまこの判断が何よりも先だと画面全体で宣言する 仕掛けなのです。

なぜ重要か

モーダルの強みは流れを断ち切るところにあり、弱点もまさに同じところにあります。背景を塞いで 手前に飛び出してくるので、見逃してはいけない確認や、取り消せない操作を引き止めておくには この上なく効果的です。ですがまさにその強制力ゆえに、多用するとユーザーは、やろうとするたびに ウィンドウが立ちはだかるわずらわしさを感じます。だからモーダルは、本当に流れを止める価値の ある場面だけで惜しんで使う、強い道具なのです。またモーダルは、スクリムで背景を隠し、ほかの 要素より上に浮くよう高さ(重なり順)を上げ、開いている間はキーボードの焦点をその中に閉じ込める、 いくつもの原理が一度にかみ合って動く総合的なパターンでもあります。これらの要素がそろって はたらいて、モーダルはようやく役目を果たします。

よくある間違い

• ささいなお知らせまでモーダルで出すことです。保存に成功したときのように、ただ伝えるだけで よい用事にモーダルを使うと、ユーザーは毎回OKボタンを押してウィンドウを閉じなければなりません。 こうした軽い知らせはトーストやインラインメッセージに任せるほうが賢明です。モーダルを乱発する ほど、ユーザーは閉じる操作に疲れ、肝心の大事な確認まで流し読みするようになります。
• 閉じる手段をひとつしか用意しない、あるいはまったく用意しないことです。とくに外側クリックや ESCキーが塞がれていると、ユーザーは閉じ込められた感覚を受け、誤って開いてしまったウィンドウ から抜け出す道がなく、途方に暮れてしまいます。
• 削除のような危険な操作の確認ボタンを、ふつうのボタンと同じ見た目にしてしまうことです。色や 位置で区別されていないと、ユーザーがうっかり破壊的なほうを押して、取り返しのつかない失敗を しやすくなります。

実務のヒント

• モーダルは流れを断つ強い仕掛けなので、どうしても必要なときだけに使い、閉じる手段はいつも 複数、つまりXボタンと外側領域のクリック、ESCキーをそろえて用意しましょう。ユーザーが望んだ ときにいつでも抜け出せてこそ、閉じ込められた感覚を与えずに済みます。
• 削除のように取り消せない操作は、確認ボタンを危険を表す色ではっきりと区別しましょう。色だけ では区別が足りないときは、ボタンの文字も「削除」のように、何が起こるのかがはっきり伝わる 言葉にしておきましょう。
• モーダルが開いたらキーボードの焦点をその中に閉じ込め、閉じたら元々押していた場所へ焦点を 戻しましょう。この処理ひとつで、キーボードやスクリーンリーダーを使う人の体験が大きく 変わります。

関連概念