ポップアップとは、Webブラウザ上で表示される、ページの上に重なるようにして表示されるウィンドウのことを指します。もちろん「ポップアップストア」（一時的に小さいスペースで開かれるお店のこと）のように違う意味のポップアップだったり、あるいはブラウザに限らずコンピュータの画面の最前面に表示されるウィンドウのことをポップアップと呼ぶこともありますが、この記事ではブラウザ上のウィンドウのお話をしたいと思います。

INDEX

０．はじめに

１．ポップアップの種類
　・背景の扱い
　・形状の違い
　・出す場所の違い
　・登場の仕方の違い
　・登場のタイミングの違い
　・表示の消し方の違い

２．ポップアップの利用シーン
　・チャット
　・クッキー承諾
　・次の記事
　・メアド入力
　・チュートリアル（ご案内型）
　・接客
　・看板
　・広告

３．ポップアップはなぜ邪魔者扱いされるのか
　・後ろにあるものが見えなくなる
　・何かをしている途中に登場する
　・内容が行動の文脈に合っていない

４．ポップアップがSEOに与える影響は

５．ポップアップの特性の活かし方
　・どこで
　・誰に
　・いつ
　・どのような

６．ポップアップの改善サイクル

７．Sprocketについて

０：はじめに

ブラウザ上のポップアップというと、不要な広告が表示される枠というイメージがあって、どうしてもUX上の邪魔者扱いされることが多いのではないでしょうか。しかしうまく活用すれば、邪魔者どころか、気の利いた体験を作る上でとても有効な役割を持たせることもできるのがポップアップです。

＜画像１＞

例えばこのような使い方をしているポップアップ（画像1:緑色の吹き出しの部分です）を見たことがある方もいらっしゃるのではないでしょうか？このようなUIはツールチップと呼ばれることもありますが、ポップアップの1種として考えてみましょう。あるWebサービス（この図はslackですね）に初めてログインしたときに、このようなポップアップが出て使い方を教えてくれる、というUIを採用しているケースがあります。

 あるいはまた、悪名高いモーダルも、このような使い方の場合はどうでしょうか。

＜画像２＞

同じslackですが、「この場所でメッセージを書く」ということを明示的に伝えるためには効果的なUIと言えないでしょうか。

もちろん画面のキャプチャーを貼り付けたマニュアルページを別に作っても良いのですが、やはり実際に触る画面で教えてくれる方がユーザー体験としては親切ではないかと思います。

本記事では特に、邪魔者にならないためのポップアップ活用方法というよりも一歩進んで、これらのようなUX改善のためのポップアップ活用方法とはなにかということをお話していきたいと思います。

なおですが、筆者はポップアップは本当はとてもおもしろいUIだと思っていて、そういうプロダクトを作ってしまっているくらいなので、どうしても良いように思って欲しいという気持ちがあります。その点ご容赦頂ければ幸いです。（でも、ポップアップは悪者扱いされることが多いと思うので、違うスタンスの記事もあっていいじゃないですか・・・？）

１：ポップアップの種類

ポップアップ型のUIを構成する要素は実は意外にたくさんあります。

• 背景の扱い（モーダル、非モーダル）
• 形状の違い（ウィンドウ型、ツールチップ（吹き出し）型）
• 出す場所の違い（画面中央、画面の端）
• 登場の仕方の違い（いきなり画面に登場、アニメーションあり、クリックアクション後、スクロールを伴う場合））
• 登場のタイミング（ページ遷移直後、一定スクロール後など特定条件達成後）
• 表示の消し方の違い（ボタン押下、一定時間経過）

 組み合わせによってはあり得ない場合もありますが、これら６つの要素によってユーザーの受け取り方は大きく左右されます。体験を設計するという点ではそれぞれの特徴やユーザー体験へ与える影響を押さえておくことが大切です。

 ■背景の扱い

ポップアップを表示した場合に、背景領域をどう扱うかに違いがあります。下の事例＜画像3＞をご覧ください。

＜画像３＞

左側はモーダル（背景をグレーアウト）で表示されているため、ポップアップに強い注目が行くUIになっています。右側は非モーダルとなっているのでそこまでの強制力はありません。

