ヘッダーメニューに何を入れる？ホームページ制作で項目を絞る考え方

ホームページのヘッダーメニューは、ページをすべて並べると項目が増え、ユーザーが迷ったり、問い合わせにつながるページが目立たなくなったりします。何を入れて何を外すかは、ホームページ制作で決めておきたい内容の1つです。

この記事では、ヘッダーメニューに入れる主な項目と項目を絞る考え方を解説し、スマホのハンバーガーメニューで決めることや、当社がヘッダーメニューに入れる項目の決め方も紹介します。

ヘッダーメニューに入れる主な項目

ヘッダーメニューに入れる項目は業種によって多少変わりますが、多くのホームページで候補になるのは次の項目です。メニュー名は一例で、実際にはホームページごとに分かりやすい名前を付けます。

このように、ヘッダーメニューには、問い合わせや応募を考えているユーザーが見る可能性の高いページを並べます。

ヘッダーメニューの項目を絞る考え方

ヘッダーメニューに項目を多く並べると、ユーザーがどこを開けばよいか迷い、問い合わせにつながる大事なページも目立たなくなります。ここでは、ヘッダーメニューの項目を絞るときの考え方を紹介します。

ユーザーが探しに来るページを残す

ヘッダーメニューは、ユーザーが目的のページを探すときに最初に見る場所です。

会社が見せたいページより、ユーザーが探しに来るページを残すと、迷わずにたどり着いてもらえます。どのページが探されるかは業種によって変わり、料金を比べてから問い合わせる業種では料金表ページ、来店が前提の店舗では交通アクセスページが探されやすくなります。

リニューアルの場合は、Googleアナリティクスで今のホームページのよく見られているページを確認すると、残すページを判断できます。

問い合わせにつながるページを優先する

ホームページの目的が問い合わせを増やすことであれば、問い合わせの判断材料になるページをヘッダーメニューで優先します。

サービス内容や実績、料金、強みは、ユーザーが依頼先を決めるときに見比べるページです。これらがメニューにあると、ユーザーは知りたい情報をすぐに確認でき、問い合わせまで進みやすくなります。反対に、代表挨拶や沿革は問い合わせの判断に直接関わることが少なく、会社概要の中にまとめても困るユーザーはあまりいません。

お問い合わせのページは、メニューの中でも見つけやすい位置に置きます。

同じ分類のページはドロップダウンメニューでまとめる

サービスが複数ある会社や、事業ごとにページがある会社では、各ページをそのままヘッダーメニューに並べると項目がすぐに増えます。

同じ分類のページはサービス内容や事業紹介などの1つの項目にまとめ、ドロップダウンメニューで各ページを表示すると、メニューの項目を増やさずに済みます。

ドロップダウンメニューは、項目にマウスを乗せたりクリックしたりすると、その項目に入るページが一覧で出てくる仕組みです。ユーザーは開いた一覧から目的のページを選べるので、各ページへすぐにたどり着けます。

ただし、ドロップダウンメニューの中に並べるページが多すぎると探しにくくなるため、中に入れるページも整理して必要なものに絞ります。

項目数はPCで1行に収まる数にする

ヘッダーメニューの項目数は、PCで見たときに1行に収まる数を目安にします。

2行になるとメニュー全体が読みにくくなり、ヘッダーが縦に大きくなってページの内容が見える範囲も狭くなります。1行に収まる数は、ロゴや電話番号、問い合わせボタンをヘッダーにどれだけ置くかや、メニュー名の文字数によって変わります。

5〜7項目ほどに収まるホームページが多く、項目を減らさなくてもメニュー名を短くするだけで1行に収まるケースもあります。

外した項目はフッターで案内する

お知らせやブログ、アクセス、よくある質問、プライバシーポリシーなどは、ヘッダーメニューから外してもホームページに必要なページです。

これらはフッターにリンクを並べて案内します。フッターはページの最後まで読んだユーザーが次に見るページを探す場所で、ヘッダーメニューより多くの項目を並べても見づらくなりにくい場所です。

ヘッダーメニューで絞り、フッターで補う形にすると、ユーザーが探しているページを見落とさずに済みます。

スマホのヘッダーメニューで決めること

スマホは画面の幅が狭く、PCのようにヘッダーメニューの項目を横に並べることができません。そのため多くのホームページでは、3本線のアイコンをタップするとメニューが開くハンバーガーメニューを使います。ここでは、スマホのヘッダーメニューを作るときに決めることを紹介します。

