fbpx

モーダルウィンドウとは?モーダルを使用する場面や実装方法を解説

この記事をシェアする

モーダルウィンドウの概要や使用する場面、ポップアップウィンドウやダイアログとの違い、実装方法を解説します。
webサイトを構築する上で、モーダルウインドウの実装を検討している方は必見です。

モーダルウィンドウとは

モーダルウィンドウは、リンク押下時や画面遷移時に「はい」「いいえ」などのボタンと共に、元画面の上に別枠表示される画面です。モーダルウィンドウは指定の操作を完了するか、キャンセルするまでは閉じることができず、画面上での他の操作を受け付けません。従って、ユーザーに一定の操作を強制させることができます。

モーダルウィンドウを使用する場面

モーダルウィンドウは無闇に使用していいものではなく、場面に応じて使用しなければなりません。
今回はモーダルウィンドウの使用に適した下記3つの場面を紹介します

  • ユーザーに重要なお知らせを読んでほしい場合
  • 警告メッセージを表示する場合
  • ユーザーの操作を遮断したい場合

ユーザーに重要なお知らせを読んでほしい場合

一つ目は、ユーザーに重要なお知らせを読んでほしい場合に使用します。
例えば、システムメンテナンスのお知らせを載せたり、利用規約が変更された場合は、サイトのトップページに目立つように掲載されます。
しかし、サイトのトップページに掲載したとしても、ユーザーは見落としたり、読むことを後回しにして結局読まない、なんてこともあります。

サービスを初めて使用する場合の注意点や、システムメンテナンスのお知らせなど、ユーザーのビジネスに関わる情報を掲載する場合は、モーダルウィンドウの使用を推奨します。
モーダルウィンドウを使用することで、重要なお知らせを確実に届けることができるのです。

警告メッセージを表示する場合

二つ目は、ユーザーに警告メッセージを表示する場合に使用します。
例えば、アカウントや重要ファイルの削除など、後戻りできない処理を行う場合の最終確認として利用できます。モーダルウィンドウを利用することで、ユーザーの誤操作を防止することにも繋がります。
ユーザーに不利益が生じる操作がされる場合は、モーダルウィンドウで確認を促すことを推奨します。

ユーザーの操作を遮断したい場合

三つ目は、ユーザーの操作を遮断したい場合にもモーダルウィンドウは役立ちます。
例えば、ユーザーがバックアップ処理を実行したり、データの同期を行っている場合です。実行途中にユーザーがアプリケーションを終了してしまったり、他の操作により処理が正常終了しない可能性がある場合の対処として利用できます。
重要なデータを扱う処理では、モーダルウィンドウを表示することで安全に処理を進めることができるのです。

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

モーダルウィンドウを利用するメリットとして、下記の二つが挙げられます。

  • ページ遷移がないこと
  • 誤操作の予防に繋がること

モーダルウィンドウは現在表示されている画面の上から別枠で表示する画面です。
ページ遷移がない分、直前に何の操作をしたのか迷うことが少ないです。もしも、誤操作によりページ遷移をしてしまった場合は「どのリンクを押したんだっけ?」と直前の操作が分からなくなることがあります。
ムダに画面を行き来するだけでもユーザーにとっては煩わしさを感じてしまうため、別枠で画面を表示するだけでも、ユーザーにとっては使いやすいと感じます。

また、誤操作によりデータの入力中に画面を切り替えてしまった場合など、また一からデータを入力し直す手間が発生します。重要なデータの入力途中は、ボタン押下に反応してモーダルウィンドウを表示するようにしておくことで誤操作の予防ができます。

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

モーダルウィンドウはメリットばかりではありません。少しでも使い方を間違えると、ユーザーにとって邪魔な存在になってしまいます。
モーダルウィンドウを利用することによるデメリットとして、下記の三つを紹介します。

  • 他の操作が制限されること
  • レスポンシブデザインが好まれないこと
  • ユーザーにとってストレスが溜まる一因となること

