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