ホームページの正しい構成とは？階層と見やすい構成図の作り方

まず始めに、理想的なホームページの構成から確認しましょう。

プロの制作したホームページや企業のホームページ、ブログ等の多くは、次のことに注意して作られています。

ツリー型の構成

多くのホームページは、ツリー型を意識したページ構成になっています。

適当な企業のコーポレートサイトにアクセスしてみるとよくわかるでしょう。

まずトップページがあり、そこから例えば「会社概要」「製品紹介」「サポート」というように、大まかにカテゴリ分けされたページへのリンクがあります。

「会社概要」のページにアクセスすると、そのページからさらに「社長挨拶」「事業所一覧」など、会社にまつわる細かい情報を掲載したページにもアクセスできる仕組みです。

このツリー型の構造には、主に次のメリットがあります。

ユーザーが目的の情報にたどり着きやすい

1番のメリットは、初めてサイトを訪れたユーザーでも、簡単に目的の情報があるページまでたどり着ける点です。

ツリー型では、ページ内のリンクを次々クリックしていくことで、より詳細な情報を得られます。

はっきりと整理された構造なので、どこに何があるか予想をつけやすいのがポイントです。

また、併せて各webページに、統一されたグローバルナビゲーションが表示されるようにしておけば、「会社概要」から別のカテゴリである「製品紹介」にも簡単にアクセスできるので、ユーザーに移動のストレスを感じさせません。

その他、ユーザーが今サイト内のどこを見ているのか、「トップページ＞会社概要＞社長挨拶」といった、いわゆる「パンくずリスト」で可視化しやすいのもツリー型の特徴です。

SEO的にも有利になる

ツリー型構造だと、検索エンジンの巡回で評価してもらいやすいのもメリットです。

クローラーは内部リンクをたどることでページをインデックスに加えます。

ツリー型の構成だとページ内により深い階層へのリンクがあるため、ツリー以外の構造よりもクローラーが他のページの存在や全体的なサイト構造を把握しやすいのです。

また、各ページにはトップページへ戻るためのリンクも入っていることが多いので、結果的にトップページの内部被リンクが多くなります。

よくリンクされているページを評価するクローラーに対して、トップページを評価してもらいやすくなるのがポイントです。

トップページが評価されれば、検索結果で上位表示されやすくなるため、ツリー型構造はSEOに有利と言われています。

下層ページが深すぎない

理想のホームページ構成であるツリー型を活かすためには、下層ページを深くしすぎないことも大切です。

深ければ深いほどユーザーのクリック数が多くなり、途中のページにも戻りにくく、クローラーからも検知されにくくなります。

具体的には、トップページから多くても4階層程度までを意識して構成しましょう。

もちろん、全体のページ数が少ない場合は2層、3層にする手もあります。

仮に8階層にまで及ぶ構造だと、深いところにある情報を得るために、ユーザーはトップページのメニューから7回もクリックしなければなりません

ユーザーはクリックよりスクロールの方がストレスを感じにくいため、階層は増やしすぎず1ページあたりの情報量を増やし、見出しで上手に整理しましょう。

次に、具体的にサイトマップの作り方や、設計の注意点について解説します。
設計はweb制作の土台作りにあたる作業です。
デザインやレイアウト、掲載する文章などを決める前に、必ず綿密に練っておきましょう。

必要なページを書き出す

まずは、ホームページに必要なコンテンツや、盛り込みたいコンテンツをすべてメモに書き出しましょう。

例えば、「トップページ、会社概要、製品紹介、各製品の目次と紹介ページ、サポート、問い合わせフォーム」などです。

サイトをレスポンシブデザインや多言語対応にしたい場合も、この時点で決めておきます。

書き出すにあたっては、ホームページを誰が、誰に対して、どんな目的で作るのかもあらためて意識しておくとよいでしょう。

最終的な目的によって、必要なページはがらりと変わります。

例えば、「資料や見本の請求をしてもらう」のが目的なら、浅い階層に問い合わせフォームだけでなく、簡単に資料請求できるフォームがあると便利です。

また、商品や請求のしかたについて詳しく載っていないと、ユーザーは手間をかけてまで資料請求をする気にはなってくれないので、LPや商品紹介ページ、導入例や「よくある質問」のコーナーなども充実させなくてはなりません。

適当に決めると、成果の出ないwebサイトになってしまいます。第三者も交えてしっかりまとめましょう。

ページをグルーピングする

必要なページの種類や数がわかったら、次はそれをカテゴリ別にグルーピングします。

「会社に関係する情報」「製品に関する情報」「問い合わせやサポートに関する情報」など、大まかで構わないので分けておきましょう。

コンテンツの中には、どれにも属さない内容や、複数のカテゴリにまたがる内容なども含まれることがあります。

その場合は保留として、構造がある程度決まってきてからあらためて、どこに振り分けるか決めるのがおすすめです。

