コンテンツにスキップ

HP ベストプラクティス

このファイルはWeb自動収集により毎週月曜に更新されます。手書きの「型」は manual/hp.md 側を参照。

実務指針（要するにこうする）

HPを作る・改善するときの行動原則。各原則の根拠は下部「サブトピック別エビデンス」を参照。

全体設計 - HPは「ホームへの容易なアクセス」「目的・価値の明示」「具体的コンテンツ例の提示」「行動・ナビゲーション誘導」「シンプルさ」の5原則で設計する（根拠: NNGroupが2001年版113ガイドラインの大半が現在も有効と確認し5原則に整理, 2024-03）

ファーストビュー・ヒーロー - 動的演出（ループ動画・カルーセル）より価値提案の明文化を優先する（根拠: Scandiweb で静止画+USP+単一CTAに変えてCTAクリック +35% / Baymard でカルーセル採用サイトの46%にUX問題, 2025） - 第一印象は17〜50msで決まる。視覚的複雑性を下げ、見慣れた典型的レイアウトにする（根拠: Google×Basel大 査読研究, 2012、複雑性が高いと典型的でも魅力低下） - ヒーロー動画は視聴されない前提で置く（根拠: HubSpot Academy、55,000超PVで従来動画の視聴率0.9%、動画なしビジュアル+タイピング見出しが対照比+6%・月間約375件追加登録, 2025-05）

情報階層・スクロール - 価値訴求と主要ナビを左上アンカーに置く（F字パターン）（根拠: NNGroup eye-tracking 232名・57,453固視点） - fold上が閲覧時間の57%、最初の2スクリーンフルで74%まで積算するため、最重要訴求はfold上に配置する（根拠: NNGroup scrolling attention 120名・130,000固視点, 2018-04） - fold上に詰め込みすぎず、fold下にも主要情報を配置する（根拠: Chartbeat 25Mセッション、エンゲージは1,200px付近がピーク=fold上部の約3倍） - ECホームページでは商品カテゴリの範囲がひと目でわかる構成にする（根拠: Baymard 2025、ECサイトの22%が商品範囲を伝達できておらず、33%のユーザーがスクロールから商品を探し始める）

ナビゲーション - 主要導線をハンバーガー等で隠さず可視化する（根拠: NNGroup、隠すと利用率がデスクトップ27%対48-50%・モバイル57%対86%に低下） - ナビで現在地を明示する（根拠: Baymard 2025、大手ECの95%ができていない） - ロゴは左上に固定する（中央配置は左上比でホームへの戻り失敗率6倍・ブランド想起率89%低下）（根拠: NNGroup 50名 2016-07 / 128名 2016-02） - カテゴリ数が多いサイトの主ナビはメガメニューにする。ホバー式は0.5秒待ってから0.1秒以内に表示し、ポインター離脱後も0.5秒維持する。カテゴリ階層には商品タイプでなく商品カテゴリを置く（根拠: Baymard 1,698例で米トップEC 88%がホバー式メガメニュー採用・54%が商品タイプを誤実装 / NNGroup ユーザーテスト, 2017-03 ※要再検証）

コピー・バリュープロポジション - 価値提案は短く削るより、箇条書きで構造化して情報量を持たせる（根拠: CXL眼球追跡研究、5箇条書き型が想起・理解で優位）

CTA - CTAボタン文言に見出しのメッセージを逐語反復する（根拠: Frontiers in Psychology 実EC実験 N=956、逐語反復でCTR 58% vs 新規メッセージ44%, 2024） - CTA文言と遷移先を一致させ、クリック直後に個人情報入力を要求しない（根拠: Baymard、曖昧CTAからの想定外遷移にButcherboxでは73%が驚き・41%が文言に不満, 2022-04）

ページ速度（売上直結） - LCPを改善する（根拠: Vodafone でLCP 31%改善→売上+8% / Rakuten 24 統制A/Bで訪問者あたり売上+53.37%・CVR+33.13%） - INP改善もエンゲージメント・リード獲得に直結する（根拠: Fotocasa INP改善→lead ads +27%, 2025-10 / Economic Times INP 1,000ms→257msでバウンス -50%・PV +43%, 2023-05） - 遷移先が予測できる導線（一覧→詳細等）にはSpeculation Rules APIのprerenderingを導入する（根拠: Ray-Ban PDP遷移でLCP 43%改善、A/BテストでCVRモバイル+101.47%・デスクトップ+156.16%, 2025-01）

