モーダルとは?モーダルウィンドウの意味とダイアログとの違い・デザインのコツ

モーダルの基本

まずは、モーダルとは何か、そしてよく似た言葉とどう違うのかを押さえましょう。

モーダル(モーダルウィンドウ)とは

モーダルとは、画面の手前に重ねて表示され、それに答えるか閉じるまで、後ろの画面を操作できなくする表示のことです。

このような窓を「モーダルウィンドウ」、モーダルの形で表示することを「モーダル表示」と呼びます。

「モーダル」は英語の「モード(mode)」から来た言葉で、画面が「この窓の中だけを操作するモード」に切り替わることを表しています。

身近な例では、スマートフォンのアプリを開いたときに「新しいバージョンがあります」という窓が出て、「アップデート」か「あとで」を押すまでほかの部分を触れなくなる、あの状態がモーダルです。

窓を閉じれば、どこでも自由に押せるいつもの状態に戻ります。

デジタル庁デザインシステムでも、モーダルダイアログを「モードをもつダイアログ」で、表示されている間は「ダイアログ内しか操作できません」と説明しています(モーダルダイアログ|デジタル庁デザインシステム)。

たとえば、下書きを削除しようとしたときに「本当に削除しますか?」と確認する窓が開き、答えるまでほかのボタンが押せなくなるのが、典型的なモーダルです。

見本では、記事の画面(灰色の線)の上に半透明の暗い膜をかぶせ、その手前に確認の窓を置いています。

窓の中は「タイトル(何を聞いているか)」「本文(補足の説明)」「ボタン(答え方)」の3つで組み立てるのが基本です。

モーダルとモードレスの違い

モーダルの反対は「モードレス(非モーダル)」で、窓が開いていても後ろの画面をそのまま操作できる表示のことです。

違いは見た目ではなく、「開いている間、ほかの場所を操作できるかどうか」にあります。

Webの仕組みを解説するMDNでも、HTMLの<dialog>要素について、モーダルはページのほかの部分の操作をブロックし、非モーダルはほかの部分を操作できる、と区別しています(MDN: <dialog>: ダイアログ要素)。

モーダルの見本では、後ろの画面が暗くなり、「ログイン」に答えるまで記事を読み進められません。

モードレスの見本では、検索の小窓が開いていても、後ろの記事はそのまま読めます。

「今すぐ答えてもらわないと先に進めない」ときはモーダル、「作業しながら横で使ってほしい」ときはモードレス、と考えると選びやすくなります。

モーダルとダイアログ・ポップアップの違い

モーダルと似た言葉に「ダイアログ」と「ポップアップ」がありますが、指す範囲が少しずつ違います。

ただし、呼び方や定義はデザインシステム(部品の見た目や使い方のルールをまとめたもの)によって違うため、ここでは代表的な使われ方を紹介します。

呼び方	指すもの	例
モーダル	後ろの画面を操作できなくする「性質」	答えるまで閉じられない確認の窓
ダイアログ	見る人とやりとり(対話)するための小さな窓。モーダルとモードレスの両方がある	削除の確認、名前の入力、設定の変更
ポップアップ	画面の手前に飛び出して表示されるもの全般を指す、広い呼び方	モーダル、広告の窓、ブラウザが新しく開く小さなウィンドウ

つまり、「モーダル」は操作をふさぐかどうかという性質、「ダイアログ」は対話のための窓という部品の種類、「ポップアップ」は飛び出す表示全般をざっくり指す言葉です。

たとえば「本当に削除しますか?」の確認の窓は、画面の手前に飛び出して表示されるので「ポップアップ」、見る人に答えてもらうための窓なので「ダイアログ」、答えるまで後ろを触れないので「モーダル」と、3つの呼び方のどれにも当てはまります。

同じものを、見た目(飛び出す)・役割(対話する)・ルール(後ろをふさぐ)という別々の切り口で呼んでいる、と考えると整理しやすくなります。

そのため、「モーダルなダイアログ」を略して「モーダル」と呼ぶことが多く、デジタル庁デザインシステムでは「モーダルダイアログ」という名前の部品として扱っています。

一方、GoogleのMaterial Designでは、ダイアログを「アプリの内容の手前に表示される、モーダルな窓の一種」と説明しています(Dialogs – Material Design 3(英語))。

チームで話すときは、「後ろを操作できなくするか」を言葉で確かめておくと、思い違いを防げます。

