ヒーローセクションのデザイン｜最初の3秒で伝えるコツ

自社サイトを開いた瞬間、「で、この会社は何をしてくれるの?」と訪問者に思わせてしまっていないでしょうか。かっこいい写真を敷いてキャッチコピーを載せたのに、問い合わせが増えない——ヒーローセクションのデザインでつまずく中小企業サイトは本当に多いです。

原因のほとんどは「センス」ではなく、載せる要素と優先順位の設計です。この記事では、最初の3秒で伝わるファーストビューの構成要素と、やりすぎない動きの入れ方を具体的に整理します。

3秒で判断されるのは「誰に・何を・次に何を」

ヒーローセクションは、訪問者が「自分に関係があるか」を判断する場所です。装飾より先に、次の3つが読み取れるかを確認してください。

• 誰に向けたものか(対象)
• 何が得られるのか(価値)
• 次に何をすればいいか(行動)

この3点が揃っていないヒーローは、どれだけ写真が美しくてもスクロールされずに離脱されます。

構成要素と文字数の目安

実務で使いやすい目安を表にまとめます。デバイス幅375pxのスマホで、スクロールなしに収まる範囲が基準です。

とくに多い失敗が「株式会社◯◯へようこそ」というキャッチコピーです。これは価値をひとつも伝えていません。「印刷会社」なら「ようこそ」ではなく「小ロット100部から、翌日発送」のほうが3秒で刺さります。

可読性を落とさない背景処理

写真の上に白文字を置くなら、オーバーレイは必須です。

.hero {
  position: relative;
  min-height: 68svh; /* スマホのアドレスバー対策 */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25)
  );
}
.hero__title {
  font-size: clamp(1.6rem, 5vw, 3rem);
  line-height: 1.35;
}

背景と文字のコントラスト比は、本文相当で4.5:1以上を目安にすると読み違いが減ります。

動きは「視線を導く」ためだけに使う

ヒーローの動きは、飾りではなく読ませる順番のコントロールです。効果的なのは次の3パターンです。

1. キャッチコピーの遅延フェードイン(0.1秒ずつずらす) 2. 背景のゆっくりしたズーム(ケンバーンズ) 3. CTAボタンの控えめな注目喚起

背景のゆっくりズームは、静止画1枚でも「生きているページ」に見せられる定番です。実際に動くとこうなります。

キャッチコピーを1文字ずつ出すタイプライター表現も、短い言葉なら有効です。ただし読み終わるまでに3秒以上かかると逆効果なので、全角15字程度までに抑えてください。

実装時の数値ルール

• アニメーション時間は 0.3〜0.6秒。1秒を超えると待たされた感が出ます
• 動き出しの遅延は合計 1秒以内
• prefers-reduced-motion に必ず対応する

@media (prefers-reduced-motion: reduce) {
  .hero * {
    animation: none !important;
    transition: none !important;
  }
}

また、ヒーローの背景画像は表示速度に直結します。<img> に fetchpriority="high" を付け、遅延読み込み(loading="lazy")は付けないのが正解です。ここを間違えると、最初の3秒で何も見えない状態になります。

制作前のチェックリスト

• [ ] スマホで縦スクロールなしにCTAが見えるか
• [ ] h1だけ読んで事業内容が想像できるか
• [ ] 主CTAは1つに絞られているか
• [ ] 動きを止めても情報が伝わるか
• [ ] 画像は WebP 化し、200KB以下に収まっているか

言葉での説明だけでは動きの速度感が掴みにくい、という場合は、動くWebパーツ集のmotionAETHERのようなカタログを眺めてみるのも手です。500点ほどのパーツが実際に動く状態で無料閲覧でき、「この程度の速さなら邪魔にならない」という感覚を掴むのに向いています。

まとめ

ヒーローセクションのデザインは、写真選びより先に「誰に・何を・次に何を」の3点を文字で固めることが出発点です。動きは0.3〜0.6秒、遅延は合計1秒以内。まずは自社サイトをスマホで開き、3秒だけ見て何が伝わるかを確かめてみてください。