1. Web-Knight[ウェブナイト]トップ
  2. UI/UX・デザイン
  3. 使いどころを誤ると大変。モーダルウィンドウはここで使う!
UI/UX・デザイン
使いどころを誤ると大変。モーダルウィンドウは要検討!

使いどころを誤ると大変。モーダルウィンドウはここで使う!

写真や個人情報の登録画面で、クリックしたその部分が「にゅ~っ」と出てくる場面に遭遇したことはありますか?それが「モーダルウィンドウ」と呼ばれる機能で、今では多くのウェブサイトで見かけます。

スポンサーリンク

「モーダル」とは、ある特定のタスクや機能の利用に制限された状態のことを言うのですが、ユーザーを特定の操作に集中させる役割を果たしています。また注目してほしい場合にも使用されたりもします。

モーダルウィンドウ

イラストACのメールアドレス登録場面

以前はGoogleのメールサービスにおいて全件の受信メールをゴミ箱に移動する際に、「本当にゴミ箱に移動してよいのか」のアナウンスがモーダルウィンドウで表示されていました。

一方で、1件だけメールをゴミ箱に移動する場合は確認のモーダルウィンドウは表示されず、移動されたことがアナウンスさせるといった仕様でした。これは、「ユーザーにちゃんと注目してほしい情報」はモーダルにして表示していたといえます。

モーダルはユーザーを縛りつける!

モーダルウィンドウはユーザーの行動を制限すると述べましたが、操作上の大きな利点があります。モーダルでは任意のタイミングで背景にある元のページに戻ることができるので、タスクが済んで元のページに戻る必要がある場合、ユーザーはページを遷移してからもどるよりも文脈を把握しながら操作ができるため有効な方法です。

つまり、モーダルを使うとページ遷移しないため、操作の完了やキャンセル後の挙動がイメージしやすいのです。

ただし、スマートホンではモーダルウィンドウは使い勝手が悪く、どうしても必要であればモーダルはPCのみの機能とする方が無難です。

【おススメ記事】

今更聞けない、モバイルフレンドリー?モバイルファースト?何がどうちがうのか