モーダルの使い方とデザインのコツ

ここからは、モーダルをどんな場面で使い、どうデザインすれば見る人の邪魔にならないかを見ていきます。

モーダルを使う場面・使わない場面

モーダルは、見る人の作業を止めてでも、いま答えてほしいことがあるときだけに使います。

モーダルは今していることを強制的に中断させるため、多用すると「また邪魔された」と感じさせてしまうからです。

Material Designも、ダイアログはわざと作業を中断させるものなので控えめに使うべきだ、としています。

デジタル庁デザインシステムが挙げている使う場面・使わない場面をもとに整理すると、次のようになります。

	場面の例
使う	削除のように取り消せない操作の前の確認(押し間違いの防止) 窓の中で完結する短いメッセージ
使わない	見る人が何も押していないのに、自動で開く 処理の完了や状態の変化を知らせる お知らせ・告知を見せる 補足の説明を見せる ナビゲーションメニューを見せる

特に、ページを開いた直後に自動でモーダルを出すと、見る人はなぜ表示されたのか分からず困惑し、閉じたら二度と見られないのではと迷う、とデジタル庁デザインシステムは指摘しています。

「保存しました」のような完了の知らせはアラートやトースト、補足の説明は本文や注記で見せるなど、ほかの部品で済まないかを先に考えましょう。

アラートは、ページの中に色付きの枠などで表示するお知らせのことです。

トーストは、画面の下や端に小さく現れ、数秒たつと自動で消える短いお知らせのことで、トースターからパンが飛び出す様子が名前の由来といわれています(アラートやトーストの種類と使い分けは、アラート・通知とは?で解説しています)。

背景を暗くする理由

モーダルを開いたときは、後ろの画面に半透明の暗い膜をかぶせるのが一般的です。

この膜は、Material Designでは「スクリム(scrim)」と呼ばれています。

背景を暗くする理由は、主に次の2つです。

• 窓に注目させる
  後ろの画面が暗く沈むことで、明るい窓だけが浮き上がり、「いまはここを見てください」と伝わります。
• 後ろが操作できないことを伝える
  暗くなった部分は「いまは触れない場所」だと、見た目で分かります。
  キーボード操作などの作り方をまとめたWAI-ARIA Authoring Practices Guide(APG)でも、モーダルの外側の操作できない部分は、ふつう見えにくくするか暗くする、と説明しています(Dialog (Modal) Pattern | APG(英語))。

暗くしすぎて後ろが何も見えなくなると、どの画面の上で窓が開いたのか分からなくなるので、うっすら透けて見える程度にとどめましょう。

閉じ方をはっきり示す

モーダルは後ろの画面をふさぐ部品なので、「どうすれば閉じられるか」がひと目で分かることがとても大切です。

閉じ方が分からないと、見る人は窓の中に閉じ込められたように感じてしまいます。

モーダルの閉じ方には、主に次のようなものがあります。

• 「キャンセル」などのボタン
  答えの選択肢の1つとして、何もせずに閉じるボタンを置きます。
• 閉じるボタン(×)
  窓の角に置く「×」のボタンです。
  答えるボタンがない、お知らせだけの窓で使います。
• キーボードのEscキー
  APGでは、Escキーでモーダルを閉じられるようにすることが示されています。
• 暗い背景をクリック・タップ
  背景を押すと閉じる作りもよく使われます。
  ただし、入力の途中で誤って背景に触れると内容が消えてしまうので、入力欄がある窓では使わないか、閉じる前に確認するとよいでしょう。

注意したいのは、「はい」「いいえ」のような答えるボタンと、「×」を同じ窓に並べる場合です。

デジタル庁デザインシステムは、答えるボタンと閉じるボタンが両方あると、どちらを押しても同じ結果なのか見る人が判断できなくなるため、閉じるボタンは答えるボタンがないときだけ使う、としています。

パソコンのウィンドウの「×」のように「×=キャンセル」と受け取る人もいれば、「答えずにひとまず閉じるだけで、あとでまた聞かれるのでは」と受け取る人もいて、押した結果の想像が人によって分かれてしまうからです。

特に削除の確認のような取り消せない場面では、「×」を置かずに「キャンセル」と文字で書いたボタンにしたほうが、見る人は迷わず安心して押せます。

NGの見本では、「×」を押すと「いいえ」と同じなのか、それとも別のことが起きるのかが分かりません。

