ホームページのヘッダーは、どのページを開いても最初に目に入る部分です。訪問者はヘッダーを見て、どんな会社のホームページなのか、見たいページがどこにあるのかを判断します。そのため、項目が多すぎたり、メニューの場所が分かりにくかったりすると、訪問者は目的のページにたどり着けず、ほかのホームページへ移ってしまうこともあります。
この記事では、ヘッダーに置く要素と決め方、訪問者が使いやすい構成のポイント、スマートフォンのヘッダーで気をつけることを解説します。当社が制作したホームページのヘッダー事例も紹介しますので、ホームページ制作やリニューアルの参考にしてください。
ホームページのヘッダーとは
ホームページのヘッダーとは、すべてのページの一番上に共通で表示される領域のことです。会社のロゴや、主要なページへのメニューであるグローバルナビゲーション、電話番号などが置かれています。ページの一番下にあるフッターと対になる部分で、どのページを開いても同じ内容が表示されるのが特徴です。
フッターについて詳しくは、ホームページのフッターとは？の記事をご覧ください。
上記は当サイトのヘッダーです。
HTMLでは、headerというタグで囲んだ範囲がヘッダーにあたります。トップページの一番上に大きく表示される画像やキャッチコピーはメインビジュアルと呼ばれ、ヘッダーのすぐ下に置かれることが多いですが、ヘッダーとは別の部分です。
ヘッダーには、どの会社のホームページなのかを訪問者に伝え、見たいページへ迷わず移動できるようにする役割があります。検索エンジンから下層ページに直接訪れた訪問者にとっても、ヘッダーはサイト全体を知る入口になります。
ヘッダーに置く要素と決め方
ヘッダーは場所が限られているため、置ける要素は多くありません。次の要素の中から、ホームページの目的に合わせて選びます。
ロゴ
ロゴは、どの会社のホームページなのかを示す要素で、ヘッダーに置かない選択肢はほぼありません。
置く位置は左上が一般的ですが、飲食店やアパレルなど、ブランドの雰囲気を大切にしたいホームページでは左右中央に置くこともあります。ロゴがない会社の場合は、会社名を文字で表示します。
ロゴだけでは何をしている会社か分からない場合は、ロゴの近くにテキストで事業内容を短く添えると、初めて訪れた訪問者にも伝わりやすくなります。
グローバルナビゲーション
グローバルナビゲーションは、ホームページの主要なページへのリンクを並べたメニューです。訪問者が見たいページを探すとき、最初に目を向ける部分です。また、訪問者はメニューに並んだ項目を見て、どんな業種の会社で、何をしているホームページなのかを判断します。
項目は、訪問者がよく探すページを優先して決めます。企業サイトであれば、サービスや実績、料金、会社案内などが中心になります。項目が多すぎると目的のページを探しにくくなるため、数を絞り、入りきらないページは、項目にマウスを乗せると下層ページの一覧が開くメガメニューや、フッターに回します。
項目名は、社内で使っている言葉ではなく、訪問者に伝わる言葉にします。たとえば、ソリューションという項目名より、サービスや事業内容のほうが、何のページなのかがすぐに分かります。
電話番号
電話での問い合わせが多い業種や、急ぎの依頼を受けることが多い会社では、ヘッダーに電話番号を置きます。受付時間もあわせて表示しておくと、営業時間外に電話がかかってくることを防げます。
一方で、営業電話を避けたい場合や、電話での対応が難しい場合は、ヘッダーには置かず、会社案内のページなどに載せる方法もあります。また、電話での問い合わせを受け付けていない会社では、ヘッダーだけでなく、サイト全体で電話番号を表示しないケースも多く見られます。
問い合わせ窓口への入口
お問い合わせやお見積り、資料請求など、問い合わせの窓口へのリンクもヘッダーに置きます。どのページを見ている訪問者でも、問い合わせをしたいと思ったときにすぐ移動できます。
置き方は、まずグローバルナビゲーションの項目に入れられないかを考えます。問い合わせの窓口を入れると項目の数が多くなりすぎる場合は、グローバルナビゲーションの上など、メニューとは別の場所に目立つ形でリンクを置きます。
アクセスマップへのリンク
店舗や医院、教室など、訪問者に来てもらうことが前提の業種では、アクセスマップへのリンクをヘッダーに置きます。来店を考えている訪問者は、場所や行き方を最初に確認したいことが多いためです。
接骨院のように、通いやすさが選ばれる理由になる業種では、リンクだけでなく、最寄り駅から徒歩何分かといった情報をテキストでヘッダーに入れることもあります。ページを開いた時点で通える距離かどうかが分かるため、訪問者が場所を確認する手間を減らせます。
来店の必要がない会社では、会社案内のページに地図を載せておけば十分です。
サイト内検索
ページ数が多いホームページでは、ヘッダーにサイト内検索を置くと、訪問者が目的のページを探しやすくなります。
ブログ記事が多いホームページでは、サイト全体を対象にしたサイト内検索とは別に、ブログ記事だけを対象にしたサイト内検索をブログに置き、使い分けているケースも見られます。
ページ数が少ないホームページでは、グローバルナビゲーションだけで十分に探せるため、置かなくても問題ありません。
訪問者が使いやすいヘッダー構成のポイント
ヘッダーに置く要素が決まったら、次は訪問者が使いやすい形に並べます。ここでは、主にパソコンで見たときのポイントを紹介します。
見慣れた配置にして情報を詰め込みすぎない
多くのホームページでは、左上にロゴを置き、その右側やすぐ下にグローバルナビゲーションを並べ、電話番号や問い合わせ窓口への入口は右端に置く配置が使われています。訪問者はほかのホームページでこの配置に慣れているため、同じ配置にしておけば、迷わず目的の場所に目を向けられます。
デザインの独自性を出したい場合でも、配置は大きく崩さないほうが使いやすいヘッダーになります。
また、伝えたいことが多いからといって、キャッチコピーや営業時間、SNSのアイコンなどをすべてヘッダーに並べると、どれが大事な情報なのかが分かりにくくなります。ヘッダーには訪問者がすぐに必要とする情報だけを置き、それ以外は本文やフッターに回します。
ロゴはトップページへのリンクにする
ロゴをクリックするとトップページに戻れるのは、多くのホームページで共通の決まりごとになっています。訪問者も、トップページに戻りたいときはロゴをクリックすることが多いため、ロゴには必ずトップページへのリンクを設定します。
なお、ロゴをh1タグで囲むホームページもありますが、当社では推奨していません。すべてのページのh1がロゴになり、ページごとの内容を検索エンジンに伝えにくくなるためです。
h1タグについて詳しくは、h1タグとは？の記事をご覧ください。
今いるページが分かるようにする
グローバルナビゲーションのうち、今見ているページにあたる項目の色を変えたり、下線を付けたりすると、訪問者はホームページの中のどこにいるのかが分かります。
特に、検索エンジンから下層ページに直接訪れた訪問者は、そのページがホームページの中でどんな位置づけなのかを知らないことがほとんどです。今いる場所が分かれば、関連するページにも移動しやすくなります。
問い合わせ窓口への入口を目立たせる
問い合わせ窓口への入口は、ほかの項目と同じ見た目で並べると埋もれてしまいます。ボタンの形にしたり、サイト全体の配色の中で目立つ色を使ったりして、ほかの項目と区別できるようにします。
ただし、目立たせる窓口が多すぎると、かえってどれも目立たなくなります。目立たせるのは、訪問者に最も使ってほしい窓口に絞るのが基本です。
固定ヘッダーは本文と重ならないようにする
固定ヘッダーとは、ページを下にスクロールしても画面の上に表示され続けるヘッダーのことです。どこまで読み進めても、グローバルナビゲーションや問い合わせ窓口へすぐ移動できるのがメリットです。
一方で、ヘッダーの高さがあると、そのぶん本文を読める範囲が狭くなります。固定ヘッダーにする場合は高さを抑えるか、スクロールしたときだけヘッダーを細くするなど、本文の読みやすさを損なわない工夫が必要です。
また、目次などから同じページ内の見出しへ移動するページ内リンクを使っている場合、移動先の見出しが固定ヘッダーの下に隠れてしまうことがあります。読みたい部分の書き出しが見えない状態になるため、移動先がヘッダーの高さのぶんだけ下にずれて表示されるよう調整しておきます。
スマートフォンのヘッダーで気をつけること
スマートフォンは画面が小さく、パソコンと同じ形ではヘッダーに要素を並べきれません。パソコンとは別に、スマートフォンでの見え方を考えておく必要があります。
ハンバーガーメニューは開いた後の中身まで設計する
スマートフォンでは、グローバルナビゲーションを3本線のアイコンにまとめ、タップするとメニューが開くハンバーガーメニューを使うのが一般的です。
ハンバーガーメニューは、アイコンを置くだけでなく、開いた後の中身まで設計することが大切です。パソコンのグローバルナビゲーションと下層ページのリンクをそのまま縦に並べると、メニューが長くなり、目的の項目を探しにくくなります。
下層ページのリンクは項目ごとに折りたためるようにしたり、よく見られるページを上に置いたりして、開いた画面の中で迷わないようにします。
電話や問い合わせ窓口への入口をメニューの外に出すか決める
ハンバーガーメニューにすべてをまとめると、電話をかけたり問い合わせをしたりするには、メニューを開く手間が1回増えます。電話番号や問い合わせ窓口への入口をアイコンにしてメニューの外に出しておけば、どの画面からでも1回のタップで移動できます。
ただし、メニューの外にアイコンを並べすぎると、ロゴが小さくなったり、押し間違いが起きやすくなったりします。電話での問い合わせが多い業種なら電話のアイコンを出すなど、訪問者に最も使ってほしい窓口を優先して決めます。
指でタップしやすい大きさにする
スマートフォンでは、マウスではなく指でタップして操作します。アイコンやリンクが小さかったり、間隔が狭かったりすると、押したい項目の隣を押してしまう原因になります。
ハンバーガーメニューのアイコンや電話のアイコン、メニューの中のリンクは、指で押しやすい大きさにし、隣の項目との間隔も十分に空けておきます。
メニューを閉じるボタンを分かりやすくする
ハンバーガーメニューを開いた後、閉じる方法が分からないと、訪問者は元のページに戻れず、ホームページを離れてしまうことがあります。
メニューを開いたときは、3本線のアイコンを×の形に変えるなど、閉じるボタンがひと目で分かるようにします。メニューの外側をタップしても閉じられるようにしておくと、より使いやすくなります。
当社が制作したホームページのヘッダー事例
ここでは、当社が制作したホームページから、目的に合わせてヘッダーを設計した事例を紹介します。
必要な情報だけに絞ったシンプルなヘッダー
ろ材再資源化協会のホームページでは、ヘッダーに置く要素をロゴとグローバルナビゲーションだけに絞り、オーソドックスでシンプルな構成にしました。
非営利団体のホームページは、問い合わせを増やすことよりも、団体の活動内容を知ってもらうことが主な目的です。そのため、電話番号や目立つボタンは置かず、グローバルナビゲーションの項目も、団体の紹介や取り組み、実績、加盟企業の一覧など、訪問者が知りたい情報に絞っています。
問い合わせ窓口への入口も、ボタンにはせず、グローバルナビゲーションの項目の1つとして入れています。
美容室らしい洗練された雰囲気を表現したヘッダー
Reana Stageのホームページでは、美容室らしい洗練された雰囲気を表現するために、ロゴをヘッダーの中央に置きました。
グローバルナビゲーションは英語の項目名の下に日本語を添えているため、雰囲気を保ちながら、何のページなのかがすぐに分かります。また、複数の店舗があるため、電話番号はヘッダーには置かず、店舗一覧のページで店舗ごとに載せています。クーポンの項目からは、店舗ごとの予約サイトのページへ移動できるようにしています。
メイン画像で商材を伝えるために左側に置いたヘッダー
With Copperのホームページでは、ヘッダーを画面の左側に縦に置きました。
トップページを開いたときに、メイン画像を大きく見せて、どんな商材を扱っている会社なのかをひと目で伝えるためです。ヘッダーを上部に置くと、そのぶんメイン画像を表示できる範囲が狭くなりますが、左側に移すことで、画面の上部をメイン画像に使えます。
また、縦に並べることで、製品情報や加工技術、用語集など、項目の多いグローバルナビゲーションも無理なく並べられています。
まとめ
ヘッダーは、すべてのページの一番上に共通で表示される領域で、どの会社のホームページなのかを伝え、訪問者が見たいページへ迷わず移動できるようにする部分です。
ヘッダーには、ロゴやグローバルナビゲーション、電話番号、問い合わせ窓口への入口、アクセスマップへのリンク、サイト内検索などを置きます。ただし、場所が限られているため、すべてを置くのではなく、ホームページの目的に合わせて必要な要素を選ぶことが大切です。
訪問者が使いやすいヘッダーにするには、見慣れた配置にして情報を詰め込みすぎないこと、今いるページが分かるようにすること、問い合わせ窓口への入口を目立たせることなどがポイントです。スマートフォンでは、ハンバーガーメニューの中身や閉じるボタンまで設計し、指でタップしやすい大きさにしておきます。
ヘッダーは、訪問者がどのページを開いても最初に目にする部分です。ホームページの目的と訪問者の使いやすさの両方を考えて、ヘッダーの構成を決めましょう。