モーダルを採用する場合に気をつけないといけないのは、それまでのユーザー体験の文脈を損なっていないかという点です。UI上の強制性が非常に強くなるので、文脈と合わなければユーザー体験を阻害してしまいます。ポップアップを邪魔と感じる場合によく使われているのがこちらのUIかと思いますので、使い方には注意を要します。

逆に文脈にマッチした使い方ができれば、強い注目を集められる分、確実にユーザーにみてもらえるというUIでもあります。  例えば下記の例ををご覧ください。

＜画像４＞

ユーザーに「見てみるかどうか」の確認を促した上でモーダル・ポップアップを使うのであれば、ユーザー体験としては特に文脈が残っているわけではありません。ページ遷移を伴わせずに追加の情報提供を同じページ内で行いたいときにはこのようなやり方を取ることで邪魔と感じさせにくくすることが出来ます（もちろん、初回の確認のポップアップ自体を邪魔に感じる場合もあるかと思いますのでそこも設計上は注意が必要です）。

■形状の違い

ポップアップの形状はいくつか存在しています。

＜画像5＞

先ほどと同じキャプチャーとなりますが、今度は形状に注目してみてください。左側は通常よく見られるウィンドウの形をしていますが、右側は吹き出しの形をしています。特に右側の吹き出し型は「この場所に着目して欲しい」という場合に使うと便利な形状です。
スマホの画面では吹き出しの位置は対象の上下のいずれかになることが多いですが、PCの場合左右に出すということもあり得ます。

＜画像６＞

＜画像6＞のように、メニューの場所指しながら説明するような場合は左右のほうが良さそうですね。

＜画像７＞

また、上の＜画像7＞のように丸い形をさせていることもあります。

右下にある「いますぐお得に申し込む」というような小さなポップアップをずっと表示させ続けているUIも時々見かけます。メニューなど特定の案内をずっと残したい場合には形状を工夫することで、邪魔にならない程度のサイズにおさめてしまうやり方も考えられます。

また、同じ形状でもサイズによって与える印象は異なります。

＜画像８＞

特にスマホの場合、上記＜画像8＞の左側にあるような、画面の4分の1程度に収まる程度であるならば（もうちょっと小さくても良いかもしれませんが）阻害感はそこまで出ませんが、右側のように画面の半分を専有するようなポップアップがいきなり出てくると、邪魔な感じが出てきます。

ですので、やはり大きいサイズの形状を使う場合には、＜画像8-左＞のように、まず小さいポップアップでユーザーの意思を確認した上で大きくするといった工夫が欲しくなります。

■出す場所の違い（画面中央、画面の端）

また、出す場所によっても与える体験の性質が変わります。

＜画像９＞

上記は、画面の上部に出す場合、画面の下部に出す場合、また左右に寄せて出す場合、の例です。

＜画像10＞

＜画像10＞のように中央に出すこともできますが、いきなりこの場所に出すのは体験を阻害することになりがちなので、まずは画面の端に出すほうがユーザー体験としては原則的には望ましいかと思います。先程と同様に、まずはそこでこちらの話を聞いてくれるかどうかの確認を取り、聞いてくれるということであれば中央に出す という順序を踏めば体験の阻害感は和らぎます。

また、上に出すのか下に出すのかというのもユーザー体験上どちらが良いかを考えて配置してみてください。原則としてユーザーの邪魔にならないようにと考えますので、スマホのように画面を下にスクロールさせていくことが専らであれば、画面の上から出すことで目線の邪魔はしにくくなります。

■登場の仕方の違い（いきなり画面に登場、アニメーションあり、クリックアクション後、スクロールを伴う場合）

また、登場の仕方もいくつかのパターンがあります。大抵のポップアップは「いきなり」画面に登場しますが、そのような登場の仕方だとユーザーが驚いてしまいます。

画面の端から出す場合だと、アニメーションを伴わせることでポップアップ表示の唐突感を薄めることが可能です

＜動画11＞ 

