取扱注意！「モーダルウィンドウ」の特徴と使用上のポイント

Wedサイトを使っていると、今見ている画面に重なるように別のコンテンツが表示されて操作を促された、という経験はありませんか？
あれはモーダルウィンドウというもので、Webサイトのインターフェース手法の一つです。
一見便利でスマートな機能に感じられますが、実はユーザービリティの観点からみると安易に使用するのはおすすめできません。
そこでこちらではモーダルウィンドウを使用するにあたり、その特徴と使用上のポイントをご紹介していきます。

モーダルウィンドウの特徴

モーダルウィンドウとは、Webページ上に

• エラー等重要なメッセージ
• 操作完了のメッセージ
• ユーザーに操作させたい項目

などを表示させるインターフェース手法です。
モーダルウィンドウの特徴は「立ち上がったウィンドウ内で指示された操作を完了、またはキャンセルするまで、別の操作ができない」ことです。
似たインターフェースに、広告等で使用される「ポップアップウィンドウ」がありますが、これはウィンドウが開かれた状態でも自由に別の操作ができる点で別物です。混同しないよう注意しましょう。

モーダルウィンドウの使用が適しているシーン

モーダルウィンドウは安易に使用するのはおすすめできないと先ほど書きましたが、まずは前述した特徴をメリットとして活かした場合の使用例をご紹介します。

01 警告メッセージ

• ファイルの消去
• 未保存でのページの離脱

など、一度選択してしまうとユーザーが後戻りできなくなるような操作の場合に使用します。
取り消せない操作であるが本当に実行してよいか、という確認や警告に使用すると、ユーザーも一息ついて考えることができますね。
モーダルウィンドウの警告メッセージを閉じたりか、意思を持って実行するボタンを押すかしない限りウィンドウは閉じられないため、誤操作を防ぐ効果があります。

02 より詳細な選択や操作の画面

• ECサイトで洋服を購入するケース（検索結果の絞り込み／注文時のサイズ選択 など）
• ログインIDやパスワード、メールアドレスの入力

など、達成すべき目的までの途中に、より詳細な選択や操作が必要な場合に使用します。
入力途中に別ページに遷移させず、ユーザーが寄り道することなくまっすぐ達成すべき目的に向かわせることができるようになります。

03 ローディング画面

ユーザーがサイト内でボタンを押すなどして、何かしらの処理が実行されてから、それが終わるまでの間に表示させます。
くるくると回るアニメーションをつけたり、「処理中です」という文字を表示させたりするとわかりやすいでしょう。
ユーザーは、何かを確定させたはずなのに画面にしばらく変化がないとなれば不安になり、場合によっては離脱してしまうこともあります。そういったケースも防げます。

モーダルウィンドウ使用のデメリット

モーダルウィンドウはいいことづくめに思えますが、もちろんデメリットがあります。

ユーザーの操作に制限がかかる

前述したモーダルウィンドウの特徴「立ち上がったウィンドウ内で指示された操作を完了またはキャンセルするまで、別の操作ができない」は、そのままデメリットになります。
このことがユーザーのメンタルに与える影響は決して小さくなく、ユーザーは自由度を奪われたように感じてしまうことも。モーダルウィンドウで表示された内容が、ユーザーにとって望まない操作であれば尚更です。
Webサイト制作側は、モーダルウィンドウはユーザーの操作を「制限している」という視点を忘れずに、特に重要でない操作なのであれば、こうした仕様にすることは避けるべきです。

画面表示が分断される

モーダルウィンドウの大きさと、画面全体のバランスが悪いと、操作をする中での前後関係を見失う可能性があります。
モーダルウィンドウが出ると、その下にあるいままで閲覧していた画面が覆われてしまい、そこから情報が読み取れません。
背景とモーダルウィンドウとの間にある程度余白を設けないと、ユーザーは別のコンテンツが無理やり入ってきて、自分の操作が遮断されたという感覚に襲われます。
画面サイズが小さいほどモーダルウィンドウは向かないという点も、しっかりと押さえておいてください。

まとめ

以上がモーダルウィンドウの特徴と使用上のポイントです。
自分が運用するWebサイトに来てくれたユーザーには、このボタンを押してほしい、メールアドレスを登録してほしい、などといった狙いがあるのは当然です。
しかし、「ユーザーは何がしたくて自分のWebサイトを訪れてくれるのか」、逆に「何をしたいユーザーをターゲットにするか」を考えることも、よりよい情報やサービスの提供において重要な観点になります。
常にユーザーの視点を忘れず設計して行きましょう。