Hero Headerは、透明ヘッダーがフルブリードのヒーロー画像の上に重なる、ビジュアルインパクト最重視のサイトタイプです。本文は画面上端（top:0）から始まり、ファーストビュー全体がブランドの世界観を伝えます。ホテル、旅行、写真、ラグジュアリーブランド、イベントなど「一枚絵」で惹きつけるサイトに最適です。
ライブデモハブのHero Headerで、スクロール後のヘッダー変化も確認してください。
こんなサイトに最適
- 高品質なキービジュアルを最優先するブランドサイト
- ホテル・旅行・レストランなど雰囲気訴求が重要な業種
- LP的な1枚目のインパクトは欲しいが、下にコンテンツも続けるサイト
- 動画や大判写真をヒーローに使うビジュアル中心の案件
ライブデモで試せること
Hero Headerライブデモの体験ポイント：
- ヒーロー画像上の透明ヘッダー（白文字ナビ・ロゴ）
- ビューポート全体を使うフルブリードヒーロー
- スクロール後のヘッダー背景色の出現（可読性確保）
- ヒーロー内のキャッチコピーとCTA
- ヒーロー直下から続く通常コンテンツセクション
- モバイルでもヒーロー比率を保つレスポンシブ調整
レイアウトの特徴
Hero Headerではヘッダーとヒーローが一体化して見えます。ナビゲーションは画像の上に浮き、スクロールでsolid背景に切り替わることで長ページでも読みやすさを確保。Corporateのような段組みセクションはヒーロー以下に配置できるため、「映える1枚目＋情報の深掘り」の両立が可能です。
他タイプとの違い
- Corporate：ヒーローはコンテンツの1セクション。Hero Headerは画面全体がヒーロー
- Side Header：左サイドナビ。Hero Headerはオーバーレイ型トップバー
- LP：1ページ完結コンバージョン。Hero Headerは多セクションも可
設定のヒント
- デザイン設定 → サイトタイプ「Hero Header」
- ヒーロー用に高解像度・暗部と明部のバランスが取れた画像を用意
- 透明ヘッダー上では文字色が白系になるため、ロゴも反転版を検討
- ヘッダー設定でCTAをヒーロー内と矛盾しない位置に
- 本文開始位置がtop:0になるため、余計な上部余白プラグインに注意
まとめ
ビジュアルで勝負するサイトならHero Header。ライブデモで透明ヘッダーとスクロール挙動を体験し、全9デモから最適タイプを選んでください。
