Webサイトを閲覧していると、画面の中央に小さなウィンドウが表示され、操作や確認を求められることがあります。ログイン画面や「この内容で送信しますか？」といった確認メッセージで見かけたり、写真をクリックして拡大された際に見ることが多いこの仕組みは「モーダルウィンドウ」と呼ばれます。略して「モーダル」とだけ呼ぶこともあります。
ページを移動せずに情報を表示できる便利なUIなのですが、ポップアップとの違いや仕組みをきちんと理解していない人も少なくありません。今回はモーダルウィンドウに関して、知識をちょい足ししましょう。
モーダルウィンドウとは、今見ているページの上に重ねて表示される小さな画面のことです。
よくある用途として、以下の例が挙げられます。
モーダルウィンドウは、ページを移動せずに追加の情報や操作を提示できる仕組みです。ユーザーは元のページを離れることなく、必要な情報を得たり、必要などうさ（クリックなど）をその場で行うことが出来ます。
画面の中央に表示され、背景が少し暗くなることが多いのは、ユーザーの視線をそのウィンドウに集中させる目的を持っています。作業が終われば閉じて、すぐ元のページに戻れるのが特徴です。
通常のWebページでは、リンクをクリックすると別のページに移動します。しかしモーダルウィンドウは、ページの中に一時的なブラウザー画面を作るような仕組みのことを呼びます。
特徴としては以下の通りです。
モーダルウィンドウが表示されている間、ユーザーは基本的にそのウィンドウの操作に集中できます。背景のページは操作できない状態になっていることが多く、表示された内容を確認したり入力したりすることが求められます。この仕組みによって、ユーザーに「ここで一度確認してほしい」という意図を伝えることができるというわけです。
モーダルウィンドウとよく似た言葉に「ポップアップウィンドウ」の仕組みがあります。どちらも画面に突然表示されるため混同されることがありますが、仕組みには大きな違いがあります。
モーダルウィンドウは、あくまで同じページの中で表示される画面です。一方ポップアップは、ブラウザが新しいウィンドウやタブを開いて表示する仕組みです。現在のWebサイトではユーザー体験を考え、ポップアップよりもモーダルウィンドウが使われる場面が増えています。
モーダルウィンドウは、通常次の3つの技術を組み合わせて作られます。
です。例えば「ボタンをクリックするとモーダルが表示される」という動きは、JavaScriptによって実現されます。HTMLではモーダルの内容をあらかじめページの中に用意しておき、CSSで普段は見えない状態にしておきます。そしてボタンが押されたときにJavaScriptが動き、隠れていたモーダルを表示するという仕組みです。3つの役割を分けることで管理しやすくなります。
昔は設定が難しかったのですが、jQueryというJavaScriptのライブラリーの登場以降、劇的に普及しました。
モーダルウィンドウは便利な機能ですが、使いすぎるとユーザーにとって負担になることもあります。特にスマートフォンでは実機で検証して、便利だと感じる程度の多用差でとどめて置くことが大切です。便利だけれど使いすぎると逆効果となりますので、注意が必要です。
モーダルウィンドウは、ユーザーの操作を一度止めて注意を向けさせる仕組みです。そのため、頻繁に表示されると「作業を邪魔されている」という印象を与えることがあります。
Web制作では、ログイン確認や重要なメッセージなど、本当に必要な場面だけで使うことが望ましいとされています。適切に使えば、ユーザーにとってわかりやすい案内になります。
モーダルウィンドウとは、ページを移動せずに画面の上に重ねて表示される小さなウィンドウのことです。ユーザーに確認や入力を促す場面でよく使われ、ページの流れを大きく変えずに情報を提示できるのが特徴です。
また、別ウィンドウで表示されるポップアップとは仕組みが異なり、モーダルウィンドウはページの中で動作します。適切に使うことでWebサイトの使いやすさを高めることができます。
