会社のホームページの構成の例｜ページの並びとメニューの決め方
ホームページを作る、作り直すとき、最初に決めるのが「どのページを、どう並べるか」というサイトの構成です。構成が決まらないまま原稿や写真を集め始めると、あとからページが増えたり、同じ内容が2つのページに分かれたりして、手戻りが増えます。反対に、構成が固まっていれば、原稿の担当や制作の見積もりもはっきりします。
この記事では、会社のホームページの構成を、規模の違う3つの例で示し、メニュー（ナビゲーション）とページの一番下（フッター）への振り分け方、構成図（サイトマップ）の作り方、URL の付け方とパンくずリストまでをまとめます。各ページに何を載せるかは会社のホームページに載せる項目の一覧で扱っているので、ここではページの並びと見せ方に絞ります。
構成の例（規模別の3つ）
会社の規模や事業の数によって、必要なページの数は変わります。3つの例を示します。
例1：5ページ前後（事業が1つ、まず信頼の確認に使うサイト）
トップ
├ 事業内容
├ 会社概要
├ お問い合わせ
└ プライバシーポリシー取引先や金融機関が「どんな会社か」を確かめるためのサイトです。事業内容のページにサービスの説明と料金の目安、会社概要に代表の挨拶を入れて、ページを増やさずにまとめる形もあります。
例2：10〜15ページ前後（事業が複数、採用や事例も見せるサイト）
トップ
├ サービス
│ ├ サービスA
│ ├ サービスB
│ └ 料金
├ 事例
│ └ 事例の個別ページ
├ 会社案内
│ ├ 会社概要
│ └ 代表挨拶
├ 採用
├ よくある質問
├ お知らせ
├ お問い合わせ
└ プライバシーポリシー中小企業の会社のサイトで最も多いのが、この規模です。サービスが2つ以上あるなら、サービスごとにページを分け、「サービス」の一覧のページから案内します。
例3：20ページ以上（事業部が分かれる、情報を多く出すサイト）
トップ
├ 事業（事業ごとの入口）
│ ├ 事業A（その下にサービスのページ）
│ └ 事業B（その下にサービスのページ）
├ 事例・実績（事業や業種で絞り込める一覧）
├ 会社情報（概要・沿革・拠点・代表挨拶）
├ 採用（仕事の紹介・働く人・募集要項）
├ お知らせ・コラム
├ お問い合わせ（事業ごとの窓口）
└ プライバシーポリシー・サイトの使い方事業ごとに見る人が違う場合は、トップのすぐ下で事業ごとの入口に分けます。ページが増えるほど、階層を深くしすぎないことが大切です。トップから3回のクリック程度で、目的のページにたどり着けるのが目安です。
構成を決めるときは、見る人が確かめたい順を考えます。取引先なら事業内容と会社概要、お客様ならサービス・料金・事例、求職者なら採用と働く人。見る人ごとに、トップから2回ほどで目的のページに届く並びにします。
メニューとフッターへの振り分け
構成が決まったら、ページをどこから案内するかを振り分けます。
| 置き場所 | 置くページ | 考え方 |
|---|---|---|
| メニュー（グローバルナビゲーション。全ページの上部に出る案内） | サービス・事例・会社案内・採用・お問い合わせ | 見る人がよく探すページを5〜7個程度 |
| メニューの中の小見出し（ドロップダウン） | サービスA・B、会社概要・代表挨拶 など | 親のページの下にまとめる |
| フッター（全ページの一番下） | プライバシーポリシー・特定商取引法に基づく表記・サイトマップ・SNS | 必要だが、よく探されるわけではないページ |
| ページの中のボタン | お問い合わせ・資料請求 | 読み終えたところに次の行動を置く |
メニューの決め方のポイントは次のとおりです。
- 言葉は見る人の言葉で：「ソリューション」より「サービス」、「リクルート」より「採用」
- お問い合わせは目立たせる：メニューの右端にボタンの形で置くことが多い
- スマートフォンでの見え方を先に考える：スマートフォンでは、メニューが「≡」のボタンの中にしまわれる。開いたときに縦に並ぶ順番がそのまま優先順位になる
- 同じ種類のページは1つにまとめる：「お知らせ」と「ニュース」と「ブログ」が並ぶような重複を作らない
構成図（サイトマップ）の作り方
制作の打ち合わせで「サイトマップ」と呼ぶのは、多くの場合、上の例のようなページの並びの図（構成図）です。作り方は次のとおりです。
- 載せたいページを書き出す：付箋や表計算ソフトに、思いつくページを全部書く
- まとめる：同じ種類のページをまとめ、親と子に分ける
- 階層を決める：トップを1段目、メニューに並ぶページを2段目、その下を3段目に
- 表にする：1ページ1行で、下のような項目を書く
| ページ名 | 階層 | URL | 載せる内容 | 原稿の担当 | 写真 |
|---|---|---|---|---|---|
| トップ | 1 | / | 会社の一言・サービスの入口・事例の抜粋 | 代表 | 外観・仕事の様子 |
| サービスA | 3 | /service/a/ | 対象・中身・料金・流れ | 営業 | 作業の様子 |
| 会社概要 | 3 | /company/profile/ | 社名・所在地・事業内容 | 総務 | 不要 |
この表は、そのまま原稿と写真を集めるときの管理表になります。原稿の用意の仕方はホームページの原稿の書き方とテンプレートを参照してください。
なお、検索エンジン向けの「XML サイトマップ」は別のもので、サイトのページの一覧を検索エンジンに伝えるファイルです。Google 検索セントラルの説明では、ページ数がおよそ500ページ以下で、すべてのページがサイトの中のリンクでつながっている小さなサイトは、なくても困らない可能性があるとされています。多くの CMS や制作会社は自動で作るので、構成を考える段階で気にする必要はありません。
URL の付け方とパンくずリスト
URL は中身の分かる英語で
ページの URL（アドレス）は、構成の階層に合わせて、中身の分かる短い英語で付けます。Google の SEO スターターガイドでも、見る人の役に立つ言葉を URL に含め、意味の無い番号や記号だけの URL を避けることが勧められています。
- よい例：/service/web-design/、/company/profile/、/recruit/
- 避けたい例：/page-12/、/?p=345、日本語をそのまま使った長い URL
URL は公開した後に変えると、ほかのサイトや名刺・チラシの QR コードからのリンクが切れます。作り直しで URL を変える場合は、古い URL から新しい URL へ転送する設定を一緒に頼みます。手順の全体はホームページリニューアルの進め方にまとめています。
パンくずリスト
パンくずリストは、ページの上部に「トップ ＞ サービス ＞ サービスA」のように、今いるページの位置を示す案内です。階層が3段以上あるサイトでは、見る人が上の階層へ戻りやすくなります。Google 検索セントラルには、パンくずリストを検索エンジンに伝える書き方（構造化データ）の説明もあります。
構成を決める前のチェックリスト
- 見る人（取引先・お客様・求職者など）と、それぞれが確かめたいことを書き出した
- 見る人ごとに、トップから2〜3回のクリックで目的のページに届く
- メニューの項目は5〜7個程度に絞り、見る人の言葉にした
- プライバシーポリシーなど必要なページをフッターに置いた
- 同じ種類のページが重複していない
- 1ページ1行の構成表に、URL・内容・原稿の担当・写真を書いた
- 作り直しなら、古い URL から新しい URL への転送を決めた
まとめ
会社のホームページの構成は、事業が1つなら5ページ前後、事業が複数で採用や事例も見せるなら10〜15ページ前後が目安です。見る人が確かめたい順にページを並べ、よく探されるページをメニューに、必要だが探されないページをフッターに振り分けます。構成表を1ページ1行で作っておくと、原稿集めと見積もりがはっきりします。
Lapisデザインラボでは、ホームページの制作の最初に、ページの構成からご一緒に決めていきます。内容は料金プランをご覧ください。
よくある質問
会社のホームページは、何ページくらいで作ればよいですか。
事業が1つで、まず信頼の確認に使うサイトなら、トップ・事業内容・会社概要・問い合わせ・プライバシーポリシーの5ページ前後から始められます。事業やサービスが複数ある、採用にも使う、事例を見せたい会社は10〜15ページ前後になることが多いです。ページ数は、見る人が確かめたいことに答えるのに必要な数から決めます。
サイトマップの作り方を教えてください。
制作の打ち合わせで使うサイトマップ（構成図）は、トップを頂点に、メニューに並ぶページを2段目、その下のページを3段目として、木の枝のように書き出したものです。表計算ソフトで、ページ名・階層・URL・載せる内容・原稿の担当・写真の有無を1行ずつ書くと、原稿集めの管理表にもなります。検索エンジン向けのXMLサイトマップは別のもので、通常はCMSや制作会社が自動で作ります。
メニュー（グローバルナビゲーション）の項目は、いくつにすればよいですか。
決まった数はありませんが、5〜7個程度に収めると、パソコンで横一列に並び、スマートフォンで開いたときも見渡しやすくなります。見る人が探す順・よく見るページを優先し、会社概要の細かいページやプライバシーポリシーなどは、ページの一番下（フッター）に置きます。