スクロールでLINE誘導ボタンをスライド表示する実装方法【HTML/CSS/JavaScript】

Author:

ユーザーとの接点を増やす手段として、LINE公式アカウントへの誘導ボタンを表示することは非常に有効です。
しかし常時表示では煩わしく感じられる可能性もあるため、「スクロールしたらスライドインで表示する」手法がおすすめです。

本記事では、PCとスマートフォン両方に対応したLINE公式アカウント誘導ボタンのスライドイン実装をご紹介します。

完成イメージ

  • PC版：画面右端中央に、縦書きでLINE誘導ボタンがスライドイン
  • SP版：画面下部に、横書きでボタンがスライドイン
  • 表示タイミング：ページを100px以上スクロールしたタイミングで表示

実装コード

HTML

<section id="float_btn">
	<a href="https://page.line.me/278yaxmg?oat__id=3056528&openQrModal=true" target="_blank">
		<img src="（SVGデータ省略）" alt="公式LINE">
		公式ＬＩＮＥ
	</a>
</section>

<section> 要素内に LINE 誘導のリンクを記述しています。
SVGデータはLINEアイコンで、画像として表示されます。

CSS

#float_btn {
	position: fixed;
	top: 50vh;
	right: -100px;
	transform: translateY(-50%);
	z-index: 999;
	transition: all 0.3s ease-out;
}
#float_btn.is-visible {
	right: 0;
}

#float_btn a {
	display: block;
	padding: 0 0 10px;
	background: #03c300;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
	writing-mode: vertical-rl;
	box-shadow: -5px 8px 10px -5px rgb(0 0 0 / 0.4);
}
#float_btn a:hover {
	background: #028500;
}
#float_btn a img {
	width: 4em;
	vertical-align: baseline;
}

/* モバイル対応 */
@media (max-width: 768px) {
	#float_btn {
		top: unset;
		right: unset;
		bottom: -100px;
		left: 0;
		transform: unset;
	}
	#float_btn.is-visible {
		bottom: 0;
	}
	#float_btn a {
		writing-mode: unset;
		width: fit-content;
		padding: 0 20px 0 10px;
		box-shadow: 0 -8px 10px -5px rgb(0 0 0 / 0.4);
	}
	#float_btn a img {
		vertical-align: middle;
	}
}

解説

  • PCでは「縦書き（writing-mode: vertical-rl）」、スマホでは横書きへ自動変化。
  • 初期状態では画面外（right: -100px or bottom: -100px）に配置。
  • .is-visible クラスが付与されると、画面内にスライドイン表示。
  • 色や影の設定で、視認性と操作感を向上。

JavaScript

let f_btn = document.getElementById('float_btn');
window.addEventListener('scroll', function() {
	if (window.scrollY > 100) {
		f_btn.classList.add('is-visible');
	} else {
		f_btn.classList.remove('is-visible');
	}
});

解説

  • スクロール量が100pxを超えると、.is-visible クラスが付与されて表示。
  • スクロールが戻ると再び非表示に。
  • 軽量なスクリプトで、ページパフォーマンスにも配慮されています。

活用シーン

  • ECサイトの「LINE友だち登録キャンペーン」への誘導
  • サービスページで「無料相談LINE受付中」の強調
  • 採用ページにおけるLINE応募窓口の案内

ユーザーの閲覧状況に応じて自然に表示されるため、煩わしさがなくクリック率向上に貢献します。

まとめ

LINE公式アカウントへの導線を、ユーザビリティを損なわず設置したい場合、スクロール時のスライドイン表示は非常に効果的な手法です。

HTML・CSS・JavaScriptのみで完結するため、WordPress や静的サイトにも簡単に導入可能です。
ぜひ、あなたのサイトにも取り入れてみてください。

Categories: ブログ
Tags: , , , ,