SWELLでポップアップの作り方ガイド｜スマホで嫌われない設定術

読者の行動をもう少し増やしたくて、SWELLでポップアップを使ってみたいけれど「やり方が多すぎて分からない」「スマホで邪魔にならないか不安」と感じていないでしょうか。

この記事では、SWELLで使えるポップアップの種類や考え方から、ブログパーツとプラグインを組み合わせた具体的な手順まで、私が実際に試してしっくりきた方法を中心に紹介します。

シンプルに言うと「ブログパーツ＋ポップアッププラグイン＋少しの工夫」で、実用的なSWELLのポップアップは充分作れます。

Swelのポップアップで何ができる？まずは全体像を整理しよう

SWELLのポップアップの主な種類と特徴（まずはざっくり把握）

SWELLサイトでよく見かける「ポップアップっぽい見せ方」は、次のようなパターンに分けられます。

種類	見え方	主な用途	よくある実現方法
画面中央のモーダル	画面の真ん中に小さなウィンドウが重なる	メルマガ登録、LINE登録、重要なお知らせ	ポップアップ用プラグイン＋ブログパーツ
画面下の固定バナー	スマホ画面の下に細長いバナーが出る	クーポン、問い合わせボタン、LP誘導	ブログパーツ＋CSSやJavaScriptのカスタマイズ
追従フッター＋ポップアップ	下に追従するバーから、別枠が立ち上がる	複数店舗の電話番号一覧、予約先のまとめ	追従フッター＋ポップアッププラグイン＋ブログパーツ
画像の拡大表示	画像をクリックすると、暗転して大きく表示	商品写真、制作実績の拡大、ギャラリー	SWELLに備わっている画像拡大機能（Luminousなど）

SWELLには「ブログパーツ」という機能があり、よく使うデザインをパーツ化して、ショートコードで呼び出すことができます。

一度ブログパーツを作っておけば、記事内だけでなく、サイドバーやフッターなどからも同じデザインを再利用できるので、ポップアップの中身にも相性がいいです。

一方で、表示のタイミングや頻度を柔軟にコントロールしたいときは、ポップアップ専用のプラグインを組み合わせると楽になります。

「ピックアップバナー」とポップアップの違い

SWELLを使っている方から「ピックアップバナーとポップアップの違いがいまいち分からない」という相談をもらうことがよくあります。

ざっくり分けると、次のようなイメージです。

• ピックアップバナー…トップページの上の方などに、常時表示されている横長のバナー
• ポップアップ…ページを見ている最中に、上から「ひょい」と重なるように出てくるもの

「ページを読んでいる途中で、おすすめやお知らせを飛び出させたい」という場合は、ピックアップバナーではなくポップアップの出番です。

ポップアップを作るときに押さえておきたい前提

SWELLでポップアップを設計するときは、次の考え方を頭の片隅に置いておくと整理しやすいです。

• 見せたい内容やデザインは、ブログパーツで作る
• ブログパーツをショートコードなどで呼び出して、ポップアップの中身として使う
• 「いつ」「どこで」「どのぐらいの頻度で」出すかは、プラグインやスクリプト側で制御する

この流れをひとつの型として覚えておくと、パターン違いのポップアップも組み立てやすくなります。

ポップアップを使う前に決めておきたい目的と設計

目的別にポップアップを設計する

まず、自分のサイトでポップアップを使う目的がどれに近いか、考えてみてください。

目的が決まると、どのタイプのポップアップが良さそうかも自然と見えてきます。

目的	合いやすいポップアップ	ひと言メモ
メルマガ・LINE登録	画面中央モーダル	登録フォームやボタンをしっかり見せられる
問い合わせ・資料請求	中央モーダル or 下固定バナー	バナーからLPへ飛ばすか、その場でフォームを書かせるかで使い分け
電話・来店予約	追従フッター＋ポップアップ	複数店舗や担当者がいるときに便利
キャンペーン告知	下固定バナー	あまり邪魔せずに、常に目に入る位置に置ける
お知らせ・規約	中央モーダル	一度は読んでほしい内容に向いている

