モーダルとは？モーダルウィンドウの使い方を徹底解説

思うように閉じてくれないウィンドウに、イライラしたことはありませんか？モーダルウィンドウとは、まさにそんなウィンドウのこと。

Webサイトやアプリケーションに組み込まれるUIのひとつであるモーダルウィンドウについて、適切な使い方や基本的な情報をまとめました。

モーダルとは「モーダルウィンドウ」

モーダル（=modal）とは「モードを持つ」という意味で、「あなたがこのウィンドウを閉じるまでなにもさせません」というウィンドウのことです。

ウィンドウ内で表示された操作を完了する、あるいはキャンセルをしなければ、ウィンドウの外をクリックしても戻れません。

このため、モーダルウィンドウはユーザーに重要な操作や確認を促したりするときに用いられることが多いです。また、モーダルウィンドウは『JavaScript』で作られることが多いです。

近年は操作感が悪くなるという理由から、モーダルウィンドウを避けるデザイナーが多くなっています。さらに、最近のOSではダイアログボックス自体使われることが少なくなってきました。

▲Chris Johnson / CMJ

モーダルウィンドウとポップアップの違い

モーダル：表示されたタスクが完了するまで、ユーザーは他の作業を行えない。ユーザーは表示内容に従うか、モーダルウィンドウを閉じなければならない。

ポップアップ：ポップアップウィンドウが表示されても、作業中の画面の操作を続行できる。

モーダルウィンドウを使わない方がいい理由

モーダルウィンドウは、決定的な操作をさせたいサービスの提供者・開発者にとっては使いやすい手段ですが、ユーザーにとってはどうでしょうか。デバイスがなんであれ、モーダルウィンドウはユーザーエクスペリンスを悪くしてしまうと言われています。

画面の大半を占めてしまう

多くのアプリケーションでは、モーダルウィンドウのサイズを最適化できなかったのが原因で失敗しているケースがたくさんあります。

特に、画面サイズが小さいほどモーダルウィンドウは向いていません。また、ほとんどのスマートフォンでオンボードキーパッドが使われていますが、このキーボードが画面のほとんどを占めていることがよくあります。

小さい画面内に、閉じられないウィンドウが表示されてしまうとユーザーの混乱を招きます。

ユーザーが望まない操作を促してしまう

ユーザーが望まない機能を無理やり実行させる必要はあるでしょうか？ 開発者は、どんな機能でも強制的に実行させる力を持っています。それゆえにユーザーの気持ちになって考えることは大切です。

モーダルウィンドウのような機能は、時としてユーザーが望まない動作を無理やりさせることとなってしまいます。必然的に、これはユーザーのストレスとなってしまいます。

アコーディオンUIで解決！

モーダルウィンドウで入力や選択肢のセレクトを求めるなら、代わりにアコーディオンUIを採用するのがおすすめです。

アコーディオンUIとは、まとまったデータがひとつのラインに収納されていて、通常の状態ではコンパクトなのですが、ラインをクリックすることで隠れていたコンテンツが拡大されて表示されるようになります。

見た目がすっきりしますし、同じWebページ内にすべてを表示することができるのが強みです。

▲Jan Cantor  / dribble

モーダルウィンドウとアコーディオンUIの一番の違いは、モーダルウィンドウではコンテンツを表示するためにユーザーを違う画面に飛ばしてしまうのに対し、アコーディオンUIでは同じページ内で表示できることです。

アコーディオンUIならシームレスにコンテンツの表示、非表示が行えますし、アイコンを工夫してわかりやすくすることで使いやすくなります。例えば、バツを使えば閉じるアイコンだと、誰でもわかりますね。

できる限りモーダルウィンドウの使用を避けて、代わりにアコーディオンUIを使うようにしましょう。

モーダルウィンドウ使うならいつ？どんな場面で？

ロード中

▲Aaron Stump / dribbble

アプリケーション上でユーザーがボタンをクリックした時に、裏で大きなプロセスが始められることはよくあります。しかし、ユーザーからすると何が起こっているのかまるでわかりませんよね。

そこでWebサイトが動いていないと勘違いしたユーザーが、同じボタンを再びクリックしてしまうことも起こり得ます。

これを防ぐために、モーダルウィンドウを使ってプロセスが進行中であることを知らせてあげましょう。

エラーメッセージ

▲出典 : Muharrem Senyil

モーダルウィンドウの主な使われ方のひとつに、エラーメッセージの表示があります。Webサイトやアプリケーションでは扱うことができないアクションが実行されそうな時に使用します。

たとえば、他のアプリケーションで使用中のファイルを消去しようとすると、「他のアプリケーションで使用中のため、実行できませんでした」というメッセージを表示することができます。

警告メッセージ

▲出典 : Mariusz Ciesla

ユーザーが損失に繋がるような行為をしそうな時に表示する警告メッセージを表示するのにも有効です。そうすることで、間違ってファイルを消去するのを防ぐことができます。

例えば、先ほどの例の続きで、使用中のファイルを消去しようとしている時に「本当に実行しますか？」などのメッセージを表示することができます。

最近のユーザーはこれらのポップアップに慣れてしまい、あまりよく確認せずに「OK 」を押してしまうことが多いので、より強調したデザインにするか、必要のないポップアップを減らしましょう。

最後に

モーダルうウィンドウはモバイル機器に向いていません。過多なスクロールやページの変更により、画面が小さく、煩雑になり、ユーザビリティが低下します。

Webサイトの目的によってはこの複雑さが問題になってしまうこともあるので、使うときにはじっくりと検討しましょう。

▲出典 : Joris Rigerl

（翻訳：Juri Ando）