上部告知 + ヘッダー 2 段

このパーツの使いどころと実装ポイント

このパーツは、上に細い告知バー、下に通常ナビという2段構成のヘッダーです。上段は濃紺の帯にキャンペーン文を中央寄せで置き、黄色の下線リンクで詳細へ誘導します。下段はロゴとナビ、強調色の 無料登録 ボタンを justify-content:space-between で左右に振り分けた、よくあるヘッダーの形です。常時のナビ機能を保ちつつ、上段だけで期間限定の訴求を別レイヤーとして重ねられるのが特徴です。

向いている場面

• 普段はサービス紹介、時期によってセールを上乗せしたい SaaS
• 新着情報やお知らせを常に一行で見せたいコーポレートサイト
• 送料無料や季節セールを告知する EC のトップ

カスタマイズと注意点

2段構造なので、上段だけ差し替えればキャンペーンの開始・終了を本体ナビに影響なく切り替えられます。告知が不要な平常時は上段を丸ごと外せます。注意点は、固定ヘッダーにする場合に2段ぶんの高さがコンテンツに重なりやすいことです。本文側に上段＋下段の合計高ぶんの余白を確保してください。上段を閉じられるようにする場合は、閉じた状態を localStorage 等で記憶し、再訪のたびに再表示しない配慮があると親切です。狭い画面では告知文が折り返しやすいので、短い文言にするか省略表示を検討します。