ホームページを訪れたお客様は、最初の数秒で「このサイトに自分の求めているものがあるか」を判断します。そのとき、ファーストビューの次に目が向くのがナビゲーションメニューです。メニューを見て「料金」「サービス」「問い合わせ」の場所がすぐ分かれば、そのまま読み進めてもらえます。逆にメニュー項目が多すぎたり、ラベルが分かりにくかったりすると、どこを見ればいいか分からないまま離脱されてしまいます。

この記事で分かること
  • ナビゲーション設計がサイトの成果に与える影響
  • メニュー項目の数と優先順位の考え方
  • ラベル(文言)の選び方——伝わる言葉と伝わらない言葉
  • スマートフォン向けハンバーガーメニューの注意点
  • ページ構造(サイトマップ)の設計方法

ナビゲーションが悪いと何が起きるか

訪問者がサイトで迷子になったとき、「探し続ける」ではなく「ページを閉じる」を選ぶことがほとんどです。Googleもこの行動(直帰率・滞在時間)を評価指標として使っているため、ナビゲーションの使いにくさはSEOにも悪影響を与えます。

5〜7項目
ナビゲーションメニューの
適切な項目数の目安
3クリック
お客様が目的ページに
たどり着くまでの理想のクリック数
固定表示
スクロールしても
常にメニューが見える状態が理想

ナビゲーションは「作る側の都合」で設計しがち。「お客様が何を探しているか」から逆算して作ることが、使われるメニューを生む。

メニュー項目の数と優先順位

人間が一度に無理なく把握できる情報量は7±2個と言われています。メニュー項目はこれを目安に、多くても7項目以内に抑えることをおすすめします。項目が多くなるほど「どれを見ればいいか」という判断コストが増え、クリックされにくくなります。

優先
度高

必ず入れるべき項目

「ホーム(トップ)」「サービス・メニュー」「料金」「お問い合わせ」の4つは、ほぼすべてのビジネスサイトで必要です。特に「料金」と「お問い合わせ」は、訪問者が次の行動を決める前に必ず確認するページなので、メニューの中で迷わず見つけられる位置に置きます。

状況
次第

業種・目的によって追加する項目

「実績・事例」「スタッフ紹介・プロフィール」「よくある質問」「ブログ・お知らせ」「アクセス」など、ビジネスの性質に合わせて追加します。ただし「あると便利だから」という理由で項目を増やしすぎると、重要なページが埋もれてしまいます。「このページがメニューにないと困るか」という基準で取捨選択しましょう。

フッ
ター

ヘッダーではなくフッターに置く項目

「プライバシーポリシー」「特定商取引法に基づく表記」「サイトマップ」などの法的・補足的なページは、ヘッダーメニューではなくページ最下部のフッターに置きます。これらはお客様が積極的に探すページではないため、ヘッダーに置くと重要なリンクを圧迫するだけです。

ラベル(文言)の選び方——伝わる言葉、伝わらない言葉

メニューのラベルは、お客様が「ここをクリックすれば何が見られるか」を一瞬で理解できる言葉を選ぶことが大切です。制作側の視点での命名と、お客様の視点での命名は、しばしばずれます。

お客様に伝わりやすいラベル ◎ 伝わりにくいラベル △
サービス内容・メニュー・施術メニュー WORKS・ソリューション・取り組み
料金・料金プラン・価格 PRICE(英語のみで日本語なし)
お問い合わせ・まず相談する CONTACT・コンタクト
よくある質問・Q&A インフォメーション
院長プロフィール・スタッフ紹介 ABOUT・アバウト

英語のラベルはデザイン的にすっきり見える反面、直感的に内容が伝わりにくいことがあります。ターゲットが40〜60代の方や、Webに不慣れな方が多い業種では、日本語ラベルまたは「日本語(英語)」の組み合わせにすることをおすすめします。

スマートフォンのハンバーガーメニューの注意点

スマートフォンでは画面幅が狭いため、メニューを「☰(ハンバーガーアイコン)」に格納して、タップすると開く形式がよく使われます。これ自体は標準的な設計ですが、いくつか注意が必要です。

注意1ハンバーガーアイコンが小さくてタップしにくい
アイコンの大きさは最低44×44pxを確保してください。また、アイコンだけでなく「MENU」という文字を添えることで、初めて見たユーザーにも「ここがメニューだ」と伝わりやすくなります。
注意2メニューを開いたときに「閉じ方が分からない」
メニューを開いた状態で、どこをタップすれば閉じられるかが分かるようにしてください。「✕ボタン」を目立つ位置に置くか、メニュー外をタップすれば閉じられる設計が基本です。
注意3「お問い合わせ」をメニューに隠してしまう
「お問い合わせ」はスマートフォンでもすぐにアクセスできる位置に置くことが重要です。ハンバーガーメニューの中だけでなく、ヘッダーのハンバーガーアイコンの隣にボタンとして固定表示する設計が、問い合わせ率の向上に効果的です。

ページ構造(サイトマップ)の作り方

メニューを設計する前に、サイト全体のページ構造を「サイトマップ」として整理することをおすすめします。どのページがあって、それがどの階層に属するかを可視化することで、メニューの項目と優先順位が自然に決まります。

1
「お客様が知りたいこと」を書き出す

「このサービスは何か」「いくらかかるか」「どんな人が担当するか」「実際に来た人はどう感じたか」「どうやって予約するか」——お客様が知りたい順番に書き出します。これがそのままページの優先順位になります。

2
ページをグループ化して階層を作る

「複数のサービスがある場合はサービス一覧→個別サービスページ」「スタッフが複数いる場合はスタッフ一覧→個別プロフィール」のように、関連するページをまとめて階層化します。階層は2〜3段階までが管理しやすい目安です。

3
ヘッダーメニューに入れる項目を5〜7つに絞る

サイトマップで全ページを洗い出したら、そのうちヘッダーメニューに常に表示すべき最重要ページを5〜7つ選びます。それ以外のページはフッターや各ページ内のリンクで補います。

ナビゲーション設計のチェックリスト

  • ヘッダーメニューの項目が7つ以内に収まっているか
  • 「サービス」「料金」「お問い合わせ」がメニューに含まれているか
  • メニューのラベルが日本語で直感的に内容が分かるものになっているか
  • プライバシーポリシーなどの補足ページがフッターに移動しているか
  • スクロールしてもメニューが常に表示される(固定ヘッダー)になっているか
  • スマートフォンでハンバーガーアイコンが押しやすいサイズになっているか
  • 目的のページに3クリック以内でたどり着けるか確認したか
  • 現在いるページがメニューで分かる「アクティブ表示」があるか