王道セールスLP
最も案件数の多い定番LP。「派手さより成果寄りの設計」を実証するデモ。
【実装概要】
FV→課題→解決→実績→機能→お客様の声→料金→FAQ→CTAの王道構成を、アニメーションの重さを最小限に抑えながら実装。
GSAPによるKV段階表示・カウントアップ・機能セクションのピン止め＋スライドインアニメ・Swiperによるお客様の声スライダー（7枚）を搭載。
GTM・GA4計測をコードコメントで明示し、納品後の改善提案まで視野に入れた設計にしています。
【実装キーワード】
GSAP／固定CTA／カウントアップ／SP最適化／GA4想定／Swiperスライダー／FAQトランジション
対応できる案件
GSAPによるFV段階表示
→ キャッチ→サブコピー→CTA→モックアップの順に表示。重さが出ない遅延設定（各0.15s程度）でスムーズな初期表示を実現。
数値カウントアップ（実績セクション）
→ ScrollTrigger到達時のみ発火。once:true設定でスクロールのたびに繰り返さない演出。
機能セクション：ピン止め＋左から順次スライドイン
→ GSAP ScrollTriggerのpinでセクションをビューポートに固定。onUpdateでスクロール進捗（0〜1）を監視し、閾値（0.0/0.2/0.4/0.6）を超えたタイミングで左から順にカードをスライドイン。複数トリガーによるパフォーマンス低下を防ぐ設計。
Swiperスライダー（お客様の声7枚）
→ Swiper 10.xを使用。slidesPerView:1.1（SP）〜3（PC）でブレイクポイント切り替え。ページネーションをクリッカブルで表示。grabCursorでPCでもスワイプを促す。
アコーディオンFAQ・スムーススクロール
→ max-heightのトランジションでゆっくり開閉。スクロール位置に合わせてアンカーナビのアクティブ状態が自動で切り替わります。
キャッチコピー・CTA
ACFで文言・リンク管理。キャンペーン期間中のコピー差し替えがコード修正なしで対応可能
実績数値
ACFで差し替え可。カウントアップのターゲット値をフィールドから変更できる設計
FAQリスト
ACFリピーターで追加。Q&Aを管理画面から増やすだけで表示が自動追加される
ロゴ差替え
CPT「導入企業」またはACFでロゴ画像を管理。表示件数・順序を管理画面から変更可能
お客様の声
CPT「voice」で各社の声を管理。Swiperのスライド枚数は投稿数に連動して自動増減