超かんたんにモーダルウィンドウを設置する方法
クリックするとその場でぱっと開くちびウィンドウのことをモーダルウィンドウ（modal window）と言います。これをネットショップに実装するためには、jQueryが基本で、Java Script、CSS、HTMLを編集する必要がありました。でも、ここでは、ド素人でも簡単にモーダルウィンドウが設置できる方法を伝授いたします。
- メニュー
- １．従来型のモーダルウィンドウ
- ２．超かんたんい実装する方法はこれだ
- ３．モーダルウィンドウからの着地ページもしっかり
※楽天退店組、法人の通販参入や切り替え向けシステム まじめに生き残りを考えている企業向けの通販システム（※個人事業主、副業は不向き）
１．従来型のモーダルウィンドウ
あえて確認する必要はないんですが、従来型のモーダルウィンドウはこんな感じですね。下のリンクをクリックしてみてください。ふわっと小窓が出てきます。このページ内にHTMLを書います。
|
|
|
２．超かんたんい実装する方法はこれだ
WEB接客という言葉をご存知でしょうか。例えば、サイト訪問者を（A）初回訪問者、（B）２回目訪問、（３）購入履歴ありなどと属性を分けて、属性別にポップアップのモーダルバナーを見せるというものです。これを利用するには無料サービスを使います。
EC Concier（NTTドコモ）
有料コースもありますが、１種類だけの見せ方だけなら月額無料です。 例えば、スマホで下のページにWEB接客を仕込んでいるのですが、「新規訪問者が２０パーセントスクロールしたときに１回だけ見せる」という設定にしています。２回目訪問しても表示されません。
次ののような画面になったはずです。
３．モーダルウィンドウからの着地ページもしっかり
１．の自作型（HTMLやCSS編集）のモーダルウィンドウと違って、EC Consierのポップアップモーダルは、基本バナーです。クリックしてもらって、別のページに誘導する必要があります。
したがって、バナーをその先へ誘導しやすいデザインにしたり、テキスト文言も魅力的な言葉をつかうなどして、次のステップに進んでもらうよう、上記の例であれば、メルマガに登録するフォームへ繋げます。
ここでも重要になるのが、入り口とその先の入出ページの内容の一致です。簡単な例えで言えば、「Aが50％オフ！」というバナーなら、そのリンク先のページは「Aが50％オフ」がメインテーマになっている必要があります。
「50％オフ」のキャッチコピーで見込み客を集めておいて、お店のトップページに誘導するのは、直帰率や離脱率が高くなってしまう原因になるので、あくまでバナーの文言を主題としたページに着地するように調整します。
