モーダルウィンドウとは？役割やメリット・デメリットを紹介

この記事を読むための時間：5分

Webサイトで度々使用されるモーダルウィンドウを知っていますか？

Web制作を勉強し始めたばかりの人にとっては馴染みがなく、なんのことかわからないという方も多いはずです。

今回は、「モーダルウィンドウって何？」という方や「どんな時に使うの？」という方向けに詳しく解説します。

モーダルウィンドウとは？

モーダルウィンドウとは、ウィンドウ内の指定に対してユーザー適切に応答しない限り他のウインドウを操作できないウィンドウのことです。アクセス中のサイトを親ウィンドウとし、その子ウィンドウとして生成されます。

例えばECサイトを見ているときに突然クーポンのお知らせをするウィンドウが現れて、「詳しく見る」をクリック、もしくはキャンセルしないと他のページに行けなかったという経験がありませんか？

そのような広告や誘導は、モーダルウィンドウという技術を使って表示させているものです。モーダルダイアログなどと呼ばれることもあります。

モーダルウィンドウとポップアップの違い

子ウィンドウが生成されるものといえば、ポップアップを思い浮かべる方も多いのではないでしょうか？

モーダルウィンドウとポップアップウィンドウの違いは、「制御」か「表示の仕組み」かです。

先ほども述べたように、モーダルウィンドウはユーザーが応答するまで「制御」を親ウィンドウに戻しません。

一方、ポップアップは「突然現れる」という意味の名前の通り、子ウィンドウが自動的に立ち上がる「表示の仕組み」を指します。表示中も他ウィンドウを開けるポップアップウィンドウもあれば、開けない「モーダルなポップアップ」もあります。

モーダルウィンドウを使う場面と役割

モーダルウィンドウには様々な役割があります。主に活躍するのは以下の5つの場面です。

• ①ユーザーの注意を引きたい時
• ②ユーザーを誘導したい時
• ③誤った操作の警告をしたい時
• ④エラーをお知らせする時
• ⑤ローディング中の操作を防止したい時

順番に解説していきます。

①確実に認知して欲しい時

セールやクーポン、レコメンドアイテム、新商品など、ユーザーに認知してほしい情報を表示する時に役立ちます。応答しない限り他ページを操作できないように表示されるモーダルウィンドウなら、ユーザーの目を引き留めるかは別としても100％目には入ります。

②ユーザーを誘導したい時

キャンペーンページや会員登録ページなど、広告先にユーザーを誘導したい時にも役立ちます。「移動する」「キャンセル（移動しない）」などの選択肢を提示すれば、ユーザーはどちらかを選択する必要があるので、興味をそそるクリエイティブや文章を表示できれば効果的です。

③誤った操作の警告をしたい時

入力フォームを離れる、ファイルを消去する、完了前の「戻る」操作など、ダメージの大きい誤った操作を防止するのにも役立ちます。ユーザビリティをあげるだけでなく、操作ミスによる機会損失を防ぐのにも有用です。

④エラーをお知らせする時

不可能な操作、入力方法・内容が間違っているなどによるエラーの表示にも使用されます。ユーザーがエラー状態に気がつかない事を避けるために「OK」をクリックするなどの応答をしないと操作に戻れないようにする事が多いです。

⑤ロード中の操作を防止したい時

ユーザーがサイト内のボタンをクリックし、ロード中であることに気がつかずに操作をしてしまうのを防ぐためにも使用されます。読み込みが終わるまで応答を要求しないモーダルウィンドウもあれば、途中で「キャンセル」などの応答ができるものもあります。

モーダルウィンドウのデメリット

モーダルウィンドウが様々な場面で活躍することはわかりました。しかし、その一方で以下のようなデメリットもあります。

• サイトのユーザビリティを低下させる事がある
• 操作の意味がわからないとユーザーが動けない
• スマートフォンへの実装が大変

モーダルウィンドウの活用を検討する際は必ずデメリットを理解したうえで判断しましょう。

3つのデメリットについて、それぞれ解説していきます。

サイトのユーザビリティを低下させる事がある

モーダルウィンドウ表示中はユーザーのしたい操作を中断させてしまいます。皆さんも急いでいる時や情報を探している時に子ウィンドウが表示されるとイライラしませんか？

