ヒーロー
Heroページ冒頭に大きく配置され、見出し・サブコピー・CTAを載せた大型のビジュアル領域。
○ 使う場面
- LPやトップページで、訪問者に最初に伝えたい価値提案を大きく見せたいとき
- スクロールなしで見える領域に強い第一印象を作りたいとき
× 避ける場面
- 情報密度の高い一覧やダッシュボードなど、冒頭から実用的な操作を優先したいとき
- 複数の訴求を横並びで順に見せたいとき（→カルーセル）
別名
ヒーロー、ヒーローエリア、メインビジュアル、キービジュアル、ファーストビュー
近縁種との比較
「メインビジュアル」「KV（キービジュアル）」は広告・制作業界由来のほぼ同義語で、いずれもヒーロー領域そのものを指す。一方「ファーストビュー」はスクロールせずに画面に収まる領域全体（ヘッダーやナビゲーションを含む場合もある）を指す和製英語的な用法で、ヒーローより広い範囲を指すことがある点に注意が必要——ヒーローはファーストビューの中核をなす大型ビジュアル部分、という関係になる。
| 近縁種 | 違い・使い分け |
|---|---|
| カルーセル | カルーセルはヒーロー領域に複数の訴求を横スライドで順送りする構成としてよく組み合わされるが、カルーセル自体は独立したUIパターンとして本図鑑では別カードとする。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション