モーダルウィンドウとは、元画面の上に別のウィンドウを表示し、ユーザーに情報を伝える画面のことです。特定の操作を行わないとほかの操作ができないため、ユーザーに警告のメッセージやエラーを通知するのに適しています。
本記事では、モーダルウィンドウについて、取り入れる目的や注意すべきポイント、実装方法をご紹介します。
モーダルウィンドウとは？
モーダルウィンドウとは、特定の操作を行なわないと、他の画面を操作できないウィンドウのことです。Webサイトを見ているときに、突然画面上にメッセージや警告が出てきたことはないでしょうか？それがモーダルウィンドウです。
閉じるボタンなどを押すまで、表示している間は他の操作が行えません。そのため、ユーザーに強制的に確認や操作を促せます。ユーザーに情報を確実に伝えたい場合には効果的ですが、ユーザーの操作を強制的に制御するため、実装する際は注意しなければいけません。
モーダルウィンドウに似たものとして、ポップアップとダイアログがあります。それぞれの仕組みや、目的の違いは次のとおりです。
ポップアップとの違い
ポップアップとは、Webサイトを開いたときに出てくる、画面の一番上に表示される別の画面のことです。ポップアップは広告や重要なメッセージ、登録画面への誘導などに用いられます。
モーダルウィンドウとポップアップでは、使う目的に違いがあります。モーダルウィンドウは画面上の操作をコントロールすることが目的なのに対して、ポップアップは目立たせるのが目的です。モーダルウィンドウは特定の操作を行わないと、他の画面が開きません。一方のポップアップは、画面上に表示されている状態でも、他の操作ができる点で異なります。
ダイアログとの違い
ダイアログとは、ダイアログボックスの略で、「dialog」は対話を意味します。訪問者にメッセージを確認させたり、入力させたりするために、操作途中で一時的に開かれる小さな画面のことをダイアログといいます。一般的に「送信しますか？」や「Yes・No」、「OK・キャンセル」など、意思確認に用いられます。
モーダルウィンドウは制御、ダイアログはやりとりが主な目的になっている点が異なります。ダイアログは、モーダルウィンドウと同様、画面を操作しないと他の操作が行なえない場合が多くあります。
モーダルウィンドウの目的
モーダルウィンドウは、場所やタイミングに応じて使うことが大切です。では、実際にモーダルウィンドウはどのような目的で使われているのでしょうか。ここでは、モーダルウィンドウが利用される主な4つの目的を解説します。
伝えたい情報を確実に伝える
モーダルウィンドウは、特定の操作を行なわないと他のウィンドウを開けないため、必ずユーザーの目に止まります。そのため、ユーザーに届けたい情報を確実に伝えることが可能です。
たとえば、利用規約の変更やシステムメンテナンスなどの重要な情報は、お知らせとしてサイトのトップページに記載します。ただし、いくら目立つように掲載しても、見落とされることがあります。そこで、モーダルウィンドウを活用することで、訪問者に確実に伝えられるのです。
また、クーポンやセール、新商品、おすすめアイテムなどの情報を知らせる際にも効果的です。適切に表示すれば、契約率などの向上も期待できます。
警告メッセージを表示する
モーダルウィンドウは、ユーザーに警告メッセージを伝えるのに適しています。たとえば、アカウント情報やファイルの削除などは一度処理すると戻せないので、最終確認の目的で、「入力された情報は消えますが、本当に操作を行いますか？」などのメッセージを表示させることが可能です。
モーダルウィンドウは、操作を間違えないように防止できるため、ユーザーの入力補助や離脱防止に役立ちます。ユーザーが利益を損失する可能性のある場合には、モーダルウィンドウを利用するとよいでしょう。
ただ、なかにはあまり確認せずに操作を行なうユーザーもいます。警告のメッセージをしっかりと確認してもらうためにも、デザインの強調や、多用を避けることなど、注目してもらえる工夫をしましょう。
エラーを通知する
モーダルウィンドウでは、Webサイトで行なえない操作をしたときや、間違った入力方法を行った際などにエラーを通知できます。たとえば、複数端末でログインしている状態で、ある端末からファイルを削除した場合、他の端末でも削除しようとすると、「そのファイルは存在しません」というエラーメッセージが表示されます。
また、知らないところでエラーが発生していて、気付かずにサービスの利用を続けているとユーザーにとって不利益になる可能性があります。モーダルウィンドウで知らせれば、ユーザーも気付けるので親切です。
ユーザーにエラー状態を気付かせるためにも、「OK」などをクリックしないと他の操作が行なえないモーダルウィンドウを使うことが多いのです。
ロード中の操作を防止する
ロード中だと気付かずに、別の操作を行うことを防ぐ目的でも、モーダルウィンドウは有効です。ものによっては処理が重くなり、ロードに時間がかかることもあります。モーダルウィンドウはロード中であることを知らせ、パソコンが固まったと思ってクリックするのを防止できます。
ロード中のモーダルウィンドウには、読み込みが終わるまで操作不能とするものと、途中でキャンセルできるものがあります。どちらにしても、モーダルウィンドウを表示させることで、安全に処理が進められます。
モーダルウィンドウのデメリット
モーダルウィンドウは、使い方を少しでも間違えると、ユーザーにとって邪魔な存在になりかねません。ユーザーが使いやすいサイトにするためにも、モーダルウィンドウのマイナス点を理解しておきましょう。
多用するとユーザーのストレスとなる
モーダルウィンドウを頻繁に表示すると、メインの画面が見られないことでユーザーのストレスにつながります。また、モーダルウィンドウを表示する度にユーザーは手を止めなければいけません。
さらに、モーダルウィンドウを閉じて元のページに戻っても、読んでいた場所が分からなくなることがあります。そのため、ユーザーのワークスピードの低下につながってしまいます。
モーダルウィンドウは広告にも使用されますが、広告が多すぎると購入を避けるユーザーもいます。「本当に表示させる必要があるのか」や「ユーザーの邪魔をしないか」を考えて、用いるべきかを判断しましょう。
ユーザーが離脱してしまう恐れがある
モーダルウィンドウが表示されたら、閉じるボタンを押す、画面内にある選択肢を選択する、文字入力をするなどの操作が必要です。そのため、モーダルウィンドウを消す方法が分からないユーザーは、そのままページを離脱してしまうことがあります。
本当に必要な情報なら効果的ですが、そうでない場合は使わないのがいいでしょう。Webサイトの印象が悪くなるだけでなく、離脱率も上がってしまいます。モーダルウィンドウの導入を検討するのなら、本当にモーダルウィンドウが適切なのか、ユーザーに不快感を与えないかなどをしっかり検討しましょう。
モーダルウィンドウの実装方法
モーダルウィンドウは、CMSの機能や、プログラミングで実装します。ここでは、プログラミングでの実装方法の例を紹介します。
プログラミングによる実装
Webサイトにモーダルウィンドウを導入する場合は、プログラミングに実装できます。モーダルウィンドウを実装する際は、HTMLやjQuery、JavaScript、CSSなどといったプログラミング言語が必要です。
一からモーダルウィンドウを作成しようと思うと時間がかかります。しかし、インターネット上ではサンプルコードが数多く見つかります。そのため、学習すれば自社に合ったモーダルウィンドウの作成が可能です。
自社にプログラミングの知識を持った社員がいない場合は、制作会社に外注するのがいいでしょう。制作会社に依頼すれば、専門家の視点からの意見が聞け、自社のWebサイトに合ったモーダルウィンドウを作成してくれます。
まとめ
モーダルウィンドウは、適切に利用すれば非常に便利です。情報を確実に伝えたり、操作ミスやエラーを通知したりできるので、ユーザーにとってもメリットになります。一方で、使い方を間違えるとユーザーのストレスや離脱につながる恐れがあるため、モーダルウィンドウの実装は慎重に判断することが大切です。
SEデザインでは、LPやオウンドメディアの構築をはじめとしたコンテンツマーケティング支援を行っております。集客やリード育成にお悩みの方は、お気軽にお問い合わせください。
