ヒーローエリア（ヒーローセクション）とは？役割・ファーストビューとの違い・実例と実装

ヒーローエリア（ヒーローセクション）とは、Webページを開いた瞬間に最初に目に入る最上部の大きな領域です。大きなビジュアルと見出し、行動を促すボタン（CTA）を置き、そのサイトが誰に何を約束するのかを一息で伝えます。呼び方は制作会社ごとに揺れていて、ヒーローセクションやヒーローヘッダーは同じ領域を、ヒーローイメージやヒーロービジュアルはそこへ置く中身を指すのが一般的な使い分けです。混同されやすいファーストビューは、この領域を含む「スクロールせずに見える画面全体」を指します。この記事では、用語の使い分け、実在サイトのHTMLから読み取れる作り方、第一印象を左右するデザインの判断基準、そしてHTMLとCSSでの実装までを、公開されている調査データと仕様を根拠に整理します。

まとめ：ヒーローエリアの定義・違い・デザインの要点

• 定義：Webページ最上部で最初に目に入る主役の領域。大見出し・サブコピー・ビジュアル・CTAの4点が代表的な構成要素です。英語の hero には「物語の主人公」という語義があり、ページの主役を担う領域と捉えると理解しやすい語です。
• ファーストビューとの違い：ファーストビューは「スクロール前に見える画面の範囲」、ヒーローエリアは「その中に置く部品」。範囲を指す語と部品を指す語という関係です。
• 呼称：ヒーローセクション・ヒーローヘッダーは領域、ヒーローイメージ・ヒーロービジュアル・ヒーローバナーは中身。公的な規格は無く、HTML標準にも hero という要素はありません。
• 実例：Stripe・Notion・Vercel・SmartHRのトップページ（2026年10月15日取得）は、いずれも見出しをh1に置き、CTAを2本並べ、ヒーロー画像を先に読み込ませる指定を入れていました。
• デザインの基準：50ミリ秒の提示でも見た目の魅力度が評価され（Lindgaardら2006）、2018年の調査では閲覧時間の57%がファーストビュー内に集まりました（NN/g）。文字と背景のコントラスト比は4.5:1、大きな文字は3:1が下限です。
• 表示速度：ヒーロー画像はLCPの候補になりやすく、良好の基準は2.5秒以下。遅延読み込みは付けず、fetchpriority="high"で優先度を上げます。
• スライドの枚数：ノートルダム大学サイトの実測では、カルーセルのクリックの84%が1枚目に集中しました（Runyon 2013）。この結果を踏まえ、本記事では主な訴求を1枚に絞る設計を推奨します。

まず、用語の使い分けから確認します。

ヒーローエリアの定義と構成要素

ヒーローエリアは、印刷物の一面トップにあたる位置です。ここに置くものがそのページの主張そのものになるため、訪問者は本文を読む前に「自分に関係があるか」を判断します。企業サイトのトップページでも、広告からの着地先となるランディングページ（LP）でも、担う役割は変わりません。

英単語 hero の意味と「ヒーロー」と呼ばれる理由

「hero とは」と英語で調べると、まず「英雄」という訳が出てきます。ただ、Web制作で効いているのはもう一つの語義のほうで、Cambridge Dictionaryは hero の語義の一つを「the main character or the main male character in a book or movie（本や映画の主人公）」と説明しています。hero の「主人公」という語義になぞらえると、ヒーローエリアはページの主役を担う領域と理解できます。

この呼び名は現場の命名にもそのまま残っています。Stripeのトップページでは見出しのクラス名が hero-section__title、Vercelではボタンの計測イベント名が homepage_hero_primary_cta_clicked でした（2026年10月15日に公開HTMLで確認）。海外製のテーマやUIキットで hero という名前を見かけたら、この最上部の領域を指していると読み替えて構いません。

ヒーローエリアの代表的な4つの構成要素