表示タイミングと頻度をざっくり決めておく

ポップアップは「いつ」「どのくらいの頻度で」出すか次第で、印象がガラッと変わります。

私がサイトを触るときは、次のような方針にしています。

• ページを開いてすぐではなく、数秒たってから出す
• ある程度スクロールして、内容を読んでくれた人にだけ出す
• 同じ人に何度も出し続けないよう、回数を制限する

ポップアップ専用プラグインを使うと、一定時間経過後やスクロール率などで発動させることができます。

さらに、Cookieやルール設定を組み合わせると「一度閉じた人にはしばらく見せない」といったことも可能です。

スマホとPCでポップアップの役割を分ける

ブログやオウンドメディアは、スマホからのアクセスが多いことがほとんどです。

そのため、ポップアップを設計するときも「スマホ優先」で考えた方が、体験としてうまくいきやすいです。

• スマホ…画面下の細長いバナーや、なるべく小さめのモーダルが使いやすい
• PC…中央モーダルで少し説明を増やしても、ストレスになりにくい

ブログパーツをショートコードで呼び出しておけば、条件付きの表示や、画面サイズによってパーツを切り替えるといった工夫もしやすくなります。

プラグインで作るポップアップ：Popup Makerの基本手順

ステップ1：ブログパーツでポップアップの中身を作る

まずは、SWELLのブログパーツで「ポップアップの中身」にあたる部分を作ります。

ポップアップの中身をブログパーツにしておくと、次のような良さがあります。

• エディタ上で実際の見た目を確認しながら編集できる
• ショートコードでどこからでも呼び出せる
• 一度直せば、同じパーツを使っている箇所がすべて更新される

項目	設定のポイント
ブログパーツ名	「メルマガ登録ポップアップ」など、中身が思い出しやすい名前にする
コンテンツ	見出し、説明文、画像、ボタンなどを、普段の記事と同じブロックで組み立てる
用途	「CTA用」「ウィジェット用」など、管理画面で見たときに迷わない分類にしておく

ブログパーツを公開すると、[blog_parts id=”◯◯”] のようなショートコードが発行されます。

このショートコードが、後でポップアップの中に差し込む“中身”になります。

ステップ2：Popup Makerをインストール・有効化する

次に、WordPressの管理画面からPopup Makerをインストールします。

• 管理画面メニューの「プラグイン」から「新規追加」を開く
• 検索窓に「Popup Maker」と入力して検索する
• 表示されたプラグインをインストールして有効化する

有効化すると、管理画面のメニューにPopup Maker用の項目が増えるので、そこから新しいポップアップを作っていきます。

Popup Makerは、WordPressでモーダルウィンドウやバナー型のポップアップを作るためのプラグインで、トリガーや表示ページの条件などを画面上で細かく設定できるのが特徴です。

ステップ3：新しいポップアップを作成する

Popup Makerの管理画面から「新規追加」や「Create New Popup」をクリックすると、ポップアップの作成画面が開きます。

ここでは、まず次の3つを押さえておきましょう。

• Popup Name…管理用の名前（例：mail-magazine-popup）
• Popup Title…ポップアップ内に表示するタイトル（表示させたくない場合は空欄でもOK）
• コンテンツエリア…さきほど作ったブログパーツのショートコードを貼り付ける

こうしておくと、ポップアップの枠組みはPopup Maker側で用意しつつ、中身のデザインはSWELLで編集できる形になります。

ステップ4：トリガーとターゲティングを設定する

ポップアップの作成画面では、次の2つの設定が特に重要になります。

• Triggers（トリガー）…ポップアップをいつ開くか
• Targeting（ターゲット・ルール）…どのページや条件で表示するか

それぞれのイメージを、表にまとめるとこんな感じです。

設定項目	例	ポイント
Trigger	ページ読み込みから数秒後、スクロールが一定量に達したとき	読み始めを邪魔しないタイミングを選ぶ
Targeting	特定カテゴリーの記事だけで表示	関係の薄いページには出さないようにする
Cookie・ルール	一度閉じたら数日出さない	同じ人に何度も見せてストレスにならないようにする

