通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ネットショップの作り方 > 中級ノウハウ > 超かんたんにモーダルウィンドウを設置する方法

超かんたんにモーダルウィンドウを設置する方法

モーダルウィンドウ

クリックするとその場でぱっと開くちびウィンドウのことをモーダルウィンドウ(modal window)と言います。これをネットショップに実装するためには、jQueryが基本で、Java Script、CSS、HTMLを編集する必要がありました。でも、ここでは、ド素人でも簡単にモーダルウィンドウが設置できる方法を伝授いたします。

  • メニュー
  • 1.従来型のモーダルウィンドウ
  • 2.超かんたんい実装する方法はこれだ
  • 3.モーダルウィンドウからの着地ページもしっかり

※ネットショプ成功事例無料パンフレット配布中

1.従来型のモーダルウィンドウ

あえて確認する必要はないんですが、従来型のモーダルウィンドウはこんな感じですね。下のリンクをクリックしてみてください。ふわっと小窓が出てきます。このページ内にHTMLを書います。

モーダルウィンドウをクリックして出す

2.超かんたんい実装する方法はこれだ

WEB接客という言葉をご存知でしょうか。例えば、サイト訪問者を(A)初回訪問者、(B)2回目訪問、(3)購入履歴ありなどと属性を分けて、属性別にポップアップのモーダルバナーを見せるというものです。これを利用するには無料サービスを使います。

EC Concier(NTTドコモ)

有料コースもありますが、1種類だけの見せ方だけなら月額無料です。 例えば、スマホで下のページにWEB接客を仕込んでいるのですが、「新規訪問者が20パーセントスクロールしたときに1回だけ見せる」という設定にしています。2回目訪問しても表示されません。

 LPOを取り入れた商品ページの作り方

次ののような画面になったはずです。

モーダル@スマホ

3.モーダルウィンドウからの着地ページもしっかり

1.の自作型(HTMLやCSS編集)のモーダルウィンドウと違って、EC Consierのポップアップモーダルは、基本バナーです。クリックしてもらって、別のページに誘導する必要があります。

したがって、バナーをその先へ誘導しやすいデザインにしたり、テキスト文言も魅力的な言葉をつかうなどして、次のステップに進んでもらうよう、上記の例であれば、メルマガに登録するフォームへ繋げます。

ここでも重要になるのが、入り口とその先の入出ページの内容の一致です。簡単な例えで言えば、「Aが50%オフ!」というバナーなら、そのリンク先のページは「Aが50%オフ」がメインテーマになっている必要があります。

「50%オフ」のキャッチコピーで見込み客を集めておいて、お店のトップページに誘導するのは、直帰率や離脱率が高くなってしまう原因になるので、あくまでバナーの文言を主題としたページに着地するように調整します。

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP