BTC:--
ETH:--
BCH:--
XRP:--

カテゴリーが多い場合のディレクトリ構造について

カテゴリーが多い場合のディレクトリ構造について

カテゴリーが複数あり階層もある場合、どのようなディレクトリ構造が見やすいのか調査。

もし、カテゴリーが上記のように数個であればよいのですが、2ndカテゴリー以降が数十のカテゴリーを持つ場合、サイトのディレクトリ構造も複雑になってきます。

一般的なディレクトリ構造

3層カテゴリーがあった場合、一番シンプルなディレクトリ構造は、
・1stカテゴリーの項目を一つクリックすると、2ndカテゴリーに遷移する。
・2ndカテゴリーの中には、2ndカテゴリーの項目が表示されている。
・2ndカテゴリーの項目を一つクリックすると、3rdカテゴリーに遷移する。
・3rdカテゴリーの中に詳細ページのリスト
・3rdカテゴリーの項目を一つクリックすると、詳細ページに遷移する。
という構造です。

メリットとしては、誰もがわかりやすい階層になっているため、遷移でこまることはない。

デメリットとしては、ページ遷移が多くなってしまうことと、ディレクトリーへ遷移しないと、下層カテゴリーに自分の探している項目があるかがわからないことです。また、もしなかった場合は、上のカテゴリーにもどる必要があるので遷移が煩雑になります。

俯瞰しやすい階層化

上記の一般的なディレクトリ構造のデメリットは「次のカテゴリーに何があるかわからない」という部分です。

下層カテゴリーをイメージさせる方法としては、上層ディレクトリで、
・タグ情報を表示する
・下層カテゴリーの一覧を表示する
が考えられます。

タグを使って下層をイメージさせる

タグの表示方法の例は、価格.comのサイトトップです。

パソコンを例にとると、下層にはいくつかのカテゴリー(ディレクトリー)がありますが、ネットワーク機器をまとめて「周辺機器」などで表示したりして、キーワード(タグ)を使ってそのページの内容を表しています。

よく利用されるキーワードを使うことで、下層カテゴリーをイメージしやすくしています。
デメリットとしては、表示されていないキーワードを見落とす可能性があります。

下層カテゴリーのリストを表示する

ウェブページ用のサイトマップ(XMLではない方)的なつくりで下層カテゴリーを全て表示してしまう方法。

例は、amazonのカテゴリーです。

デメリットは、目的外のものも表示されるため、目的のものを探すのが大変です。

項目はすべて表示されているので、ブラウザのページ内検索を使えば、自分の目的とするものを確認できます。

見やすくするのであれば、表示するカテゴリーをいくつかに絞り、最後に「残りのカテゴリーを見る」ボタンを設置します。残りのカテゴリーは、Javascriptなどで表示/非表示できるようにすると、ページ遷移が必要なくなり、一定の視認性を確保できます。

※このYahooページサンプルは、詳細ページですが、このように整頓すると視認性があがります。

メニューを閉じる