GoHighLevel ランディングページガイド
概要
このガイドでは、GoHighLevel（GHL）にデプロイするための高コンバージョンランディングページを単一HTMLファイルとして作成する方法について、アーキテクチャ、CSS/JSパターン、パフォーマンスの落とし穴、および一般的なGHL問題の解決策を説明します。
主要な技術スタック
- 単一HTMLファイル（ビルドツール不要 — GHLはフレームワークをサポートしません）
- Tailwind CDN（
https://cdn.tailwindcss.com） - Google Fonts（CDN経由）
- 外部CDNアセット（filesafe.space など）
重要なGHLソリューション
フルワイズドブレイクアウト： .ghl-wrapper を width: 100vw; left: 50%; transform: translateX(-50%) で使用します。
固定配置の回避策： transform が固定配置の動作を妨げるため、固定要素はJavaScriptで document.body に移動します。
ページ構成（コンバージョン順序）
Problem-Agitation-Solution（PAS）フレームワークに従い、以下のセクションで構成します。
ヒーロー → 社会的証明 → 説明 → 事例紹介 → 問題/煽り → 仕組み → 特徴 → ベネフィット → 料金 → チーム → FAQ → 最終CTA → フッター
必須CSSアニメーション
IntersectionObserverを使ったフェードアップ、段階的遅延、CTAパルス、カードグリッドのホバーブラー効果、グラスモーフィズム、アニメーショングラデーションバッジが推奨パターンです。
重要な動画ルール
使用： <video autoplay loop muted playsinline>（シンプルな方法）
避けるもの： preload 属性、loading="lazy"、遅延読み込みスクリプト — これらは自動再生機能を壊します。
圧縮目標： 動画は5MB未満、720p H.264、1〜2Mbpsのビットレート、ループは最大30秒。
料金セクションのベストプラクティス
3カードレイアウト：月額 | 年額（中央、1.10倍に拡大、暗い背景、人気バッジ、パルスCTA） | 半年額。取り消し線価格と節約額の計算を含めます。
画像最適化
アップロード前にリサイズ：アバターは100×100px以下、カードは400×400px以下、ヒーローは幅1200px以下。WebP/AVIF形式を推奨。width と height 属性を追加し、画面外の要素には loading="lazy" を使用します。
PageSpeed目標
| 指標 | 目標 |
|---|---|
| LCP | < 2.5s |
| TBT | < 300ms（Tailwind CDNは約1.3秒以上追加） |
| CLS | < 0.1 |
| FCP | < 1.8s |
動画と画像を圧縮し、preconnectリンクを含め、非同期デコードを使用します。
パフォーマンス必須ゲート（Lighthouse ローカル）
ページを完成とする前に、必ずこのテストに合格してください。 ページが遅い＝リードが読み込み前に離脱＝トラフィックの接続率低下。広告費を使う前に検証します。
テストは 低速4Gのモバイルエミュレーション で実行されます — 広告から来る実際のリードのシナリオです。
実行方法（index.html があるフォルダで）:
bash ~/.claude/skills/ghl-landing-page/lh-check.sh .
スクリプトはローカルページを立ち上げ（npx serve）、Lighthouseを実行し（npx lighthouse — インストール不要、キャッシュ済み）、スコア・Core Web Vitals・最大の改善機会を出力し、サーバーを自動停止して以下を返します：
- exit 0 → 合格（スコア≥90、LCP <2.5s、TBT <300ms、CLS <0.1）→ 公開可能
- exit 1 → 不合格 → 出力の「最大の改善機会」を読み、修正して再実行。合格するまで繰り返します。
不合格の場合、以下の順序で対処してください（効果の大きいものから）：
- Tailwind CDNはTBTの最大の原因です。 本番環境では、Tailwind CLIをコンパイルして（未使用クラスを削除→CSS約5〜15KB）、
cdn.tailwindcss.comの代わりに<head>にインライン化します。これだけでスコアが改善することが多いです。 - 背景動画 — 最初のペイントでは静止画ポスターを表示し、読み込み後にのみ動画に切り替えます。5MB未満、720pを維持します。
- 画像 — WebP/AVIF、
width/height属性を付けてCLSを回避します。
公開後、GHLの実際のURLでPageSpeed Insightsを使って最終チェックを行います（GHLのラッパー/CDNによりローカルテストでは捉えられない追加の重みが加わります）。
よくある落とし穴と修正
| 問題 | 修正 |
|---|---|
| GHLで境界線が表示される | ghl-wrapper フルワイズドソリューションを適用 |
| 動画自動再生が機能しない | preloadを削除し、muted属性を維持 |
| 料金レイアウトがモバイルで崩れる | 取り消し線価格を独自の行に分け、フォントサイズを縮小 |
| アバター写真が巨大 | アップロード前に100×100にリサイズ |