Webサイトの基本構成（レスポンシブデザイン）
その一つがWebサイトの基本構成です。たとえば、家を建てる際にはまず設計図を描き、基礎・支柱・屋根と順に組み上げていくようにWebサイトの制作においても欠かすことのできない基本の構成要素が存在しています。今回は依頼者様にも知っておいていただきたいWebサイトの基本構成についてです。
パソコン画面
Webサイトのレイアウトとして、大きくシングルカラム、2カラム、3カラムの3つになります。WEBサイトが取り扱うページ数など情報量によっても異なりますが、PCサイトでは「2カラムの左or右サイドバー」が一番多いです。サイドバーのないシングルカラムは縦に読ませてコンバージョンに結びつけるランディングページで使われてきた形式ですが、コーポレートサイトなどで採用されることが増えています。また、トップページだけ全画面表示の画像や動画を背景にするケースも多くなっています。
実際には、ヘッダー部分に各ページへのリンク、すなわち「ナビゲーション（グローバルナビゲーション）」を設置するため基本的には以下のような構成になります。
ヘッダー (Header)
Webサイトの最上部に表示される部分で、ロゴやナビゲーションメニューなどが配置されます。
ヘッダーは、ユーザーが最初に訪れた際に画面（ファーストビュー）に表示され、また、ユーザーがサイト内を自由に移動できるようにするために重要な役割を担っています。
ナビゲーション (Navigation)
ユーザーがWebサイト内を移動するためのリンクが配置された部分で、通常はヘッダーの下やヘッダーの内部に表示されます。
特定のページにしか表示されないローカルナビゲーションに対して、原則としてすべてのページに表示され包括的なナビゲーションの役割を果たすため「グローバルナビゲーション」ともいわれます。
ナビゲーションは、サイトの構造や内容を分かりやすく表示するために重要です。
コンテンツ (Content)
Webサイトの主要なコンテンツ（情報の内容）が配置される部分で、テキスト、イラスト、画像や動画などが表示されます。
コンテンツは、Webサイトの制作目的やコンセプトに基づいて配置されます。
サイドバー (Sidebar)
コンテンツの横に表示される部分で、関連記事やタグ、検索機能などが配置されます。
サイドバーは、コンテンツを補完する情報を提供するために用いられます。
フッター (Footer)
Webサイトの最下部に表示される部分で、コピーライトやリンク集などが配置されます。
フッターは、サイトの重要な情報やコンテキストを提供するために用いられます。
スマホ画面
スマホやタブレットでは画面が小さく縦長になるためパソコン画面のレイアウトとは別のレイアウトになります。ただし、表示する内容は原則的にパソコンと同じ内容を表示し、レイアウトを変更するだけです。
ただし、ナビゲーションについては狭いスマホ画面で表示されるとコンテンツの表示領域が狭くなります。そのためハンバーガーメニューとよばれる三本線のアイコンをクリックするとナビゲーションメニューが表示される仕組みがスマホでの標準的なインターフェイスとして認知されています。
もちろん、スマホでは必ずハンバーガーメニューを採用しなければいけない訳ではなく、サイトの目的やリンクラベルの数など総合的に判断することとなります。
また、パソコン画面ではコンテンツの横に配置されていたサイドバーはコンテンツの下部で表示されることになります。
かつてはパソコンで訪問してきたユーザーにはパソコン専用のURLへ、スマホ（ガラケー）で訪問してきたユーザーにはスマホ専用のURLに誘導していました。
現在は様々な理由からデバイスに応じて複数のURLへ誘導することはなくなり、レスポンシブデザインがWebデザインの標準となりました。
レスポンシブデザイン
レスポンシブデザインとは、異なる画面サイズやデバイスに適応できるようにするWebサイトの設計手法のことです。
上記はパソコンとスマホの例でしたが、最大で5つの画面幅（パソコンの横画面、タブレットの縦・横、スマートフォンの縦・横）に応じてそれぞれのデバイスに最適化されたレイアウトで同じ内容が表示できるように設計します。
つまり、ひとつのURLであらゆるデバイスの画面に対応できるようになっています。
レスポンシブデザインは、デバイスの種類や画面の解像度などに応じて、コンテンツのサイズや配置、画像の表示方法などを調整することで実現されます。
また、レスポンシブデザインによって、ユーザーが同じコンテンツを異なるデバイスで閲覧する際に、同じ情報や機能が利用できるため、利便性やアクセシビリティの向上につながります。
レスポンシブデザインは、今日のウェブデザインにおいて非常に重要な設計手法であり、ユーザーエクスペリエンスの向上やSEOの改善などの効果が期待できます。
以上、Webサイトの基本構成となります。ただし、現在のウェブデザインでは、この基本構成に加えて、さまざまな要素が組み合わされることで、より多様で個性的なデザインが生み出されています。
