ホームページのメニュー構成、どう決める？読む人の用事からつくるページの案内

ホームページのメニューに、会社で使う部署名やサービス名を全部並べる。その前に、見に来る人が何を確かめ、どこまで進みたいかを書き出してみてください。ページを増やすことと、探しやすくすることは同じではありません。

この記事は、複数ページのサイトを準備する会社・店舗の担当者向けです。ページの分類、案内する場所、リンクの呼び方を、一枚の構成メモへまとめます。LPか複数ページかを選ぶ段階なら、先に制作形式の選び方を使えます。

1. ページ名より先に、読む人の「用事」を三つ書く

「会社概要を見てほしい」だけでなく、「初めて取引する人が、運営する事業者を確認する」と書きます。読み手が欲しい答えまで考えると、沿革を先に見せるべきか、事業者名と連絡先を先に案内すべきかを話しやすくなります。

美容・理容やエステ・ネイルなら来店前の選択、士業なら相談分野の確認、飲食・小売なら商品と利用方法、製造や建設・設備なら依頼範囲の確認などが候補です。これは企画の仮例で、実際の需要やGRAVIの顧客実績ではありません。実際に受ける質問があれば、個人情報を除いて種類を参考にします。

2. 「一つの答えに、複数の入口」があってもよい

法人向けの「点検」と「修理」を別々に案内している仮の会社を考えます。どちらのページからも、連絡前に必要な情報を知りたい人がいるかもしれません。共通の相談準備は一か所にまとめ、両方から案内すれば、同じ文章を二重に管理せずに済みます。一方、点検と修理で条件が違うなら、各ページで違いを説明します。

構成図では、ページを囲む箱に「何の答えを持つか」を一行添えます。矢印は全部のリンクを描くのではなく、主要な用事の流れだけにします。社内の組織図と同じ階層にする必要はありません。また、ここでいう構成図は制作相談の資料であり、検索エンジンへ渡すXMLサイトマップとは別です。

ページを分ける判断は、読む目的が違うか、必要な説明を独立して更新するか。短い補足なら同じページの見出しで足りる場合もあります。ページ数や階層の深さに、すべての会社へ通用する固定の正解はありません。

仮の記入例：修理を頼めるか知りたい人の道筋

以下は構成を考えるための架空の例です。実在の会社のサービス条件やGRAVIの制作実績を示すものではありません。

• 用事：手元の機器を修理してもらえるか、連絡前に確かめたい。
• 必要な答え：対象となる機器、対象外の状態、判断に必要な情報。
• 詳しい説明を置くページ：「修理の対応範囲」。事例ページには同じ条件を転記せず、このページへのリンクを添える。
• 次の行動：「相談前に確認すること」で準備する情報を読み、問い合わせへ進む。

この場合、共通メニューは「サービス」、その中の入口は「点検」「修理」、修理ページの次の案内は「相談前に確認すること」と分けられます。対象範囲を見直すときは、元の説明を更新したうえで、そこへ案内するリンク名も今の内容に合っているか確認します。

3. 共通メニュー、本文の案内、フッターを分担する

画面上部の共通メニューは、サイト全体で繰り返し探す入口に使います。サービスの細かな項目はサービス一覧へ、読んだ直後に役立つ説明は本文の近くへ。事業者情報やプライバシーなどの確認先はフッターからも探せるようにします。どれか一か所だけに重要な案内を隠す必要はありません。

• 共通メニュー：主要な用事の入口。項目を増やす前に、既存の分類で見つけられない理由を確かめる。
• ページ内の案内：今読んでいる説明の補足や次の段階。商品詳細から利用条件へ、事例紹介から依頼できる範囲へなど。
• フッター：会社や運営方針、連絡先などを改めて確認する入口。上部へ戻らなくても探せるようにする。

大きな写真や独自の見せ方も、行き先を判断できる名前と組み合わせて活かします。たとえば「私たちの仕事」という言葉を使うなら、「何を頼めるか」を示すサービスの入口と、「どう取り組むか」を伝える事例の入口を区別します。会社らしい呼び方と、初めての人への説明を一緒に考えます。

4. 名前だけで、行き先の違いを説明できるか

「事業紹介」と「サービス」が同じ内容を指すなら、一方をなくす、役割を分ける、短い説明を添えるなどを考えます。社内では通じる愛称を残すときも、初めての人が分かる言葉を近くに置きます。「こちら」だけでなく、進んだ先の情報を示すリンク名が判断材料になります。

制作前でも、紙に候補のメニュー名を書き、「初めて依頼できる範囲を調べたいならどれを選ぶか」と尋ねる確認はできます。正解を先に教えず、選んだ理由を聞いてください。選択が分かれたら、訪問者の理解不足と決めつけず、似た名前や不足する説明を見直します。この手順は提案であり、実施済みの利用者調査ではありません。

5. 最後は、実際のページで用事を終えられるか

構成図で分かりやすくても、スマホでメニューが開かない、選択後に閉じない、今いる場所が分からないなら使いにくさは残ります。制作担当と、クリック・キーボード・狭い画面での操作を確認します。W3Cのメニュー解説では、メニューの構造、ラベル、現在位置を伝える実装を扱っています。

1. トップ以外のページから入っても、必要な説明へ進めるか。
2. リンク名で期待した内容が、移動先の見出しと本文で見つかるか。
3. 前の説明へ戻る方法と、相談したくなったときの連絡先が分かるか。
4. スマホで開く・選ぶ・閉じる・戻るまで操作できるか。

最初の一画面はファーストビューの考え方、表示と操作はスマホ確認リストで分けて確かめられます。構成を変えたことだけで、検索順位や問い合わせが増えたとは判断しません。

次にすること：探しにくい用事を三つだけ持ち寄る

今のURL、見てほしい相手、その人が探す答え、現在のページ名を書き出してください。新規制作なら、公開できるサービスや会社情報の一覧で構いません。全部の原稿を完成させる前に、重複する説明と足りない答えを整理できます。

GRAVIは業種ごとの仕事の伝え方を入口に、ホームページの構成と制作、会社らしい言葉とデザインを考えます。今の構成と、探しにくい用事からご相談ください。機密資料や顧客情報を初回のメモへ含める必要はありません。

参考：W3C WAI・メニューの構造、W3C WAI・意味が分かる見出しとリンク（2026年10月20日確認）。四欄の構成メモと仮例はGRAVIの企画上の提案です。