他の操作が制限されることは、ユーザーの時間を奪うことに繋がります。理由なくモーダルウィンドウを表示していては、ユーザーが直感的に操作しにくいと感じてしまいます。
例えば、FAQを調べたいだけにも関わらず、毎回毎回モーダルウィンドウを表示した場合はいかがでしょうか。
操作性に大きな不満を覚えるだけでなく、求めていた答えを見つけられず、サービスとしての評価も低くなってしまいます。
最悪の場合、契約を打ち切られてしまうこともあります。

また、モーダルウィンドウはレスポンシブデザインでの実装が好まれません。
モーダルウィンドウの大きさがスマホの画面サイズを超えてしまい、わざわざ閉じるボタンを探す手間が発生します。
結果として、モーダルウィンドウで伝えたい内容が正確に伝わりづらかったり、操作がしにくいことが原因でユーザーにストレスを与えてしまうのです。

モーダルウィンドウ・ポップアップ・ダイアログの違い

モーダルウィンドウの他に、似た機能としてポップアップやダイアログが挙げられます。
それぞれの違いを紹介します。

モーダルウィンドウ 表示箇所:別ウインドウを最前面に表示用途:他の操作を制御するために使用表示時の別操作:一定の操作やキャンセルをしない限り他の操作ができない
ポップアップ 表示箇所:別ウインドウを最前面に表示用途:ホームページの広告で使用表示時の別操作:画面が表示されていても他の操作が可能
ダイアログ 表示箇所:操作の過程で一時的に表示され、どの画面よりも最前面に表示用途:システム上の重要なメッセージの確認に使用表示時の別操作:ダイアログを閉じない限り他の操作ができないことが多い

モーダルウィンドウの実装方法

モーダルウィンドウはHTML、CSS、JavaScript(JQuery)で実装できます。
HTMLは画面の枠や表示内容を制御し、JQueryで画面の開閉を制御し、画面サイズや枠の色、文字のフォントなどの見栄えはCSSで実装できます。
今回はHTMLとJQueryのサンプルを例に解説します。

HTML
【サンプルコード】

<body>
   <div class=”content”>
        <a class=”js-modal-open” href=””>モーダルを表示する</a>
    </div>
    <div class=”modal”>
        <div class=”modal__content”>
            <p>ここにモーダルウィンドウで表示したいコンテンツを入れる</p>
            <a class=”js-modal-close” href=””>モーダルを閉じる</a>
        </div>
    </div>
</body>

2行目
a要素はリンク先を示し「js-modal-open」をJQueryで制御することでモーダルを開きます。

5-10行目
モーダルウィンドウ全体を意味します。

6-9行目
モーダルウィンドウ内に表示したい内容とモーダルを閉じるためのリンクを実装します。

JQuery
【サンプルコード】

$(function(){
    $(‘.js-modal-open’).on(‘click’,function(){
        $(‘.js-modal’).fadeIn();
        return false;
    });
    $(‘.js-modal-close’).on(‘click’,function(){
        $(‘.js-modal’).fadeOut();
        return false;
    });
});

2行目、6行目
モーダルウィンドウを開くときのリンクと閉じるときのリンクでの挙動を制御します。

4行目、8行目
モーダルウィンドウをa要素で制御する場合は、戻り値を設定する必要があります。モーダルウィンドウをbutton要素でボタン形式で表示する場合、戻り値は不要です。

サンプルのように簡単なHTMLとJQueryで実装できます。
これから実装する場合は上記のサンプルをコピーして触れてみても良いです。気になるサイトのコードを読み解いてみても良いでしょう。
実際に触って、コードを書いてみることが大切です。

まとめ

今回は、モーダルウィンドウの概要や使用する場面、ポップアップウィンドウやダイアログとの違い、実装方法を解説しました。
モーダルウィンドウは目的や意図を明確にした上で実装することが重要であることを忘れないようにしましょう。

資料ダウンロード申し込み

この記事をシェアする
Scroll to Top