ストーリー型LP
コーチング・スクール向けの世界観重視LP。章立て構成・GSAP演出・カスタムカーソルで没入感を演出。
【実装概要】
①問題提起→②共感→③解決→④お客様の声→最終CTAの5章構成で、スクロールに連動して章ごとに背景色が切り替わるストーリー型LP。
GSAPのScrollTriggerで各章の要素が段階的に出現。
右固定の縦プログレスバーで現在位置を示し、カスタムカーソルで没入感を演出。
セリフ体フォントと明朝体の組み合わせで高級感を表現しています。
【実装キーワード】
GSAP ScrollTrigger／章別背景切り替え／縦プログレスバー／カスタムカーソル／明朝体×セリフ体／reduced motion対応
対応できる案件
GSAP ScrollTrigger 章別出現アニメーション
→ 各章のセクションをトリガーに、見出し→本文→画像→引用の順にopacity/translateYを段階的にアニメーション。revealChapter関数で各章を共通化した設計。
縦プログレスバー（右固定）
→ スクロール進捗をパーセンテージに変換してバーの高さをリアルタイム更新。現在表示中のセクションに応じてラベルがアクティブ切り替え。
カスタムカーソル（mix-blend-mode: difference）
→ マウス位置に追従するゴールドの点カーソル。リンク・ボタンへのhoverで拡大表示。mix-blend-mode: differenceで背景と反転して視認性を確保。
SCROLLアニメーション
→ CSS keyframesのみで実装
解決セクション 左右2カラムレイアウト
→ 左に見出しブロック・右にステップ3点を横並びで配置。余白のバランスも調整して読みやすくしています。
各章テキスト
ACFで各章の見出し・本文・引用テキストを管理。ライターが直接管理画面から更新できる設計
お客様の声
CPT「voice」で顔写真・名前・職種・コメント・タグを管理。声の追加がコード修正なしで対応可能
CTAテキスト
ACFでキャッチ・ボタンテキスト・フォームへのリンクを管理。A/Bテスト時のコピー変更が容易
背景画像
各章の背景画像をACFのImage型フィールドで管理。リブランディング時に画像のみ差し替え可能