画像OK! モーダルウィンドウ用JavaScript

画像OK!モーダルウィンドウ用JavaScript

モーダルウィンドウを実装するには、JavaScriptやjQueryの知識が必要です。プログラムコードを無料で公開してくれているサイトもありますが、それらはテキストの表示を前提としており、画像までは対応してくれていません。このページでは、画像を表示できるモーダルウィンドウを紹介します。

モーダルウィンドウとは

ユーザーインターフェースの一種で、画面上に半透明のグレーレイヤーを張り、その上に広告などを表示させる手法です。グレーレイヤーが張られると、元の画面を操作できなくなり、右上あたりにある×ボタンをクリックするまで、広告が表示され続けることになります。
ですから、広告部分を画像でしっかりデザインすれば、顧客を獲得できるインパクトのあるインターフェスになります。

ということで、デジタルエイドは画像を扱えるモーダルウィンドウを JavaScript で開発しました。その特長は・・・という話をする前に、聞いてほしい体験談があります。

以前、筆者はごくふつうのサイトで記事を読んでいました。
突然、画面が真っ黒になり、赤い警告表示が点滅しました。

あなたのPCは何者かに乗っ取られています。至急、下記までご連絡ください。

画面上には、点滅する警告表示以外何も見当たりません。
しかしマウスは動くし、真っ黒なのはブラウザだけ。つまり、モーダルウィンドウを悪用したダークパターンだったわけです。
そんなものはブラウザを閉じればすむわけですが、警告表示がうまくできていたので、この手の"サポート詐欺"に引っかかってしまった人も結構いたようです。

何が言いたいのかというと、モーダルウィンドウは詐欺サイトでよく使われる手法だということを認識してほしいということです。ですので、モーダルウィンドウ以外の手法がない場合にのみ、お使いください。

モーダルウィンドウの特長

1. 画像が使える

画像は、image.png という名前にすれば、どんなサイズでもOKです。ユーザーが見ている画面サイズに合わせて、JavaScriptが画像サイズを調整します。

画像にリンクを設定して、ユーザーを別ページへ誘導することもできます。

2. 表示期間を設定できる

表示期間を設定しておくと、期間外はモーダルウィンドウが立ち上がらなくなります。
表示期間を設定せずに、無期限に表示させることもできます。

3. 待機秒数を設定できる

ページにアクセスしたら、いきなり、モーダルウィンドウが立ち上がるのでは、ユーザーに嫌われます。

弊社のモーダルウィンドウは、アクセスしてから起動するまでの待機秒数を設定できます。本ページのモーダルウィンドウは初期設定の30000ミリ秒=30秒です。

4. 設定ファイルを書き換えれば、他サイトでも使える

一度購入すれば、設定ファイルを書き換えることで、使いまわしできます。

設定ファイルの書き換えにはプログラミングは不要。弊社会員サイトで簡単に設定ファイルを生成できます。

モーダルウィンドウをつくり方

モーダルウインドウをつくるには、まず、画像を作成し、次に、モーダルウインドウのJavascript等のセットを入手し、設定ファイルを用意します。それから、全ファイルをアップロードします。最後に、Webページからリンクを張ります。

1. 会員サイトで設定ファイルを生成する

初回は弊社が生成しますので、この作業は不要です。

2. 画像と設定ファイルをフォルダに入れ、アップロードする

1で作製した設定ファイルと画像を modal-window フォルダに入れます(初回は画像のみでOK)。

次に、FTPソフトなどで、フォルダごとアップロードします。

3. Webページからリンクを張る

モーダルウィンドウを呼び出したいWebページから、JavaScriptファイルとデザインファイルへリンクを張ります。

なお、モーダルウィンドウを購入されると、会員サイトへアクセスできる会員パスがついてきます。会員サイトには、モーダルウィンドウ:設置のしかた というページがあり、リンクのためのサンプルコードが具体的に書かれていますので、ご参照ください。

なお、オプションとして設置代行も行っています。

モーダルウィンドウ Q & A

Q1. 画像を作るうえでの注意点はありますか?
A1. 文字を入れるのであれば、横幅320pxまで縮小したとき、最小の文字がはっきり読めるようにデザインしてください。
Q2. ×ボタンはどうデザインすればいいのですか?
A2. ×ボタンをデザインする必要はありません。JavaScript が画像の表示サイズを計算して、きちんと右上にのるように表示します。
Q3. 画像を作成してくれませんか?
A3. はい。オプションとして、画像作成も承っております。
Q4. モーダルウィドウの代替品はありますか?
A4. はい、ございます。弊社ではサイト内バナーサイト内バナーをお勧めします。
サイト内バナーは画面右下にスライドインしてくるので、十分目立ちます。また、閉じるボタンを押しても、三角の開くボタンは残るので、ユーザーの都合に合わせて再表示できるうになっています。

モーダルウインドウの料金

2024年5月16日改定

項目 明細 料金
基本料金 初回は、お客様の指定条件に合わせて弊社が設定ファイルを生成したのち、全ファイルをご提供いたします。プログラム改変不可。 18,700円
画像作成料金 (オプション) 画像を作成いたします。修正は2回まで。 5,500円
設定代行料金 (オプション) ご指示に基づき設定ファイルを生成いたします。初回は無料。
会員サイトで自力で設定ファイルを生成される場合は不要です。
5,500円
設置代行料金 (オプション) ご提供したファイルをWebページに設置し、意図通り動くのを確認します。FTP情報、または管理画面へのアクセス権が必要。 16,500円
フォームメール制作料金 (オプション) お申し込みページ等を制作し、メールで受信できるようにいたします。 19,800円
(税込)

モーダルウインドウを入手するには

自動見積 送信 送信しない(取りやめ) 打ち合わせ ご請求 取りやめ お支払い ファイル引き渡し/設置作業
  1. 自動見積で、Webツールの要件を設定して、料金をお確かめください。
  2. 見積額に納得していただけましたら、ご送信ください。それが打ち合わせ依頼となります。
  3. 見積内容を軸に打ち合わせをいたします。
  4. 打ち合わせで詳細が確定しましたら、ご請求書を送信いたします。
  5. ご請求金額をクレジットカードまたは銀行振込でお支払いいただけます。
  6. 入金確認後、自動見積でお約束し納期までにファイル一式を送付、または、設置作業等を完了いたします。

※ Facebookページや WiX.com など、FTP情報が提供されないサイトでは、Webツールが設置できません。導入の前に、よくお確かめください。