ヒーロー
Hero
別名: ヒーロー、ヒーローエリア、メインビジュアル、KV、キービジュアル、ファーストビュー、Hero、Hero section
生態(さわってみる)
一言定義
ページ冒頭に大きく配置され、見出し・サブコピー・CTAを載せた大型のビジュアル領域。
分類
使う場面
- LPやトップページで、訪問者に最初に伝えたい価値提案を大きく見せたいとき
- スクロールなしで見える領域に強い第一印象を作りたいとき
避ける場面
- 情報密度の高い一覧やダッシュボードなど、冒頭から実用的な操作を優先したいとき
- 複数の訴求を横並びで順に見せたいとき(→カルーセル)
近縁種との比較
「メインビジュアル」「KV(キービジュアル)」は広告・制作業界由来のほぼ同義語で、いずれもヒーロー領域そのものを指す。一方「ファーストビュー」はスクロールせずに画面に収まる領域全体(ヘッダーやナビゲーションを含む場合もある)を指す和製英語的な用法で、ヒーローより広い範囲を指すことがある点に注意が必要——ヒーローはファーストビューの中核をなす大型ビジュアル部分、という関係になる。カルーセルはヒーロー領域に複数の訴求を横スライドで順送りする構成としてよく組み合わされるが、カルーセル自体は独立したUIパターンとして本図鑑では別カードとする。パララックスもヒーローの背景演出としてよく使われる視差スクロール効果で、両者は併用されることが多いが、パララックスはスクロール連動の演出技法そのものを指し、ヒーローは領域・レイアウトを指す点で軸が異なる。
実例リンク
アクセシビリティ
- role
- 見出しはh1(ページ内で唯一のh1として使う)。装飾用の背景はaria-hidden="true"にする
- キーボード操作
- CTAボタン/リンクは通常のTab順序に含める
- 補足
- スクロール誘導の矢印アイコンなど装飾要素はaria-hidden="true"にし、実際の遷移操作はリンク/ボタンとして提供する