【基礎解説】Webサイトにおける「モーダルウィンドウ」とは

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトにおける目立ちすぎるポップアップ画面こと「モーダルウィンドウ」について解説します。

モーダルウィンドウと聞いてピンと来た人はいるでしょうか。

事前にWeb関係の学習をしている人でもなければ、そうそう知られていない言葉と思います。

しかし、じつはモーダルウィンドウを目にすることは結構あります。

例えば、背景が暗くなり「無料で資料を取り寄せられますがいかがですか」というような営業ポップアップであったり、アカウントを削除しようとすると「本当にアカウントを削除しても大丈夫ですか?今ならこんなサービスも受けられますよ」というような注意喚起ポップアップです。

特徴としては、画面の中央に出現し回答をクリックする以外に操作ができなくなるところです。

このようにポップアップにユーザーの注意を引きつけつつ、その返答をクリックする以外のアクションを制限する機能をモーダルウィンドウといいます。

サンプルを下におきますのでクリックしてみてください。※デモのモーダルウィンドウが出現します

これからモーダルウィンドウについての基礎、メリットとデメリット、デメリットに対する解決策をお教えします。

みなさんがWebサイトについての知識を1つでも多く得てもられるように、知識をふんだんにバラ撒きますので、ぜひ最後まで見ていってください。

【モーダルウィンドウ】とは注意喚起ポップアップ

モーダルウィンドウの基本的な実装としては、背景を暗くして伝えたい内容を画面中央に大きくポップアップで表示します。

このとき、ポップアップの回答となるボタン以外のクリックを無効にしますので、ユーザーに何かしらの確認を必ず取る手段として優れています

なので、モーダルウィンドウは注意喚起ポップアップとして優れた機能であるといえるでしょう。

実装されているWebサイトもたくさんあります。

実装例としては、先ほどもご紹介したようにユーザーがアカウントを削除をしようとしたときや、画面を一定量スクロールすると自動的にポップアップが出現するようにしたりなど、使い方にも広がりがあります。

ですのでメリットとデメリットをしっかりと把握して、機能的なモーダルウィンドウを実装していきましょう!

「本当にその操作を実行しますか?」や「こんなエラーがありますよ」というように、ユーザーに大切なメッセージを伝えるときに大活躍しますよ!

ウエノアイコン

ウエノ

ここからモーダルウィンドウのメリットについて2つお教えします。

モーダルウィンドウはユーザーへの注意喚起においては非常に優れた機能なので、ここぞという時に大きく活躍してくれます。

ということで、そのメリットについて2つご紹介します。

背景を暗くしてポップアップを画面中央に出現させるので、ユーザーの視点を「一点集中」させることができます。

絶対にユーザーに見て欲しいお知らせや、重大な確認事項を表示するのが一般的です。

モーダルウィンドウ内の回答ボタンを押さないと元の画面に戻れないので、必ずユーザーの反応を得ることができます

資料請求のご案内や、アカウント登録のお願い、メルマガ登録の営業など、サイト運営者としてユーザーの反応を得たい場面でも大いに活躍します。

やはりこのあたりは、サイト運営者としてはとても気になりますからね。注意喚起だけでなくこんなときにもモーダルウィンドウの出番です!

ウエノアイコン

ウエノ

モーダルウィンドウのメリットについて十分に理解して頂けたかと思います。

しかし、そんな素晴らしいモーダルウィンドウにもデメリットはあります。

そのデメリットは3つありますので、1つずつ見ていきましょう。

モーダルウィンドウ内の回答ボタンかモーダルウィンドウ外のどこかを押さないと元に戻れませんので、それがわからないユーザーは操作不能に陥ってしまい混乱するかもしれません。

そうそうこのようなことにはならないと思いますが、可能性としては捨てきれません。

迷わず回答ボタンを押してもらえるように、モーダルウィンドウ内のデザインに気を配り、即判断できるような内容にしましょう。

UXとは「ユーザーエクスペリエンス」といい、要はそのサイトで得られるユーザーの体験を意味します。

モーダルウィンドウが表示されている間は、回答ボタンを押す以外のアクションを制限してしまっているので、必然的にUXは低くなります。

サイト運営者としてはUXに気をつかわなければなりませんが、モーダルウィンドウの仕様上、このアクション制限は必ずついてまわるものです。