信頼性・ソーシャルプルーフ - レビューを最低5件載せ、星評価は4.0〜4.7を目指す（根拠: Spiegel研究 2017、5件で購入確率+270%、5.0は懐疑視で逆効果、認証購入者バッジ+15%） - 信頼バッジは複数併置するが、3個以上は購入完了率を下げ得るため2個程度に留める。効果は小規模事業者・新規客・高額カートで特に大きい（根拠: ConversionTeamテスト、McAfee単体→McAfee+Norton併置で取引数+14.3%・売上+16.6%、N=3,480・p=0.049, 2026-05 / ÖzpolatとJankのランダム化フィールド実験 288,169取引・493小売サイト, 2015-05 ※要再検証） - 推薦文は自社選別でなく第三者レビュー（肯定・否定双方含む）を使い、トップページ限定にせず詳細ページにも掲載する（根拠: Baymard 旅行予約サイトテスト, 2023-02）

アクセシビリティ - WCAG 2.2 A/AAの自動検出可能な問題（低コントラスト、alt欠落、フォームラベル欠落）を優先的に解消する（根拠: WebAIM Million 2026、上位100万HPの95.9%にWCAG違反、平均56.1エラー, 2026-02）

⚠️ 既存エビデンスの一部は収集時に公開日が記録されていない。日付付き根拠は次回以降の自動収集分から増える。

情報収集元

詳細な採否基準は 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）
  • HubSpot Academyのホームページテストでは、従来動画の視聴率が55,000超のPVに対して0.9%だった一方、鮮やかなビジュアルとタイピングアニメーション見出しを採用したVariant Bが対照群を6%上回り、月間約375件の追加登録が見込まれた（11 A/B Testing Examples From Real Businesses, 2025-05）

情報階層

  • 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）
  • Baymard Instituteの2025年更新記事では、ECサイトの22%がホームページで商品範囲を十分に示せておらず、米国オンラインショッパー1,167名調査で33%がビジュアル主導商品を気軽に探す際にホームページのスクロールから始めると回答している（Ecommerce Homepage UX: Can Users Infer the Breadth of Your Product Catalog? – Baymard Institute, 2025-04）
  • NNGroupの眼球追跡研究（120名、130,000超固視点、1920×1080）では、閲覧時間の57%がfold上、74%が最初の2スクリーンフル内に集中していた（Scrolling and Attention - NN/G, 2018-04）

ページ速度・モバイル

ナビゲーション

  • Baymardの2025年Homepage & Navigation UXベンチマーク（16,000+ UXスコア、180+ 米欧大手ECサイト分析）では、デスクトップ58%・モバイル67%のサイトがナビゲーション性能で「mediocre以下」、95%が主ナビで現在地スコープを強調できていない（Homepage & Navigation UX Best Practices 2025 – Baymard）
  • NNGroupの調査（2016、179名、6サイト、デスクトップ/モバイル）で、ナビゲーションを隠す（ハンバーガー等）と可視ナビ比で利用率が大幅低下（デスクトップ27%対48〜50%、モバイル57%対86%）、コンテンツ発見率20%超低下、タスク難易度+21%、タスク所要時間はデスクトップで39%以上・モバイルで15%増。主要導線は隠さず可視化すべき（Hamburger Menus and Hidden Navigation Hurt UX Metrics – NN/G）
  • NNGroupの50名・14ファッション小売サイト比較では、中央配置ロゴは左上配置ロゴに比べてホームページへ1クリックで戻れない失敗率が6倍高く、差はカイ二乗検定で有意だった（p<0.05）（Centered Logos Hurt Website Navigation – NN/G, 2016-07）
  • NNGroupの128名・4ホテルサイトの無作為割付調査では、左上配置ロゴのブランド想起率は39%で、右配置の21%より89%高く、カイ二乗検定で有意だった（p<0.05）（Website Logo Placement for Maximum Brand Recall – NN/G, 2016-02）
  • Baymardの334ECサイト・1,698例のベンチマークでは、米国トップECの88%がホバー式メガメニューを採用し、18%は商品カテゴリを主ナビに表示せず、54%は商品タイプをカテゴリとして誤実装していた（1698 ‘Main Navigation’ Design Examples – Baymard, 日付不明）
  • NNGroupのユーザーテストでは、メガメニューは選択肢の一覧比較と視覚的グルーピングを可能にし、短期記憶への依存を軽減する。ホバー式では0.5秒待ってから0.1秒以内に表示し、ポインター離脱後も0.5秒維持して0.1秒未満で消すことを推奨している（Mega Menus Work Well for Site Navigation, 2017-03）

