- 公開日： 最終更新日：
モーダルウィンドウとは？目的やデメリット、実装方法を紹介
昨今のホームページ制作では、モーダルウィンドウの活用が一般的になりつつあります。
モーダルウィンドウを導入することで、ページを開いた瞬間に画面中央に浮かび上がるお知らせとして表示できるため、訪問者の目を引きつけ、重要なコンテンツを確実に届けることができます。
このページでは、モーダルウィンドウとは何かから、利用する目的、デメリット、実装方法を解説します。
目次
モーダルウィンドウとは
モーダルウィンドウとは、ページを開いたり、リンクをクリックした際に、画面上に重ねて表示されるウィンドウのことです。
大きな特徴は、ウィンドウ上で操作を完了しない限り、背後のページを操作できない点にあります。たとえば、ホームページを閲覧中に突然ウィンドウが現れ、「閉じる」や「次へ」を押さないとページ操作ができなくなった経験はないでしょうか。それがまさにモーダルウィンドウです。
この仕組みにより、ユーザーに特定のアクションを促したり、重要な情報を確実に見せることができます。
モーダルウィンドウとポップアップの違い
モーダルウィンドウは、ポップアップと似た見栄えですが明確な違いがあります。
モーダルウィンドウはウィンドウ上で操作をしなければホームページの操作ができなくなるのに対して、ポップアップは単にコンテンツを目立たせるためのウィンドウになるので、ポップアップが開いた状態でもページの操作が可能です。
すなわち、モーダルウィンドウは、単にコンテンツを目立たせるだけではなく、ユーザーが閲覧をして期待通りの操作をしなくてはならず、ポップアップとは明確に利用する目的が異なってきます。
そのため、ポップアップとモーダルウィンドウの違いを調べる方は多いと思いますが、見栄えは似ていますが、機能が異なるため、利用目的がまったく違うものになると理解することが大切です。
モーダルウィンドウの事例
ここでは、モーダルウィンドウを活用した具体例として、ANA・JALの株主優待券を販売するホームページの仮会員登録のページを紹介します。
このページでは、他のページを閲覧していたユーザーが、ヘッダーにある「仮会員登録」のリンクをクリックすると、モーダルウィンドウが自動的に表示されます。
ウィンドウ内には同意文が記載されており、訪問者は内容を確認したうえで「上記に同意のうえ仮会員登録を行う」ボタンをクリックしなければ、ページを操作できません。
この仕組みにより、ユーザーに重要な注意事項を確実に読んでもらうことができ、結果としてユーザー満足度の低下防止や、仕様に関する問い合わせ件数の削減につながっています。
モーダルウィンドウを利用する目的
モーダルウィンドウは、ユーザーの目に確実に届く位置に情報を表示できるため、さまざまな目的で活用されています。ここでは、代表的な3つの目的を紹介します。
重要な情報を告知する
モーダルウィンドウを活用すると、重要な情報を強調して告知することが可能です。
重要な情報はページの上部に目立つように掲載すると思いますが、どんなにページの上部に目立つように掲載していたとしても、必ずユーザーが閲覧してくれるとは限りません。
そういった場合に、モーダルウィンドウに重要なコンテンツを掲載し、モーダルウィンドウ内のリンクをクリックしなければ、ページを操作できなくすることで、確実にユーザーに情報を告知することが可能になります。
誤操作を防ぐ
モーダルウィンドウを活用して、警告を表示すれば、ユーザーの誤操作を防ぐことが可能です。
たとえば、ネットショップのマイページで、過去の購入履歴を削除できる機能を追加したとします。
その際に、削除ボタンをクリックすると、すぐに消えるのではなく、モーダルウィンドウを表示させて、「削除したファイルは元に戻すことができません」などのメッセージを表示させ、OKボタンをクリックしなければ、削除ができないようにします。
特にネットショップのマイページや商品購入時においては、誤操作によって大きな損害を被る可能性があるので、そういった場合にモーダルウィンドウを活用することで、ユーザーの誤操作を減らすことが可能です。
ロード中の操作を防止
ホームページには、処理が重く、ページが適切に表示されるのに時間がかかるコンテンツがあります。
そういった場合には、処理中にモーダルウィンドウを表示させ、ユーザーに現在ロード中であることを伝えることで、ユーザーがホームページが固まったと誤解をしてしまうことを防ぐことが可能です。
モーダルウィンドウのデメリット
モーダルウィンドウのデメリットは、多用しすぎてしまうと、ユーザーにストレスを与えてしまうことです。
たとえば、ネットショップのマイページで購入履歴を削除する機能を追加したときに、大量に削除したい場合には、大量のモーダルウィンドウが表示されます。
モーダルウィンドウが大量発生してしまうと、ユーザーはその操作を面倒くさいと感じてしまい、その操作を諦めてしまうか、そのネットショップよりも便利なネットショップへと移動してしまいます。
そのため、モーダルウィンドウを利用する際には、ユーザーがストレスを感じない仕組みの構築を意識しなくてはデメリットを被ってしまうので、本当に必要なポイントのみで活用するようにしましょう。
モーダルウィンドウの実装方法
モーダルウィンドウを実装する方法は、大きく分けて3つあります。ホームページの制作環境や目的に応じて、最適な方法を選びましょう。
jQueryを使った作成方法
jQueryを使ったモーダルウィンドウの記述方法はこちらのページに記載があります。シンプルな記述でモーダルウィンドウを実装することができるのでおすすめの実装法です。
HTML
<div id="cover"></div>
<div id="modal"><span id="close">X</span> blah blah</div>
<button id="edit">Click Me</button>
CSS
//jQuery Simple Modal Example
$('#edit').click(function(){
$('#cover, #modal').fadeTo(200,1);
});
$('#close, #cover').click(function(){
$('#cover, #modal').fadeTo(200,0).hide();
});
JavaScript
#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;
}
CSS3を使った作成方法
CSS3を利用したモーダルウィンドウの実装法はこちらのページに記載があり、jQueryのコードを記述してもモーダルウィンドウが表示されない場合にはCSS3で対応しましょう。
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;
}
WordPressならプラグインの活用
WordPressを使ってホームページを制作している場合は、jQueryやCSSを利用せずとも、プラグインをインストールして有効化すれば、モーダルウィンドウを実装することが可能です。
モーダルウィンドウの実装プラグインは複数ありますが、当社が利用した経験があるのがPopup Makerというプラグインで、インストール数が700,000を超えているので、多くのユーザーが利用している安全性の高いプラグインとなっています。
まとめ：モーダルウィンドウは伝えるを確実にする仕組み
モーダルウィンドウは、ユーザーに重要な情報を確実に届けるための効果的な手法です。
ページ上のどこにいても視線を引きつけられるため、近年では多くのホームページで活用されています。ただし、多用しすぎるとユーザーにストレスを与え、サイト全体の使いやすさを損なう原因にもなります。本当に必要な場面だけに絞って表示させることが、効果的な活用のポイントです。
モーダルウィンドウを正しく活用することで、ユーザーにとっても運営者にとっても満足度の高いWeb体験を実現できます。
