モーダルウィンドウを実装するには、JavaScriptやjQueryの知識が必要です。プログラムコードを無料で公開してくれているサイトもありますが、それらはテキストの表示を前提としており、画像までは対応してくれていません。このページでは、画像を表示できるモーダルウィンドウを紹介します。
モーダルウィンドウとは
ユーザーインターフェースの一種で、画面上に半透明のグレーレイヤーを張り、その上に広告などを表示させる手法です。グレーレイヤーが張られると、元の画面を操作できなくなり、右上あたりにある×ボタンをクリックするまで、広告が表示され続けることになります。
ですから、広告部分を画像でしっかりデザインすれば、顧客を獲得できるインパクトのあるインターフェスになります。
ということで、デジタルエイドは画像を扱えるモーダルウィンドウを JavaScript で開発しました。その特長は・・・という話をする前に、聞いてほしい体験談があります。
以前、筆者はごくふつうのサイトで記事を読んでいました。
突然、画面が真っ黒になり、赤い警告表示が点滅しました。
あなたのPCは何者かに乗っ取られています。至急、下記までご連絡ください。
画面上には、点滅する警告表示以外何も見当たりません。
しかしマウスは動くし、真っ黒なのはブラウザだけ。つまり、モーダルウィンドウを悪用したダークパターンだったわけです。
そんなものはブラウザを閉じればすむわけですが、警告表示がうまくできていたので、この手の"サポート詐欺"に引っかかってしまった人も結構いたようです。
何が言いたいのかというと、モーダルウィンドウは詐欺サイトでよく使われる手法だということを認識してほしいということです。ですので、モーダルウィンドウ以外の手法がない場合にのみ、お使いください。
モーダルウィンドウの特長
1. 画像が使える
画像は、image.png という名前にすれば、どんなサイズでもOKです。ユーザーが見ている画面サイズに合わせて、JavaScriptが画像サイズを調整します。
画像にリンクを設定して、ユーザーを別ページへ誘導することもできます。
2. 表示期間を設定できる
表示期間を設定しておくと、期間外はモーダルウィンドウが立ち上がらなくなります。
表示期間を設定せずに、無期限に表示させることもできます。
3. 待機秒数を設定できる
ページにアクセスしたら、いきなり、モーダルウィンドウが立ち上がるのでは、ユーザーに嫌われます。
弊社のモーダルウィンドウは、アクセスしてから起動するまでの待機秒数を設定できます。本ページのモーダルウィンドウは初期設定の30000ミリ秒=30秒です。
モーダルウィンドウ Q & A
- Q1. 画像を自分で作りたいのですが、注意点はありますか?
- A1. 文字を入れるのであれば、横幅320pxまで縮小したとき、最小の文字がはっきり読めるようにデザインしてください。
- Q2. ×ボタンはどうデザインすればいいのですか?
- A2. ×ボタンをデザインする必要はありません。JavaScript が画像の表示サイズを計算して、きちんと右上にのるように表示します。
- Q3. 画像を作成してくれませんか?
- A3. はい。オプションとして、画像作成も承っております。
- Q4. モーダルウィドウの代替品はありますか?
- A4. はい、ございます。弊社ではサイト内バナーサイト内バナーをお勧めします。
サイト内バナーは画面右下にスライドインしてくるので、十分目立ちます。また、閉じるボタンを押しても、三角の開くボタンは残るので、ユーザーの都合に合わせて再表示できるうになっています。
モーダルウインドウ 料金
お客様の指示に基づきモーダルウィンドウを設定・設置し、さらに「お申し込み」ページ等を制作して見込み客獲得をお手伝いします。
項目 | 明細 | 料金 |
---|---|---|
基本料金 | サイト内バナーの設定設置、フォームメールの制作。初回のみ適用。 | 52,800円 |
2回目以降料金 | 以前、弊社Webツール(有料)をご利用いただいた場合、適用いたします。 | 33,000円 |
画像作成料金 (オプション) |
薄暗くしたウィンドウ内に表示する画像を作成します。 | 6,600円 |
モーダルウインドウに関するお問い合わせ