下層ページの階層構造の作り方【見やすいサイトの特徴】
  • 下層ページの作り方が知りたい!
  • 階層構造はどうしますか?という質問を受けたけれど、何のことかわからない。
  • サイト構造は、どうすればいいの?

こんなお悩みがありましたら、株式会社クロコにご相談ください。

下層ページ関連記事。

下層ページとは?Webサイト設計の基本と注意点

今回の記事では、下層ページの階層構造の作り方をわかりやすく解説します。

下層ページの階層構造とは

2512

下層ページとは、トップページから派生したコンテンツページのことを指します。

「会社概要」や「商品案内」「資料請求」等のページが対象になります。

ページ階層とは

9675

ホームページ全体は、2つの階層で構成します。

トップページが第1階層です。

その他の「商品案内」などのページは、第2階層になります。

階層ごとに、HTMLファイルの配置も異なります。

各フォルダには、「index.html」ファイルが置いてあります。

フォルダの中を案内する目次をindex.htmlと呼んでいます。

ページ階層の数え方

47076

URLで見ると、

「○○.com」が第一階層です。

「○○.com/ww/」は、第二階層です。

ブログやコラムを書いているサイトの場合には、

「○○.com/blog/YY」と、第三階層になります。

つまり、対象の記事が「/」の何番番目にあるのかが階層となります。

見やすいサイト構成図の考え方

85

サイト構成図だと考えると、難しくなるかもしれません。

イメージしやすいのは、サイトではなく、会社の中の組織図でイメージするとわかりやすいです。

組織図とサイト構成図の類似点

09288

企業の中には、部署や課が存在します。

サイトの中にも、会社概要や製品案内があります。

それぞれのファイルがどのカテゴリに属しているのかを考えてみましょう。

Webサイト会社
トップページ社長
会社概要、商品案内部長
アクセス情報、商品Aの概要ページ課長

商品が多くなればなるほど、組織図の下には、係長やリーダーなどが存在するというイメージです。

サイト内にも、その内容の細かい紹介が存在したほうが良いと思えば、下に付け加えていくと構造図がわかりやすいです。

組織の中でも横に繋がりがあるのは、部長クラスではないでしょうか?

つまり、このラインに存在するページは、横のつながりを意識して繋げてあげたほうが、ユーザーにとっても迷わずリンク先を辿っていけるのです。

構造図はユーザーの動線で考える

7792

例えば、新人採用を検討する際には、まずトップページのQRコードを読み込んでもらうとしましょう。

トップページに訪れたユーザーが、会社概要を閲覧します。

会社概要がわかったら、商品一覧を見ます。

商品一覧がわかったら、商品ごとの細かいセールス情報を確認します。

この先は、もっと細かい専門知識になるため、それぞれの下層に存在した構造にしたほうが見やすくなります。

このように、一人の人間がどのような道をたどれば、知りたい情報にたどり着けるのかを考えましょう。

反対に、どのようにすれば、折り返し安いのかを考えてあげると、繋げ方イメージしやすくなります。

失敗しやすいサイト階層の考え方

4375

サイト構造を考える際に、商品Aと商品B、商品Cを繋げようとしていませんか?

もちろん、一つでも多くのページを見ていただきたいという気持ちはわかります。

しかし、この方法が成功するのは、あくまで、同一の商品の場合です。

異なる商品の場合には、商品Aと商品Bを同時に見せる必要はありません。

もし、同時に見せたいと思っているなら、商品一覧のページで開示すればよいのです。

つまり、どこまでの情報を1ページに集約するのかを考えなければいけません。

SEO対策の内部強化

18554

間違ったSEO対策を実施している会社のHPを見ると、以下のような特徴があります。

  • サイドバーにバナーが複数用意されている
  • どのページからも誘導先が多い

一見すると、ユーザーがどのページに訪れた場合でも、いろいろな商品を見せることができるデザインだと思うかもしれません。

しかし、SEO対策で重要なのは、内部リンクの関連性です。

関連性の低いコンテンツと内部リンクでつなぐことは、プラスの評価の対象となりません。

むしろ、ごちゃごちゃして見にくい、使いにくいという違和感を与えてしまうことで、ゆーあーの離脱率が高くなってしまうことがありますので、サイト評価はさらに下がる可能性があります。

内部対策は、無理矢理作り出すものではありません。

実際に、リンクを貼ったほうがユーザーにとって、知りたい情報を簡単に見つけ出すことができると思えるような設計にしましょう。

トップページのメニューが多すぎる

417844

美容外科、美容皮膚科、歯科、整体、整骨などの医療や福祉の分野でのサイト設計に多い課題をご紹介します。

トップページにとにかくメニューをたくさん用意していませんか?

製品Aを見たかった人が、トップページ以外のページから訪問した際に、トップページに戻ったら、何を選べばいいのかわからなくなってしまう構成になっていることが多いです。

重要なのは、「Webに不慣れな方向けに作る」ということ。

「このくらいのメニューなら自分で探せる」と思ってもらえる設計を心がけましょう。

あれもこれも見せたいバーゲンセールコーナーのように仕上げると、ユーザーはめんどくさくなってしまい、離脱してしまうリスクが高まります。

広告を出しているし、SEO対策もやっている。

このような状態であれば、優先すべきメニューを厳選して案内することも大切です。

サイトリニューアルをご検討中の方へ

439613

現状のサイトの何を改善すればよいのかわからない。

ページ数を減らしたいけれど、まとめ方がわからない。

ページ数を増やしたいけれど、どのページと繋げたらよいのかわからない。

こんなお悩みがありましたら、お気軽にご相談ください。

弊社では、現状のサイトの分析、解析に力を入れております。

既存記事やページの内部リンクをしたほうが良いページや現在繋がっているページ同士でも離した方が良いページもあります。

目視とツールを駆使して、最適化を行っております。

診断、解析は、無料で診断を行っております。(ページ数や分析項目の量が多い等によっては、費用が発生いたします)

お気軽にご相談ください。

Twitterでフォローしよう