HP ベストプラクティス¶
このファイルはWeb自動収集により毎週月曜に更新されます。手書きの「型」は manual/hp.md 側を参照。
情報収集元¶
詳細な採否基準は criteria/verification.md と criteria/verification-hp.md を参照。
最優先 (high tier): - UX/CRO 専門研究機関: NNGroup, Baymard Institute, CXL Institute - 学術論文: ACM CHI, HCI系 - 大手企業の自社AB調査公開: web.dev (Vodafone等のCWV事例), Google, HubSpot 等 - 主要EC研究: Baymard E-Commerce UX
採用許容 (medium tier): - 自社実施のABテスト結果を公開する企業ブログ (Scandiweb 等) - 独自調査データを含む業界メディア
除外 (low tier): - 二次集約記事「N個の統計」系まとめ - 出典不明のデータ引用、孫引き - 個人ブログ、SaaS企業の宣伝記事 - 古いプラットフォーム挙動引用（原則2022年以前、レスポンシブ普及前のデスクトップ前提等）
レイアウト¶
ヒーローセクション¶
- Baymardのホームページカルーセル調査（2025年4月更新）では、米欧大手ECデスクトップの33%がカルーセルを採用、そのうち46%にユーザビリティ問題。モバイルは自動回転を避け、デスクトップは5–7秒間隔・hoverでpause・手動操作後は永続停止が必須要件（10 UX Requirements for Homepage Carousels – Baymard）
- ScandiwebのEC（自転車カバー店）ホームページA/Bテストで、ループ動画ヒーローを「静止画＋明示的USPブロック＋単一CTA」に置換したところCTAクリック35%増・カテゴリブロックCTR32%増（共に有意差到達）。価値提案の明文化が動的演出より勝ることを示す一次データ（Case Study: Homepage Value proposition A/B test to improve CTR - Scandiweb）
情報階層¶
- NNGroupのeye-tracking研究（232名、541ページ、57,453固視点を解析）で、ユーザはF字パターン（上部水平→中段水平→左縦）でスキャンするため、価値訴求・主要ナビは左上アンカーに配置すべきという原則が確立（F-Shaped Pattern For Reading Web Content - NN/G）
- Chartbeatの25M sessionスクロール解析では、ピーク閲覧率はfold直上付近の550px地点で約80%、ホームページでは50%が1,000pxまで到達。エンゲージメント時間は1,200px付近でピーク（fold上部の約3倍）を示し、fold下にも主要情報を配置する設計が妥当（Scroll behavior across the web - Chartbeat）
ページ速度・モバイル¶
- VodafoneのCore Web Vitals A/Bテスト（各群1日約100K click/34K visit、PerformanceObserver API計測）で、LCPを8.3秒→5.7秒（31%改善）に最適化したところ売上8%増・lead-to-visit率15%改善・cart-to-visit率11%改善。SSR化と画像最適化が主因（Vodafone: A 31% improvement in LCP increased sales by 8% | web.dev）
ナビゲーション¶
- Baymardの2025年Homepage & Navigation UXベンチマーク（16,000+ UXスコア、180+ 米欧大手ECサイト分析）では、デスクトップ58%・モバイル67%のサイトがナビゲーション性能で「mediocre以下」、95%が主ナビで現在地スコープを強調できていない（Homepage & Navigation UX Best Practices 2025 – Baymard）