グループごと階層構造を作る

グルーピングできたら、グループごとに情報量や内容、重要度に応じて、ページの上下関係を決めます。

例えば、製品紹介のカテゴリなら各製品の個別紹介ページの上に、目次や全体紹介のページなどを置くのが一般的です。

階層構造を決めていると、書き出したページが実は不要だとわかったり、逆にもう少し詳細なページを用意したくなったりすることがありますが、この段階でそれも含めて構成要素を整理しておくと、今後スムーズに作業できます。

ページ構成全体を確認する

階層構造が決まったら、それをディレクトリマップ（サイトマップ）にまとめてツリー状に配置し、トップページ以下全体の構成を確認しましょう。

メモではなくしっかりとディレクトリマップを作ることで、カテゴリを超えてもページ同士の関係がわかりやすくなります。

各グループごとの情報量やページ数の違いも一目で把握できるので、全体のバランスが取りやすくなるはずです。

第三者に確認してもらう時も、ディレクトリ構造を説明しやすくなるでしょう。

ただし、ページ数が多いほど作るのが大変になり、かえって見にくくなるケースもあります。

例えば同じカテゴリの製品が100個あり、すべて同じひな形のページで紹介したい場合は、階層さえしっかり把握できれば100製品すべてを書き出す必要はなく、省略して構いません。

各ページにURLを設定する

詳細なページ構成が決まったら、あらかじめURLにどんな名前を設定するのかも決めておくとよいでしょう。

ページにどんな名前をつけるかで、検索エンジンからの評価が変わります。

人によっては、例えば各製品の紹介ページにその製品の発売日や発売順から「20210220.html」や「syouhin1.html」など適当な名前をつけることもあります。

しかし、これはSEO的にはとてももったいないことです。

検索エンジンはページの名前からもそのページの内容を推測するようにできているため、ページ名も商品のシリーズ名や型番など、そのページのコンテンツに合わせたものにしましょう。

フォルダ名も「1」「a」など安易につけるのではなく、同じように「support」や「yokohama」などとした方が評価されやすくなります。

名前はシンプルでわかりやすいものがおすすめです。

最後に、ホームページの構成図が上手く作れない、イメージがわかないという人に向けて、作成をサポートするツールをご紹介します。

マインドマップ

マインドマップは、紙の中央に書いた1つの思考から、派生して思い浮かんだことを次々放射状に繋げて書いていく独特の手法です。

アプリでも、手書きでも導入しやすく、初期段階のメモとしても役立つでしょう。

マインドマップ自体が思考整理の手法であるため、整理することを意識して書く必要がありません。

おすすめのソフトは「XMind」です。無料で使用でき、簡単にディレクトリ構成を作ることができます。

エクセル

エクセルを使って整理する方法もあります。

縦軸や横軸を使ってカテゴリ分けし、セルでそれぞれのページを表すのが簡単です。

また、エクセルでは図形描画や色分けもできるので、ページごとに四角い図形や直線などを配置すれば、セルにとらわれない自由な構造図が作れます。

パワーポイント

パワーポイントも、構成図を整理するのに向いています。

構造図を作れる、著作権フリーの無料テンプレートがネット上に出回っているので、作成・整理しやすく、社外の人間へ説明しやすいのがメリットです。

普段、プレゼン資料を作るのと同じ要領で図形を描画し、自動で追加される補助線でページごとの関係を表すとわかりやすいでしょう。

cacoo

「cacoo」という、構造図を作る専門のツールもあります。

簡単な機能なら無料で使えるので、一度使い勝手を確認してみるとよいでしょう。

チームでフォーマットを共有・編集が可能なので、チーム内で構成案を募ったり、それぞれの都合でページを追加・削除したりするのにも便利です。

Google Driveや、Slackとの連携もできます。

構造図に特化した見やすいデザインを複数用意しているため、アイデア段階から本格的な仕上げまで幅広く利用しやすいでしょう。

ホームページ作成にあたっては、ツリー構造を意識しましょう。

デザインやレイアウトなどにこだわる前に、まず構造をしっかり整理しておくことで、その後の作業や依頼をしやすくなります。

必要なコンテンツを書き出し、グループ分けして、実際のホームページ構造にあてはめていくという流れにすれば、誰でも簡単に正しい構成のホームページが作成可能です。

実際に整理するツールとしては、マインドマップや専用ツールの「cacoo」、手元にあるエクセル、パワーポイントを活用しましょう。

構成を含めたホームページ制作すべてを外注したいなら、中小・大手企業500社以上の制作実績をご紹介している「ホームページ制作Lab」もご覧ください。

お客様の要望に合わせたホームページ制作料金プランをご用意し、ホームページを通じた新規見込み客の獲得を確実に実現します。

ホームページ制作Lab TOPページ