Webサイトの基本構造とページの役割が一目でわかる図解を作りました。
独学やWebデザインスクール卒業後の復習用にお役立てください。
初案件を受ける前に必ず確認しておきたい知識です。
Webサイトの構成は階層型である
Webサイトの構成は階層型になっています。
サイトマップと呼ばれるものですね。
多くの場合、第2階層がグローバルナビゲーションとなり、全ページに配置されます。
ページ数が少ない場合は、第2階層までの場合もあります。
目的のページにたどり着くまでのクリック数もここで検討し、理想は1クリック、多くても3クリックまでを目安とします。
Webサイトを構成するページ
Webサイトを構成するページは大きく以下の3つに分けられます。
各ページにはそれぞれ役割があります。
トップページ（第1階層）
トップページはWebサイトの「顔」となる重要なページです。
サイト内の主要ページに誘導する役割があります。
ページ内に配置される代表的なモジュールがヘッダーエリア・コンテンツエリア・フッターエリアです。
基本的にはヘッダーエリアとフッターエリアは全ページ共通して同じデザインになります。
カテゴリページ（第2階層）
ひとつのカテゴリに属する詳細ページを一覧できるページです。
詳細ページへのリンクが主な役割となります。
WordPressではアーカイブページ（カテゴリページ・記事一覧ページ）にあたります。
第2階層以降はパンくずリストと呼ばれるナビゲーションを設けることでユーザーはサイト内のどこにいるかを確認することができます。
詳細ページ（第3階層）
ひとつの事柄について詳しくまとめたページです。
WordPressでは投稿ページにあります。
ユーザーがページを読み終わった後に、他の関連ページへ誘導する工夫やサイトの目的達成のための導線（申込み・問合わせ）の仕込みもポイントとなります。
Webサイトの基本構造とページの役割図解まとめ
ここまでの内容を図解にまとめたものが以下になります。
以上、Webサイトの基本構造とページの役割を説明してきました。
Webサイトの目的やターゲットユーザーによりレイアウトや情報の見せ方は大きく異なります。
次のページでは、それぞれのレイアウトの種類・特徴・メリット・デメリットをまとめます。
