Webサイトの基本構成

ヘッダー (Header)

Webサイトの最上部に表示される部分で、ロゴやナビゲーションメニューなどが配置されます。

ヘッダーは、ユーザーが最初に訪れた際に画面（ファーストビュー）に表示され、また、ユーザーがサイト内を自由に移動できるようにするために重要な役割を担っています。

ナビゲーション (Navigation)

ユーザーがWebサイト内を移動するためのリンクが配置された部分で、通常はヘッダーの下やヘッダーの内部に表示されます。

特定のページにしか表示されないローカルナビゲーションに対して、原則としてすべてのページに表示され包括的なナビゲーションの役割を果たすため「グローバルナビゲーション」ともいわれます。

ナビゲーションは、サイトの構造や内容を分かりやすく表示するために重要です。

コンテンツ (Content)

Webサイトの主要なコンテンツ（情報の内容）が配置される部分で、テキスト、イラスト、画像や動画などが表示されます。
コンテンツは、Webサイトの制作目的やコンセプトに基づいて配置されます。

サイドバー (Sidebar)

コンテンツの横に表示される部分で、関連記事やタグ、検索機能などが配置されます。
サイドバーは、コンテンツを補完する情報を提供するために用いられます。

フッター (Footer)

Webサイトの最下部に表示される部分で、コピーライトやリンク集などが配置されます。
フッターは、サイトの重要な情報やコンテキストを提供するために用いられます。

スマホやタブレットでは画面が小さく縦長になるためパソコン画面のレイアウトとは別のレイアウトになります。ただし、表示する内容は原則的にパソコンと同じ内容を表示し、レイアウトを変更するだけです。

ただし、ナビゲーションについては狭いスマホ画面で表示されるとコンテンツの表示領域が狭くなります。そのためハンバーガーメニューとよばれる三本線のアイコンをクリックするとナビゲーションメニューが表示される仕組みがスマホでの標準的なインターフェイスとして認知されています。

もちろん、スマホでは必ずハンバーガーメニューを採用しなければいけない訳ではなく、サイトの目的やリンクラベルの数など総合的に判断することとなります。

また、パソコン画面ではコンテンツの横に配置されていたサイドバーはコンテンツの下部で表示されることになります。

かつてはパソコンで訪問してきたユーザーにはパソコン専用のURLへ、スマホ（ガラケー）で訪問してきたユーザーにはスマホ専用のURLに誘導していました。

現在は様々な理由からデバイスに応じて複数のURLへ誘導することはなくなり、レスポンシブデザインがWebデザインの標準となりました。