近年、ウェブデザインにおいて「動き」のある要素は非常に重要視されています。その中でも、スクロール時に下線が引かれるアニメーションは、ユーザーの視線を自然に誘導し、より直感的で洗練されたデザインを実現するための強力なツールです。
多くのユーザーは、ページを開いた瞬間に「このサイトは自分にとって価値があるか？」を数秒で判断すると言われています。そのため、視覚的な魅力を高め、ユーザーの関心を引き続ける工夫が不可欠です。スクロール時の下線アニメーションを活用すれば、ページを流れるように読ませるだけでなく、特定のキーワードやコンテンツを強調し、情報を分かりやすく伝えることができます。
本記事では、シンプルなCSSのみの実装方法から、高度なGSAPを活用したアニメーションまで、最新のテクニックを詳しく解説していきます。さらに、SEOの観点からも効果的な活用方法を紹介し、あなたのウェブサイトがより多くのユーザーに届くような施策をお伝えします。
CSSとJavaScriptを組み合わせた基本実装
まずは、シンプルなCSSとJavaScriptを使用した基本的なスクロール下線アニメーションを実装してみましょう。初心者の方でも簡単に導入でき、どのウェブサイトにも応用できる方法です。
このアニメーションの基本的な考え方は以下の通りです。
• CSSで下線を作成し、デフォルトでは非表示（または縮小）にしておく
• JavaScriptでスクロールイベントを監視し、特定の位置に来たら下線を表示する
• スムーズなトランジションを適用して、自然な動きを実現する
以下が基本のコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロール下線アニメーション</title>
<style>
.underline {
position: relative;
display: inline-block;
font-size: 24px;
font-weight: bold;
}
.underline::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #007bff;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
}
.underline.active::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<h1 class="underline">スクロールで下線が引かれる</h1>
<div style="height: 2000px;"></div>
<script>
window.addEventListener('scroll', function() {
const element = document.querySelector('.underline');
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
});
</script>
</body>
</html>実装のポイント
デフォルトでは scaleX(0) にしておき、スクロール時に scaleX(1) に変化
アニメーションの ease-in-out を適用し、スムーズな動きを演出
ページ内の特定の要素に適用することで、ユーザーの視線を誘導
このシンプルなコードだけでも、スクロール時に視覚的なアクセントを加えることが可能です。しかし、さらにパフォーマンスを最適化するには、Intersection Observer APIを活用するのがおすすめです。
Intersection Observer APIでパフォーマンス最適化
JavaScriptのscrollイベントを使用すると、スクロールのたびに処理が発生し、パフォーマンスが低下する原因になります。特に、スマートフォンなどのリソースが限られたデバイスでは、動作が重くなることもあります。
その解決策として有効なのが、Intersection Observer APIです。このAPIを使うことで、要素が画面内に入ったタイミングでのみ処理を実行できるため、パフォーマンスを大幅に向上させることができます。
Intersection Observer APIを使用した実装例
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
} else {
entry.target.classList.remove('active');
}
});
}, options);
const target = document.querySelector('.underline');
observer.observe(target);Intersection Observer APIのメリット
不要なスクロールイベントの監視を減らし、パフォーマンスを向上
複数の要素に対して一括で監視可能
ビューポート内に入った瞬間にアニメーションを発火
この手法を使えば、ページ全体の読み込み速度を落とさずに滑らかな動きを実現できます。
GSAPを使った高度なアニメーション
さらにクオリティを上げたい場合は、**GSAP（GreenSock Animation Platform）**を活用すると良いでしょう。特に、GSAPのScrollTriggerプラグインを使用すれば、スクロール量や位置に応じてアニメーションを細かく制御できます。
GSAPを活用したコード
gsap.registerPlugin(ScrollTrigger);
gsap.from('.underline', {
scrollTrigger: {
trigger: '.underline',
start: 'top 80%',
toggleActions: 'play none none reverse'
},
scaleX: 0,
transformOrigin: 'left',
duration: 0.5
});まとめ：スクロール時の下線アニメーションでUXを向上
「スクロール時に下線が引かれるアニメーション」を活用することで、ユーザーの視線を誘導し、デザインの質を向上させることが可能です。
• CSSとJavaScriptの基本実装 → 手軽に導入可能
• Intersection Observer APIで最適化 → 高パフォーマンスなアニメーション
• GSAPで高度なアニメーション → より洗練された演出
今後のウェブデザインでは、動的なエフェクトがますます重要視されるでしょう。あなたのサイトにもぜひ導入して、ユーザーの滞在時間を延ばし、よりエンゲージメントの高いコンテンツを実現してください。