以下の実装例では、Excel帳票からの移行を題材に、大見出し・サブコピー・ビジュアル・CTAの4点を組み合わせます。第一に、誰の何を解決するのかを言い切る大見出し。第二に、見出しだけでは埋まらない条件や対象を補うサブコピー。第三に、写真・イラスト・動画・図版といったビジュアル。第四に、次の行動を定めるCTAです。ロゴ列や導入実績、受賞バッジといった信頼の材料を加える場合もありますが、これらも訴求内容に応じて優先順位を決めます。4点すべてを必須とせず、見出し・根拠・次の行動が読み取りやすい構成に絞ってください。

ヒーローセクション・ヒーローイメージ・ヒーローバナーの呼び分け

WHATWGのHTML標準にある要素の索引には hero という要素が存在しません。規格が名前を定めていないため、呼称は制作現場の慣習として広がりました。実務では次のように使い分けられることが多いものの、会社ごとの揺れは残ります。用語が食い違ったまま議論すると指示がずれるので、着手前に定義を合わせておくと手戻りが減ります。

整理すると、エリア・セクション・ヘッダーは「場所」、イメージ・ビジュアル・コピー・バナーは「そこへ置く中身」を指す語です。ヒーロービュー、ヒーローページ、ヒーロー領域といった呼び方も見かけますが、いずれも同じ場所を別の言葉で言い換えたものと考えて差し支えありません。

実務でよく採る3つのレイアウト型

型そのものは多くありません。ひとつは全画面のビジュアルに見出しを重ねる型で、世界観を先に伝えたいブランドサイトで選ばれます。ふたつめは左右分割型で、片側に見出しとCTA、片側に製品画像を置きます。文字を写真に重ねず背景色を指定できるため、WCAG 2.2の達成基準1.4.3が通常の文字に求める4.5:1以上のコントラスト比を確認しやすい構成です。みっつめは見出しの直下に問い合わせフォームを同居させる型で、広告からの着地先で使われます。企業サイト制作で文字の読みやすさを優先する場合は、左右分割型を推奨します。

ファーストビューとの違い＝範囲と部品の関係

ファーストビューは、スクロールせずに表示される画面の範囲を指します。ヒーローエリアはページ上部の主役となる部品で、その全体がファーストビューに収まるとは限りません。範囲は端末とブラウザで変わり、部品は設計者が決めます。両者は対立する概念ではなく、重なり合う関係です。

この違いが実務で効くのは、指示の書き方です。「ファーストビューにCTAを入れる」は範囲の話なので、グローバルナビの電話番号でも条件を満たしてしまいます。「ヒーローエリアのCTAを資料請求に変える」は部品の話であり、対象が一意に決まります。設計書やレビューでは、範囲と部品を分けて書くほど認識のずれが減ります。

英語表記 above the fold との対応

英語圏のデザイン文献でファーストビューに対応する語は above the fold です。Nielsen Norman Groupのアイトラッキング調査もこの語を使い、120人・13万を超える視線の停留点を分析した2018年の報告「Scrolling and Attention」では、閲覧時間の57%が above the fold に集中したと述べられています。同グループが2010年に測ったときは80%でした。2018年の調査では最初の画面に半分以上の注視が集まりましたが、2010年との差には画面サイズやページ設計の変化も影響し得ます。

一方、英語の hero section は日本語の「ヒーローエリア」とほぼ同じ部品を指します。above the fold が範囲、hero section が部品という対応は、ファーストビューとヒーローエリアの関係と同じです。

実在サイトのヒーローエリア：HTML構造の比較

見た目のギャラリーを眺めても、見出しがどの要素で書かれ、画像がどう読み込まれているかは分かりません。そこで2026年10月15日に、Stripe（日本語版）・Notion（日本語版）・Vercel・SmartHRのトップページの公開HTMLを取得し、ヒーローエリアの組み方を比べました。対象は、ヒーロー内にCTAボタンを置いているSaaS企業の4社です（同時に取得したLinearはヒーロー内にボタンが無かったため外しました）。4社の観察であって、Webサイト全般の傾向を示すものではありません。各社とも頻繁に差し替えるため、文言は取得時点のものです。