ユーザーにポップアップを通じて気づいてもらいたいことがある場合は、動きがあると目が行きやすくなる効果も働くので見てもらいやすくなります。ユーザーはページ内のコンテンツをくまなく見ているわけではありませんので、こうしたUIを採用することで通常のブラウジングだけでは気づきにくかった情報への接点を作ることが出来ます。

 もちろん、意図してクリックすることでポップアップがでてくるような方式も可能です。

＜画像12＞

＜画像12＞の事例のように画面に（小さく）定常的に表示されている状態からポップアップをクリックすることで登場させるという形を取ると、メニューのような役割を担わせることが出来ます。

また、「吹き出し」の形状を採用した場合、画面に表示されていない場所に吹き出しを当てたいことがあります。この場合、吹き出しが表示されている場所までスクロールを伴わせて吹き出し型のポップアップを表示させるということも可能です。

＜動画13＞

ただしこの登場のさせ方も強制性が強くなります。いきなりスクロールはさせずに、ユーザーに確認をとった上でスクロールさせるという手順をなるべく踏むほうがよいでしょう。

■登場のタイミング（ページ遷移直後、一定スクロール後など特定条件達成後）

個人的にはポップアップによるユーザー体験の性質をもっとも左右するのがこの「登場のタイミング」要素だと考えています。ここでいう登場のタイミングとは、どのような条件を満たしたときにポップアップが表示されるのか、ということを意味しています。

ポップアップは「ページに重ねるように表示させる」というUIの性質上、ユーザーが見ているページに左右されず任意のタイミングで表示させることが出来ます。

そのため、かえってどのようなタイミングで出すべきかの制御がとても大切になります。多く見られるのは、残念ながらこのタイミングをほとんど考慮していないポップアップです。大抵のポップアップは、あるページを開いた瞬間に登場するようになっています。あるいはページを開いた瞬間ではないとしても、そのページを十分に見ないうちに登場してしまいます。

このようなタイミングでポップアップを出してしまうと、ほぼ確実にユーザーの体験を阻害します。

丁寧に設計されていると思うのは、例えば記事を読み終わったタイミング（スクロールが画面下部まで到達したときなど）で「次の記事のおすすめ」をポップアップで出すようにしているニュースサイトなどがあります。

コンテンツの登場のタイミングをコントロールするという概念は、意外にWebの体験としては新鮮です。メール配信時間を最適化するというような考え方はありますが、ポップアップの配信タイミングは「現在閲覧中」のユーザーを対象にするため、もっとシビアなタイミングコントロールが要求されます。

基本的にWebの体験はセルフサービスという前提があるのですが、よくも悪くもポップアップというUIはサイト運営者からの働きかけという性質が強くなります。例えてみれば、お店の店員さんのようなもので、声をかけるタイミングが悪いとウザい接客になってしまいますし、タイミングが気が効いているとよい体験として感じられます。

逆に考えると、ポップアップというUIをうまく使いこなせれば、セルフサービスでは限界のあった行動を促進させつつ、親切なサイトという印象を与えることが可能になります。

■表示の消し方の違い（ボタン押下、一定時間経過）

最後に、ポップアップの消し方を考えましょう。

通常期待されるUIとしては、ポップアップの右上（左上）に閉じるボタン（×の形状をしている事が多い）がついていて、それを押すと消えるというものがあります。

また、閉じるボタンを押さなくても、一定時間なにも反応を示さないと自動的に消える・引っ込むようなUIを採用するのも親切です。

 言うまでもありませんが、間違ってもなにかアクションをしないと消せないようなUIにはしないでおきましょう。

 ２：ポップアップの利用シーン

ポップアップの種類は様々あることがわかりました。では実際にどのような場合にポップアップが使われているかを見てみましょう。

■チャット

まずはチャットです。

＜画像14＞

チャットは、上記のように画面の左下あるいは右下にポップアップとして表示されていることが多く見られます。ポップアップ内の「チャットで相談する」などのボタンをクリックすることで、下記のようなチャット用ポップアップウィンドウが開きます。

＜画像15＞

チャットの仕組みによっては、リンクを送ることで別のページを開いてもらうといったことができますので、ポップアップでいま見ているページとは別に開いておいたほうが都合が良くなります。

