フローティングバナー（追従バナー）とは、ユーザーがページをスクロールしても、
特定の位置に固定されて表示され続けるバナーのことを指します。
「スクロールしてもついてくるバナー」
初めてウェブサイトでそんな動きのあるデザインを見たとき、「どうやって作っているんだろう？」と思った経験はありませんか？
実は私自身、全くの初心者だった頃に「このバナーを既存のHPに設置してほしい」と依頼を受けたことがきっかけで、コーディングの世界に足を踏み入れました。
その時は「フローティングバナー」や「追従バナー」という名前すら知らず、ただ「スクロールしてもついてくるバナー」という言葉で検索していた記憶があります。
同じように「何だか便利そうだけど、どう作ればいいの？」と感じている方に向けて、この記事ではフローティングバナーの基本から設置方法までを、初心者でもわかりやすく解説していきます。
初めてのコーディングに挑戦するきっかけとして、ぜひこの記事を参考にしてみてください！
フローティングバナーとは？
フローティング（追従）バナーは、ユーザーがウェブページをスクロールしても画面上に固定されて表示され続けるバナーのことです。
よくECサイトやブログなどで、「セール中のおすすめ商品」や「お得なクーポン情報」などを目立たせるために使用されます。固定された位置で視認性が高く、重要な情報を逃さず伝えるのに適したデザインです。
- ECサイト：商品ページで「カートに追加」ボタンが常に画面下部に表示される。
- ブログ：記事を読み進めても「お問い合わせはこちら」ボタンが画面に固定されている。
- ニュースサイト：スクロール中も「おすすめ記事」や「サブスクリプション案内」がサイドに表示される。
メリット
- ユーザーの注目を集めやすい
常に目に入る位置にあるため、重要な情報やアクションを促しやすいです。 - コンバージョン率アップ
「今すぐ購入」「問い合わせる」など、ユーザーの行動を後押しする効果があります。 - 場所を選ばず利用可能
ページ全体に効果を及ぼすため、どんなレイアウトにも組み込みやすいです。
デメリット
- 邪魔に感じられることがある
デザインや配置によってはユーザーがページの内容に集中しづらくなる場合があります。 - スマホでの最適化が必要
画面が小さいスマートフォンでは、画面を圧迫しすぎないデザインが重要です。 - SEOやUXに影響する可能性
バナーがページ全体のパフォーマンスやユーザー体験に悪影響を与える場合があります。
フローティングバナーが使われる場面
| ECサイトの期間限定セール | 終了時間が迫っているセール情報をアピール。 |
| ブログのプロモーション | 無料登録や特別オファーを常に表示。 |
| サービスサイトの問い合わせ | 今すぐ相談」ボタンを目立たせる。 |
フローティング（追従）バナーの種類
フローティング（追従）バナーにはいくつかの種類があり、それぞれ用途やデザインに応じて使い分けられます。
初心者の方でもイメージしやすいよう、具体例とともに解説します。
1. 固定位置のバナー（ヘッダーやフッター）
画面の上部（ヘッダー）や下部（フッター）に固定されて表示されるバナーです。ページをスクロールしても常にその位置に表示されるため、目に留まりやすいのが特徴です。
例：
• ヘッダーにある「メニュー」や「ログインボタン」。
• フッターに表示される「今すぐ申し込む」ボタン。
よく使う用途：キャンペーン告知、重要なメッセージ。
ウェブサイトを見ているとき、ページをスクロールしても「メニュー」や「検索バー」が常に上に残っていることがありますよね。それが固定位置のバナーの典型例です。
2. サイドに追従するバナー
画面の右側や左側に配置され、ユーザーがスクロールしてもその場所に固定されるタイプのバナーです。広告や「お問い合わせはこちら」などの重要な情報を目立たせるのに使われます。
例：
• ページ右側に固定された「カートに追加」ボタン。
• 左側に表示される「シェアボタン」や「チャットアイコン」。
よく使う用途：プロモーション、サイドメニュー、CTA（行動を促すボタン）。
例えばECサイトで商品を見ているとき、右側に「カートに入れる」ボタンがずっと表示されていると、いつでも購入手続きがしやすいですよね。それがサイド追従型のバナーです。
3. 一部のスクロール範囲のみ追従するバナー
ページ全体ではなく、特定のエリアをスクロールしている間だけ表示されるバナーです。スクロールがその範囲を超えるとバナーが消えるため、より控えめなデザインとして使われます。
例：
• 長い記事の中で「関連記事をチェック」といったリンクが途中だけ追従する。
• 特定のキャンペーン情報がセクション内だけ表示される。
よく使う用途：特定のページセクションで目立たせたい場合。
記事の途中で「この記事が気に入ったら、こちらもおすすめ！」という小さなバナーが画面の横に追従して、記事のセクションが終わると一緒に消えるようなデザインです。
HTMLとCSSで作る基本のフローティング（追従）バナー
ここでは、HTMLとCSSだけを使って、シンプルなフローティング（追従）バナーを作成します。
パターン1：常に画面下部に表示されるフローティングバナー
ページのスクロールに関係なく常に画面下部に表示されるシンプルなフローティングバナーのコード例
<div class="floating-banner">
常に画面下部に表示されるフローティングバナー
</div>.floating-banner {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #d4355d;
color: white;
padding: 10px 20px;
font-size: 16px;
text-align: center;
width: 100%;
}• position: fixed;で、バナーがページをスクロールしても固定されるように設定します。
• bottom: 0;で画面下部に配置されるように指定し、left: 50%;とtransform: translateX(-50%);を使って、横幅の中央に配置されます。
パターン2：画面のサイドにスクロールしても追従するフローティングバナー
このタイプのバナーは、画面のサイドに固定され、ページをスクロールしてもサイドに追従して表示され続けます。
こちらのパターンではサイドに追従するバナーに文字を縦書きにしたバージョンで作成しました。
<div class="floating-banner">
画面のサイドにスクロールしても追従するバナー
</div>.floating-banner {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #d4355d;
color: white;
padding: 10px 20px;
font-size: 16px;
width: 30px; /* バナー幅 */
height: auto; /* 高さを自動調整 */
writing-mode: vertical-rl; /* 縦書き */
display: flex;
align-items: center; /* 縦方向中央揃え */
justify-content: center; /* 横方向中央揃え */
white-space: nowrap; /* テキストが折り返さないように */
}• display: flex; と align-items: center; を使って、縦方向にバナー内のテキストを中央に配置します。
• justify-content: center; は、テキストを横方向に中央揃えにします。
• writing-mode: vertical-rl; で縦書きに設定して、テキストが縦向きに表示されます。
これにより、サイドの縦書きバナー内のテキストが正確に中央に配置されるようになります！
パターン3：画像バナーを配置する方法
画面右下に画像のバナーを配置するには、position: fixed; を使ってバナーの位置を固定し、bottom と right を設定して、画面の右下隅に配置します。
バナー画像は、適切なサイズに合わせて表示されるようにします。
<!-- 画面右下に表示される画像バナー -->
<div class="floating-banner">
<img src="https://via.placeholder.com/120x120/ff6347/ffffff?text=Ad" alt="広告バナー">
</div> /* 右下に画像バナーを配置 */
.floating-banner {
position: fixed;
bottom: 20px; /* 画面下から20pxの距離 */
right: 20px; /* 画面右から20pxの距離 */
width: 300px; /* バナーの幅を指定 */
height: auto; /* 高さを自動調整 */
z-index: 9999; /* 他の要素よりも前面に表示 */
}
.floating-banner img {
width: 100%; /* バナー内で画像の幅を100%にする */
height: auto; /* 画像の比率を保ちながら自動調整 */
}1. .floating-banner クラス:
• position: fixed; を使って、バナーをスクロールしても画面に固定します。
• bottom: 20px; と right: 20px; によって、画面右下に配置されます。20px は距離の調整なので、お好みに合わせて変更できます。
• z-index: 9999; によって、他のコンテンツより前に表示されるようになります。
2. 画像サイズの調整:
• .floating-banner img の width: 100%; で画像をバナーの幅に合わせて表示し、height: auto; で画像の比率を保ちながら自動調整します。
3. バナー画像:
• src 属性に画像のURL（ここではサンプル画像を使用）を指定しています。
さらに便利に！JavaScriptを使った動きの追加
HTMLとCSSだけで簡単なフローティングバナーが作成できましたが、JavaScriptを使うことで、より動的な動きを加えることができます。
ありぃここでは、スクロール時にフローティングバナーが表示されたり非表示になったりする簡単なスクリプトを紹介します。
パターン4：スクロール位置によって追従するバナー（特定の範囲でのみ表示）
このバナーは、スクロール範囲に応じて追従する動作が切り替わります。
例えば、スクロールして一定の位置に到達したときに、バナーが追従を開始します。
基本的なコード（HTMLに全体のコードを記述した例）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールで表示されるバナー</title>
<style>
body {
height: 2000px; /* スクロールテスト用に長いページ */
margin: 0;
font-family: Arial, sans-serif;
}
/* セクションのスタイル */
.section {
height: 1000px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
/* フローティングバナーのスタイル */
.floating-banner {
position: fixed;
top: 300px; /* 画面の上から20pxの位置 */
left: 50%;
transform: translateX(-50%);
background-color: #ffcc00;
padding: 10px 20px;
color: white;
font-size: 18px;
opacity: 0; /* 初期状態で非表示 */
transition: opacity 0.3s ease-in-out; /* 滑らかなフェードイン・アウト */
}
</style>
</head>
<body>
<div class="section">
<h2>セクション1</h2>
<p>スクロールするとバナーが表示されます。</p>
</div>
<div class="floating-banner">
このバナーはスクロール位置によって表示されます
</div>
<div class="section">
<h2>セクション2</h2>
<p>次のセクションです。</p>
</div>
<script>
const banner = document.querySelector('.floating-banner'); // バナー要素
const section = document.querySelector('.section'); // セクション要素
window.addEventListener('scroll', function() {
const scrollY = window.scrollY; // 現在のスクロール位置
const sectionTop = section.offsetTop; // セクションの上部位置
const sectionHeight = section.offsetHeight; // セクションの高さ
const sectionMiddle = sectionTop + sectionHeight / 2; // セクションの中央位置
// スクロール位置がセクションの中央に到達したらバナーを表示
if (scrollY >= sectionMiddle - 100 && scrollY < sectionMiddle + 100) {
banner.style.opacity = 1; // バナーを表示
} else {
banner.style.opacity = 0; // バナーを非表示
}
});
</script>
</body>
</html>以下のコードはHTML /CSS /JavaScriptに分割したコード例です。
<div class="section">
<h2>セクション1</h2>
<p>スクロールするとバナーが表示されます。</p>
</div>
<div class="floating-banner">
このバナーはスクロール位置によって表示されます
</div>
<div class="section">
<h2>セクション2</h2>
<p>次のセクションです。</p>
</div>/* セクションのスタイル */
.section {
height: 1000px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
/* フローティングバナーのスタイル */
.floating-banner {
position: fixed;
top: 300px; /* 画面の上から20pxの位置 */
left: 50%;
transform: translateX(-50%);
background-color: #ffcc00;
padding: 10px 20px;
color: white;
font-size: 18px;
opacity: 0; /* 初期状態で非表示 */
transition: opacity 0.3s ease-in-out; /* 滑らかなフェードイン・アウト */
}const banner = document.querySelector('.floating-banner'); // バナー要素
const section = document.querySelector('.section'); // セクション要素
window.addEventListener('scroll', function() {
const scrollY = window.scrollY; // 現在のスクロール位置
const sectionTop = section.offsetTop; // セクションの上部位置
const sectionHeight = section.offsetHeight; // セクションの高さ
const sectionMiddle = sectionTop + sectionHeight / 2; // セクションの中央位置
// スクロール位置がセクションの中央に到達したらバナーを表示
if (scrollY >= sectionMiddle - 100 && scrollY < sectionMiddle + 100) {
banner.style.opacity = 1; // バナーを表示
} else {
banner.style.opacity = 0; // バナーを非表示
}
});1. バナーの初期位置と非表示状態
• position: fixed;でバナーが画面上の固定位置に配置されます。
• top: 300px;はバナーを画面上から300pxの位置に設定。これはバナーの表示位置です。
• opacity: 0;で初期状態ではバナーが見えない（非表示）状態になります。
• transition: opacity 0.3s ease-in-out;で、表示/非表示がスムーズに切り替わります。
2. スクロール位置の追跡と表示ロジック
• window.scrollYで現在のスクロール位置を取得しています。
• section.offsetTopでセクションの上部位置を取得し、section.offsetHeightでセクションの高さを取得します。
• sectionMiddleはセクションの中央位置を計算します。バナーを表示させたいタイミングはここを基準にしています。
3. スクロール位置による表示/非表示の切り替え
• if (scrollY >= sectionMiddle – 100 && scrollY < sectionMiddle + 100)はスクロール位置がセクションの中央付近に達した時にバナーを表示する条件です。
• banner.style.opacity = 1;でバナーが表示され、banner.style.opacity = 0;で非表示になります。
4. 調整する箇所
• バナーの表示位置（topの調整）
top: 300px;を変更することで、バナーが画面上のどこに表示されるかを調整できます。例えば、top: 200px;にすれば、バナーは画面上から200pxの位置に表示されます。
• スクロール範囲（sectionMiddle – 100 と sectionMiddle + 100の調整）
現在、スクロール位置がセクションの中央の±100pxの範囲内でバナーが表示されるようになっています。この100を変更することで、バナーの表示範囲を広げたり狭めたりできます。
• 例: sectionMiddle – 50 と sectionMiddle + 50にすると、表示範囲が狭くなり、より正確に中央付近で表示されるようになります。
• バナーの表示速度（transitionの調整）
transition: opacity 0.3s ease-in-out;で、バナーが表示されるスムーズなアニメーションを設定しています。0.3sを変更すれば、フェードイン/アウトの速度を調整できます。
• 例: transition: opacity 0.5s ease-in-out;にすれば、フェードイン/アウトが少し遅くなります。
1. scrollY（スクロール位置）を取得して、ページがどこまでスクロールされたかを調べます。
2. sectionMiddle（セクションの中央位置）に達したら、バナーを表示します。scrollYがこの位置に近づいたときにバナーが表示されるようにopacityを設定します。
3. スクロールして、バナーが非表示になる条件も設定します。
よく使われるシンプルな使い方：
• スクロール位置がページの上部からある程度の距離に到達したらバナーを表示
• スクロールして、次のセクションに進んだらバナーを非表示にする
この方法を使えば、初心者でも比較的簡単にバナーの表示・非表示をコントロールできます。
初心者がつまずきやすいポイントと解決策
バナーが他の要素を隠してしまう
問題: フローティングバナーが画面上で固定されていると、他の重要なコンテンツ（例えば、本文やリンク）がバナーに隠れてしまうことがあります。
＜解決策＞
・z-indexを使ってバナーの重なり順序を調整することで、バナーが前面に出過ぎないようにします。
例えば、バナーのz-indexを小さく設定して、他のコンテンツの上にバナーが表示されないようにします。
・バナーがコンテンツにかぶらないように、バナーが表示される位置を調整することもできます。
例えば、ページ上部に余白を追加してバナーが表示されるようにします。
.floating-banner {
z-index: 10; /* 他の要素より手前に来ないように設定 */
}スマホ表示で崩れる問題
問題: スマホなどの小さな画面でフローティングバナーが正常に表示されない、またはレイアウトが崩れることがあります。
＜解決策＞
• レスポンシブデザインを取り入れ、CSSメディアクエリを使って、画面サイズに応じてバナーの位置や大きさを調整します。例えば、スマホの場合はバナーの大きさを小さくしたり、画面に収まるように配置を変更したりします。
@media screen and (max-width: 600px) {
.floating-banner {
top: 150px; /* スマホでは少し下げて表示 */
font-size: 14px; /* 文字サイズを小さく */
}
}「フローティングバナーが邪魔」と感じさせないデザインのコツ
問題: フローティングバナーがユーザーにとって邪魔に感じることがあります。特に、強調しすぎるデザインや不必要に目立つバナーが不快感を与えることがあります。
＜解決策＞
• 目立たせすぎないデザインを心掛け、バナーの色やサイズを控えめにします。例えば、背景を透明にしたり、色合いを柔らかくしたりして、目立ちすぎないようにします。
• フェードインやフェードアウトを使って、バナーが強引に現れたり消えたりしないようにします。アニメーションを加えることで、バナーが滑らかに表示され、ユーザーの邪魔になりにくくなります。
.floating-banner {
transition: opacity 0.3s ease-in-out;
}まとめ
フローティングバナーを取り入れる際の注意点
• 他の要素を隠してしまうことや、スマホ表示の崩れに気をつける必要があります。
• 「フローティングバナーが邪魔」と感じさせないデザインを心がけましょう。ユーザーの体験を大切にすることが大事です。
自分の経験を踏まえたアドバイス：最初はシンプルなものから始めよう
• フローティングバナーは機能やデザインの調整が重要なので、まずはシンプルなものから始めて、徐々にカスタマイズを加えると良いでしょう。
今後の学びにつなげるヒント
• 今後はJavaScriptや動きのあるデザインにも挑戦してみましょう。これにより、さらに魅力的でユーザーにとって便利なサイト作りができるようになります。
なぜ初心者におすすめなのか
• フローティングバナーは、基本的にはHTMLとCSSの知識があれば簡単に作成できます。さらに、サイトの見た目を変えるだけでなく、ユーザーの行動を促す効果があるため、コーディングを始めたばかりの人にとって「やってみたらこんなに効果があるんだ！」と実感しやすい要素です。