今回取得した4社のHTMLに共通していたのは、見出しを h1 で書くこと、CTAを2本置くこと、ヒーローまわりの画像を通常より先に読み込ませる指定を入れていることでした。違いが出たのは、見出しに何を含めるかと、文字をテキストで書くか画像で描くかです。

見出しと補足コピーの入れ方

Stripeは「事業成長を支える金融インフラ。」という主コピーと、決済から組込み型金融までを並べた補足文を、1つの h1 の中に em と span で入れていました。Notionは主コピー「チームとエージェントが一緒に考える場所。」だけを h1 にし、補足は別の段落に出しています。どちらも成り立ちますが、読み上げソフトがページの見出しとして読むのは h1 の中身です（Googleの検索結果に出るタイトルは、title 要素やページ内の見出しなど複数の情報から決まります）。補足文まで見出しに含めるかは、ページの主題を簡潔に表すために必要かで判断し、詳しい条件や説明は段落へ分けます。

主CTAと副CTAの重み付け

4社とも、ヒーロー内のCTAは1本ではなく2本でした。Vercelは2本目のボタンに data-secondary-button という属性を付けて主ボタンと区別し、計測イベントも homepage_hero_primary_cta_clicked と homepage_hero_secondary_cta_clicked に分けています。主の行動（すぐ使い始める）と副の行動（営業に相談する・資料を読む）を、温度の違う読み手に割り振っている形です。SmartHRはボタンの上に「いつでも見られる！」「使いやすさを実感！」という短い補足を添え、押した後に何が起きるかを先に伝えていました。

文字画像の見出しと画像の先読み指定

SmartHRの h1 は、テキストではなく「バックオフィスから」「まるごとスマートに。」という文字を描いた画像2枚で、それぞれの alt にコピーが入っていました。読み上げソフトには alt で伝わりますが、利用者が文字サイズや配色を変えても追随しません。後述する文字画像の基準（WCAG 1.4.5）とは緊張関係にある作り方です。

画像の読み込みは、SmartHRがキービジュアルの img に loading="eager" と fetchpriority="high" を付ける方法、Stripeが link rel="preload" に fetchpriority="high" と画面幅の条件（media）を付けて背景の波模様を先読みさせる方法でした。CSSの背景として描く画像はHTMLの解析だけでは見つからないため、その画像がLCP候補なら、Stripeのように preload で存在を先に知らせる方法が有効です。

第一印象を左右するデザインの判断基準

ヒーローエリアは、何を1つ伝えるか、文字が読めるか、次に何をさせるかの3点で点検します。

価値提案を1つに絞る判断基準

Lindgaardらが2006年に Behaviour & Information Technology 誌（25巻2号115〜126ページ）で報告した実験「Attention web designers: You have 50 milliseconds to make a good first impression!」では、50ミリ秒だけ提示したページの見た目の評価が、500ミリ秒提示した場合の評価と強く相関しました。ページの見た目に対する評価は、ごく短い提示時間でも形成されることを示しています。滞在時間の面でも、Microsoft Researchのチャオ・リウらが205,873ページ（各1万訪問以上）をWeibull分布で分析した研究（Nielsen Norman Groupが紹介）では、98.5%のページで閲覧開始直後の離脱率が高く、時間が経つほど下がる傾向（論文の用語で negative aging）が確認されました（原論文）。

これらの研究はメッセージ数の上限を示してはいませんが、本記事では主な訴求を1つに絞る設計を推奨します。事業内容を網羅するより、対象顧客と提供価値が読み取れる短い見出しを優先します。対象を絞った具体（「製造業の受発注をExcelのまま移行」）なら、読み手は自分事かどうかを一瞬で判定できます。伝えたいことが複数あるなら、残りは下のセクションへ送ってください。

背景画像に文字を重ねるときのコントラスト比

写真の上に白抜き文字を置く構成は、明るい部分に文字がかかった瞬間に読めなくなります。WCAG 2.2の達成基準1.4.3は、文字と背景のコントラスト比を4.5:1以上、大きな文字（18ポイント、または太字14ポイント。W3Cの解説文書ではおおむね24px、太字18.5px）は3:1以上と定めています。写真の上では場所によって比が変動するため、文字が乗る範囲だけ暗いオーバーレイを敷くか、文字と画像を左右に分ける構成へ切り替えるのが確実です。