また見ているページ内に疑問点があったりする場合も、ポップアップ形式を取ることで元のページを見ながらチャットで相談することが出来ます。

■クッキー承諾

クッキー承諾も基本的にはポップアップで求めてきます。

＜画像16＞

上記のように、モーダル＋画面中央、ということで文脈を問わずに強制的に割り込んでくるように表示するようにしているサイトもあれば、

＜画像17＞

こちら＜画像17＞のように控えめに画面下から非モーダルで登場させているケースもあります。1つ目がイギリス、2つ目がフランスのサイトなのでいずれもGDPR圏内のサイトのはずですが、随分とポップアップの使い方には差があります。

個人的にはクッキー承諾系は＜画像17＞のようなポップアップで表現しているケースが多いように感じますが、＜画像16＞のように表示されると「クッキー承諾しないとコンテンツは見せないぞ」という強い意志を感じてしまいますが、設定を見てみると「全て拒否」にしてもサイトは見られるようです。

■「次の記事」

ニュースサイトでよく見かける「次の記事」へ遷移させるポップアップ。このユースケースの場合は、ユーザーが記事を読み終えたあたりで出てくることが多く、登場のタイミングは記事の終わりの箇所までスクロールしたところにコントロールされています。

＜画像18＞

また、上記サイトのように出す場所も画面右下になっており、記事を読み終えたあとに視線がちょうど行くところに出すようにしていることが多いです。登場の仕方もアニメーションをきかせて、下からせり出してくるか、あるいはウィンドウの右端から出てくるようにしている場合も見かけます。

もちろんこの場合は非モーダルにし、ユーザーの閲覧体験を邪魔しないようにしています。次の記事を見てもらいたいという意図が明確な分、ユーザー体験に沿うように表現されているポップアップが多い利用方法だと思います。

■メアド入力

かたや、こちらもニュースサイトでよく見かけますが、メールマガジン登録を促すポップアップはやや早めに出てくることが多い印象を受けます。

＜画像19＞

上記サイト＜画像19＞の例では、アクセスしてまもなく、まだ記事を開かないうちに出てくるので、「ちょっとそれはまだ早い」という受け取り方をするユーザーも多いのではないかと思います。ただ、このような表現であれば「早いな」と思ったとしてもまだそこまで邪魔な印象は受けません。

＜画像20＞

しかし、上記＜画像20＞のようなモーダルかつ画面中央にドンと表現されたポップアップが、アクセス直後に出てくるとさすがに邪魔感が強くなってきます。海外のサイトですと「クーポンあるからメアド登録してよ」というような、ギブアンドテイクがお互い明確な方が好かれるのでしょうか。日本ではここまでアグレッシブなサイトはあまり見かけない気がします。

ただ、ポップアップ登場のタイミングをうまくコントロールすれば体験の阻害感をあまり感じさせず、かつメールマガジン登録率を上げることができるのも確かですので、色々とABテストを重ねてみることをおすすめします。

■チュートリアル

下記の例は割とポップアップらしい使い方かと思います。

＜画像21＞

このように吹き出し型をうまく使うことで、「ここを押してください」「ここを使いましょう」ということを明確に伝えることが出来ますし、普段使っている画面上に出せますのでチュートリアル（案内型）としてポップアップを使うのは有効です。

また、複数のポップアップをつなげて１つのチュートリアルとして表現することもあります。

＜画像22＞

上記は会員登録のフローをポップアップをつなげて１つのチュートリアルとして表現しています。意外に入力の仕方がわからなくなったり、途中で面倒になったりする場合は少なくないのですが、このようにステップ・バイ・ステップで丁寧に案内されると最後まで到達してくれるユーザーも実は増えてきます。

 ちょっと作るのは面倒ではあるのですが、特定の手順をユーザーに理解して欲しいという場合はこのようなポップアップの使い方は有効ですし、ポップアップの特性をうまく活かしていると言えそうです。

■接客