ここまで設定できれば、基本的なポップアップの仕組みは動き始めます。

あとは実際の表示を確認しながら、タイミングや頻度を細かく調整していくイメージです。

コードで軽量なポップアップを作るアイデア

ブログパーツとMicromodal.jsを組み合わせる方法（概要）

よく使われる方法のひとつが、ブログパーツでポップアップの中身を作り、Micromodal.jsのようなモーダル用のライブラリを使って表示させる形です。

大まかな流れは次のとおりです。

Micromodalはサイズも小さく、キーボード操作にも対応しているので、シンプルかつ扱いやすいライブラリです。

ただし、JavaScriptに触れる必要があるので「まずはノーコードでやりたい」という段階では、無理にここから入らなくても大丈夫です。

プラグイン方式とコード方式の違い

プラグインで作るポップアップと、コードで作るポップアップの違いを、ざっくり比較しておきます。

項目	プラグイン（Popup Maker）	コード（Micromodalなど）
難易度	管理画面からの操作で完結しやすい	HTMLやJavaScriptの基本的な理解が必要
カスタマイズ性	用意された設定項目の範囲で柔軟	コード次第でかなり自由に作れる
サイトの軽さ	プラグイン分の読み込みが増える	実装次第で軽めに抑えやすい
トリガー・条件設定	専用画面で条件を選ぶだけで設定可能	自分で条件分岐を書く必要がある
向いている人	ノーコードでまず動かしてみたい人	日常的にカスタマイズもしていきたい人

個人的には、最初はプラグインで試してみて、「もっとこうしたい」という欲が出てきたら、コードでの実装も検討する、くらいの順番がおすすめです。

ポップアップをスマホで快適に見せるコツ

スマホ画面下に出る固定バナーの考え方

実際のサイトでもよく使われているのが、スマホ画面の下に細長く表示されるバナーです。

画面を完全にはふさがず、常に視界の端に入る位置なので、ポップアップの中でも比較的ストレスが少ない見せ方です。

• ブログパーツで、横長バナーのデザインを作る
• 下部に固定されるよう、CSSとJavaScriptで位置を調整する
• 背景は少し透けさせ、本文が見えるようにしておく

このタイプのバナーは、次のような用途と相性がいいです。

• LINE登録やメルマガ登録への誘導
• クーポンやセールの案内
• 問い合わせフォームや予約ページへのリンク
• キャンペーン専用のLPへの導線

スマホとPCでポップアップの見せ方を変える

同じ内容を見せる場合でも、スマホとPCでは「ちょうどいい形」が変わります。

デバイス	おすすめの見せ方	意識したいポイント
スマホ	画面下の固定バナー、小さめのモーダル	片手で押しやすいボタンサイズにする、文字数を詰め込みすぎない
PC	中央モーダル、サイドからのスライドイン	ある程度説明を入れても邪魔になりにくいので、丁寧さを優先する

条件付きでブログパーツを出し分けたり、メディアクエリで表示位置を変えたりすることで、同じ内容でもデバイスに合った見せ方ができます。

ユーザーに嫌われないポップアップのルール

ポップアップで一番避けたいのは、「うざいから閉じる」で終わってしまうことです。

私が普段意識している、嫌われにくいポップアップのルールを挙げておきます。

このあたりを意識するだけでも、「押し付け感のあるポップアップ」から「案内としてちょうどいいポップアップ」にかなり近づきます。

ポップアップが表示されないときのチェックリスト

よくある症状と原因・対処法

ありがちな状況と、そのときに疑うポイントを表に整理します。