この基準はアクセシビリティを点検する技術的な根拠です。合理的配慮の提供義務と、Webサイト全体を特定の技術基準へ適合させる義務は区別してください。適用範囲はWebアクセシビリティの義務化に関する2024年改正法の線引きで整理しています。

主CTAの数と置き場所

主CTAは1つに絞ってください。「資料請求」と「無料相談」を同じ大きさで並べると、読み手はまず比較を始めます。本記事では、優先する行動を伝えるため、主CTAと副CTAに視覚的な差を付ける設計を推奨します。実例で見た4社のように副の導線を置くなら、輪郭線だけのボタンやテキストリンクにして視覚的な重みを落とし、主と副を一目で区別できるようにします。主ボタンは周囲との明度差とサイズ、周囲の余白で目立たせ、文言は「送信」ではなく「見積もりを依頼する」のように行動と結果を含めた表現にします。効果の比較は感覚ではなくCVR（コンバージョン率）で判定しましょう。

HTMLとCSSでのヒーローエリア実装

ここからは実装です。マークアップ、画像指定、モバイルの高さと見出しの文字サイズを押さえると、デザインの意図を落とさずに公開できます。

section要素で組むマークアップの基本形

専用要素は存在しないため、section にクラスを付けて組みます。ページ全体を代表する見出しなので、原則として h1 はこの中に置きます。なお header 要素は仕様上「ページやセクションの導入・ナビゲーション」を表すので、サイト共通のロゴとグローバルナビを収める用途と分けて考えてください。

<section class="hero">
  <h1>製造業の受発注を、Excelのまま基幹システムへ</h1>
  <p class="hero__sub">既存帳票の項目を保ったまま移行します。導入期間の目安は90日です。</p>
  <img src="/wp/wp-content/uploads/hero-1600.webp"
       srcset="/wp/wp-content/uploads/hero-800.webp 800w,
               /wp/wp-content/uploads/hero-1600.webp 1600w"
       sizes="100vw" width="1600" height="900"
       alt="受発注画面を操作する担当者"
       fetchpriority="high">
  <a class="hero__cta" href="/contact/">導入資料を請求する</a>
  <a class="hero__sub-link" href="/case/">導入事例を見る</a>
</section>

width と height を書いておくと、画像の読み込み前に表示領域が確保され、後からレイアウトがずれる現象を防げます。主CTAも副の導線もa要素です。主CTAには余白を付けていますが、ボタンらしい外観や主従の差は、背景色・枠線などのCSSで追加します。

LCPを落とさない画像の書き方

LCP（Largest Contentful Paint）は、画面内で最も大きなコンテンツが描画されるまでの時間で、web.devの定義では良好とされる基準は75パーセンタイルで2.5秒以下です。計測対象には img、SVG内の image、video、url() で読み込む背景画像、テキストを含むブロック要素が含まれます。ヒーロー画像は面積が大きいためLCPの候補になりやすいものの、実際の対象は表示領域や描画内容によって変わります。

実装上の分岐点を挙げます。まず、ヒーロー画像に loading="lazy" を付けないこと。web.devのLCP最適化ガイドは「Never lazy-load your LCP image」と明記しています。次に fetchpriority="high" で優先度を引き上げること。対応はChrome 101、Firefox 132、Safari 17.2以降で、主要ブラウザがそろった2024年10月29日にBaselineの「Newly available」になりました。この区分の読み方はWeb Platform Baselineの判定条件で解説しています。最後に、CSSの背景画像で組む場合はプリロードスキャナが見つけられず、CSSの適用後まで読み込みが始まらないため、その画像がLCP候補なら link rel="preload" の併用を検討します。LCPと他の速度指標の関係はWebパフォーマンス指標の一覧と使い分けにまとめました。

モバイルで高さが崩れる問題と svh

