Webサイトのヘッダーを作ろうとして、ロゴとメニューをどう並べればいいのか、スクロールしても上に残る固定ヘッダーにするべきか、スマホではどうすればいいのかと迷ったことはありませんか。
ヘッダーは、どのページにも表示されることが多い、サイトの「顔」であり「案内板」でもある区画です。
この記事では、Webサイトのヘッダーとは何か、ロゴ・メニュー・ボタンの基本の配置、固定ヘッダーの作り方と注意点、スマホでのハンバーガーメニューの扱いを、見本を使って初心者向けに解説します。
Webサイトのヘッダーの基本
まずは、ヘッダーとは何か、どんな要素を置くのか、そしてどんな役割を果たしているのかを押さえましょう。
ヘッダーとは
Webサイトのヘッダーとは、ページの一番上に置かれる区画のことです。
ロゴやメニューなどが置かれ、多くのサイトでは、どのページを開いても同じ内容・同じ見た目で表示されます。
ヘッダーは、ヘッダー・メインビジュアル・コンテンツ・サイドバー・フッターという、Webページの基本構造を作る区画の1つです(それぞれの区画が画面のどこにあるかは、Webページの基本構造とは?の見本で確認できます)。
なお、HTMLにも<header>という要素がありますが、こちらはページ全体の上部だけでなく、記事の冒頭部分などにも使える要素です(MDN: header)。
この記事では、デザインの話として「ページの一番上の区画」という意味でヘッダーという言葉を使います。
ヘッダーに置く主な要素
ヘッダーに置く要素は、主に次の3つです。
- ロゴ
サイトや会社の名前を表すマークや文字です。
多くのサイトでは、ロゴを押すとトップページに戻れるようになっています。 - グローバルナビ
サイトの主要なページへのリンクを並べたメニューのことです。
サイト全体(グローバル)のどのページにも共通して表示されるメニューなので、こう呼ばれます。
「サービス」「料金」「会社概要」のように、サイト全体の入り口になる項目を並べます。 - CTAボタン
CTAとは「Call To Action(コール・トゥ・アクション)」の略で、「お問い合わせ」「無料で試す」のように、見る人に次の行動を促すボタンのことです。
このほか、サイトによっては検索窓、ログイン、買い物かごのアイコンなどを置くこともあります。
ヘッダーの役割
ヘッダーには、「何のサイトかを伝える」「ほかのページへの入り口になる」「迷子を防ぐ」という3つの役割があります。
見る人はページを開くと、まず画面の上のほうを見て、「ここは何のサイトか」「どこに何があるか」を判断することが多いためです。
また、検索結果からいきなり記事ページにたどり着いた人にとっては、ヘッダーのロゴとメニューが、サイトのほかのページへ移動するための手がかりになります。
どのページでもヘッダーが同じ場所・同じ形で表示されていれば、見る人はサイトの中をあちこち移動しても、迷わずにトップページや目的のページへ戻れます。
ヘッダーのレイアウトの作り方
ここからは、ヘッダーの中の要素の並べ方と、固定ヘッダー、スマホでのメニューの扱いを順に見ていきます。
基本の配置は「ロゴが左、メニューとボタンが右」
ヘッダーの基本の配置は、左端にロゴ、右寄せでグローバルナビとCTAボタンを並べる形です。
横書きのページでは視線が左上から動き始めやすく、まず「何のサイトか」を伝えたあとで、メニューへ目を移してもらえるからです(置く位置によって重要度が変わる考え方は重要な情報はどこに置く?で解説しています)。
Webサイトの使いやすさを研究しているNielsen Norman Groupの調査でも、ロゴを左上に置いたほうが、右上に置いた場合よりもブランド名を覚えてもらいやすかったと報告されています(Logo Placement and Brand Recall(英語))。
一方で、お店やブランドのサイトでは、ロゴを中央に置き、その下にメニューを並べる形もよく使われます。
見本Aは、ヘッダーの中で、ロゴを左端に、メニューとボタンを右寄せに並べており、限られた高さに多くの要素を収められます。
見本Bは、ロゴを中央に大きく置いているため、ブランドの名前が印象に残りやすい反面、2段になる分ヘッダーが高くなり、本文が始まる位置が下がります。
迷ったときは、多くの人が見慣れている見本Aの形から始めると、使いにくさにつながりにくいでしょう。
メニューの項目は主要なものに絞る
グローバルナビに並べる項目は、サイトの中で特に重要なページへの入り口に絞りましょう。
項目が多すぎると1つひとつが小さくなり、本当に見てほしいメニューが埋もれてしまうからです。
なお、「メニューは7つまで」と言われることがありますが、これは短期記憶のマジカルナンバーを誤って当てはめたものです。
メニューは見て選ぶものなので、数は「覚えられるか」ではなく「見て探しやすいか」で決めましょう(詳しくはマジカルナンバーとは?で解説しています)。
すべてのページへのリンクをヘッダーに並べる必要はなく、細かいページへのリンクは、フッターやページの中にまとめることができます。
NGの見本は、項目が多すぎて文字が小さく詰まり、2つのボタンもメニューの中に紛れてしまっています。
OKの見本は、メニューを主要な4つに絞ったことで、項目同士の間が空いて読みやすくなり、「お問い合わせ」ボタンもはっきり目立っています。
どの項目を残すか迷ったら、「サイトに来た人が一番よく探すページはどれか」を基準に選びましょう。
たとえば会社やサービスのサイトなら「サービス」「料金」「事例」「会社概要」、ブログなら主なカテゴリと「プロフィール」「お問い合わせ」のように、OKの見本と同じく数個に絞ると読みやすくなります。
CTAボタンはメニューと見た目を変える
ヘッダーにCTAボタンを置く場合は、メニューの文字リンクとは見た目をはっきり変えましょう。
メニューと同じ文字だけの見た目だと、ほかの項目に埋もれてしまい、サイトとして一番してほしい行動が伝わらないからです。
背景色を付けてボタンの形にし、メニューの並びの端に置くと、「ここだけ特別」だと伝わります(ボタンの作り方全体はCTAボタンとは?で解説しています)。
ヘッダーのボタンは1つに絞るのが基本で、2つ置く場合は、片方を枠線だけにするなど強さに差をつけましょう。
たとえば、一番押してほしい「無料で試す」は背景を塗りつぶしたボタンにし、「資料を請求する」は枠線だけのボタンにすると、どちらが主役か分かります(ボタンの主役と脇役の分け方は主役と脇役とは?で解説しています)。
固定ヘッダーは「低く、すっきり」作る
固定ヘッダーとは、ページを下にスクロールしても、画面の上に貼り付いたまま表示され続けるヘッダーのことで、追従ヘッダーとも呼ばれます。
長いページを読んでいる途中でも、上まで戻らずにメニューやボタンを押せるので、移動が多いサイトや、いつでも問い合わせてほしいサイトに向いています。
ただし、固定ヘッダーは常に画面の一部を占めるので、その分だけ本文を表示できる範囲が狭くなります。
特に画面の小さいスマートフォンでは、ヘッダーが高いと読める範囲がかなり減ってしまうので、固定するヘッダーはできるだけ高さを低く、要素を少なくしましょう。
もう1つ気をつけたいのが、固定ヘッダーがページの中の要素を隠してしまうことです。
だれでも情報を受け取れるWebにするための国際的なガイドラインWCAG 2.2では、キーボードで操作している人が今選んでいる部品(フォーカスが当たっている部品)が、固定ヘッダーなどの制作者が置いたものによって完全に隠れないことを求めています(WCAG 2.2 達成基準2.4.11 隠されないフォーカス(最低限)・WAIC日本語訳)。
たとえば、マウスを使わずにキーボードのTabキーで部品を1つずつ選びながら操作している人は、選んでいるボタンが固定ヘッダーの裏に隠れてしまうと、今どこを選んでいるのか分からなくなります。
Webサイトやアプリの画面のデザインによく使われるツールのFigma(フィグマ)でデザインする場合は、プロトタイプの設定で、ヘッダーのスクロール時の位置を「固定」や「追従」にすると、スクロールしてもヘッダーが残る動きを確認できます(プロトタイプのスクロールおよびオーバーフロー挙動 – Figma ヘルプ)。
固定ヘッダーをコーディングする
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「固定ヘッダーは画面の一部を常に使う」「ページの中の要素を隠さないようにする」という2点を押さえておけば十分です。
WordPressのテーマや、STUDIO・Wixのようなノーコードツール(コードを書かずにサイトを作れるサービス)を使っている場合は、コードを書かなくても、設定画面でヘッダーを固定にできることが多いです。
CSS(Webページの見た目を指定する言語)では、たとえば次のようにしてヘッダーを固定できます。
.site-header {
position: sticky; /* スクロールしても画面の上に留まる */
top: 0; /* 画面の上端に貼り付ける */
z-index: 10; /* 本文より手前に表示する */
background: #FFFFFF;
}
html {
scroll-padding-top: 64px; /* ページ内リンクで移動した先がヘッダーに隠れないようにする(ヘッダーの高さに合わせる) */
}position: stickyは、通常は普通に並んでいて、スクロールして指定した位置(ここではtop: 0で画面の上端)に達すると、そこに貼り付く指定です(MDN: position)。
z-indexは、要素同士が重なったときに、どれを手前に表示するかを決める数値で、大きいほど手前に表示されます(固定ヘッダーが本文の後ろに隠れないように指定しています)。
scroll-padding-topは、ページ内リンクなどでスクロールしたときに、画面の上側に空けておく範囲を指定するプロパティで、固定ヘッダーの下に見出しが隠れてしまうのを防げます(MDN: scroll-padding-top)。
ヘッダーの背景色を指定しておかないと、スクロールした本文がヘッダーの後ろに透けて見えるので、背景色も忘れずに指定しましょう。
スマホではハンバーガーメニューにまとめる
スマートフォンでは、パソコンと同じようにメニューを横に並べると収まらないため、メニューを1つのボタンにまとめるのが一般的です。
このとき使われるのが、三本線のアイコンで表すハンバーガーメニューです。
三本線がハンバーガーのパンと具を重ねた形に見えることから、こう呼ばれています。
アイコンを押すとメニューの一覧が開くので、狭い画面でもたくさんの項目を収められます。
開いたときのメニューには、画面全体を覆って一覧を表示する形や、ヘッダーの下に上から下りてくる形、画面の横からすべり出てくる形などがあります。
パソコンではヘッダーに入りきらずフッターに回していた項目も、ハンバーガーメニューの中なら縦に並べて入れられますが、多すぎると探しにくくなるので、よく使われる順に並べましょう。
ただし、メニューが隠れている分、見る人がメニューの存在に気づきにくくなるという弱点もあります。
Nielsen Norman Groupの調査でも、メニューを隠すとパソコン・スマートフォンのどちらでも使いやすさが下がり、三本線のアイコンがすべての人に理解されているわけではないと報告されています(How to Make Navigation (Even a Hamburger) Discoverable on Mobile(英語))。
そのため、アイコンには「メニュー」という文字を添える、アイコンを押しやすい大きさにする、一番押してほしいボタンだけはヘッダーに出しておく、といった工夫をすると安心です。
NGの見本は、パソコンと同じ項目を小さな画面に押し込んだため、文字が小さく2行に折り返し、指で押し分けるのも難しくなっています。
OKの見本は、メニューをハンバーガーメニューにまとめてヘッダーをすっきりさせつつ、一番押してほしい「お問い合わせ」ボタンは隠さずに残しています。
パソコンとスマートフォンでの余白の変え方は、PCとスマホの余白の違いとは?で解説しています。
実践のポイント
ヘッダーのレイアウトで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 「全部大事だから」と、ヘッダーにメニューやボタンを詰め込みすぎてしまうことがあります。
本当に重要なメニューが埋もれるので、項目は主要なものに絞り、残りはフッターなどに移しましょう。 - 固定ヘッダーを高く作りすぎて、スマートフォンで本文を読める範囲が狭くなっていることがあります。
固定する場合は、高さを低く、要素を少なくしましょう。 - ページによってヘッダーの内容や見た目が変わってしまうことがあります。
見る人が迷う原因になるので、ヘッダーはどのページでも同じ内容・同じ位置にそろえましょう(ページをまたいでそろえる考え方はレイアウトの一貫性とは?で解説しています)。 - スマートフォンで、パソコンのヘッダーをそのまま縮めて表示してしまうことがあります。
実際のスマートフォンで開き、文字が読めるか、指で押し分けられるかを確かめましょう。
よくある質問
- Q. ロゴは左と中央、どちらに置けばいい?
A. 迷ったら左に置くのがおすすめです。
多くのサイトが左にロゴを置いているので、見る人が見慣れていて迷いにくく、メニューやボタンを右寄せでまとめやすいからです。
ブランドの印象を強く出したいお店のサイトなどでは、中央に置く形も選択肢になります。 - Q. 固定ヘッダーにするべき?しないべき?
A. ページが長く、読みながらメニューやボタンを使ってほしいサイトでは、固定ヘッダーが役立ちます。
一方、本文をじっくり読んでほしいサイトや、ヘッダーに要素が多いサイトでは、画面を狭くしてしまうことがあります。
固定する場合は、スマートフォンで読める範囲が狭くなりすぎていないかを必ず確かめましょう。 - Q. パソコンでもハンバーガーメニューにしていい?
A. 画面の広いパソコンでは、メニューを隠さずに並べるほうが基本です。
メニューを隠すと、見る人がメニューの存在に気づきにくくなるためです。
デザインの都合でパソコンでも隠す場合は、アイコンに「メニュー」の文字を添えるなど、気づいてもらえる工夫をしましょう。
まとめ
Webサイトのヘッダーとは、ページの一番上に置く区画のことで、ロゴ・グローバルナビ・CTAボタンを並べ、「何のサイトか伝える」「ほかのページへの入り口になる」「迷子を防ぐ」という役割を持っています。
ロゴは左、メニューとボタンは右に置き、メニューは主要なものに絞り、固定ヘッダーにするなら低くすっきり、スマートフォンではハンバーガーメニューにまとめつつ大事なボタンは残すのがポイントです。
まずは自分のサイトをスマートフォンで開き、ヘッダーの文字が読めるか、メニューが見つけやすいか、固定ヘッダーが画面を狭くしすぎていないかを確かめてみてください。