ハンバーガーメニューに入れる項目

ハンバーガーメニューは開くと画面全体にメニューが表示されるので、PCのヘッダーメニューより多くの項目を並べられます。

入れる項目は、PCのヘッダーメニューと同じ項目だけにする方法と、フッターに置いているお知らせやアクセスなどまで入れる方法があります。スマホのユーザーはフッターまでスクロールせずに離れることも多く、よく探されるページはハンバーガーメニューに入れておくとたどり着きやすくなります。

ただし、項目を入れすぎると縦に長いメニューになり、目的のページを探しにくくなります。ユーザーが探しに来るページと問い合わせにつながるページを上に並べ、それ以外は下にまとめて置きます。

ハンバーガーメニューの外に出す項目

ハンバーガーメニューの中に入れた項目は、メニューを開かないと見えません。

電話番号や問い合わせボタンなど、ユーザーにすぐ使ってほしいものは、ハンバーガーメニューの外に出してヘッダーに常に表示する方法があります。電話での問い合わせや予約が多い業種では、ヘッダーに電話のアイコンを置くと、どのページからでもタップして電話をかけられます。

一方で、ヘッダーに置くものが増えると、スマホの狭い画面ではロゴやアイコンが窮屈になり、見た目もごちゃごちゃします。ヘッダーをシンプルにしたい場合は、電話番号や問い合わせボタンをハンバーガーメニューの中に入れ、メニューを開いたときに目立つ位置に置きます。

ドロップダウンメニューの開き方

スマホにはマウスを乗せる操作がないので、PCのようにマウスを乗せるとドロップダウンメニューが開く仕組みは使えません。

ハンバーガーメニューの中では、項目の横にある矢印や＋のアイコンをタップすると、その項目に入るページが下に開く形にすることが多くなります。項目名をタップしたときに、その項目のページへ移動するのか、中のページを開くのかを決めておかないと、ユーザーが思っていた動きと違って戸惑います。

項目名をタップするとページへ移動し、アイコンをタップすると中のページが開くように役割を分けると、迷わずに使ってもらえます。

スクロールしてもヘッダーを表示するか

スマホのページは縦に長くなりやすく、スクロールして下に進むとヘッダーが画面から消えます。

ヘッダーを画面の上に固定すると、どこまでスクロールしてもハンバーガーメニューを開けるので、ユーザーは別のページへすぐに移動できます。一方、固定したヘッダーは常に画面の一部を使うので、狭いスマホの画面ではページの内容が見える範囲が減ります。

ヘッダーの高さを低くしたり、上にスクロールしたときだけヘッダーを表示したりすると、内容の見やすさとメニューの使いやすさを両立できます。

当社がホームページ制作でヘッダーメニューに入れる項目の決め方

当社がこれまで制作してきたホームページでは、問い合わせを増やしたいという要望を持つ企業が多くを占めます。

そのため、ヘッダーメニューには自社の強みやサービス紹介、実績、お問い合わせなど、ユーザーが問い合わせるかどうかを決めるときに見るページを中心に配置しています。ホームページの目的を確認したうえで問い合わせの判断材料になるページを選び、それ以外のページはフッターで案内する形にしています。

ホームページによっては、ブログをヘッダーメニューに入れるかどうかも判断しています。ブログ記事で専門的な知識や仕事への考え方を伝えていて、ユーザーを説得する要因の1つになっている場合は、ブログもヘッダーメニューに入れます。お知らせに近い内容が中心で、問い合わせの判断に関わらないブログであれば、ヘッダーメニューには入れずにフッターで案内します。

スマホで見たときに、電話番号をハンバーガーメニューの中に入れるかどうかも判断しています。ホームページによっては、電話番号をメニューに入れず、ヘッダーに常に表示するケースもあります。ただし最近は、ヘッダーをシンプルにするために、電話番号をハンバーガーメニューの中に入れることが多くなっています。

まとめ

ヘッダーメニューは、ページをすべて並べるのではなく、ユーザーが探しに来るページと問い合わせにつながるページに絞ることで、ホームページの成果につながる場所になります。

当社では、ホームページの目的に合わせてヘッダーメニューに入れる項目を選び、スマホでの見せ方まで含めて提案しています。メニューの項目は、サイト構成やデザインと合わせて決めていきます。

メニューにどのページを入れればよいか分からない、今のホームページのメニューが分かりにくいといったお悩みがあれば、お気軽にご相談ください。ヒアリングで目的を確認し、御社に合ったホームページ制作をご提案します。