ポップアップを使い接客のような体験を作ることも可能です。登場のタイミングについて紹介した際に、お店の店員さんのような体験を作ることもできるということをお話していました。店頭の場合 例えば、色々見ているが決めかねて悩んでいるように見えるくらいのタイミングで声をかけると良さそうだ、というあたりがつきますが、Web上だと何がそれにあたるでしょうか？

＜画像23＞

たとえば上記＜画像23＞の例では、商品一覧ページのように多数の選択肢が登場するページに一定時間滞在していると、なにか悩んでいるのではないかというあたりをつけて「あなたにあった商品を」と声をかけるようなイメージでポップアップを登場させています。

このような体験はページ単体では作りにくく、ポップアップの特性をうまく生かせるチャンスがあります。ただタイミングを間違うと先ほどのメアド入力＜画像19＞のような、邪魔なポップアップにもなってしまいかねません。この辺の頃合いの難しさは、お店の店員さんが声をかけるタイミングを結構真剣に考えてチューニングするのと似ていて、色々とテストを繰り返して見つけていくほかありません。

 ■看板

訪問直後に「キャンペーンご案内」「新商品ご案内」などの告知を意図した内容のポップアップが出ることがあります。実店舗に例えると店頭入り口に置かれている告知用の看板のような位置づけに近いのでここでは「看板」と読んでいます。

＜画像24＞

こちらは基本的には告知用途と位置づけて考えるのが良いと思います、直接のページ誘導やコンバージョンへの寄与というよりは訪問者に目に入れてもらい認知してもらうことを目的としましょう。

あまり頻繁に出てくると体験を阻害しかねない使い方になりますが、一方で告知用途という性質上は見えるところにあり続けることが大事です。そのため実は目的と手段の相性があまり良くはありませんので、看板的な使い方は割と見かけはするものの、それほどおすすめできるポップアップの使い方とは言えません。

看板的に捉えるとどうしてもより多くの人に伝えたくなりますから、トップページなど動線の太いところに設置しがちになりますが、告知だとしても見てもらいやすい場所・タイミング・セグメントを考えると対象者の数は減りますが効果は出しやすくなります。看板型でもこうした工夫は考えてみると良いでしょう。

■広告

ポップアップ型の広告は、インターステイシャル広告とも呼ばれ、Web体験の邪魔者の代表格のような扱われ方をしています。ポップアップに悪い印象があるのはこいつのせいではないかと悪態をつきたくなりますが、

＜画像25＞

画面の中央に唐突に表示されること自体、体験を阻害するわけですが、基本的には広告なので前後の文脈とも大体においてあまり関係がありません。またクリックしてしまうと見ようと思っていたコンテンツから離れてしまう結果になるのでその点でも体験を阻害しています。

グーグルもこうしたポップアップの使い方にはペナルティを課しており、筆者としても率直に言ってあまりおすすめしない利用方法です。

３：ポップアップはなぜ邪魔者扱いされるのか

ここまでご覧頂いていると、ポップアップが邪魔者扱いされる理由もある程度おわかりではないかと思います。邪魔になるということは、体験を阻害しているということを意味します。

 ポップアップが体験を阻害するのはどのような場合でしょうか。

■後ろにあるものが見えなくなる

まずはこちらです。背景の扱い（モーダルにしていたり）、ポップアップの大きさや表示の場所によって、それまで見ていたページ内容が見えなくなります。ページを読んでいる最中に登場した場合、明らかにこれは体験を阻害することになります。

■何かをしている途中に登場する

オンラインでのユーザー行動は基本的にセルフサービスを前提としていますので、ユーザーは何かしらの意図を持って行動しています。その途中にポップアップに割り込まれると、後ろにあるものが見えなくなったり、あるいはページを動かせなくなったりという体験になってしまうので、もともとの意図に沿った行動を阻害することになります。

■内容が行動の文脈にあっていない

また、往々にしてポップアップ内に表示されているコンテンツはユーザーの行動の文脈を無視し、伝えたいことを一方的に伝えるというものになりがちです。前述した広告としての使い方は典型的にこちらに当てはまります。

視野を妨げ、タイミングも悪く、内容もマッチしていない、となると三重に体験を阻害することになります。ポップアップが邪魔者扱いされるのは、これが揃った使い方をしているケースが多いためだと考えます。この場合、実店舗に例えると売り込みの激しい店員さんのような体験になってしまいます。

