モーダルウィンドウ
ページの上に覆い被さるように表示される小ウィンドウのことです。最大の特徴は、「表示中は背後のページが暗くなるなどして操作できなくなり、ユーザーが必ず何らかの応答（選択や閉じる操作）をしなければならない」点にあります。
［主な用途］
- フォーム入力、画像の拡大表示、動画再生。
- Cookieの同意取得、購入確定、退会確認のダイアログなど。
鉄則：「必ず応答してほしいとき」だけ使う
便利だからとキャンペーン告知などに多用すると、ユーザー体験（UX）を著しく損ないます。情報の補足程度なら通常ページに記載し、モーダルは「ユーザーの明確な判断（Yes / No）が必要な場面」に限定するのが基本です。また、閉じやすいように「×ボタン」や「背景クリックで閉じる機能」を必ず用意します。
現場で陥りやすい「落とし穴」
- ページ表示直後に複数のモーダルが連続する：サイトを開いた瞬間に「Cookie 同意」と「アプリ DL 勧誘」と「メルマガ登録」が立て続けに出る状態。ユーザーがストレスを感じ、離脱率が跳ね上がる典型的な失敗パターンです。
- SEO の評価を下げるリスクがある：スマホサイトなどで、コンテンツを大きく隠すような煩わしいモーダルを表示すると、Google からペナルティを受け、検索順位が下がる可能性があります。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- マーケター
会話上での使用例
Cookie 同意の見せ方をデザイナーに相談する場面
-
Web 担当者
サイトを開いた瞬間に Cookie の同意を取りたいのですが、どう見せるのが良いですか。
-
デザイナー
画面全体を覆うモーダルで出すのが一般的ですね。ただ同意と拒否のボタンを必ず並べて、選んだ後はすぐ本来の操作に戻れるようにしておきましょう。
初回訪問者へのクーポン表示をマーケターと検討する場面
-
マーケター
初めて来てくれた人に、クーポンのモーダルをドンと出したいんです。
-
Web 担当者
気持ちは分かるのですが、開いた直後に大きく出すと離脱が増えがちなんです。少し時間を置いて、1 セッションに 1 回だけ、すぐ閉じられる形にしませんか。