ヘッダーを11種類の型に分け、AIへの指示文・動く見本・コードを載せています。
ヘッダーはどの型を選ぶか
ヘッダーは、どのページを開いても同じ位置にある「サイトの入口」です。型を選ぶときは、見た目の好みより先に、主要なページがいくつあるか、子ページがどれだけあるか、読み手が何度も行き来するか、の3つを数えます。迷ったら横並び型から始め、収まらなくなったところで階層を持たせる型に移るのが手堅い進め方です。
| こんなとき | 向いている型 |
|---|---|
| 主要なページが5〜6個で、子ページは少ない | 横並び型 |
| ブランドの印象を前に出したい・項目が少ない | 中央ロゴ型 |
| 電話の問い合わせが多い・項目が7〜8個ある | 2段型 |
| サービスごとに子ページが数個ずつある | ドロップダウン型 |
| 子ページが10を超え、説明を添えて案内したい | メガメニュー型 |
| ページ数は多いが、ヘッダーには主要な数項目だけを出したい | サイドドロワー型 |
| 写真や作品を主役にしたい・ページ数が少ない | 全画面メニュー型 |
| 縦に長いページが多い | 追従型（ほかの型と組み合わせる） |
| 長い文章を広く見せつつ、メニューにもすぐ戻れるようにしたい | スクロールで隠れる型 |
| ファーストビューの写真を、ヘッダーの帯で切らずに見せたい | 透明から切り替わる型 |
| SP で同じページを何度も行き来する | 下部タブバー型（SP だけ） |
メニューボタンの三本線を×に変える動きは、アニメーション集の部品の動き（三本線が×に変わる）にあります。
メニューの文字にマウスを重ねたときの下線の動きは、アニメーション集のホバーの動き（下線が左から伸びる）にあります。
追従型と下部タブバー型は「振る舞い」「SP での置き場所」の型なので、横並び型やドロップダウン型と組み合わせて使います。
どの型でも守ること
- header と nav で囲む。サイト共通の上部を
header、主要なメニューをnavにし、aria-label="メインメニュー"で名前を付けます。フッターにもnavがあるとき、読み上げソフトで区別できます。 - いま見ているページを示す。該当するリンクへ
aria-current="page"を足し、太字や下線でも目に見える形にします。 - 相談の入口をメニューと分ける。塗りのボタンにし、文字だけのメニューとは役目が違うことをひと目で伝えます。
- 切り替える幅を決めて、その前後で確かめる。ここに載せたコードは 900px を境にハンバーガー表示へ変わります。項目の数と長さに合わせて変えてください。
- 押せる部分を 44px 角くらい取る。ハンバーガーや SP のメニューの行は、指で押したときに隣の項目に触れないだけの大きさを取ります。
よくある質問 (FAQ)
一列に並べるなら5〜6項目くらいまでです。ただ、項目名の長さやロゴ・相談ボタンの幅しだいで変わるので、実際の文言を入れてノートPCの幅（1280px 前後）で確かめます。それより多いときは、2段型にするか、ドロップダウン型・メガメニュー型で階層に分けます。
問い合わせがサイトのいちばんの目的なら、ボタンにして右端に置きます。ほかの項目と同じ文字リンクにすると、行き先の1つに埋もれてしまいます。採用サイトの「エントリー」や、お店の「予約」も同じ考え方です。
決まった数字はありません。メニューが折り返し始める幅が境目の目安です。ブラウザの幅を少しずつ狭めて、項目が折り返す・ロゴと重なる直前の幅を探し、それより少し広い幅を境目にします。項目を足したら、境目も見直します。
縦に長いページが多いなら残すと便利ですが、高さを低めにします。画面の縦が短いノートPCやスマホの横向きでは、ヘッダーが大きいと本文の表示が狭くなります。2段型なら、メニューの段だけを残す方法もあります。下へ読むあいだだけ引っこめたいときは、スクロールで隠れる型にします。