元のコンテンツにかぶさって表示されるため、ユーザーが読んでいたテキストの前後を見失う可能性も高いです。特にコンテンツと関連性の低い内容やユーザーにメリットのない広告は嫌われてしまいます。

できるだけユーザーの行動を邪魔せず、有益な情報を表示するように心がけましょう。

操作の意味や方法がわからないとユーザーが動けない

モーダルウィンドウが表示された時、ユーザーはウィンドウ内の選択肢を選ぶ、文字入力する、閉じるなどの指定に対して適切に応答しなければなりません。

モーダルウィンドウのデザインや文章が適切でなく理解できないと、ユーザーはどうすることもできず、長時間足止めされたりブラウザごと閉じてしまったりします。その場合、サイトや企業に対してマイナスな印象を与えてしまうでしょう。

スマートフォンへの実装が大変

画面サイズが大きいPCではモーダルウィンドウの表示に問題はありませんが、スマホの場合はウィンドウが画面外にはみ出す可能性が高いです。その場合、画面内にモーダルウィンドウの一部しか表示されておらず内容がわかりません。

また、操作ボタンや×（閉じる）ボタンが小さく、操作が難しいケースも多くあります。

スマホからアクセスするユーザーが多いサイトでは、スマホでのユーザビリティを意識する必要があるでしょう。

モバイルで最適なモーダルウィンドウとは

スマートフォンで子ウインドウを表示したい場合、アコーディオンメニューという代替手段があります。

アコーディオンメニューとは、+など特定の個所をタップすると選択した項目が広がってコンテンツを表示できるUIデザインです。子ウィンドウではなく同一ページに表示されるので、ユーザーにストレスなく操作してもらえます。

他のページを操作できなくするような制御はなく、強制表示や応答の強制もできませんが、一時的に情報を表示できるという点で同じ働きをします。

無料で使えるモーダルウィンドウプラグイン5選

最後に、無料で使えるおすすめのオープンソースのモーダルウィンドウプラグインを5つ紹介します。

• jQuery Modal
• Responsive Material Design Modals
• SweetAlert2
• animatedModal.js
• popModal

各公式サイトではデモ（サンプル）も見られるので、気になったモーダルウィンドウは確認してみてください。

jQuery Modal

言語：jQuery

jQuery Modal公式サイト：https://jquerymodal.com/

どんなWebサイトにもフィットする、シンプルなモーダルウィンドウプラグインです。背景（親ウィンドウ）がしっかり暗くなるのが特徴。タッチイベントやショートカットにも対応しており、フェードアニメーションなどのカスタム動作の実装を手軽に行えます。ファイルサイズが約1KBと軽量なのもポイントです。

Responsive Material Design Modals

言語：CSS、JavaScript

Responsive Material Design Modals公式サイト：https://codepen.io/ettrics/pen/Jdjdzp

マテリアルデザインを意識した、レスポンシブなモーダルウィンドウプラグインです。スムーズなアニメーションと大きなボタン、シンプルな文字組みが特徴的。画像も配置できます。

SweetAlert2

言語：JavaScript、CSS

SweetAlert2公式サイト：https://sweetalert2.github.io/

Web上の警告にぴったりなモーダルウィンドウプラグインです。レスポンシブかつアクセシブル（WAI-ARIA）で、自由にカスタマイズできます。

animatedModal.js

言語：JavaScript

animatedModal.js公式サイト：https://joaopereirawd.github.io/animatedModal.js/

フルスクリーンに表示されるユニークなモーダルウィンドウプラグインです。いくつも用意されているアニメーションと大画面表示によって強いインパクトを残せます。

popModal

言語：jQuery、CSS

popModal公式サイト：http://vadimsva.github.io/popModal/

短文から長文、ボタン、表示場所、アニメーションまで、手軽にカスタムしやすいモーダルウィンドウプラグインです。デザインの変更も自由にできます。

まとめ

今回は、モーダルウィンドウについて解説しました。

モーダルウィンドウは適切に利用すると便利な技術ですが、使い方を誤るとサイトのユーザビリティを低下させる可能性もあるため、慎重な判断が求められます。よく考えて、効果的に活用しましょう。