height: 100vh でヒーローを全画面にすると、スマートフォンではアドレスバーが表示されている間、下端の一部が画面外に隠れます。仕様上、vh はバーを畳んだ状態の大きいビューポート（large viewport）を基準にしており、バーの開閉には追従しないためです。これを避ける単位として、バー表示時の小さい高さを表す svh、畳んだ時の lvh、開閉に追従して値が変わる dvh が使えます。対応はChrome 108、Firefox 101、Safari 15.4以降で、2025年6月5日にBaselineの「Widely available」に達しています。未対応ブラウザでは svh を含む宣言ごと破棄されるため、直前に vh の宣言を残しておきます。

.hero {
  min-height: 60vh;
  min-height: 60svh;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 48px 24px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
}

.hero img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.hero h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  line-height: 1.3;
}

.hero__cta {
  display: inline-block;
  justify-self: start;
  padding: 16px 32px;
}

全画面（100svh）にする必然性はほとんどありません。このコードの60svhは最小高さであり、内容が多ければそれ以上に伸びます。次のセクションを見せたい場合は、画像・コピー・余白を含む実際の高さを端末ごとに確認してください。端末ごとの出し分けの考え方はレスポンシブデザインの仕組みとスマホ対応方式で扱っています。

見出しの文字サイズを画面幅に合わせる clamp()

ヒーローの大見出しは、PCで映えるサイズのままスマートフォンに出すと3行、4行と折り返し、ファーストビューを見出しだけで埋めてしまいます。上のコードの clamp(1.75rem, 1rem + 3vw, 3.5rem) は、画面幅に応じて文字サイズを変えつつ、下限28px・上限56px（ルートの文字サイズが16pxの場合）の範囲に収める指定です。メディアクエリで段階的に切り替えるより記述が短く、中間の画面幅でも急に大きさが跳ねません。clamp() はChrome 79、Firefox 75、Safari 13.1以降で使えます。

成果を落とすヒーローエリアの型

次に挙げるのは、主な訴求が埋もれる、事業内容が伝わらない、文字を調整できないという問題が起きやすい構成です。

後ろのスライドほど押されないカルーセルのクリック配分

Erik Runyonが2013年1月にノートルダム大学の複数サイトで公開したカルーセルの操作計測を見てみます。手動送りの nd.edu では、トップページ訪問者のうちスライドをクリックしたのは約1%（総クリック28,928回）にとどまり、そのクリックの84%が1枚目に集中しました。自動送りを採用していた1サイトはクリック率が8.8%と最も高く、1枚目の割合は40%でした。つまりこのデータは「自動送りが悪い」ことではなく、調査対象サイトでは後続スライドへのクリック配分が小さかったことを示しています。Runyon自身は最大4枚、できれば3枚を上限として挙げています。本記事ではさらに踏み込み、1枚に絞ることをすすめます。掲載したい訴求が複数ある場合も、下のセクションへ分ける構成を比較候補にし、クリック率やコンバージョン率で確かめてください。関係部署の要望を並べるための装置としてカルーセルを使い始めたら、設計が破綻しているサインと考えてください。

事業内容を伝えない全画面写真とLCPへの影響

握手のストックフォトや抽象的なグラデーションだけでは、対象顧客や提供サービスを具体的に伝えにくいため、コピーや製品画像で補います。写真は「誰の・どんな状況を扱う会社か」を補足できるときだけ価値があります。伝える情報が無いなら、単色の背景に見出しと余白だけを置く構成も選択肢になります。写真がLCP要素になる場合は、画像の読み込み開始・転送・描画のどこに遅延があるかを確認し、訴求に不要なら省くことも検討します。

文字を画像に焼き込む処理

