【これからWeb制作を受注する人へ】知っておくと便利なモーダルウィンドウの効果的な使用方法

はじめに

こんにちは！テナアダム松山支店のキムラーです。
今回はWebサイトで使われる「モーダルウィンドウ」の使い方についてご紹介いたします。
これはユーザーの気を引くことのできる手法ですので、これからWeb制作依頼をしようと考えている担当者の皆様は是非ご覧ください。

モーダルウィンドウとは

モーダルウィンドウとは、背景が暗くなりメッセージや画像などが表示されるウィンドウです。
似たギミックで「ポップアップウィンドウ」があるのですが、モーダルウィンドウは「操作の制御」が目的で、ポップアップウィンドウは「突然表示する」ことが目的という違いがあります。
また、モーダルウィンドウの「操作の制御」とは、ウィンドウが出ている間はウィンドウ内の操作を完了するまで他の操作が禁止されることです。
したがって、出てきた情報がユーザーにとって不要なものだった場合はストレスを与えてしまう可能性があります。
今回は、そんなモーダルウィンドウの有効的な使い方についてご紹介いたします。

1.ユーザーにとってお得な情報を活用

セール情報を表示しユーザーの購買意欲を促進したり、クーポンを配布することでサイト内のクリック率を上げるといった使い方です。
ユーザーにとって有益な情報であればストレスを与えることなく宣伝が可能です。

2.必ず認知して欲しい情報の表示

お店の定休日以外の休業アナウンスやホームページの移転情報など、どうしてもユーザーに認知して欲しい必要事項をアナウンスするという使い方です。
ページにアクセスしたときにこのように表示されると、モーダルウィンドウの内容に注意が向きアナウンスの内容をユーザーに必ず認知してもらえるでしょう。

3.ユーザーに警告を知らせる

例えば、会員サイトで退会の手続きを行うときに警告メッセージが書かれたモーダルウィンドウを表示するという使い方です。
二度と取り消せない操作の注意喚起や知らないとユーザーが不利益を被る可能性の高い事柄のアナウンスとして有効でしょう。

さいごに

以上、キムラーによるモーダルウィンドウの効果的な使い方でした！

モーダルウィンドウに限らず、サイトのギミックはメリットだけでなくデメリットにも注意しながら実装するのが重要だと思います。
私は過去にUI・UX関係の記事を投稿しておりますのでこちらもご覧いただけましたら幸いです。

テナアダムでは、お客様ごとにサイトの果たすべき役割をしっかり共有し、それに適うUI/UXをご提案させていただきます。
お気軽にご相談いただければ幸いです。
この記事が役に立った！と感じていただけた方は、是非をスキしてブックマークしていただけましたら幸いです。