【Studio】カスタムコードで実装する慣性スクロール！

Webサイトのスクロールがカクついたり、不自然に止まると、ユーザーの体験は大きく損なわれます。特にリッチなデザインを取り入れたサイトでは、滑らかで自然なスクロールが求められます。そこで活用できるのが**慣性スクロール（Inertia Scroll）です！
Studioの標準スクロールはシンプルですが、Lenisというライブラリを使うことで、スクロールに「惰性」や「弾力性」を加え、より自然でスムーズな動きを実現できます。

この記事では、Studioにカスタムコードを追加して、Lenisを活用した慣性スクロールを実装する方法を解説します！

⚫︎カスタムコードとは？

Studioのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。

【デザイン例あり】STUDIOのカスタムコードで活用方法を解説！

前回までの記事では、STUDIOを使ったUIボタンの作成やTOPページの構築方法をご紹介しました。今回はさらに一歩踏み込んで、カスタムコードを使ったデザイン作成について深掘りしていきます。また、記事の最後には、私がココナラで提供しているサー...

慣性スクロールとは？
1. 慣性スクロールの特徴
2. Studioで慣性スクロールを実装するメリット
カスタムコードで慣性スクロールを実装する手順
実装結果はこちら！
Studioのカスタムコード実装例をチェック！
まとめ：Studioのカスタムコードでサイトの魅力をアップ！

慣性スクロールとは？

慣性スクロール（Inertia Scroll）とは、ユーザーがスクロール操作をした後も、慣性の影響で滑らかにスクロールが続く効果のことです。

例えば、スマートフォンで画面をスワイプしたときのように、徐々に減速しながらスクロールが止まる動きをイメージしてください。

慣性スクロールの特徴

✅ スクロールがスムーズで心地よい
✅ 高級感のあるデザインに最適
✅ ストーリーテリング型のサイトと相性が良い
✅ スクロールエフェクトとの組み合わせが可能

Studioで慣性スクロールを実装するメリット

Studioの標準スクロールはシンプルですが、Lenisを組み合わせることで、以下のようなメリットが得られます。

✅ 自然な惰性のあるスクロールを実現できる
✅ ユーザー体験（UX）が向上する
✅ パララックスエフェクトやアニメーションと相性が良い
✅ カスタムコードで簡単に追加できる

カスタムコードで慣性スクロールを実装する手順

慣性スクロール（Inertia Scroll）とは、ユーザーがスクロールした後も慣性が働き、スムーズにスクロールが続くアニメーション効果のことです。今回は、StudioでLenisライブラリを活用して慣性スクロールを実装する手順を詳しく解説します。

Studioで慣性スクロールを実装する場合、Studioのエディタ側での設定は基本的には不要ですので、ここからは各カスタムコードの役割を初心者にも分かりやすく説明します。

1. Lenisスムーズスクロールライブラリを読み込む

Lenisを使用するには、まずライブラリをStudioの「カスタムコード」に追加する必要があります。
Studioのカスタムコードエディタに以下のスクリプトを貼り付けてください。

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>

2. Lenisの基本設定

LenisをStudioのサイトで機能させるために、JavaScriptを設定します。

const lenis = new Lenis({
  duration: 1.5, // 慣性スクロールのスピード (1.0 以上でなめらか)
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // スクロールのイージング関数
  direction: 'vertical', // 垂直スクロール
  gestureDirection: 'vertical', // マウスやタッチのジェスチャーを垂直方向に制限
  smooth: true, // スムーズスクロールを有効化
  mouseMultiplier: 1, // マウスホイールの感度（1が標準、増やすと速くなる）
  smoothTouch: false, // スマホやタブレットでのスムーズスクロールをオフ
  touchMultiplier: 2, // タッチスクロールの感度（数値を上げると加速）
  infinite: false, // 無限スクロールをオフ
});

3. スクロールのアニメーションをフレームごとに更新

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

✅ requestAnimationFrame(raf);

ブラウザのリフレッシュレート（通常60FPS）ごとにスクロールを更新
スムーズでカクつきのないスクロールを維持

実装結果はこちら！

このカスタムコードを追加すると、以下のような動作が可能になります。
左側が慣性スクロール無しでスクロールした場合で、右側が慣性スクロール有りでスクロールした場合です。

✅ 自然な惰性のあるスクロールを実現

Studioのカスタムコード実装例をチェック！

もっとStudioのカスタムコードでの事例を見たい方はこちら！
https://kreaidesign.studio.site/library

最新の制作事例をInstagramでチェックしてみてください！
InstagramのDMからお仕事のご相談をいただいた、先着５名様限定で定価の10％OFFにて、WEBサイト制作を実施させて頂きます！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr