【Studio】ポップアップバナーを作成する手順｜閉じるボタン実装も解説！
「Studioの〇〇の使い方を知りたい」などご要望がありましたら、
いいねを押した後にメッセージ欄を設けていますので、お気軽にご連絡ください！
送信中です
お問い合わせや資料ダウンロードのコンバージョン率を上げたい時に、大活躍するのがポップアップバナーです。画面上にバナーを固定できるので、お客様の目に留まりやすく、自社商品・サービスの宣伝にも繋がります。
本記事では、Studioでポップアップバナーを作成する手順について紹介します。
完成イメージは、下記のとおりです。
ただし、実装レベルは少し高めです。「自作する自信がない、、、」という方も多いかもしれません。
そんな方のために、私たちはStudio専門の制作代行サービスを提供しています。要望に合わせて、デザイン設計から公開までしっかりサポートしますので、ぜひお気軽にお問い合わせください。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
Studioでポップアップバナーを作成する手順
Studioでポップアップバナーを作成する手順は、下記のとおりです。
それぞれ具体的に説明します。
①：トグルを追加する
ナビゲーションにある「追加パネル」をクリックします。
「基本」→「Toggle」をクリックします。
トグルの基本設定を行いたいので、トグルを選択した状態で右パネルのアイコンをクリックします。
右メニューのパネルが出てきたら、下記のように設定します。
- デフォルトで表示：ON
- 開く操作：クリック
- 要素外クリックで閉じる：OFF
Kajiデフォルトで開くはOFFになっているので、ONに切り替えておきましょう！
これでトグルの基本設定は完了です！
②：トグル上部を編集する
「Summary」というテキストが邪魔なので削除します。
また上部ボックスのPaddingも邪魔なので、上部ボックスを選択した状態で、paddingを縦・横ともに0pxに設定します。
アイコンもバナーを閉じるボタンにしたいので、上矢印アイコン→closeボタンに変更します。アイコンを何度かダブルクリックして右パネルが出てきたら、closeアイコンを選択します。
下記のような状況になっていればOKです。
Kajiテキストが無く、アイコンが×になっており、アイコンが左端によっている状況！
③：条件付きスタイルがクローズ時の設定をおこなう
次に、ポップアップバナーが閉じられたときの挙動を設定していきます。
closeボタンのアイコンを選択します。
アイコンを選択した状態で、条件付きスタイルを「クローズ」に変更します。
右パネルの「ボックス」をクリックします。
横幅を100%、縦幅を0px、不透明度0%に設定します。
次に、右パネルの「変形」をクリックします。
時間を0に変更します。
- 時間：0.3→0に変更
上記の設定がしっかりできていれば、closeボタンを押した時にポップアップが消える仕様になっているはずです。
一度ライブプレビューで確認してみましょう！
④：ポップアップバナーのデザインを作成する
これでポップアップバナーの仕組みは完成です！あとはデザインを変更していきます。
closeアイコンの親要素に縦幅が付いているので、0pxに設定します。
次に、closeボタンのデザインを変更していきます。
アイコンを選択した状態で、closeアイコンの色と、背景色を変えていきます。
四角だとデザイン的にダサいので、角丸を80pxに変更しておきます。
次に、ポップアップバナーを作成していきます。
既存のテキストを消して、文言を任意で設定します。
お問い合わせに飛べるように、ボタンを設置します。「追加パネル」→「基本」→「Submit」をクリックしてボタンを設置します。
Kaji中のテキストも「Send」になっているので、日本語に変えておきましょう！
バナーの背景色が透明になっているので、好みの色を選択しましょう。
closeボタンが埋もれてしまったので、buttonタグを選択して、重ね順を1に変更します。
これで最低限のバナーのデザイン変更は終わりました！もっと細かくカスタマイズしたい方は、ぜひ自分好みにデザインしましょう！
⑤：バナーの固定位置を設定する
最後に、ポップアップバナーの固定位置を特定していきます。
基本的には画面右下に固定されていることが多いので、今回も右下あたりにバナーを固定していきます。
バナー全体を選択した状態で、位置を「固定」に変更します。
画面左上に固定されたと思うので、バナーを選択しながらスライドさせて、右下に遷移させます。
これでポップアップバナーの右下固定は完了です！
ライブプレビューで確認してみると、画面右下にバナーが表示されています！
ポップアップバナーに関するよくある質問
最後に、ポップアップバナー実装にあたってよくいただく質問を載せておきます。
スクロールされるとポップアップバナーが表示されるように設定できますか？
スクロールすると途中からポップアップバナーが表示される、を実装するには「カスタムコード」が必要になります。
ただし、カスタムコードはMiniプラン以上でないと使用できないので注意しましょう。
カスタムコードの使い方については、以下の記事で詳しく説明しています。
時差でポップアップバナーを表示することは可能ですか？
時差で表示することは、無料プランでも設定できます。
ポップアップバナーの「出現時」の条件付きスタイルを変更するだけです。
- 不透明度：0
- 時間：アニメーション開始〜完遂するまでの時間
- 遅延：ポップアップバナーが表示されるまでの時間
上記の画像の設定では、サイトアクセス開始5秒後にポップアップバナーが表示され始め、サイトアクセス開始5.6秒後にポップアップバナーが完全に表示されるように設定しています。
実際のイメージを見たい方は、ぜひ以下の動画をご覧ください。
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
※コメントは最大500文字、5回まで送信できます
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます