Webサイトを訪問すると、スクロールしても画面最上部に表示されるエリアがあります。これが「ヘッダー」です。
この記事では、Webサイトのヘッダーについて解説します。ヘッダーについてあまり知らない方も、ヘッダーの役割や作成のポイントについて知りたい方も、ぜひ最後まで読んでみてください。
Webサイトにおけるヘッダーとは？
ヘッダーとはWebサイトの上部に常に表示されており、そのWebサイトの基本的な骨子（メニュー）を示しています。多くのヘッダーは最も左側にサイト制作者（制作会社ではない）や企業のロゴがあり、その右側に主な骨子を並べています。
スクロールしても常にヘッダーが表示されているため、Webサイトの骨子を確認したいとき、あるいは骨子を使って別のページにアクセスしたいときに、一番上までスクロールしなくてよいのです。
Webサイトのヘッダーの役割は？
ユーザーがWebサイトに訪れるのは、得たい情報があるためです。それを探しやすくするのがヘッダーの役割です。ヘッダーの骨子を見れば、求めている情報がどのページに書かれているか予想できます。そうすると、ユーザーは「信用できるWebサイトだ」と思うため、同Webサイト内の別のページを訪れたり、ほかにも得たい情報があったときに引き続き探すなど、Webサイト内の回遊率を高められます。
Webサイトの目的にもよりますが、仮に目的は商品やサービスを購入してもらうことだとします。その場合、購入ページへのリンクが骨子にあってもよいかもしれません。あるいは資料請求が目的なら、資料請求ページへのリンクがあった方がよいでしょう。
Webサイトのヘッダーに含めるべき項目
ヘッダーを構成する項目はWebサイトによって異なります。ここでは一般的な項目を記載します。
- 企業ロゴ
- 同Webサイト内の主要ページへのリンク（事業内容、会社概要、取引実績など）
- お問い合わせ、資料請求
- サイト内検索窓
ほかにも、採用やCSR、上場企業であればIR情報（株主向け情報）が記載されている場合もあります。
Webサイトのヘッダーの作成のポイント
Webサイトのヘッダーを作成するポイントはいくつかあります。よい例と悪い例にわけて解説します。
よいヘッダーの例
骨子の数が適切
人間が一目見ただけで認識できる物の数は七といわれています。そのため、ヘッダーの骨子の数は七つ、あるいは五つから九つの範囲にするとよいでしょう。そうすることで、ユーザーにヘッダーの骨子を確認してもらいやすく、各ページへアクセスしやすくなります。
七という数字についてもう少し考えてみましょう。仮にヘッダーの骨子が、ロゴを除いて三つだとします。たしかに七つあるより、骨子の内容把握にかかる時間は少なくなります。しかし、それだとWebサイトの内容が薄いと思われてしまうリスクがあります。
反対に二十個の骨子があるとしましょう。一目で情報がわからないのはもちろんのこと、文字が小さくなったり、あるいはヘッダーの骨子が二行になったりして読みづらくなるでしょう。
そのため、ベストは七つ、あるいは五つから九つの範囲でヘッダーの骨子の数を決めるのがよいでしょう。
Webサイトの目的どおりに導線設計されている
この世にあるものすべてに、その目的があります。Webサイトも同様で、Webサイトを訪れたユーザーに「何をしてほしいのか？」という目的があるはずです（どこまで明確に設定されているかはサイトによる）。
たとえば、自動車ディーラーのWebサイトならまずは来店してもらうことが目的になります。そのため、「アクセス（住所）」のページを目立つようにして、アクセス方法（交通手段）なども一緒に記載するとよいでしょう。一方、アクセサリーのネットショップなら、商品を買ってもらうことが目的になります。そのため、「商品購入」のページを目立つようにするのです。
どちらも「商品を販売する」というビジネスモデルは同じですが、Webサイトの目的は異なります。Webサイトを見るだけで自動車の購入を決める人はそう多くないでしょう。そのため、まずは来店してもらって商品の良さや営業マンの人柄を実感してもらい、納得してもらったうえで購入してもらうのです。
一方、ネットショップで購入するアクセサリーには自動車の付加価値はないでしょう（これを定性的に捉えると議論になりますが、ここでは価格という定量的な価値で考えます）。そのため、Webサイトで商品の良さを伝えて実際に購入してもらうところまでを、Webサイトの目的としているのです。
このように本質的には同じ「商品販売」でもWebサイトが持つ目的は異なります。必ず、Webサイトの目的に沿った導線設計を考えましょう。
悪いヘッダーの例
ヘッダーによりコンテンツの一部が見えない
ヘッダーが縦に長くなると、コンテンツ（文章やイラスト）の一部が見えない状態になり、また、画面の中でコンテンツが占める面積が小さくなります。そのため、コンテンツが見えづらくなり、そこに違和感を感じたユーザーが離脱してしまうのです。
Webサイトは一部の会員向けサイトを除いて無料で見られるものです。そのため、「どこか違和感を感じる」のような理由でも簡単に離脱されてしまいます。一方、書籍であればお金を払って購入しているため、なかなかそうなりづらい傾向にあります。「無料で見られるもの」だからこそ、細部のクオリティにより気を遣う必要があるのです（もちろん書籍も細部のクオリティに気を遣って作られています）。
ヘッダーの骨子（テキスト）が読みづらい
ヘッダーの背景画像と文字のフォントによっては、骨子が読みづらくなります。上記の例と同様に、そういった細かい点が原因となり、ユーザーがWebサイトから離脱することがあります。
また、色覚障がい者（色弱）の方からすると、赤と緑の組み合わせだと見えづらい（見えない）、深緑と茶色の組み合わせだと見えづらい（見えない）という状態になります。商業的・心理的に効果のある色の組み合わせもあるかもしれませんが、より多くの人にやさしいWebサイトの方が、その目的を達成しやすいかもしれません。
ほかにもあるWebサイトの構成要素
Webサイト（ページ）の構成要素はヘッダーとコンテンツだけではありません。ここでは、ほかの構成要素について解説します。
サイドナビゲーション
サイドナビゲーションとは、スクロールに合わせて追従してくるサブメニュー（サブヘッダー）のようなものです。ヘッダーで表示できないより細かいページや、新着ページ、おすすめページなどを表示します。
フッター
フッターはページを読み終わったユーザーに、次のアクションを起こしてもらうために設置するものです。そのため、別のページへのアクセスを誘導したり、商品購入や資料請求へ誘導したりするのです。
まとめ
この記事ではWebサイトのヘッダーについて解説しました。ヘッダーとはページをスクロールしても常に画面上部に表示されているもので、そのWebサイトの骨子を表しています。ヘッダーがあることにより、ユーザーは所望の情報をそのWebサイト内で探しやすくなるのです。
ヘッダーを検討する際には、骨子の数やWebサイトの目的、そしてコンテンツの見やすさなど多くのことを考慮する必要があります。目的にあったヘッダーを作成し、訪れるユーザーが目的を達成できるWebサイトを作成してください。