キャッチコピーを画像内に描き込むと、レイアウトは崩れませんが、alt などの代替テキストがなければ、画像内のコピーは読み上げソフトの利用者に伝わりません。Googleは画像認識や周辺の文章も手がかりにしますが、見出しの文言を確実に伝える手段はテキストです。alt を書いても、文字サイズの拡大や配色の変更には追随せず、コントラスト比の検証もしにくくなります。WCAG 2.2の達成基準1.4.5は、技術的に実現できるなら文字画像ではなくテキストを使うことを求めており、例外はユーザーが見た目を変えられる場合と、その見せ方が情報の伝達に不可欠な場合だけです（ロゴタイプは後者にあたります）。フォント指定の再現性を優先したい気持ちは分かりますが、テキストはテキストとして書き、装飾はCSSで当てるのが原則です。

公開後に見る3指標と原因候補の切り分け

ヒーローエリアの効果は見た目の議論では決着しません。公開後は、離脱率とスクロール到達率、そしてCTAのクリック率を同じ期間で並べます。到達率が低い場合は流入意図と見出しの不一致や表示遅延を、到達率が高くクリックが少ない場合はCTAの内容・位置・計測漏れを候補として調べます。Vercelのように主CTAと副CTAのクリックを別のイベントで計測しておくと、各導線の利用状況を分けて把握できます。副導線が主CTAや最終成果へ与える影響は、副導線の有無を比較するテストなどで確かめます。広告から着地するLPなら、LPOで最初に触る要素と改善の順序のとおり、広告文とヒーローコピーの名詞・数字が一致しているかを先に点検します。

変更は一度に1箇所だけにしてください。見出しとボタン色を同時に変えると、どちらが効いたのか判定できません。季節要因や広告出稿の増減が混ざる期間の比較も避けます。判定に足りるだけのアクセスが集まるかはABテストの必要サンプル数と検証期間の見積りで事前に計算できます。足りないページでは、A/Bテストではなく、ここまでに挙げた基準（1メッセージ・コントラスト比4.5:1・主CTA1つ・LCP2.5秒以下）を満たしているかの点検を優先した方が、改善は早く進みます。

よくある質問

ヒーローエリアとは何ですか？

Webページの最上部にあり、開いた瞬間に最初に目に入る大きな領域です。独立したヘッダーがある場合はその下に置かれることもあり、大見出し・サブコピー・ビジュアル・CTAなどで構成します。ヘッダーのロゴやグローバルナビは、この領域に重ねて表示されていても別の部品として扱うのが一般的です。

ヒーローエリアとヒーローセクションは同じ意味ですか？

実務上はほぼ同じ場所を指します。英語の hero section を訳した呼び方がヒーローセクションで、日本のWeb制作ではヒーローエリアという言い方が定着しました。どちらが正しいという規格はありません。

ヒーローエリアとファーストビューの違いは何ですか？

ファーストビューはスクロールせずに見える画面全体という「範囲」を指し、ヒーローエリアはその範囲に置く主役の「部品」を指します。範囲は端末とブラウザの表示領域で決まり、部品は設計者が決めるという違いがあります。ヒーローエリアが縦に長ければ、その一部はファーストビューの外へ続きます。

HTMLの hero とは何ですか？

HTML標準に hero という要素はありません。要素の索引にも載っていないため、実装では section や div に class="hero" のような名前を付けて表現します。海外製テーマのクラス名やコンポーネント名で見かける hero は、この最上部の領域を指す慣習的な名前です。

ヒーローバナーをECサイトで使うときの注意点はありますか？

キャンペーン用のヒーローバナーは差し替え頻度が高いため、画像に文言を焼き込むと更新のたびにアクセシビリティとLCPの条件を作り直すことになります。背景画像とテキストを分けて組み、価格や期限だけをHTML側で入れ替える構成にしておくと、運用の負荷が下がります。掲載終了後にリンク切れが残りやすい点にも注意してください。

関連記事

• ランディングページ（LP）とは？LP制作の流れ・構成・費用と外注の判断基準を解説
• LPOとは？LP改善で最初に触る要素と検証の順序・効かない場面の見極め
• Webパフォーマンス指標の一覧と使い分け｜TTFB・FCP・TBT・Speed Indexの基準
• レスポンシブデザインとは？仕組み・メリットとスマホ対応方式の選び方を制作目線で解説
• Webアクセシビリティは義務化されたのか？2024年改正法の線引きと企業がやるべきこと