Fammスクール LPリデザイン・改善提案

子育て中のママ向けWebデザインスクール「Famm」の既存LPの改善提案依頼を受け、情報設計の観点から改善提案としてデモページをコーディングした作品です。

改善の背景

既存LPを分析した際に、以下の課題を感じました。

• セクションの順序が訪問者の意思決定フローと一致していない
• 終了済みのキャンペーンやコロナ禍の文脈が残っており、情報が古い
• コンバージョンへの導線が弱く、CTAがスクロールで視野から消える

これらを解消するため、「課題認識 → 解決策 → 信頼 → 行動」という流れにセクションを再構成しました。

主な改善ポイント

① 情報構造の整理

「問題の構造化 → 解決（シッター×LIVE）→ サポート → 実績 → 料金 → CTA」の順に再編。古い情報は省略しています。

② スティッキーCTAの実装

FVスクロール後に常時表示されるCTAバーをIntersectionObserver APIで実装。説明会日程一覧など視覚的ノイズになりやすい情報を省略できる設計にしています。

③ 見出しのリライト

各セクションのH2を、訪問者の文脈に沿った表現に書き直し。「続けられるサポートがあります」「卒業後すぐに、仕事につながる仕組み」など、LPコピーの役割を意識して作成しました。

④ 視覚的強弱の調整

特徴4点をアイコン付きカード化、サポート3点を番号付きカード化。実績数値（卒業生3,000人・満足度95.4%）を大きく視覚化しています。

⑤ アコーディオンUIの実装

メディア掲載実績8件をアコーディオンで格納し、情報密度を下げました。開閉はJSで実装し、aria-expandedによるアクセシビリティにも対応しています。

⑥ ターゲットを意識した情報の省略

Web未経験のママ層にとって、技術用語の羅列はかえって不安を煽るリスクがあると判断し、スキル一覧は省略しました。

使用技術

HTML / CSS（CSSグリッド）/ Vanilla JS / IntersectionObserver API / WAI-ARIA

備考：本案件はFammの案件保証サポートより受注し、デモページのコーディングを実施・納品しました。