2026.10.14
スマホでもPCでも効果抜群！スクロールしても消えない「お問い合わせボタン」の秘密
こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
WEBサイトを制作・運用していると、
「お問い合わせボタンが目立たない」 「資料請求ページがあまり見られていない」 「ユーザーが途中で離脱してしまう」
といった悩みを感じたことはありませんか？
実は、こうした問題は少しの工夫で改善できることがあります。その一つが「フローティング表示」です。 WEBサイトを閲覧していると、画面をスクロールしてもずっとついてくる「お問い合わせ」や「資料請求」のボタンを見かけたことがあると思います。 あの「浮かんでいる（フローティング）」ボタンには、WEBサイトの成果を大きく変える可能性が秘められています。 今回は、専門知識がなくてもクリック一つで導入でき、ユーザーの目に入りやすい場所に重要な情報を表示できる「フローティングコンテンツパーツ」についてご紹介いたします。
フローティングとは？
フローティングとは、WEBサイトをスクロールしても画面の特定の位置に固定して表示されるコンテンツのことです。
例えば、「お問い合わせボタン」「資料請求バナー」「キャンペーン案内」「電話発信ボタン」など、ユーザーに見てほしい情報を常に画面に表示させることができます。 WEBサイトを運営するうえで、最も避けたいのは「問い合わせしたいのに、どこを押せばいいのか分からない」とユーザーが迷ってサイトを離れてしまうことです。
フローティング表示を取り入れることで、主に3つの大きな効果が得られます。
フローティングすることで得られる3つの効果
1. 重要な情報を常に表示できる
ユーザーはWEBサイトを上から下へスクロールして閲覧します。
そのため、ページ下部に設置したボタンやバナーは、見られないまま離脱されることも多いのが実情です。
そのボタンやバナーをフローティング表示にすることで、どこを見ていても重要な導線を表示し続けることができるようになります。
どれだけ長いページを読んでいても、ユーザーが「今すぐ連絡したい！」と思った瞬間に指の届く位置にボタンがある。
この「迷わせない」設計が、お問い合わせ率（コンバージョン率）の向上に直結します。
2. お問い合わせや資料請求の導線が強くなる
WEBサイトでは、「お問い合わせ」「資料請求」「来店予約」「電話」などのアクション導線（CTA）がとても重要です。
フローティングバナーを活用すると、ユーザーが「問い合わせようかな」と思ったタイミングですぐにボタンを押せる環境を作ることができます。
また、期間限定のキャンペーンや一番アピールしたい情報を常に表示させておくことで、視認性も大幅にアップします。
3. スマートフォンでも操作しやすい
最近ではWEBサイト閲覧の多くがスマートフォンです。
画面の小さいスマートフォンでは、メニューを探すのが意外と大変です。
- お問い合わせ
- 資料請求
- 来店予約
- 電話
- SNS
などのボタンを画面内に固定表示することで、
片手でもスムーズにアクションを起こせる、ユーザーが迷わず行動できるWEBサイトになります。
目的別！3つのフローティング系コンテンツパーツのご紹介
ant2 CMSでは、用途に合わせて選べる3つの「フローティングコンテンツパーツ」をご用意しています。
| タイプ | PCでの表示 | スマートフォンでの表示 | おすすめの用途 |
|---|---|---|---|
| フローティングバナー_ver.1 | 画面右側中央付近に 縦長のバナーを縦並びで表示 |
画面下部に横並びで表示 | お問い合わせ、資料請求、電話、LINEなど複数の導線 |
| フローティングバナー_ver.2 | 画面右側下付近に 丸いアイコン型のバナーを横並びで表示 |
画面下部に横並びで表示 | 電話、チャット、LINE、SNSなどシンプルな導線 |
| フローティングバナー_ver.3 | 画面右側下付近に メッセージ風のバナーを表示 |
画面中央下部に表示 | 資料ダウンロード、期間限定セール、無料相談などの告知 |
【タイプ1】フローティングバナー_ver.1
王道のサイド固定（PC）のバナーです。
- PC：画面右側中央付近に、縦長のバナーが縦並びで表示されます。
- スマホ：画面下部に横並びで表示されます。
「お問い合わせ」「資料請求」「電話」「LINE」など、複数の導線をすっきり整理して見せたい時に最適です。ユーザーがページをスクロールしていても、これらのボタンは常に画面内に表示されるため、必要なタイミングで迷わずアクションを起こすことができます。
特に長いWEBページでは、ページ下部まで移動しないと問い合わせボタンが見つからないケースも少なくありません。フローティングバナーを設置することで、どの位置からでもスムーズにお問い合わせや資料請求へ誘導でき、ユーザーの利便性向上とコンバージョン率の改善が期待できます。
【タイプ2】フローティングバナー_ver.2
スタイリッシュな丸型（PC）のバナーになります。
- PC：画面右側下付近に、丸いアイコン型のバナーが横並びで表示されます。
- スマホ：画面下部に横並びで表示されます。
デザイン性を重視したいサイトや、「電話」「チャット」「LINE」「問い合わせ」などをシンプルに表示したい場合、またSNSへのリンクを目立たせたい時におすすめです。 丸型のアイコンデザインは視覚的に分かりやすく、直感的に操作できるため、ユーザーが迷わず目的のアクションを選びやすいのが特徴です。
また、コンパクトな形状のため画面を大きく占有することなく、WEBサイトのデザインを損なわずに導線を設置することができます。 シンプルで洗練された印象を与えながら、必要な機能を分かりやすく配置できるため、デザイン性と利便性を両立したフローティングバナーとして活用できます。
【タイプ3】フローティングバナー_ver.3
お知らせ・メッセージ型のバナーになります。
- PC：画面右側下付近にメッセージ風のバナーが表示されます。「×」ボタンで一時的に非表示にすることも可能です。
- スマホ：画面中央下部に表示されます。
「資料ダウンロードはこちら」「期間限定セール中！」「無料相談受付中」など、一言メッセージを添えてユーザーに話しかけるような演出に効果的です。 通常のバナーよりも会話のような印象を与えるため、ユーザーの目に留まりやすく、自然な形でキャンペーン情報やお知らせを伝えることができます。
また、「×」ボタンで一時的に非表示にできるため、ユーザーの閲覧を妨げにくいのも特徴です。 必要な情報をさりげなく伝えながら、WEBサイトの利便性とユーザー体験を損なわない形で活用できるフローティングバナーです。
【実践】ant2 CMSで通常のコンテンツパーツをフローティングさせる方法
専用のパーツだけでなく、通常のコンテンツパーツも簡単にフローティングにすることができます。CSSなどのコードを書く必要はありません。
設定手順
パーツを選ぶ
設定したいコンテンツパーツの上にマウスを合わせます。
設定を開く
「コンテンツパーツメニュー」が表示されますので、[パーツ設定]ボタンをクリックします。
配置する場所を決める
「パーツ設定ダイアログ」が表示されますので、フローティング項目で「する」を選択。
上・下・左・右の位置指定に半角数字を入力し、単位（px または %）を選択します。
設定完了！
[OK]ボタンをクリックすれば、その瞬間からパーツが画面内を追従するようになります。
まとめ
WEBサイト制作において「ユーザーを迷わせない」ことは、デザインを美しくすること以上に重要です。
フローティングコンテンツパーツは、いわばWEBサイトにおける「親切な案内係」。
お問い合わせや資料請求などのアクションボタンを固定表示することで、ユーザーが迷わず、ストレスなく行動できるWEBサイトを作ることができます。
特にスマホ閲覧が主流となった現在では、「常に表示される導線」があるかどうかが、WEBサイトの成果を大きく左右するポイントです。 PCでもスマホでも、お客さまの利便性を最優先に考えた導線作りが、最終的な信頼と成果に繋がります。
難しい設定は不要で、実際に多くのWEBサイトで導入され効果を発揮している機能です。
まずは一つ、一番大切なお問い合わせボタンをフローティングさせるところから始めてみれば、ユーザーの反応が変わるのをきっと実感いただけるはずです。
【イベント出展】【DXPO福岡26】営業・マーケDXPO -IT・DX展示会に出展いたします！2026年10月22日（木）〜23日（金）
- 会場：マリンメッセ福岡 A館
- ブース情報：小間番号【8 - 15】広告・コンテンツ制作展エリア
- 日時：
- 2026年10月22日（木）9:30～17:30
- 2026年10月23日（金）9:30～16:30
- 詳細はこちら
【イベント出展】【DXPO東京26秋】AIエージェントDXPO
2026年11月19日（木）〜20日（金）
- 会場：有明GYM-EX（ジメックス）
- ブース情報：小間番号【2-14】
- 日時：
- 2026年11月19日（木）9:30～17:30
- 2026年11月20日（金）9:30～16:30
- 詳細はこちら