症状	考えられる原因	対処のヒント
全然表示されない	トリガー条件が厳しすぎる、ターゲットのページが限定されすぎている	まずは「全ページ＋短めの遅延」でテストしてみる
特定のページだけ出ない	そのページが条件から外れている、特殊なテンプレートを使っている	別ページで同じ設定を試し、条件を見直す
閉じるボタンが効かない	CSSの重なり順やJavaScriptエラーの影響	ブラウザの検証ツールでエラーを確認し、怪しいプラグインを一時停止してみる
スマホでレイアウトが崩れる	幅固定の指定や、余白の詰めすぎ	グループブロックやカラムの幅指定を見直し、フォントやボタンを大きめにする
画像の拡大表示が効かない	対象のクラス指定や、画像の読み込み方法が合っていない	対象にする画像の設定や、LazyLoadとの相性をチェックする

チェックすべき技術的なポイント

ポップアップ関連のトラブルが起きたときは、次の順で確認していくと原因を見つけやすいです。

• キャッシュ系プラグインやサーバー側のキャッシュを一時的にオフにしてみる
• ブラウザのシークレットウィンドウで、ログイン状態を変えて確認する
• 直近で導入したプラグインを一旦停止し、動きが変わるか試す
• テーマを一時的に別のテーマに変えて、問題がテーマ由来か切り分ける

ポップアップはJavaScriptに依存している部分が多いため、エラーがひとつあるだけで動かなくなることがあります。

検証ツールのコンソールタブを開いて、赤いエラーが出ていないか軽く覗いてみるのもおすすめです。

それでもダメなときの相談先

自分であれこれ試しても分からないときは、誰かに状況を見てもらった方が早いこともあります。

• ポップアップの設定画面をスクリーンショットに撮って、制作仲間や詳しい友人に見てもらう
• 利用しているプラグインの公式ドキュメントやフォーラムで、似た症状がないか探してみる
• テーマやサイト制作をお願いしている人がいれば、時間単位で相談してみる

ポップアップは、テーマ、プラグイン、サーバー環境など、いろいろな要素の影響を受けるので、ひとりで悩み続けるより、早めにヘルプを出した方が結果的に時間の節約になります。

よくある質問：ポップアップの疑問あれこれ

Q1. ポップアップは初心者でも使えますか？

A. ブログパーツとポップアップ用プラグインを組み合わせれば、コードを書かなくても十分使えます。

中身のレイアウトは普段どおりブロックエディタで作り、プラグイン側で「いつ」「どこで」出すかを指定していくイメージです。

慣れるまでは試行錯誤になりますが、いきなり難しいカスタマイズをせず、シンプルなポップアップをひとつ動かしてみるところから始めると、感覚がつかみやすいと思います。

Q2. ポップアップを入れると、サイトが重くなりませんか？

A. 画像の量やスクリプトの数によっては、表示速度に影響が出ることはあります。

ただ、画像をきちんと圧縮しておいたり、表示するページを絞ったりすれば、体感として困るほど極端に遅くなるケースは多くありません。

どうしても速度が気になる場合は、プラグインに頼りすぎず、軽量なライブラリを使ってコードで作る方法も選択肢になります。

Q3. ポップアップはどのくらいの頻度で表示するのがいいですか？

A. サイトの内容や読者の属性にもよりますが、個人的には「出しすぎない」ぐらいがちょうどいいと感じています。

• 初めてアクセスした瞬間から何度も出すのは避ける
• 一度閉じたら、数ページ分は出さないなど、Cookieで制御する
• 重要なお知らせ以外は、一つのセッションで一回までにしておく

ポップアップは、便利な反面、嫌われるリスクもあります。

コンバージョンだけでなく、サイト全体の印象も含めてバランスを取りながら、少しずつ調整していくのがおすすめです。

ポップアップ活用のまとめと次にやること

この記事の内容を簡単にまとめます

これから手を動かすなら、最初の一歩はとてもシンプルです。

まず「ポップアップで案内できたら便利そうなこと」をひとつだけ選んでみてください。そして、その内容をブログパーツで作ってしまい、ポップアッププラグインで「いつ」「どこで」出すかを設定してみましょう。

一つめのポップアップがうまく動くと、「スマホでは別の見せ方にしたい」「別の導線もポップアップで試してみたい」といったアイデアが自然と出てきます。

小さく試しながら、自分のサイトにとってちょうど良いポップアップの形を、一緒に探していきましょう。