- 公開日： 最終更新日：
モーダルウィンドウとは？目的やデメリットを紹介
昨今のホームページ制作では、モーダルウィンドウを利用する機会が増えています。
モーダルウィンドウを活用することで、訪問者に該当のページで重要なコンテンツを告知することが可能になるので、コンバージョン率が高まる可能性があります。
当ページでは、モーダルウィンドウとは何かや、利用する目的、デメリット、実装法を紹介します。
目次
モーダルウィンドウとは
初めにモーダルウィンドウとは何かを紹介します。
モーダルウィンドウとは
モーダルウィンドウとは、ページに訪問したり、リンクボタンがクリックされると表示され、さらには期待通りのアクションを行わなければ消すことができないウィンドウのことを言います。
ホームページを閲覧している際に、急にページ上にウィンドウが表示されて、閉じるや次へなどのボタンを押さない限り、ページが閲覧できなくなった経験がある方もいると思いますが、それがモーダルウィンドウです。
すなわち、そのページで特定のアクションを行ったユーザーに強制的に表示させ、さらには期待通りのアクションを行わない限りは消すことができないコンテンツになり、モーダルウィンドウを利用することで、ページで重要なコンテンツをユーザーに閲覧してもらうことができるのです。
モーダルウィンドウの事例
モーダルウィンドウの事例の1つとしては、制作実績のJALの株主優待券を販売するホームページの仮会員登録のページで活用しています。
他のページを閲覧していたユーザーが仮会員登録のページにアクセスすると表示されるウィンドウがモーダルウィンドウになっています。
訪問者は、上記に同意のうえ仮会員登録を行なうというリンクボタンをクリックしなければ、該当ページでは何もできない状態になります。
ポップアップとの違い
モーダルウィンドウは、ポップアップと似た見栄えですが、モーダルウィンドウはウィンドウ上で操作をしなければホームページの操作ができなくなるのに対して、ポップアップは単にコンテンツを目立たせるためのコンテンツになるので、ポップアップが開いた状態でもページの操作が可能です。
すなわち、モーダルウィンドウは、単にコンテンツを目立たせるだけではなく、ユーザーが閲覧をして期待通りの操作をしなくてはならず、ポップアップとは明確に利用する目的が異なってきます。
そのため、ポップアップとモーダルウィンドウの違いを調べる方は多いと思いますが、確かに見栄えは似ていますが、機能が異なるため、利用目的がまったく違うものになっています。
モーダルウィンドウを利用する目的
重要な情報を告知する
モーダルウィンドウを活用すると、重要な情報を強調して告知することが可能です。
重要な情報はページの上部に目立つように掲載すると思いますが、どんなにページの上部に目立つように掲載していたとしても、必ずユーザーが閲覧してくれるとは限りません。
そういった場合に、モーダルウィンドウに重要なコンテンツを掲載して、モーダルウィンドウ内でリンクのクリックを行わなければ、ページを操作できなくすることで、確実にユーザーに情報を告知することが可能です。
誤操作を防ぐ
モーダルウィンドウを活用して、警告を表示すれば、ユーザーの誤操作を防ぐことが可能です。
例えば、ネットショップのマイページで、過去の購入履歴を削除できる機能を追加した場合に、削除ボタンをクリックすると、すぐに消えるのではなく、モーダルウィンドウを表示させて、「削除したファイルは元に戻すことができません」などのメッセージを表示させ、OKボタンをクリックしなければ、削除ができないようにします。
特にネットショップのマイページや商品購入時においては、誤操作によって大きな損害を被る可能性があるので、そういった場合にモーダルウィンドウを活用することで、ユーザーの誤操作を減らすことが可能です。
ロード中の操作を防止
ホームページには、処理が重く、ページが適切に表示されるのに時間がかかるコンテンツがあります。
そういった場合には、処理中にモーダルウィンドウを表示させ、ユーザーに現在ロード中であることを伝えることで、ユーザーがホームページが固まったと誤解をしてしまうことを防ぐことが可能です。
モーダルウィンドウのデメリット
モーダルウィンドウのデメリットは、1点になっており、それは多用してしまうと、ユーザーにストレスを与えてしまうことです。
先述している通り、例えばネットショップのマイページで購入履歴を削除する機能を追加したときに、大量に削除したい場合には、大量のモーダルウィンドウが表示されます。
モーダルウィンドウが大量発生してしまうと、ユーザーはその操作を面倒くさいと感じてしまい、その操作を諦めてしまうか、そのホームページよりも便利なホームページへと移動してしまいます。
そのため、モーダルウィンドウを利用する際には、ユーザーがストレスを感じない仕組みの構築を意識しなくてはデメリットを被ってしまうので、本当に必要なポイントのみで活用するようにしましょう。
モーダルウィンドウの実装法
モーダルウィンドウを実装する方法は大きく分けて3つあります。
jQueryのコードを記述
jQueryを使ったモーダルウィンドウの記述方法はこちらのページに記載があり、3行の記述でモーダルウィンドウを実装することができるので、当社ではおすすめしている実装法です。
CSS3のコードを記述
CSS3を利用したモーダルウィンドウの実装法はこちらのページに記載があり、jQueryのコードを記述してもモーダルウィンドウが表示されない場合にはCSS3で対応しましょう。
WordPressならプラグインの活用
WordPressを使ってホームページを制作している場合は、jQueryやCSSを利用せずとも、プラグインをインストールして有効化すれば、モーダルウィンドウを実装することが可能です。
モーダルウィンドウの実装プラグインは複数ありますが、当社が利用した経験があるのがPopup Makerというプラグインで、Popup Makerは、インストール数が700,000を超えているので、多くのユーザーが利用しているプラグインとなっています。
モーダルウィンドウのまとめ
モーダルウィンドウについて紹介しました。
昨今のホームページ制作では、1ページあたりの文字数が増えている傾向があるので、重要なコンテンツを目立たせるために、モーダルウィンドウを活用するホームページは多くなりました。
ただし、過剰にモーダルウィンドウを利用することは、逆にユーザーの利便性を下げることに繋がるので、必要なポイントのみで活用するようにしましょう。
モーダルウィンドウって何？とお思いの方の参考になれば幸いです。