ですのでこれは仕方のないことになりますので、UXの低下については受け入れるしかありません。

ユーザーによっては予期しないモーダルウィンドウの出現にストレスがかかり、単純にウザく感じられることもあります。

僕でもウザく感じたモーダルウィンドウがありましたので、反面教師となればと思いその実例をご紹介しておきますね。

悪い例ですので絶対にマネしないでください。

それは、ページをある程度スクロールすると、「資料請求のご案内」というモーダルウィンドウが出現した事例です。

僕としては調べ物で立ち寄っただけなのに、内容を読んでいると強制的にそのモーダルウィンドウが出現するのです。

全然そんな気はないのにいちいち出現するのです。

たぶん、スクロール量を裏で計測していてそれがある一定以上になるとモーダルウィンドウが出現する仕組みになっていると考えられます。

これではサイト運営者にとっては営業ができていいかもしれませんが、ユーザーにとってはただ単にウザいだけです。

ユーザーが「この情報ががほしい」とか「こうしたい」と能動的に行動した結果モーダルウィンドウが出現したわけではなく、ただ強制的に全閲覧者に出現するわけですから

完全にサイト運営者の利しか考えていないパターンです。マジで最低最悪です。

もし「資料請求のご案内」でモーダルウィンドウを使用するなら、「このアクションを取るユーザーには資料請求してもらった方がより質の高い情報を届けられるな」という場合に使用するべきです。

間違ってもサイトに訪れた方全員に強制的にモーダルウィンドウでお知らせするのはやめましょう

そのウザさは離脱率の上昇に繋がりますので、ユーザーファーストで考えましょうね。

モーダルウィンドウは一歩間違えると凶器にもなる機能です。そうならないためにも、合言葉は「ユーザーファースト」です!

ウエノアイコン

ウエノ

【モーダルウィンドウ】の実装時のコツ

これまでモーダルウィンドウについてメリットとデメリットをお話ししてきました。

では実際にどうのようにして、モーダルウィンドウを使用していけば良いのでしょうか。

モーダルウィンドウの実装時のコツとしては、「自然に回答ボタンを押させるデザインにすること」と、「ユーザーにとって必要または親切な対応である場合にのみ表示させる」ことです。

回答に困るような内容にしない、回答ボタンをわかりやすくして混乱させない、ユーザーに利のない営業はしないことが大切です。

ウザくなく、ユーザーが迷わず回答できるモーダルウィンドウを目指しましょう。

【まとめ】モーダルウィンドウは「デザイン」と「必要性の検討」が大切

まとめとして、モーダルウィンドウを実装する際は、「これはユーザーにとってわかりやすいか」と「これはユーザーにとって本当に大切か」をよく自問自答してください

まわりの人に聞くのも良いです。

「ユーザーを混乱させること」と「ウザさを感じさせること」は離脱率に直結しますので、しっかりと検討してから実装しましょう。

難しそうだと感じる人もいるかもしれませんが、ユーザーに親切であって導線がしっかりしていれば問題ありませんので、やってみると案外簡単ですよ。

基本的にはユーザーへの注意喚起に使われていますので、もし同じような場面を想定しているのならじっくり検討したうえで使ってみても良いでしょう。

モーダルウィンドウはデメリットもありますが便利な機能ですので、1度検討してみてはいかがでしょうか。

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

関連ブログのご案内

Web

Webサイトのページデザインはなんとなく作られているわけではありません。ユーザーが見やすいように、かつ情報を受け取りやすいように最適化されて構成されています。その手法として「カラムレイアウト」というものがあります。カラムレイアウトについての知っておくべき知識や選び方などの基礎的な解説をします。

Web

アコーディオン機能を使えばQ&Aのような全員が全員見なくても良い回答部分を隠すことができる、Webサイトにおいてとても便利な機能です。設置するとそんなテキストだらけになりがちなの部分をスッキリさせることができるのが特徴です。今回のブログでは、このアコーディオン機能についての概要、メリット、デメリット、実装時のコツを解説します。

Web

Webサイトに設置するボタンデザインは制作者の好みに合わせて作ればよいのかというと、ある程度は好みで決めて良いですが注意するべき項目が6つあります。その項目とは「色」「形」「大きさ」「テキスト内容」「アニメーション活用」「設置数」です。ユーザーに好まれやすいボタンデザインについてそれぞれ詳しく解説します。

TOPへ戻る