Webデザインにおいて、視覚的に魅力的なサイトを作るためには 「動き」 が重要です。その中でも 「パララックスエフェクト」 は、スクロールに合わせて要素が異なる速度で動くことで 奥行き感や立体感を演出できる 人気のアニメーションのひとつ。企業サイトやポートフォリオ、LP（ランディングページ）などでよく採用され、訪問者の 「興味を引きつける」「直感的なナビゲーションを促す」 という効果もあります。
Studioはノーコードで直感的なWebデザインが可能なツールですが、デフォルトの機能では 高度なパララックスエフェクト を実装するのは難しいのが現状。しかし、カスタムコード（CSS & JavaScript）を活用 すれば、より滑らかで洗練されたパララックスエフェクトを自由にデザインすることができます。
カスタムコードとは？
Studioのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。
パララックスエフェクトとは？
パララックスエフェクトとは、スクロールに応じて背景や要素が異なる速度で動く視差効果のこと。
奥行き感を演出できるため、モダンなWebデザインによく使われる。
例えば、背景がゆっくり動き、手前のテキストや画像が速くスクロールすると、立体的な動きが生まれる。
実際の動きはこちら↓
パララックスエフェクトの活用例
1. 企業サイト・ブランドサイト
企業やブランドの公式サイトでは、パララックスを活用してストーリー性のあるデザインを作ることができます。例えば、
✅ スクロールとともに企業の歴史を見せるタイムライン演出
✅ 商品やサービスのコンセプトを視覚的に表現する
2. ポートフォリオサイト
デザイナーやフォトグラファーのポートフォリオサイトでは、パララックスを利用すると、作品を動的に魅せることができます。例えば、
✅ 作品の前後にスクロールエフェクトを加え、視線を誘導する
✅ 背景とコンテンツをずらして動かし、奥行きを強調する
✅ スクロールと連動してテキストが浮かび上がる演出をする
3. LP（ランディングページ）
LPでは、訪問者の興味を引き、コンバージョン率を高めるためにパララックスがよく活用されます。特に、
✅ CTA（Call to Action）エリアにアニメーションを加えて目立たせる
✅ スクロールするごとに情報がスムーズに流れるように演出
✅ 製品の特徴を段階的に表示し、ストーリー仕立てで伝える
カスタムコードで「奥行きのある」パララックスエフェクトを実装する方法
パララックスエフェクトは、スクロールに合わせて背景や前景の要素が異なる速度で動くことで、Webサイトに奥行きを与える視覚効果です。
Studioの標準機能では背景のパララックスは可能ですが、奥の背景と手前の要素をそれぞれ別の速度で動かすにはカスタムコードが必要です。
そこで今回は、Lenisというスムーズスクロールライブラリを使って、Studioで高度なパララックスエフェクトを実装する方法を詳しく解説します！
LenisはMITライセンスで提供されているため、商用プロジェクトでも自由に利用できます。
✅ ライセンス費用はかからず、無料で使用可能
✅ クレジット表記不要（ただし、著作権表示を残す必要あり）
【実装するエフェクト】
・スクロールに応じて手前と奥の要素が異なる速度で動く
・複数レイヤーで奥行きを演出する
① Studioでパララックスを適用する要素を作成
Studioエディタで、以下の手順で要素を配置します。
- セクションを追加（パララックスを適用したいエリア）
- 名前を
parallax-sectionに変更（任意）
- 名前を
- 画像・テキスト要素を配置
- オブジェクトごとに
id="para-○○"を設定
→ このIDを持つ要素がすべてパララックス対象になる - 背景画像は「セクション全体」に設定（STUDIOの「背景」設定を使用）
- 手前の要素は「相対配置（relative）」にする
- 縦長のスクロール領域を作る（要素の高さを十分に確保）
- オブジェクトごとに
② Studioの 「カスタムコードエディタ」にコードを追加
まず、パララックスエフェクトを適用するためのスタイルを設定します。
1. ページ全体のスタイル設定
/* ページ全体の余白をなくし、横スクロールを防ぐ */
body, html {
margin: 0;
padding: 0;
overflow-x: hidden;
}✅ margin: 0; padding: 0;
→ ページ全体のデフォルト余白をなくし、要素の配置を正確に調整しやすくします。
✅ overflow-x: hidden;
→ 横スクロールを防止し、デザインのズレを防ぎます。
→ Studioで横幅いっぱいの背景画像を使う際、スクロールバーが出ないようにするために重要。
2. パララックスを適用する要素のスタイル
/* IDに「para」を含む要素にパララックスを適用 */
[id*="para"] {
position: relative;
will-change: transform;
}✅ [id*="para"]
→ 「para」という文字列を含むすべてのID（例: id="para-bg", id="para-fg"）を対象にする。
→ Studioのエディタ上でパララックス対象の要素に「para-○○」というIDをつければ、簡単に適用できる。
✅ position: relative;
→ 相対配置にすることで、パララックスの基準位置を固定しつつ、アニメーションの適用をスムーズにする。
✅ will-change: transform;
→ CSSアニメーションの最適化に重要！
→ ブラウザに「この要素はスクロール時に変化する」ことを事前に知らせることで、描画の最適化を促し、スムーズな動作を実現。
3. パララックス対象のコンテンツのスタイル
/* パララックスを適用する画像やテキスト */
.parallax-content {
position: absolute;
will-change: transform;
}✅ .parallax-content
→ このクラスを適用することで、パララックス対象の画像やテキストがスムーズにスクロールします。
✅ position: absolute;
→ 要素を絶対配置にすることで、背景や他の要素とは独立してパララックスを適用できる。
→ 手前に配置する画像やテキストを「自由に動かせる」ようにするために必須！
✅ will-change: transform;
→ スクロール時に変化することをブラウザに伝え、スムーズなアニメーションを可能にする。
4. スマホ対応（レスポンシブデザイン）
@media (max-width: 600px) {
.parallax-content {
height: auto;
width: 100%;
}
}✅ @media (max-width: 600px)
→ **画面幅が600px以下（スマホ・タブレット）**のときに適用されるCSS。
✅ height: auto; width: 100%;
→ 画像やテキストのサイズを100%に調整し、スマホ画面にフィットさせる。
→ Studioで作るレスポンシブデザインでは、デスクトップとスマホでパララックスの挙動を最適化することが重要！
5. Lenisスムーズスクロールライブラリの読み込み
Lenisを使うことで、スクロール時の動きをスムーズにし、パララックスエフェクトをより洗練されたものにできます。
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>✅ Lenisを読み込むことで、スクロールの動きをスムーズにする
✅ 外部CDNを利用しているので、追加のインストール不要
6.パララックス効果の調整可能な変数
const parallaxSpeed = 0.5; // パララックスの速度（0.1〜1.0の間で調整）
const inertiaDuration = 1.5; // ページ全体のスムーズスクロールの慣性（秒単位）✅ parallaxSpeed
- パララックスの速度を調整する変数（0.1〜1.0の範囲で調整可能）
- 数値が大きいほど速く動く
0.5に設定すると、適度な奥行きを表現できる
✅ inertiaDuration
- Lenisのスムーズスクロールの慣性時間を調整する変数
1.5に設定すると、スクロール後に滑らかに減速- 値を大きくすると、スクロールの惰性が長くなる
7.Lenis スムーズスクロールの設定
const lenis = new Lenis({
duration: inertiaDuration,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: 'vertical',
smooth: true,
});✅ duration: inertiaDuration
- スクロールの慣性時間を設定（
1.5秒）
✅ easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
- スムーズなスクロール減速を作る計算式
Math.pow(2, -10 * t)を使うことで、柔らかくスクロールが止まる
✅ direction: 'vertical'
- スクロールの方向を**縦スクロール（vertical）**に指定
✅ smooth: true
- Lenisのスムーズスクロールを有効化
8.スムーズスクロールをフレームごとに更新
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);✅ requestAnimationFrame(raf)
- ブラウザのフレームごとにスムーズスクロールを実行する
- 60FPS（1秒間に60回更新）で自然な動きを実現
✅ lenis.raf(time)
- Lenisライブラリのスクロール処理を実行
9.スクロールに応じたパララックス効果を適用
lenis.on('scroll', ({ scroll }) => {
document.querySelectorAll("[id*='para']").forEach(para => {
const rect = para.getBoundingClientRect();
const windowHeight = window.innerHeight;
if (rect.top < windowHeight && rect.bottom > 0) {
const scrollOffset = (window.scrollY - rect.top) * parallaxSpeed;
para.style.transform = `translateY(${scrollOffset}px)`;
} else {
para.style.transform = 'translateY(0)';
}
});
});✅ document.querySelectorAll("[id*='para']")
- IDに「para」を含むすべての要素を取得（例:
para-bg,para-fg） - StudioでIDを設定するだけでパララックス対象にできる
実装結果はこちら！
このカスタムコードを追加すると、以下のような動作が可能になります。
✅ 背景（奥の要素）と手前の要素が異なる速度でスクロール（パララックス）
✅ スクロールの動きがスムーズになり、サイト全体のUXが向上
STUDIOのカスタムコード実装例をチェック！
もっとStudioのカスタムコードでの事例を見たい方はこちら！
https://kreaidesign.studio.site/library
最新の制作事例をInstagramでチェックしてみてください！
InstagramのDMからお仕事のご相談をいただいた、先着５名様限定で定価の10％OFFにて、WEBサイト制作を実施させて頂きます！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr
私のココナラサービスでは、Studioを用いたWEBデザインから実装のサービスを提供しています。
カスタムコードのみの対応も承っていますので、ウェブサイトに個性を加えるためのカスタムコードを入れたい方、ぜひ詳細はココナラのプロフィールページをご覧ください。
まとめ：Studioのカスタムコードでサイトの魅力をアップ！
Studioのカスタムコードを活用すれば、デザインの自由度が格段にアップ！
パララックスエフェクトを取り入れることで、奥行きのある魅力的なサイトをノーコード＋カスタムコードで実現できます。皆さんもぜひ、パララックスデザインを取り入れたデザインをStudioにて実装してみてください！
コメント