モーダルウィンドウとは？活用例とメリット・デメリット
モーダルウィンドウとは、ウェブサイト上で特定の操作を促すために表示されるポップアップウィンドウです。ユーザーが閉じるか操作を完了するまで他の操作を制限するため、重要な情報やアクションを強調して表示するのに適しています。モーダルウィンドウは、エラー通知や重要なメッセージの表示、コンバージョン率の向上などに利用される一方で、過度な使用や不適切な設計はユーザーにストレスを与え、離脱を招く可能性があります。そのため、ユーザー体験を損なわずに効果的に利用することが重要です。
この記事では、モーダルウィンドウとは何か、ポップアップやダイアログとの違い、効果的なデザイン要素、活用例、メリットとデメリットについて詳しく解説します。
モーダルウィンドウとは
モーダルウィンドウとは、WEBサイトなどの閲覧時に表示される特定の操作をするまで表示され続け、他の操作ができないウィンドウのことです。強制的に表示され、多くの場合は閉じる操作を行わない限りは別の操作が行えないためユーザーに対する警告文や重要なメッセージを表示させるために役立ちますが、商品への誘導やクーポン表示などによりコンバージョンを促進させるために使われることもあります。
ユーザーに対して強制的に見せるという点では優れた施策ともいえますが、ユーザー視点ではストレスになることもあり、離脱の要因としても挙げられるため利用の際には注意が必要です。
ポップアップとの違い
モーダルウィンドウと似たものにポップアップがありますが、ポップアップは最前面に表示されるウィンドウのことを意味しており、モーダルウィンドウのように他のウィンドウを操作できなくなるということはありません。
モーダルウィンドウは強制的に表示させ、他の操作を行わせないことによる画面操作の制御を行っているのに対し、ポップアップウィンドウでは目立たせることを目的にしている点で異なります。そのため、広い意味ではモーダルウィンドウはポップアップに含まれます。
ダイアログとの違い
モーダルウィンドウやポップアップと似たものに、ダイアログ（ダイアログボックス）があります。ダイアログはユーザーにメッセージを確認させたり、入力させたりするために小さな画面を一時的に開く画面のことです。一般的には、Yes/NoやOK/キャンセルのような意思表示のために用いられます。
ダイアログも他の操作が出来なくなる点ではモーダルウィンドウと似ていますが、モーダルウィンドウは画面制御を目的にしているのに対し、ダイアログは確認のようなやり取りを目的にしている点で異なります。
モーダルウィンドウのデザイン
モーダルウィンドウのデザインは各社でさまざまですが、必要となる要素には次の3つがあります。
- クローズボタン
- アクションボタン
- 背景のシャドウ
クローズボタンはモーダルウィンドウを終了するためのボタンのことです。一般的には右上に置くことが多いのですが、左上に置く場合やウィンドウを複数並べて中央に配置する場合もあります。ただし、右上以外にクローズボタンを設置することはユーザーのストレスにつながりますので、分かりやすく、簡単に離脱できるようにする必要があります。
アクションボタンは必須ではありませんが、多くのモーダルウィンドウではユーザーへの操作を求めることになるため用意するようにしてください。特にコンバージョン向上のためにモーダルウィンドウを利用する場合には、商品やサービスを簡潔にわかりやすく紹介したり、具体的にどのようなメリットが存在するのかのようなクリックを促すような内容にしてください。
背景のシャドウも必須ではありませんが、モーダルウィンドウが表示されている間は閉じるかアクションボタンを押すまでは他の操作が行えないことを示すためにも背景を暗くし、操作できないことをユーザーに示す必要があります。背景が変わらないままの場合、クローズボタンに気が付かないユーザーにはストレスの原因になります。
モーダルウィンドウの活用例
モーダルウィンドウはユーザーの操作を制限してサイト側の意図する行動を促すことができます。そのため、次のような場面で活用されます。
- 重要な情報を伝える場合
- エラーを通知する場合
- ロード進行中と伝える場合
重要な情報を伝える場合
モーダルウィンドウは他のウィンドウに干渉されず、強制的に表示することができるため、必ず読んでほしいものやユーザーの注意関心を確実に引きたい場合に利用されます。システムエラーの通知、システムメンテナンス、利用規約などの通知が挙げられますが、コンバージョン促進のためにクーポンの配布、セールス情報、サービス情報の掲載、お勧め商品の通知などをモーダルウィンドウで表示することもあります。
商品をカゴに入れたものの購入には至らなかった場合やサイト離脱時にモーダルウィンドウを表示することでコンバージョンが上がったという事例も確認されていますが、離脱を防止するためにモーダルウィンドウを表示するということは本来の使い方とは異なりますので注意が必要です。
エラーや警告を通知する場合
モーダルウィンドウは強制的に表示されるという特性を利用して、エラーや警告を表示するという使い方も適しています。アカウントやファイルを削除する際に「本当に削除してよいですか？」という確認をすることで誤った操作を防いだり、ユーザーが意図せずに行った操作が本当に問題ないのかを確認することで
モーダルウィンドウは、誤った操作や危険な操作を防ぐための警告やエラーを伝える用途にも適しています。例えば、アカウント情報やファイルを削除するときに、「入力した情報は保存されず消えますが、本当に削除しますか？」というメッセージを表示して、ユーザーの意図しない操作を防ぐことが可能です。保存せずに操作を終了しようとした場合に、問題ないかを確認してくるウィンドウが出てくることがありますが、これもモーダルウィンドウの一種といえます。
ロード進行中と伝える場合
ロード時間が長い場合に、ロード進行中だと伝える場合にもモーダルウィンドウは有効な手法です。処理の内容によってはロードに時間がかかることがありますが、パソコンがフリーズしたのではなく処理中だと示すことで作業の中断や誤操作を防ぐことができます。処理内容によってはロードが終わるまで完全に操作ができないものと、ロードをキャンセルすることができるものがありますが、どちらの場合であってもロード進行中と伝えることで誤った操作を防ぐという点ではモーダルウィンドウは有効です。
モーダルウィンドウのメリット
モーダルウィンドウには次のようなメリットがあります。
- ユーザーの注意の集中
- コンバージョン率の向上
- コンテンツの分離
- フォーカスの制御
ユーザーの注意の集中
画面全体を覆い、ユーザーの注意を特定の内容に集中させることで、重要な情報やアクションを見逃すことなく、確実に確認させることができます。フォーム入力、確認メッセージの表示、エラー通知など、ユーザーに対して次のステップを明確に指示することも可能です。
コンバージョン率の向上
通常のWEBサイトでは目に入りづらいようなコンテンツであっても、モーダルウィンドウにすることで認知させることができるため、特定のアクションを取らせるために利用されます。
コンテンツの分離
ページのメインコンテンツから分離して情報を表示できるため、ユーザーが一時的に別の情報を確認する際に便利です。例えば、詳細な説明や追加情報を提供する際に、ページ遷移を避けて表示できます。
フォーカスの制御
モーダルウィンドウはユーザーが特定の操作を完了するまで他の操作を制限することができるため、ユーザーが意図しない操作を行うリスクを減少させ、必要なアクションを確実に行わせることができます。
モーダルウィンドウのデメリット
モーダルウィンドウを効果的に使うことでユーザビリティを向上させたり、コンバージョン率が上がったりしますが、強制的に表示させるということはユーザーのストレスにつながります。以下のデメリットを理解したうえで、本来の使い方との乖離が少ないように利用すべきです。
- 操作が制限される
- ユーザーのストレスになる
- ユーザーの離脱につながる
- モバイル表示には限界がある
操作が制限される
モーダルウィンドウが表示されると他の操作ができなくなります。強制的に表示してでも確認してもらうべきメッセージがあれば有効な手法ですが、ユーザーの興味関心の低い広告やサービスを伝えてもユーザー体験を阻害することにつながります。モーダルウィンドウを閉じたときに、ユーザーがそれまでに読んでいた場所から移動しているというリスクもあり、過度な使用はユーザー満足度を下げることになります。
ただのポップアップではなく、モーダルウィンドウを表示させるべきかどうかという基準で判断し、利用するかどうかを検討してください。
ユーザーのストレスになる
モーダルウィンドウが表示されるということはユーザーは画面が表示される際に手を止めることになるためストレスになります。モーダルウィンドウを利用することでコンバージョン率が上がるというデータがある反面、モーダルウィンドウを利用しない企業があるのはユーザーのストレスにつながった結果、再訪がなくなることを恐れたり、サイトや企業ごと避けられる可能性を考慮してのことです。
WEB広告にはモーダルウィンドウが頻繁に利用されますが、基本的に広告を強制的に表示することでユーザー体験が向上することはありませんので、広告に利用する場合には特に注意すべきです。
ユーザーの離脱につながる
モーダルウィンドウが表示されると、ユーザーはアクションボタンかクローズボタンを推す必要があります。しかし、アクション方法がわかりづらかったり、クローズボタンが押しづらかったりするとユーザーはサイトから離脱してしまう可能性があります。
ユーザーのリスクを下げるために行うモーダル表示ではなく、サイト側の都合によるモーダル表示によってユーザー体験が向上することはほとんどありませんので、使う場合には慎重に判断し、アクションはできる限りわかりやすく、使いやすく工夫する必要があります。
モバイル表示には限界がある
PCで操作する場合には画面が大きいので十分に表示できますが、モバイル機器、特にスマートフォンで表示する場合にはモーダルウィンドウでの表示は操作がしづらい可能性があります。一般的にスマホへのモーダルウィンドウの実装は画面サイズに合わせてのレイアウトが必要ですので工数がかかります。その工数を掛けてまで対応するかどうかは検討の余地があります。
なお、モーダルウィンドウのように強制的なものではありませんが、モバイル機器に対して子ウィンドウを表示したい場合には、アコーディオンメニューという代替手段を使う方法があります。特定の箇所をタップすることで項目が広がってコンテンツを表示できるメニューで、同一ページに表示されるためユーザーにストレスなく表示することができます。制御という観点では弱いものの、画面サイズに縛られずにメッセージを伝えるという点では導入の余地があります。
モーダルウィンドウをWebサイトに実装する方法
WEBサイトにモーダルウィンドウを実装する方法にはいくつもありますが、大別すれば次の4つに絞られます。
- ゼロからコーディングする
- JQueryを利用する
- Javascriptを使う
- WordPressのプラグインを利用する
jQueryやWordPressのプラグインを使う場合でも、HTMLやCSSなどの知識が必要ですが、JSFiddleでは世界中のユーザーがコードを配布していますので比較的簡単に導入可能です。もし特殊な操作や特別なデザインを実装する場合には制作会社に依頼した制作が有効です。
ゼロからコーディングする
リンク先をHTMLのIDに指定し、CSSの:target疑似クラスを使ってフォーカス中だけ表示するように実装しているコードの例。
コードの引用元：https://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
HTML
| <a href=”#openModal”>Open Modal</a>
<div id=”openModal” class=”modalDialog”> <div> <a href=”#close” title=”Close” class=”close”>X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> </div> </div> |
CSS
| .modalDialog {
position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } |
JQueryを利用する
jQueryでボタンクリックにより背景と子ウィンドウを表示させるコードを作成して実装する例。
コードの引用元：https://jsfiddle.net/flatiron_school/w3y49/
HTML
| <div id=”cover”></div>
<div id=”modal”><span id=”close”>X</span> blah blah</div> <button id=”edit”>Click Me</button> |
CSS
| #cover {
position: absolute; min-width: 100%; min-height: 100%; background: rgba(0,0,0,0.25); z-index: 1; display: none; }
#modal { position: absolute; width: 33%; left: 33%; top: 20%; height: auto; background: rgba(255,255,255, 1); z-index: 2; display: none; } |
Javascript+JQuery
| //jQuery Simple Modal Example
$(‘#edit’).click(function(){ $(‘#cover, #modal’).fadeTo(200,1); });
$(‘#close, #cover’).click(function(){ $(‘#cover, #modal’).fadeTo(200,0).hide(); }); |
Javascriptを使う
Javascriptを用いて、HTMLの表示を切り替えるコードを実装する例。
コード引用元：https://jsfiddle.net/sqbjoav4/98/
HTML
| <button id=”open-modal” name=”open-modal-btn”>Open Modal</button>
<div id=”demo-modal” class=”modal”> <div class=”modal-content”> <div class=”modal-header”> <span class=’close’>X</span> <h2>Modal Header</h2> </div> <div class=”modal-body”> <p>Some text in the Modal Body</p> <p>Some other text…</p> </div> <div class=”modal-footer”> <h3>Modal Footer</h3> </div> </div> </div> |
CSS
| .modal {
display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; background: rgba(0, 0, 0, 0.8); z-index: 99999; animation-name: show; animation-duration: 0.5s }
.modal-content { position: relative; background-color: #fff; margin: 10% auto; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
@keyframes show { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } }
.modal-header { padding: 12px; background-color: grey; color: white; }
.modal-body { padding: 12px; }
.modal-footer { position: relative; background-color: #fefefe; margin: auto; padding: 12px; }
.close { color: #aaa; float: right; font-size: 16px; }
.close:hover, .close:focus { color: black; cursor: pointer; } |
Javascript
| var modal = document.getElementById(‘demo-modal’);
var btn = document.getElementById(‘open-modal’); var close = modal.getElementsByClassName(‘close’)[0];
// When the user clicks the button, open the modal. btn.onclick = function() { modal.style.display = ‘block’; };
// When the user clicks on ‘X’, close the modal close.onclick = function() { modal.style.display = ‘none’; };
// When the user clicks outside the modal — close it. window.onclick = function(event) { if (event.target == modal) { // Which means he clicked somewhere in the modal (background area), but not target = modal-content modal.style.display = ‘none’; } }; |
WordPressのプラグインを利用する
WordPressにはさまざまな利用用途に応じたプラグインがありますが、Popup Makerのようなプラグインを導入することでモーダルウィンドウを簡単に作成することができます。ただし、トライアル版は無料ですが、有償プラグインであるため費用が掛かります。
他にも複数のプラグインを組み合わせて対応する方法はありますが、利用できるかどうかはサイトの仕様によりますのでWEB担当者と相談のうえで判断するようにしてください。
まとめ
モーダルウィンドウは、ユーザーの注意を特定のアクションに集中させるための強力なツールです。モーダルウィンドウを使用することで、重要な情報の伝達やエラー通知、コンバージョンの促進が効果的に行えますが、過度な使用やユーザー体験を無視したデザインはストレスや離脱の原因となるため、慎重な設計と実装が求められます。また、モバイル環境での表示には特別な配慮が必要です。正しいタイミングと適切なコンテンツでモーダルウィンドウを活用することで、ユーザーの操作をスムーズに導き、ウェブサイトのパフォーマンス向上に繋げることが可能です。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
