独学・フリーランス・在宅・SNS疲れのWebデザイナーに
ビジネスの知識が加われば最強。自分の力で生きていけます。

【図解】一目でわかるWebサイトの基本構造とページの役割

【図解】一目でわかるWebサイトの基本構造とページの役割

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴15年のWebデザイナーです。スクール運営 8年目になります。
詳しいプロフィールはこちら

Webサイトの基本構造とページの役割が一目でわかる図解を作りました。

独学Webデザインスクール卒業後の復習用にお役立てください。
初案件を受ける前に必ず確認しておきたい知識です。

Webサイトの構成は階層型である

Webサイトの構成は階層型になっています。
サイトマップと呼ばれるものですね。

Webサイトの構成は階層型。サイトマップ


多くの場合、第2階層がグローバルナビゲーションとなり、全ページに配置されます。

ページ数が少ない場合は、第2階層までの場合もあります。

目的のページにたどり着くまでのクリック数もここで検討し、理想は1クリック、多くても3クリックまでを目安とします。

Webサイトを構成するページ

Webサイトを構成するページは大きく以下の3つに分けられます。

Webサイトを構成するページ
  • トップページ(第1階層)
  • カテゴリページ(第2階層)
  • 詳細ページ(第3階層)


各ページにはそれぞれ役割があります。

トップページ(第1階層)

トップページはWebサイトの「顔」となる重要なページです。
サイト内の主要ページに誘導する役割があります。

Webサイトトップページの役割

ページ内に配置される代表的なモジュールがヘッダーエリア・コンテンツエリア・フッターエリアです。
基本的にはヘッダーエリアとフッターエリアは全ページ共通して同じデザインになります。

カテゴリページ(第2階層)

ひとつのカテゴリに属する詳細ページを一覧できるページです。
詳細ページへのリンクが主な役割となります。

Webサイトカテゴリページの役割


WordPressではアーカイブページ(カテゴリページ・記事一覧ページ)にあたります。

第2階層以降はパンくずリストと呼ばれるナビゲーションを設けることでユーザーはサイト内のどこにいるかを確認することができます。

詳細ページ(第3階層)

ひとつの事柄について詳しくまとめたページです。
WordPressでは投稿ページにあります。

Webサイト詳細ページの役割


ユーザーがページを読み終わった後に、他の関連ページへ誘導する工夫やサイトの目的達成のための導線(申込み・問合わせ)の仕込みもポイントとなります。

Webサイトの基本構造とページの役割図解まとめ

ここまでの内容を図解にまとめたものが以下になります。

Webサイトの基本構造とトップページの役割図解
Webサイトの基本構造とカテゴリ・詳細ページの役割図解


以上、Webサイトの基本構造とページの役割を説明してきました。

Webサイトの目的やターゲットユーザーによりレイアウトや情報の見せ方は大きく異なります。
次のページでは、それぞれのレイアウトの種類・特徴・メリット・デメリットをまとめます。

Webクリエイターズオンラインスクール 学長 フクモトトモコ

【Webクリエイターズオンライン】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴15年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
Photoshop・WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「学んだ事を安定的な収入にする方法」をお伝えしてサポートしています。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。