ポップアップはユーザーの注意を引きつける力が強い分、使い方に気をつける必要があります。

４：ポップアップがSEOに与える影響

ポップアップはSEOに悪い影響を与えるのではないか、ということを気にされる方も多いのではないかと思います。

Googleが公開している記事によると以下のような記載があります。

モバイル検索時のユーザー体験をさらに高めるため、ユーザーがモバイル検索結果からページに遷移した際、すぐにコンテンツにアクセスできないようなページを、2017年1月10日より、これまでよりも低く掲載する可能性があります。

また一方下記のような記載も見られます。

正しく使うことで、新しいランキング要素の影響を受けない手法についても例を挙げておきます。

・法律上の必要性に基づいて表示されているように見えるインタースティシャル（Cookie の使用、年齢確認など）。

・一般公開されていないコンテンツ（そのためインデックス登録ができない）を有するサイトが表示するログイン ダイアログ。たとえば、メール サービスのように個人的なコンテンツが含まれる、有料のコンテンツであるためインデックス登録できない、などの場合が考えられます。

・画面スペースから見て妥当な大きさで、簡単に閉じることのできるバナー。ここで言う妥当な大きさとは、たとえば Safari や Chrome に表示されるアプリ インストール バナー程度の大きさです。

SEOと直接関係はありませんが、「Better Ads Standards」という広告表示についての標準を提起している文書があり、こちらでもポップアップ広告の使い方について触れられています。体験を阻害するような使い方はもちろんNGですが、画面の30%を超える面積を専有していると体験を阻害しているとみなすという基準が提案されているのは参考になります。

つまりは「使い方次第」ということですね。ポップアップが常に悪いということはなく、体験を阻害しないような使い方になっていればSEOへの悪影響は見られないと考えて良いと思います。

５：ポップアップの特性の活かし方

ではポップアップの特性を活かした使い方とはどのようなものでしょうか。ポップアップをコミュニケーションの手段として考えてみましょう。オンライン上でのコミュニケーションを構成する要素としては下記が挙げられます。

• どこで
• 誰に
• いつ
• どのような

ポップアップはWebサイト上で使うものとして考えると、ページ側で出来ることと、ポップアップ側で出来ることをうまく区別できると特性の活かし方が考えやすくなります。

これまで説明してきたポップアップの種類や利用シーンを踏まえ、各構成要素別に特性を考えてみましょう。

■どこで

Webにおいては、ページはURLで指定されます。またユーザーはURLをダイレクトに入力することはあまり想定されないので、基本的にはページ間に張られたリンクをたどり特定のURLで指定されるページにたどり着きます。

つまり、ページの場合は何かしらの内容をユーザーに伝えるには、ユーザーが自発的にそのページに到達出来なければいけません。

このあまりに当たり前のことを、ポップアップは気にする必要がありません。ポップアップは事実上、どこにでも出すことが可能です。既存のサイトの構造、階層の深さ、リンクの見つけやすい・見つけにくいということは関係なく、好きなページでポップアップを表示させることが出来ます。

これは実店舗における店員さんによる声掛けと極めて性質が近い体験を作ることが出来るということになります。店員さんも、お客さんが店内のどこにいようと好きな場所で声をかけることが出来ます。Webページは店舗のレイアウトや内装と同様に、場所に依存するコミュニケーション手段ですが、ポップアップは場所に依存しない自由度があります。

ポップアップには、込み入ったリンクを辿らせなくても、あるページで必要な情報を好きに提供することが出来るという特性があります。

■誰に

ではなぜそのようなことをしなければならないのでしょうか？ある情報がどこかのページに書いてあるのであれば、シンプルにそこを辿らせれば良いのではないでしょうか。

サイト設計上難しいのは、ある情報が必要なユーザーは必ずしもそのページを見ているユーザー全員とは限らないという点です。「カートに商品を入れて買おうかと思ったが、このサイトで買うのは初めてなのでちょっと不安があるユーザー。FAQページを見れば不安が解消される内容が本当は書いてあるのだが、自分ではそこに気づかず、結局今回は離脱した。」みたいな話はいくらでもあります。

