【ITニュース解説】Make Your GoHighLevel Pages Feel Premium with Smooth Scrolling
2025年10月04日に「Dev.to」が公開したITニュース「Make Your GoHighLevel Pages Feel Premium with Smooth Scrolling」について初心者にもわかりやすく解説しています。
ITニュース概要
GoHighLevel（GHL）ページにGSAPを使いスムーズスクロールを追加する方法を紹介。GHLのコード要素にGSAPライブラリと専用スクリプトを記述することで、Appleサイトのような滑らかなスクロールを実現し、ページをプレミアムにできる。クライアント体験を向上させる簡単な手順だ。
ITニュース解説
この解説では、GoHighLevel（GHL）というウェブサイト作成プラットフォーム上で、Webページをより洗練された見た目にする「スムーズスクロール」機能を導入する方法について説明する。システムエンジニアを目指す初心者が、Webサイトのユーザー体験を向上させる具体的な技術的アプローチを理解するための内容となる。
まず、GoHighLevel（GHL）とは、主にビジネス向けのウェブサイトやランディングページ、顧客管理システムなどを一元的に構築・運用できるプラットフォームのことだ。マーケティングや営業活動を効率化するための様々な機能が提供されており、プログラミングの知識があまりなくても、比較的簡単にウェブサイトを作成できるのが特徴である。
今回導入する「スムーズスクロール」とは、Webページを上下にスクロールする際に、一般的なカクカクとした動きではなく、まるでページ全体が滑らかに浮遊するように動く視覚効果のことだ。これはユーザーに高級感やプロフェッショナルな印象を与え、ウェブサイト全体の質感を高める効果がある。例えば、Apple社のウェブサイトなどで見られるような、コンテンツがゆったりと表示されたり、画像がスムーズに移動したりする動きをイメージすると分かりやすいだろう。このスムーズな動きを実現するために、「GSAP」というJavaScriptライブラリと、その関連プラグインを利用する。
GSAP（GreenSock Animation Platform）とは、JavaScriptを使ってWebサイトに様々なアニメーションを実装するための強力なツールだ。複雑なアニメーションもシンプルなコードで実現でき、Web開発者にとって非常に人気のあるライブラリの一つである。今回はGSAPの中でも特にスクロール関連のアニメーションを扱うための「ScrollTrigger」と、ページ全体のスクロールを滑らかにする「ScrollSmoother」というプラグインを組み合わせて使用する。
スムーズスクロールをGHLページに導入する手順は以下の通りだ。
最初のステップは、GSAPとスムーズスクロールのコードをGHLページに追加することである。通常、GHLの「設定」メニュー内にある「トラッキングコード」の「ヘッダー」セクションにスクリプトを追加する方法が考えられるが、この方法ではスクリプトが正しく動作しない場合がある。これは、GHLがページを構築する仕組みや、スクリプトの読み込み順序に起因することが多い。そのため、記事ではより確実な方法として、GHLページ上に直接「コード要素」というコンポーネントを配置し、その中に全てのスクリプトコードを記述することを推奨している。この方法を用いることで、スクリプトがページの描画と同時に正しく実行されることを保証できる。
次に、この「コード要素」内に具体的なスクリプトコードを貼り付ける。貼り付けるコードは大きく分けて、GSAPライブラリ本体とそのプラグインを読み込む部分、そしてスムーズスクロールを実装するためのJavaScriptコードの二つから構成される。
まず、GSAPライブラリとそのプラグインを読み込む部分だ。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollSmoother.min.js"></script>
これらの行は、GSAP本体と「ScrollTrigger」、「ScrollSmoother」という二つのプラグインを、CDN（Content Delivery Network）と呼ばれるインターネット上のサーバーから読み込んでいる。CDNを利用することで、自分でライブラリファイルを管理することなく、常に最新かつ高速にこれらのライブラリを利用できる。
次に、スムーズスクロールのロジックを実装するJavaScriptコードだ。
document.addEventListener("DOMContentLoaded", function() { ... });
この部分は、Webページを構成するHTML要素の読み込みが全て完了した後に、中のJavaScriptコードを実行するための記述である。HTML要素が完全に準備できていない状態でJavaScriptがそれらを操作しようとするとエラーになる可能性があるため、このような記述はWeb開発において非常に重要だ。
if (!document.querySelector(".smooth-wrapper")) { ... }
この条件分岐は、スムーズスクロールを適用するための「.smooth-wrapper」という要素が、ページ内にまだ存在しない場合のみ、以下の処理を実行するようにしている。これにより、同じスクリプトが複数回実行されて予期せぬ動作を引き起こすのを防ぐ。
スクリプトの中核となるのは、既存のWebページ構造をJavaScriptで動的に変更する部分である。
let body = document.querySelector("body");
let wrapper = document.createElement("div");
wrapper.classList.add("smooth-wrapper");
let content = document.createElement("div");
content.classList.add("smooth-content");
ここでは、まずWebページの<body>要素全体を取得し、その中に新たに二つの<div>要素（HTML要素をグループ化するための汎用コンテナ）を作成している。一つは「smooth-wrapper」というCSSクラスを持つ要素、もう一つは「smooth-content」というCSSクラスを持つ要素だ。
while (body.firstChild) { content.appendChild(body.firstChild); }
このループ処理は、<body>要素直下にあった全ての既存コンテンツ（ヘッダー、本文、フッターなど、ページの全ての可視要素）を、先ほど作成した「smooth-content」要素の中に移動させている。つまり、元々<body>直下にあったコンテンツを、丸ごと「smooth-content」という新しい箱の中に引っ越しさせているイメージだ。
wrapper.appendChild(content);
body.appendChild(wrapper);
次に、「smooth-content」を「smooth-wrapper」の中に入れ、その「smooth-wrapper」を元の<body>要素の中に配置している。結果として、ページのHTML構造は<body> <div class="smooth-wrapper"> <div class="smooth-content"> [元のページコンテンツ全て] </div> </div> </body>のような形になる。この新しいラッパー構造は、GSAPのScrollSmootherがページ全体のスクロールを制御するために必要な形だ。
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
この行は、GSAPライブラリに対して、使用するScrollTriggerとScrollSmootherプラグインを正式に登録する。これによりGSAPがこれらのプラグインの機能を利用できるようになる。
ScrollSmoother.create({ wrapper: ".smooth-wrapper", content: ".smooth-content", smooth: 1.5, effects: true });
最後に、ScrollSmootherを初期化し、スムーズスクロールの具体的な設定を行う。wrapperとcontentには、先ほど作成した要素のCSSクラスを指定する。smooth: 1.5という設定値は、スクロールの滑らかさや慣性の度合いを決定する。数値が大きいほど、よりゆっくりと滑らかなスクロールになる。effects: trueは、スクロール中に要素にアニメーション効果を適用することを可能にする。
これらのコードをGHLのコード要素に貼り付け、ページを保存して公開する。そしてライブページを開き、上下にスクロールしてみると、滑らかなスクロールが機能していることを確認できるだろう。
さらに高度な調整として、smooth: 1.5の値を2や3などに変更すると、スクロールがより遅く、より柔らかい動きになる。これにより、ウェブサイトの個性に合わせたスクロール感を調整できる。また、GSAPの他のアニメーション機能と組み合わせることで、スクロールに合わせて各セクションがフェードインしたり、スライドしたり、ズームしたりするような、よりインタラクティブで魅力的なWebページを構築することも可能だ。
このように、GHLのようなノーコード/ローコードプラットフォームでも、少しのJavaScriptコードと外部ライブラリを活用することで、Webサイトのユーザー体験を劇的に向上させることができる。これは、クライアントにプロフェッショナルな印象を与え、Webサイトの質を高めるための重要なテクニックの一つであり、システムエンジニアを目指す上で、このような技術的なカスタマイズ能力は大きな武器となるだろう。