コピーライティング

見出しコピー

バリュープロポジション

  • CXL Instituteのオリジナル研究（金融SaaSサイトの価値提案を4フォーマットで操作し眼球追跡＋サーベイで検証）で、提示サービスを多く列挙した「5箇条書き」「3箇条書き＋説明」型が想起・理解で優位、逆に短いテキストブロックほど視認までの時間が長かった。価値提案は短く削るより構造化して情報量を持たせる方が伝わる（The Presentation of Your Value Proposition Matters [Original Research] – CXL）

CTA

デザイン

  • GoogleとUniversity of Baselの査読研究（International Journal of Human-Computer Studies, 2012）で、ユーザーはWebサイトの第一印象を17〜50ミリ秒で形成し、美的評価は「視覚的複雑性（Visual Complexity）」と「典型性（Prototypicality＝見慣れた慣習的レイアウトか）」の2因子で決まる。視覚的複雑性が低く典型性が高いデザインが最も好まれ、複雑性が高いと典型的でも魅力が低下する（The role of visual complexity and prototypicality regarding first impression of websites）
  • Nielsen Norman Groupは、Jakob Nielsenの2001年版「ホームページユーザビリティ113ガイドライン」の大半が現在も有効だと確認し、HP設計を「ホームへの容易なアクセス」「目的・価値の明示」「具体的コンテンツ例の提示」「行動・ナビゲーション誘導」「シンプルさ」の5原則に整理している（Homepage Design: 5 Fundamental Principles, 2024-03）

信頼性・ソーシャルプルーフ

  • Spiegel Research Center（米Northwestern大Medill、2017、消費者レビュー57,000件＋認証購入者レビュー65,000件・約13,500商品を1年追跡）の調査で、レビュー5件の商品は0件比で購入確率が270%高く効果は5件超で急速に逓減。購入確率は星4.0〜4.7でピークに達し5.0に近づくと低下（満点は懐疑視）、認証購入者バッジは購入オッズを15%改善、レビュー効果は高価格品（+380%）が低価格品（+190%）より大きい（How Online Reviews Influence Sales – Spiegel Research Center）
  • ConversionTeamの住宅設計プラン販売サイトA/Bテストでは、既存McAfeeバッジにNortonバッジを併置した変異でCVRが4.87%→5.47%、取引数+14.3%、売上+16.6%となり、N=3,480・p=0.049・95%信頼水準と記載（Simple Trust Badge Test Delivers 12.2% Conversion Rate Boost, 2026-05）
  • Baymard Instituteの旅行予約サイトテストでは、運営者が選別した推薦文は偏っているとして無視されやすく、第三者レビューをホームページだけに限定すると見落とされるため詳細ページにも掲載すべきと判明した。また、テスト対象のうち2サイトが第三者レビューを統合しており、肯定・否定双方を含むレビューが高い信頼性につながった（Always Link to Third-Party Sources of Reviews, Aggregate Ratings, Awards, and Endorsements on Tours and Experiences Sites, 2023-02）
  • ÖzpolatとJankのランダム化フィールド実験288,169取引・493小売サイトでは、トラストシールは小規模事業者・新規客・購買後半の高額カートで特に有効だが、3個以上では購入完了率を低下させ得ることが示された（Getting the most out of third party trust seals: An empirical analysis, 2015-05）

アクセシビリティ

  • WebAIM Million 2026は、上位100万ホームページをWAVE APIで自動解析し、95.9%にWCAG 2.2 A/AA相当の検出可能な失敗、平均56.1エラー、低コントラスト83.9%・画像alt欠落53.1%・フォームラベル欠落51%を確認（The WebAIM Million, 2026-02）