Webではユーザーにすべての行動を委ねてしまう以上はこうしたことは必ず起きてしまいます。ポップアップをうまく使えば、見せたい場所で見せたいユーザーに情報を提供することが出来ますので、ユーザーが自分で特定のページにたどり着けなくても大丈夫、という状態を作ることが出来ます。

■いつ

「いつ」とは時間的な指定を意味しますが、単純に曜日や時間帯ということであればページ内のコンテンツも期間を区切った配信は可能なので、ポップアップの特性を活かすことにはなりません。

ここはまたしても「店員さんによる声掛け」をイメージしてみましょう。店員さんは「いつ」声をかけてくるでしょうか？「いつ」声をかけられれば客の立場としてはよい体験と感じられるでしょうか？

声をかけるタイミング、は実は（デキる）店員さんは非常に気を使っています。いまなら声をかけても大丈夫かな、ちょっとサポートしてあげたほうが良さそうかな、いやいや自分で色々見てる感じだからいまはウザがられるかな・・・といった仮説を、お客さんの店内の行動を観察しながら常に立てています。

ポップアップにおける「いつ」もこのように考えてみると特性を活かしやすくなります。利用シーン「接客」の例で

 商品一覧ページのようにたくさんの選択肢が登場するページに一定時間滞在していると、なにか悩んでいるのではないかというあたりをつけて「あなたにあった商品を」と声をかけるようなイメージでポップアップを登場させています。

という使い方をご紹介しましたが、「悩んでいるのではないか」という心理状態をうまく読み解くことができれば（この場合は滞在時間で見ています）良いタイミングでオンライン上での声掛け体験を作ることが出来ます。

このようなリアルタイム性をもたせた「いつ」を考えられるのはポップアップの特性として非常に面白い部分だと思います。

■どのような

ポップアップはただのウィンドウですから、HTMLで表現できるものは基本的に何でも表現が可能です。ただ、ページ内に配置されているコンテンツと同じようなものを出すだけだと芸がありません（！）
（はい、看板的な利用の場合、ページ内のバナーをそのまま出してたりすることがありますが、ああいうやつです）

またしても「声をかける」メタファーで考えてみるのはここでも有効です。「なにかお悩みですか」「お探しですか」などは典型的な声掛けパターンです。

＜画像26＞

ポップアップの場合は、上記のように選択肢として提示してしまいましょう。選択肢の場合、ユーザーは選ぶだけで良いのでユーザー側の負担が小さくなります。

利用シーンのところで説明したチュートリアル表現もポップアップの特性を活かしたやり方です。複数のポップアップをつなげて１つのコミュニケーションとして設計することが出来ますし、サイト内を回遊させることも同時に実現可能です。なんなら選択肢の回答に応じて回遊ルートを分岐させても良いでしょう。     

＜画像27＞ 

また、「UI的に気づかせやすい」という特性をポップアップは持っています。「誰に」の箇所で説明したような、初回購入者に対しての情報提供ということであれば なにもポップアップでなくてもページの中でセグメント別にコンテンツを出し分けることで同じことが実現できます。

ただ、ページ内に記載していることを必ずしもユーザーがくまなく目を通しているわけではありません。意図して気づいてもらいたい情報であれば、敢えてポップアップを使うことで気づいてもらいやすくなるという効果が期待できます。

＜動画28＞ 

このように、登場時にアニメーションを伴わせるだけでも気づきやすくなります。

またちょっとしたTIPSとして、人間は「顔」につい目が行くという特性を持っています。ポップアップ内に顔があるとつい見てしまうという効果を生み出せます（経験上、顔ありと顔なしでABテストをすると、大抵は顔ありが勝ちます）

＜画像29＞

顔あり、というのは＜画像29＞のようなイメージです。人間ではなく何かのキャラクターや動物でも同じような効果が見られます。

４つの要素について、ポップアップの特性の活かし方を考えてきましたが、大まかには

            ・Webページ        →店舗
            ・ポップアップ    →店員

