「お問い合わせフォーム、画面遷移させずにポップアップでパッと出したいんです」——リニューアルの打ち合わせで、こうした要望はよく出ます。気持ちは分かります。別ページに飛ばすと離脱しそうだし、その場で完結したほうがスマートに見える。けれど、安易に選んだモーダル（ポップアップ）が、後から「スマホで閉じられない」「戻るボタンを押したらサイトごと出てしまった」「入力中に誤って消えてやり直しになった」といったクレームを生むことは珍しくありません。
Smashing Magazine の Modal vs. Separate Page: UX Decision Tree は、まさにこの「モーダルか、別ページか」を感覚で決めないための判断フローを示しています。モーダルは便利な万能部品ではなく、短く・自己完結し・元の文脈にすぐ戻れるタスクにだけ向く、用途の限られた道具だという整理です。受託で画面を設計する立場では、この判断を誤ると、見た目はスマートでも実際には使いにくい・離脱の多い画面が出来上がります。
なぜ「とりあえずモーダル」が事故るのか
モーダルが厄介なのは、ブラウザの基本的な振る舞いを横取りしてしまう点にあります。
通常のページ遷移なら、ユーザーはブラウザの「戻る」で前に戻れますし、URL をブックマークしたり、人に共有したりできます。ところがモーダルは多くの場合 URL を持ちません。だからスマホで無意識に「戻る」を押すと、モーダルだけが閉じるのではなくサイトそのものから離脱してしまう。入力途中の内容も消えます。共有しようと URL をコピーしても、相手にはモーダルが開いていない素のページしか見えません。
スマホでの破綻はさらに深刻です。画面が小さいモーダルに長いフォームを詰め込むと、ソフトキーボードが立ち上がった瞬間に入力欄が隠れ、閉じるボタン（×）にも届かなくなる。「閉じられない・送れない・戻れない」の三重苦で、ユーザーは静かに離脱します。アクセシビリティ面でも、フォーカスがモーダルの外に逃げる、スクリーンリーダーが背後のページを読み上げてしまうといった実装ミスが起きやすく、キーボードや音声で操作する人を締め出しがちです。Web アクセシビリティの基礎は Web アクセシビリティ実践ガイド（GH Media） も参考にしてください。
モーダルが向く場面・別ページが向く場面
判断の軸はシンプルで、「そのタスクは短く自己完結しているか」「元の作業にすぐ戻る必要があるか」の 2 点です。
| 出し方 | 向いている内容 | 理由 |
|---|---|---|
| モーダル | 削除の確認、画像の拡大、短い 1〜2 項目の入力 | 一瞬で終わり、元の文脈にすぐ戻る |
| 別ページ | 問い合わせ・申込・複数ステップのフォーム | URL を持て、戻る・共有・再開ができる |
| 別ページ | じっくり読ませる規約・詳細情報 | スクロール量が多く、モバイルで破綻する |
| モーダル | 操作の流れを止めたい重要な警告 | あえて他の操作をブロックしたい |
「ボタンを押した結果がすぐ元に戻る軽い確認」はモーダルの得意分野です。逆に、入力に時間がかかる・後で続きをやりたくなる・人に見せたくなるものは、ほぼ例外なく別ページが正解です。問い合わせや申込フォームをモーダルに押し込むのは、もっとも避けたいパターンです。フォームの最適化そのものは EFO（入力フォーム最適化）の進め方（GH Media） も併読してください。
受託での判断基準 — 「見た目」より「やり直せるか」
弊社の受託では、画面の出し方を決めるとき、デザインの好みではなく次の問いを順番に確認します。
第一に、「ユーザーが途中で中断したら、どうなるか」。中断して戻ってこられないなら別ページにします。第二に、「このページを誰かに共有したくなるか」。URL で指したい情報はモーダルにしません。第三に、「スマホで指が届くか、キーボードだけで完結するか」。物理的に操作できないなら、その時点で却下です。
ある予約サイトの案件では、当初「予約入力を 1 枚のモーダルで完結させたい」という要望でしたが、入力項目が 8 つあり、スマホでは半分が隠れる状態でした。ここを思い切って別ページの 2 ステップに分けたところ、スマホからの予約完了率が改善しました。「画面遷移させたくない」という発注側の不安が、実際には逆効果になっていたわけです。画面遷移のなめらかさが心配なら、遷移自体を高速・自然にする方法もあります。考え方は Navigation API で途切れない画面遷移を設計する受託（GH Media） を参考にしてください。
認知負荷とアクセシビリティの観点
モーダルは「いま開いているものを片付けないと先に進めない」という圧を与える部品です。これが連続したり、不要な場面で多用されたりすると、ユーザーの認知負荷が一気に上がります。とくに、注意の維持が苦手な人や、操作に時間のかかる人にとっては、勝手に消える・操作を強制されるモーダルは大きなストレスになります。
設計の原則として、モーダルを使うなら最低限、Esc キーで閉じられる、背後のスクロールを止める、フォーカスをモーダル内に閉じ込める、閉じたら元の位置にフォーカスを戻す、を満たす必要があります。これらを満たせない・満たすのが大変なら、それは「別ページにすべき」というサインです。多様な利用者を取りこぼさない設計の考え方は 認知特性に配慮したインクルーシブ UX 設計の受託（GH Media） も参考になります。
ハマりやすい落とし穴
第一に、モーダルの中にさらにモーダルを開くこと。重なった瞬間に閉じる順序が分からなくなり、ユーザーは確実に迷子になります。第二に、重要な情報をモーダルだけに置くこと。料金や規約のような「後から見返したい・共有したい」情報は、URL を持つページに置くべきです。第三に、モバイルを後回しにして PC で設計を確定させること。モーダルの破綻はほぼスマホで起きるので、狭い画面から設計するのが安全です。
まとめ — 出し方は「やり直せるか」で決める
モーダルか別ページかは、デザインの趣味でも開発の都合でもなく、ユーザーがそのタスクをやり直せるか・戻れるか・共有できるかで決めるべき問題です。短く自己完結する操作はモーダルで軽快に、入力に時間のかかる成約導線は別ページで堅実に。この使い分けを基準として持っておくだけで、「スマートに見えるのに使いにくい」画面を避けられます。受託では、発注側の「遷移させたくない」という不安を一度ほどき、離脱とクレームを生まない出し方へと設計を導きます。
「フォームをポップアップにすべきか迷っている」「モーダルがスマホで使いにくいと言われた」というご相談は お問い合わせフォーム からお気軽にどうぞ。画面ごとの出し方の棚卸しから始められます。
