信頼構築・集客のWeb
ヘルスケアコーポレートサイト
ヘルスケア分野の企業向けコーポレートサイトを制作。
- Client
- へルスケア関連事業者
- Category
- CVR改善設計 / UI/UXデザイン
- Stack
- HTML / CSS / JavaScript / Intersection Observer API
Before課題
- サイトの情報量は十分でも、問い合わせへの導線が弱かった
- LCP・CLSなどCore Web Vitalsのスコアが低く、直帰率に影響していた
- GA4のイベント計測が未整備で、どのCTAが機能しているか不明だった
After解決
- 問い合わせへの導線を強化し、CVRが改善された
- 画像最適化・レンダリング制御の改善によりLCPを大幅短縮
- ファネル全体をGA4でトラッキングし、改善の根拠をデータで持てる状態に
制作のポイント
ヘルスケア領域のWebサイトには、固有の設計難易度があります。
扱う情報の専門性が高い一方で、読む側は専門知識を持たないことがほとんどです。正確に書けば難解になり、わかりやすく書けば信頼感が薄れる。この二律背反を、コピーだけで解決しようとするのは限界があります。今回のアプローチは、コンテンツの質ではなく、情報の構造と表示の制御から着手しました。
Core Web Vitalsの計測と改善：
まず既存サイトのPageSpeed Insightsとフィールドデータを計測しました。問題の所在を感覚ではなく数値で把握することが出発点です。
CVR設計：Intersection Observer APIによる動的CTA制御
ヘルスケア領域の訪問者は、衝動的に問い合わせをしません。情報を読み、信頼を積み、検討したうえで行動します。この心理プロセスを無視して「早い段階にCTAを置く」戦略は、このジャンルでは機能しません。
Intersection Observer APIを使い、主要セクションの通過を検知します。「サービス説明」「実績・事例」「料金・プロセス」の3セクションを通過した訪問者にのみ、スティッキーCTAをフェードインさせる実装にしました。