【もーだる】

モーダル とは?

💡 画面を暗幕で覆って「これを先に見てください」と言うUI
📌 このページのポイント
ショッピングサイト ← 暗い幕(オーバーレイ)で背景をブロック カートに追加しました スニーカー(26cm)× 1 ¥12,800 購入手続きへ 買い物を続ける
モーダルが開くと背景全体に暗いオーバーレイがかかり、中央の白いウィンドウだけが操作できる状態になる
ひよこ ひよこ

モーダルって何?よくショッピングサイトで画面が暗くなってウィンドウが出てくるやつのこと?

ペンギン先生 ペンギン先生

そうそう、まさにそれ!あれがモーダルだよ。画面全体に半透明の暗い幕(オーバーレイ)をかけて、その上にウィンドウを浮かせる表示方式のことなんだ。閉じるまで後ろの画面は操作できなくなるよ。

ひよこ ひよこ

ダイアログと何が違うの?同じじゃない?

ペンギン先生 ペンギン先生

実は意味が違うんだ。ダイアログは「確認ウィンドウ」という UI の「部品」の名前で、モーダルは「他の操作をブロックしている状態」という「状態」の概念なんだよ。モーダルなダイアログもあれば、モーダルじゃないダイアログもある。逆に画像ギャラリーの拡大表示みたいな、ダイアログじゃないけどモーダルなUIもあるんだ。

ひよこ ひよこ

モーダルって「使いすぎると悪い」って聞いたんだけど、なんで?

ペンギン先生 ペンギン先生

ユーザーの作業を強制的に中断させるからだよ。たとえばネット記事を読んでいるときに「メルマガ登録してください!」ってモーダルが出てきたら、読む気が一気になくなるよね。操作の流れを止めるのはそれだけ強い行為だから、本当に重要なことだけに使うべきって設計の世界では言われているんだ。

ひよこ ひよこ

モーダルとモードレスの使い分けって、どうやって判断するの?

ペンギン先生 ペンギン先生

「ユーザーが今の作業を続けながら参照できるか」が判断基準で、参照しながら操作を続けてほしいならモードレス、今すぐ決定・確認してほしいならモーダル、という考え方なんだ。でも実際には「このアラート、モーダルにすべきか?」という議論はデザイナーとエンジニアの間でよく起きる話で、コンテキストや優先度によって答えが変わってくる。モーダルの乱用がなぜ「UXを壊す」と言われるか、ちゃんと説明できるエンジニアやデザイナーは意外と少ないんだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「モーダル」って出てきたら「画面を暗くして前面に浮かび上がる、他の操作をブロックするウィンドウのことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Modal」 = 様式の・形式の(ラテン語 modus「様式」由来)
💬 UIでは「特定のモード(状態)に入る」という意味で使われるよ。他の操作ができない「モード」に切り替わる感じだね
← 用語集にもどる