ヒーローセクションとは

ページの一番上に置く、大きな背景と見出し・リード文・CTA ボタンで構成する導入部分。

概要

ページの一番上、開いた瞬間に画面いっぱいに表示される導入部分のことです。大きな背景画像や動画、キャッチコピーとなる見出し、補足のリード文、行動を促す CTA（Call To Action）ボタンなどで構成され、訪れた人に「このページが何のページか」を一目で伝える役割を持ちます。

別名

表記ゆれ：ヒーローセクション、ファーストビュー、FV、メインビジュアル、MV、ヒーロー画像、ヒーローエリア

制作会社やデザイナーの間では「ファーストビュー」「FV」、広告・マーケティング寄りの文脈では「メインビジュアル」「MV」と呼ばれることが多く、エンジニア寄りの文脈では英語表記の「ヒーローセクション」がよく使われます。

AI への伝え方

「ヒーローセクションを作って」で通じます。背景を画像にするか、グラデーションや動画にするかで実装が変わるため、「背景はグラデーションで」のように具体的に伝えてください。画面の高さいっぱいに表示したいときは「画面の高さいっぱいに」と伝えると 100vh を使った実装になります。

似たパーツとの違い

画面を左右（または上下）に分割して見せる「スプリットスクリーン」は、ヒーローセクションの構成パターンの一つとしても使われます。背景に動画を使う「動画背景」も同様に、ヒーローセクションの背景の選択肢の一つです。どちらもヒーローセクションと排他的な関係ではなく、組み合わせて使われることがよくあります。

デモ

コード

HTML

<section class="hero-section-demo">
  <h1 class="hero-section-demo__heading">見出しがここに入ります</h1>
  <p class="hero-section-demo__lead">
    このページが何のページかを一目で伝えるリード文が入ります。1〜2 行程度が読みやすい目安です。
  </p>
  <div class="hero-section-demo__actions">
    <a class="hero-section-demo__button hero-section-demo__button--primary" href="#">今すぐ申し込む</a>
    <a class="hero-section-demo__button hero-section-demo__button--secondary" href="#">詳しく見る</a>
  </div>
</section>

CSS

.hero-section-demo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* 実際のページでは 100vh 相当の高さでファーストビューいっぱいに表示する。
     iframe 隔離により、この demo は iframe の高さいっぱいに広がる */
  min-height: calc(100vh - 48px);
  padding: 40px 24px;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  background: linear-gradient(135deg, #0017c1 0%, #333333 100%);
}

.hero-section-demo__heading {
  margin: 0;
  font-size: 28px;
}

.hero-section-demo__lead {
  margin: 0;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.9;
}

.hero-section-demo__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.hero-section-demo__button {
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.hero-section-demo__button--primary {
  background: #fff;
  color: #0017c1;
}

.hero-section-demo__button--primary:hover {
  background: #e6e6e6;
}

.hero-section-demo__button--secondary {
  border: 1px solid #fff;
  color: #fff;
}

.hero-section-demo__button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}