ヘッダーの型の選び方
ヘッダーの型は、「主要なページの数と階層」「ロゴの印象と行き先の選びやすさのどちらを優先するか」「スクロールしたあとも見せ続けるか」「SPでメニューをどう開くか」の4つで変わります。まず問い1・問い2でPCでの並べ方を決め、問い3・問い4で振る舞いとSPでの開き方を組み合わせます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：主要なページは、どのくらいの数と階層ですか？
| 主要なページの数と階層 | 向く型 |
|---|---|
| 少数で子ページの階層もなく、ロゴと同じ段に横一列で読みやすく収まる | → 問い2へ |
| 多くてロゴと同じ段には収まらない。または、電話番号や受付時間などの連絡先、言語の切り替えやログインなどの補助的な機能を、どのページでも見せたい | 2段型 |
| 大きな分類の下に子ページがあり、それぞれ1列の一覧で見渡せる数に収まる | ドロップダウン型 |
| 大きな分類の下に子ページが多く、グループに分けたり説明を添えたりして選ばせたい | メガメニュー型 |
問い2：ロゴの印象と、行き先の選びやすさのどちらを優先しますか？
主要なページが1段に収まる場合に、ヘッダーの並べ方を決める問いです。
問い3：スクロールしたあとも、ヘッダーを見せ続けますか？
問い1・問い2で選んだ型に組み合わせる型です。
| スクロールしたあとの扱い | 加える型 |
|---|---|
| ページが長く、読み進めながらほかのページや相談へ移動してほしい。ヘッダーを必要な要素だけに縮めて（もともと低ければ縮めずに）画面の上に残す | 追従型 |
| ページが短い、または本文を読む範囲をできるだけ広く取りたい | 残さない（どの型もそのまま使えます） |
問い4：SPでは、メニューをどう開きますか？
PCで選んだ型とは別に、SPでの開き方を選びます。
| SPでのメニューの開き方 | 向く型 |
|---|---|
| 少ない項目を手軽に開閉したい。開いたまま背面のページの内容も見ていたい | ヘッダーの下に一覧を開く形（横並び型・2段型・ドロップダウン型などのSP版） |
| 項目を大きく押しやすく並べ、相談の入口や連絡先もメニューの中にまとめたい | 全画面メニュー型 |
| 何度も行き来するページが少数に決まっていて、メニューを開かずに移動してほしい | 下部タブバー型 |
ヘッダーの型の比較
| 型 | 役割 | 形 | 向くサイト |
|---|---|---|---|
| 横並び型 | 並べ方 | ロゴ・メニュー・相談ボタンを1段に並べる | 中小企業のコーポレートサイト、サービスサイト、事務所のサイト |
| 中央ロゴ型 | 並べ方 | ロゴを中央に置き、メニューを左右に分ける | 飲食店、美容室、ホテル、アパレル |
| 2段型 | 並べ方 | 上段に連絡先、下段に主要なメニュー | 士業、クリニック、工務店、学校、団体 |
| ドロップダウン型 | 階層の見せ方 | 分類の下に子ページを1列で開く | 子ページのあるコーポレートサイトやサービスサイト |
| メガメニュー型 | 階層の見せ方 | 子ページをグループに分け、説明付きで大きく開く | サービスの種類が多い会社、製品の多いメーカー |
| 追従型 | 振る舞い | スクロールしても縮めて画面の上に残す | 長いページが多いサイト |
| 全画面メニュー型 | メニューの開き方 | 画面全体を覆うメニューを開く | ブランドサイト、店舗サイト（主にSP） |
| 下部タブバー型 | SPの配置 | よく使うページを画面の下にタブで並べる（PCは上のヘッダー） | 会員向けのサイト、繰り返し使われるサービス |
すべての型に共通する設計の原則
ヘッダーの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- サイト共通の上部はheader 要素でまとめ、主要なナビゲーションは nav 要素で示す。nav が複数ある場合は、「メインメニュー」「サブメニュー」など目的が区別できる名前を付ける
- aria-current="page" は、表示中のページそのものへのリンクにだけ付ける。子ページを見ているときに親の項目も強調する場合は、見た目の「現在のセクション」の印として分けて扱う
- メニューの項目数は固定せず、横一列で読みやすく収まる数を基準にする。収まらないほど行き先が多い場合は、段を増やすより、階層を持たせる形を検討する
- 開閉する要素はボタンとして組み、aria-expanded と aria-controls で状態と関係を示す。アイコンや記号だけに頼らず、ボタンの名前でも動作と状態が分かるようにする
- マウスを重ねて開く一覧は、一覧へポインターを移動して操作でき、操作中に勝手に消えず、Escキーで閉じられるようにする。押したとき・キーボードでも開閉できるようにする
- ヘッダーの下に開く非モーダルのメニューでは、フォーカスを閉じ込めない。画面全体を覆うメニューはモーダルとして扱い、フォーカスを中にとどめ、閉じたら開いたボタンへ戻す
- 相談などの主な行動の入口は、メニューの項目と見た目を分け、ボタンの文言と移動先を一致させる。SPでは、ヘッダー内に無理なく収まる場合にメニューの外に残す
- 追従するヘッダー、追従する相談ボタン、下部タブバーなど、画面に残す要素を重ねすぎない。残す場合は必要な要素だけに縮め、見出しやフォーカスが隠れないよう余白を取る
- 押せる範囲は、44px程度の高さを目安に確保する。開閉ボタンも、項目と同じように押しやすい大きさにする
- ロゴを画像で表示する場合は、代替テキストを「ロゴ」ではなく店名・会社名・ブランド名にする。電話番号は文字で表示し、発信できる環境では tel: のリンクにする
- 大きなPC画面だけでなく、中間の画面幅でも項目が折り返さないかを確かめ、どの幅でSPの形に切り替えるかを決める
組み合わせの例
- 中小企業のコーポレートサイト：横並び型で主要なページと相談ボタンを1段に並べ、SPではヘッダーの下に一覧を開く。長いページが多い場合は、追従型の形で縮めて画面の上に残す
- 士業・クリニック：2段型で上段に電話番号と受付時間、下段に主要なページを並べ、画面の上に残す場合は下段だけに縮める
- サービスの種類が多い会社：子ページの少ない分類はドロップダウン型、子ページの多い分類はメガメニュー型にするなど、分類ごとに使い分ける
- 飲食店・美容室・ホテル：中央ロゴ型で店名の印象を中心に見せ、SPでは全画面メニュー型で予約の入口と連絡先をメニューの中にまとめる
- 会員向けのサイト・繰り返し使われるサービス：PCは横並び型、SPは下部タブバー型でよく使うページと相談の入口を画面の下に並べ、ほかのページは上のメニューからたどれるようにする
よくある質問
どの問いから考えればよいですか?
問い1の「主要なページの数と階層」から考えます。PCでヘッダーにどう並べるかが決まったら、問い3でスクロールしたあとの扱いを、問い4でSPでのメニューの開き方を選びます。
型を組み合わせて使ってもよいですか?
組み合わせて使えます。並べ方や階層の見せ方、スクロールしたあとの振る舞い、SPでの開き方はそれぞれ別の軸なので、たとえば横並び型を追従型の形で縮めて残し、SPでは全画面メニュー型にする、といった組み合わせができます。ただし、画面に残す要素が重なりすぎないかは確かめます。
SPのメニューは、全画面メニューとヘッダーの下に開く形のどちらがよいですか?
項目を大きく見せたい場合や、相談の入口や連絡先もメニューの中にまとめたい場合は全画面メニュー型が向いています。少ない項目を手軽に開閉したい場合や、開いたまま背面の内容も見ていたい場合は、ヘッダーの下に一覧を開く形が扱いやすいです。全画面メニュー型はモーダルとして扱う分、フォーカスや背面の扱いで確かめる点が増えます。
ヘッダーの相談ボタンは、CTAの型とどう関係しますか?
ヘッダーの相談ボタンは、どのページにも置くCTAです。ボタンの文言と移動先の一致や、主と副の優先度の付け方など、CTAと同じ考え方がそのまま当てはまります。詳しくは、CTAの型の選び方を参考にしてください。