Web構造における階層の例

Webサイトのレイアウト図の横に会社の組織図を配置すると、2つの文書が著しく類似していることがわかります。 企業、政府、その他の団体は、Webサイトと同じ階層レイアウトパターンを使用することがよくあります。 たとえば、企業のCEOは、ホームページがWebサイトモデルの最上位にあるのと同じように、階層モデルの最上位に位置する場合があります。 効果的に設計された階層は、人々が訪れるのが好きなサイトを作成します。

ウェブサイトの構造

「Webスタイルガイド」の著者が述べているように、「あなたのウェブサイトの組織の成功は、あなたのサイトの情報アーキテクチャがあなたのユーザの期待にどれほど一致するかによって大きく左右されます。」簡単にできるようにする1つの方法は、サイトの論理的で予測可能なレイアウトを提供して、訪問者がサイトのヘルプドキュメントを参照せずにWebページを移動できるようにすることです。

ピラミッドアプローチ

それはピラミッドとしてウェブサイトを考えるのを助けるかもしれません。 ピラミッドの一番上には、サイトの最初のレベル、ホームページがあります。 効果的な階層には、一般情報と、より詳細な情報を含む他のWebページを指すリンクが含まれています。 これらのページはホームページの下に表示され、階層内でサイトの2番目のレベルになります。 基本的なサイトには2つのレベルしか必要としないかもしれません、そしてホームページは単に「About Us」、「Products」、「Join」などのページを指すリンクを持っているかもしれません。ホームページを指すすべてのページにリンク、ボタン、またはメニュー項目を含めるなどして、任意のページからホームページにアクセスできます。

レベル3以上

Whitehouse.govは、複雑な階層を形成する複数のレベルを持つサイトの例です。 ホームページはシンプルですが、ホームページからサイト上の他のページにアクセスできます。 このタイプの階層は、下位レベルが上位レベルよりも詳細な情報を提供する、さまざまなレベルにまで及ぶ可能性があります。 3レベルの階層の良い例は書評サイトです。 レベル1のホームページは、レビューページを指すリンクと同様に一般情報を提供するかもしれません。 そのページは2番目のレベルを形成し、本のリストを含むことができます。 本をクリックすると、「戦争と平和」という別のページにその本のレビューが表示されることがあります。 このページはサイトの3番目のレベルに配置されます。 この階層を組織図の作成方法と同じように図表化すると、上部にボックスが描かれ、その中に「Home Page」と表示されます。 その後、「ホームページ」ボックスの下に「レビュー」ボックスを描画し、「ホームページ」ボックスの下に「戦争と平和」ボックスを追加します。

見出しを使用して階層を表示する

Webサイト上のページを整理することに加えて、階層関係を示すためにページのコンテンツを整理することができます。 例えば見出しは、人々が要約しやすい要約形式で情報を提示することを可能にします。 HTMLには、h1、h2、h2などのいくつかの見出しタグが用意されています。これを使用すると、Webページに階層を追加することができます。 たとえば、ページの主見出しとして大きなh1タグを使用し、 "Products"という名前のセクションには小さなh2タグを使用します。 その後、Productsの下にh3タグを追加して、自分の製品を説明するサブセクションを作成できます。 箇条書きリストをページに追加することもできます。 これらすべての要素を組み合わせることで、サイト訪問者が一目でわかる視覚的なアウトラインを作成します。