というメタファーで考えておくと棲み分けがわかりやすくなるのではないかと思います。もちろん、店員のメタファーは「デキる」店員をイメージして考えてみてください！

６：ポップアップの改善サイクル

いや～、長文ですねこのブログ。まだトピックが続くか、と思われてるかもしれません。実は僕もです。正直に言って、ポップアップというネタだけでこんなに書くことがあるとは筆者も最初思いませんでした。

でもポップアップを改善するサイクルを回していくことは、これまで説明してきたことをすべて合わせたよりもひょっとすると大事かもしれません。シンプルに言えば、ABテストを回して改善していきましょうということです。

ここでもポップアップの特性が発揮されます。ページ内のコンテンツで実施するABテストとの違いは、「ポップアップの有無」でテストをするという点です。ここまでポップアップのなるべく利点を説明しようとしてきていますが、やはりポップアップの場合はどうしても「ウザい」という体験になってしまうリスクが常にあります。

そのため、同じ配信対象グループの中でポップアップを「出す」「出さない」で比較を行いましょう。体験としてイマイチであれば数値に表れてきますので、ポップアップ内のどのリンクにどう反応したのか、×ボタンを押して消されたのか、などを見ながら改善を図っていきます。

デキる店員が何度も試行錯誤を重ねているのと同じく、検証サイクルは何度も回すのがセオリーです。どこで・だれに・いつ・どのような、の各要素を地道にテストを繰り返していきましょう。一発目でうまくいく・・・ことは残念ながらあまりありません。

ポップアップの特性を活かすような形で設計すると、ある程度狙いを定めて配信することが多くなります。結果としてポップアップに対してのCTRは意外に高い水準を出せたりします。

なお、具体的なABテストのやり方や数値の目安などについては別記事にてまとめていますのでよろしければそちらもぜひご参照ください。

７：僕らはSprocketといいます

最後に改めてディスクロージャです。

この記事の著者である私自身が、ポップアップをページ上にパーソナライズ配信することができるツールを開発・販売している会社を経営しています。そうなると立場上、ポップアップを養護する記事を書くのは多分にポジショントークと受け取られても仕方がないと自覚しています。

ただ同時に、ポップアップ自体が悪いわけではなく、要は使い方次第であるということもわかってほしいがためにこの記事を書きました。

Sprocketはユーザー起点の体験設計を実践している会社であり、ポップアップは今までのページ閲覧だけでは作ることが難しかった体験を作ることができるUIであると考えています。ポップアップ活用方法の試行錯誤を繰り返すなかで、ユーザーの体験の邪魔にならない、むしろプラスに働くような使い方とはなにかを生み出してきているつもりです。自分たちになりにユーザー起点の体験になっているかのこだわりを持って、あるいはデータからそうなっていると示せるように工夫を重ねてきました。

これまでポップアップというUIを取り入れて来ていないとすれば、UXを改善できる機会を実は取り逃しているかもしれません。本記事からそうした気付きを得て頂ければ本懐です。

◆関連記事
Webマーケティングでも注意すべきインビジブルゴリラ現象とは
カクテルパーティー効果をWebマーケティングに取り入れよう
ポップアップのCTRの目安が書かれていますのでご参考まで

◆紹介事例
複数シナリオを実施、コンバージョン率は最大166%に
株式会社ワコール様 （画像23,26）
 https://www.sprocket.bz/casestudy/ec/wacoal/

ギフト案内シナリオによる購入完了率147％など、複数のシナリオでCV率を改善
株式会社アルペンローゼ様（画像8,9）
https://www.sprocket.bz/casestudy/ec/alpenrose

株式会社ジョンブル様（画像3,5,10）
https://www.sprocket.bz/casestudy/ec/johnbull

新規会員獲得率120％。改善による売上金額に大きく影響
株式会社すかいらーくレストランツ様 （画像22）
https://www.sprocket.bz/casestudy/ec/skylark

◆参考サイト
Googleウェブマスター向け公式ブログ「モバイル ユーザーが簡単にコンテンツにアクセスできるようにするために」
ユーザーが嫌うオンライン広告12種を定めた「Better Ads Standards」日本語訳