OKの見本では、閉じる手段を「キャンセル」1つにまとめ、もう一方のボタンも「削除する」と動作をそのまま書いたことで、押す前に結果が想像できます。

また、OKの見本では取り消せない操作のボタンを赤にしていますが、色だけに頼らず「削除する」という言葉でも伝えている点がポイントです(色だけに頼らない考え方は色だけに頼らないデザインとは?で解説しています)。

中身は短く、1つの用件にしぼる

モーダルの中には、1つの質問や1つの短い作業だけを入れるようにします。

窓の中で長い文章を読ませたりスクロールさせたりすると、後ろの画面が見えないまま作業が長引き、いま何をしていたのかを見失いやすくなるからです。

たとえば、長い入力フォームや何ページにもわたる説明は、モーダルに詰め込まず、別のページとして用意するほうが分かりやすくなります。

スマートフォンでは画面が小さいので、窓の横幅は画面の端から少し内側までにおさめ、ボタンは指で押しやすい大きさを確保しましょう(ボタンの押しやすい大きさはボタンの内側の余白とは?で解説しています)。

コーディングでモーダルを作るとき

ここからは、Webサイトを自分でコーディングする(HTMLなどのコードを書いて形にする)人向けの補足です。

コードを書かない人は、この節は読み飛ばして「実践のポイント」へ進んでも構いません。

デザインツールだけで作る場合は、「HTMLにはモーダル用の部品が用意されている」とだけ覚えておけば十分です。

HTMLでは<dialog>要素を使い、JavaScriptのshowModal()で開くとモーダルとして表示され、後ろの画面が操作できなくなり、Escキーでも閉じられます。

<dialog id="confirm">
  <p>この下書きを削除しますか?</p>
  <form method="dialog">
    <button value="cancel">キャンセル</button>
    <button value="delete">削除する</button>
  </form>
</dialog>

背景の暗い膜は、CSSの::backdropという指定で色を変えられます(MDN: ::backdrop)。

開閉の動きはJavaScriptで作ります(JavaScriptの学び方はJavaScript学習ロードマップで紹介しています)。

実践のポイント

モーダルのデザインで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ページを開いた直後に、キャンペーンやメルマガ登録のモーダルを自動で出してしまうことがあります。
  読みに来た内容をいきなりふさぐと、見る人はそのままページを離れてしまうかもしれません。
  お知らせはページの中のバナーなど、ふさがない形で見せましょう。
• 「保存しました」のような完了の知らせをモーダルで出し、毎回「OK」を押させてしまうことがあります。
  知らせるだけなら、自動で消えるトーストや画面の中のメッセージで十分です。
• 閉じるボタンが小さすぎる、背景と同じ色で見えにくい、などで閉じ方が分からないことがあります。
  閉じる手段は、窓の中ではっきり見える形で用意しましょう。
• モーダルの上にさらにモーダルを重ねてしまうことがあります。
  どの窓に答えているのか分からなくなるので、重ねずに済む流れを考えましょう。

よくある質問

• Q. モーダルとダイアログは同じもの?
  A. 重なる部分は大きいですが、同じではありません。
  モーダルは「後ろを操作できなくする性質」、ダイアログは「対話のための窓」という部品の種類を指し、ダイアログにはモーダルなものとモードレスなものがあります。
  ただ、実際には「モーダルなダイアログ」を略して「モーダル」と呼ぶことが多いです。
• Q. 画像をクリックすると拡大表示される窓もモーダル?
  A. 拡大中に後ろの画面を操作できない作りであれば、モーダルの一種です。
  この場合も、×ボタンやEscキー、背景のクリックで閉じられるようにしておくと親切です。
• Q. 背景はどれくらい暗くすればいい?
  A. 決まった数値はありません。
  窓がはっきり浮き上がり、後ろの画面がうっすら透けて見える程度を目安に、実際の画面で確かめながら調整しましょう。

まとめ

モーダルとは、画面の手前に重ねて表示され、答えるか閉じるまで後ろの画面を操作できなくする表示のことで、後ろを操作できるモードレスとは「ほかの場所を操作できるか」で区別します。

作業を止めてでも答えてほしい場面だけに使い、背景を暗くして窓に注目させ、ボタンの言葉で結果が分かる閉じ方を用意することがポイントです。

まずはよく使うサイトやアプリでモーダルが開いたときに、「本当に作業を止める必要があったか」「閉じ方がすぐ分かったか」を確かめてみてください。