モーダルウィンドウについて説明します。
モーダルウィンドウをざっくり説明すると、Webページ上にエラー内容を表示したり、ユーザーのクリック操作に応じて適切なメッセージを表示する際に使用されます。
モーダルウィンドウとは
改めてモーダルウィンドウについて具体的に説明します。
モーダルウィンドウとはWebページ上にエラー内容や完了メッセージの表示、ユーザーに操作や選択を促したりすることができるユーザーインターフェースの手法の1つです。
モーダルウィンドウの特徴は、モーダルウィンドウを閉じるまで、そのページ上で別の操作ができない点が特徴です。
モーダルウィンドウと似たような用語でポップアップウィンドウという用語がありますが、ポップアップウィンドウはモーダルウィンドウと逆で、ウィンドウが開いた状態でも別の操作ができます。
モーダルウィンドウの使いどころとメリット
モーダルウィンドウの使いどころとメリットについて説明します。
会員登録やログインを促したい時
会員制を導入しているWebサービスでよく見かけると思いますが、会員限定コンテンツを閲覧させたい時に、新規会員登録ボタンやログインID・パスワードなどの入力フォームを表示させたい時に使用されます。これによりスムーズな会員獲得をすることが実現できます。
警告メッセージを表示したい時
受信メールを削除したり、ファイルを削除したり、保存せずにページを離れたりする時に、ユーザーがその操作を取り消すことができない時などに警告する際に使用されます。
その警告メッセージを閉じない限り、処理が実行されないので、ユーザーによる誤操作を防止することができます。
ユーザーに選択や操作をさせたい時
ショッピングサイトなどで商品の購入数を変更したり、物件情報サイトなどで詳細条件を選択させたい時に使用されます。
ショッピングサイトや物件情報サイトではコンバージョン（購入や登録や申し込み）を獲得することがゴールなので、ページ遷移によるユーザー離脱を防止するためにモーダルウィンドウを使用するケースもあります。
ちょっとした補足や説明文をページ上に表示させたい時
ちょっとした補足や用語の説明文を表示させたい時に使用されます。
わざわざ別ページに遷移させて補足や説明文を表示するのでなく、同一ページ内に表示させたい時があると思います。
しかし同一ページ上に文章をレイアウトするのが困難な時に「？」や「i」アイコンをクリックさせて、モーダルウィンドウ上に補足や説明文を表示させる方法です。
モーダルウィンドウのデメリット
モーダルウィンドウのデメリットについて説明します。
ユーザーの操作が限定される
モーダルウィンドウが表示されている時は別の操作ができないため、ユーザーから自由度を奪うことになります。
Webサイトの運営側にとってはメリットに感じる点が、逆にユーザーにとっては利便性のないものに感じてしまう場面も中にはあります。
スマートフォン端末での表示が困難
PCブラウザなど画面サイズが大きい端末で表示するには問題ありませんが、スマートフォンなどの画面サイズが小さいデバイスなどでモーダルウィンドウを表示させるには、レイアウト的に難しい場面があります。
小さい画面上に固定されたモーダルウィンドウを表示させるため、表示させる情報が多い場合は、モーダルウィンドウ内でスクロールさせる等の実装が必要です。
まとめ
モーダルウィンドウを使用するとユーザーに操作や選択を促したり、メッセージを伝えたり、訴求を促したい時に効果を発揮できます。
ただし使い方を間違ったりすると、かえってユーザーにとって使いづらいサイトになってしまう恐れもあるので、モーダルウィンドウを実装する時はユーザーテストなどの実験を取り入れながら、モーダルウィンドウで実装すべきか、そうでないか、最適なインターフェースを考える必要があります。
