はじめに
目的
この文書は、Webサイトの仕組みをわかりやすく整理したガイドです。基本的な定義から構成要素、階層設計、ユーザーのアクセスの流れ、ブラウザでの表示までを体系的に説明します。初心者がつまずきやすい箇所を丁寧に解説することを目的とします。
対象読者
Web制作をこれから学ぶ方、サイトの仕組みを体系的に理解したい方、担当者やディレクターになりたての方を想定しています。専門的な知識がなくても理解できるように書いています。
本書で学べること
- Webサイトとは何かを日常的な例（ブログ、ECサイト、企業サイト）で理解できます。
- サイトを構成する要素と役割を把握できます。
- ユーザーが訪れる流れやブラウザの動きを追えるようになります。
読み方のヒント
まず第2章から順に読むと全体像がつかめます。実践したい場合は、第7章のサイトマップやワイヤーフレームを参考に自分のサイト案を作ってみてください。
前提と用語
できるだけ専門用語を避けますが、必要な場合は具体例で補足します。予備知識は不要です。安心して読み進めてください。
Webサイトとは何か – 基本定義
概要
Webサイトは単なるページの集合ではなく、目的を持った複数のページやコンテンツがまとまった仕組みです。訪問者が情報を見つけやすいように設計され、企業の紹介やブログ、オンラインショップなど用途に応じた構成になります。具体例を挙げると、製品ページや会社案内、問い合わせフォームが連携して一つのサイトを作ります。
ホームページとの違い
一般にホームページはサイトのトップページを指すことが多いです。対してWebサイトはトップページを含む全体を指します。例えば、会社のトップページがホームページで、その下にある採用情報やサービス詳細ページがWebサイト全体の一部です。
Webサイトの特徴
ページは階層やリンクでつながり、ナビゲーションで案内します。訪問者が目的の情報にたどり着けることを最優先に設計します。運営側は更新や管理のしやすさも考えて構築します。
Webサイトを構成する3つの基本要素
1. ファイル（見た目と中身）
Webサイトはファイルの集合です。代表的なものはHTML（骨組み）、CSS（見た目）、JavaScript（動き）です。たとえばブログ記事ではHTMLが段落や見出しを決め、CSSが文字の色やレイアウトを整え、JavaScriptが写真をクリックで拡大する動作を実現します。画像や動画、フォントもファイルとして含まれます。基本的に「index.html」が入口になることが多いです。
2. サーバー（ファイルの保管庫と配る役）
サーバーはファイルを保管し、訪問者のリクエストに応じてそのファイルを渡します。レンタルサーバーやクラウドサービスを借りて運用します。訪問者がURLを開くと、サーバーが該当するファイルを見つけて送信します。定期的なバックアップや更新、セキュリティ対策もサーバー側で大切です。
3. ドメイン（住所）
ドメインはWebサイトの住所に当たります。例: example.com。人はドメイン名を入力し、DNSという仕組みがその名前をサーバーの実際の住所（IPアドレス）に変換します。ドメインは登録して取得し、サーバーと結び付けて初めて使えます。SSL（https）を設定すると安全に表示できます。
Webサイトの構造設計 – 階層構造の重要性
階層構造とは
Webサイトの階層構造は、木の枝分かれのようにページを整理する方法です。トップページを第一階層とし、その下にカテゴリやセクション（第二階層）、さらに詳細ページ（第三階層）と段階的に配置します。例えば、ECサイトなら「ホーム > メンズ > 靴 > ランニングシューズ」のようになります。
ユーザーへの利便性
階層構造は利用者が目的の情報へたどり着きやすくします。現在位置が分かれば迷わず閲覧を続けられます。パンくずリストは位置を示す代表例で、視覚的に道筋を伝えます。タグは横断的に関連情報へ案内し、コンテクストリンクは文脈に応じた次の行動を誘導します。
設計のポイント
・深さを抑える（理想は2～3階層）
・関連ページをグループ化する
・ナビゲーションラベルは簡潔で具体的にする
・各ページに一意のURLを付ける
これらで訪問者のクリック回数を減らせます。
ナビゲーションの使い分け
グローバルナビはサイト全体の案内、ローカルナビはセクション内の移動に使います。検索機能も用意すると、階層だけでは見つけにくい情報を補えます。
ユーザーがWebサイトにアクセスするまでの流れ
1. URLを入力する
ユーザーがブラウザにURL（例: https://example.com）を入力します。ブラウザはまず入力内容を確認し、履歴やローカルキャッシュに該当データがないか探します。見つかれば、時間を短縮してページを表示します。
2. ドメイン名をIPに変換（DNS）
キャッシュになければ、ブラウザはDNSに問い合わせてドメイン名をサーバーのIPアドレスに変換します。DNSは電話帳のような役割を果たします。最近ではCDNを使うサイトが多く、最寄りの配信サーバーのIPを返すことがあります。
3. サーバーへの接続（TCP/TLS）
IPが分かるとブラウザはサーバーと通信を始めます。多くの場合はTCPで接続し、HTTPSならTLSによる暗号化の手順（鍵交換）を行います。この過程で安全な通信路を確立します。
4. HTTPリクエストを送る
接続後、ブラウザは目的のページを要求するHTTPリクエストを送信します。リクエストにはページのパスやブラウザの情報が含まれます。サーバー側はこの情報を受け取り、処理を行います。
5. サーバーがレスポンスを返す
サーバーはHTTPレスポンスでHTMLを返します。レスポンスにはステータス（例: 200 OK）やヘッダー情報も含まれます。ページに必要なCSSやJavaScript、画像などはHTML内の参照（リンク）で指定されます。
6. リソースの取得と次の段階へ
ブラウザはHTMLを受け取ると、そこから参照されるCSSやJS、画像を順に追加でダウンロードします。これらの取得の順番や並列度が、表示の速さに影響します。ダウンロードが進むとブラウザは内容を解析し、最終的に画面にページを表示します。
補足: キャッシュやCDNの利用、ネットワーク状況、サーバー側の処理速度が全体の時間に大きく影響します。
ブラウザでのレンダリングプロセス
ダウンロードと解析の流れ
ブラウザはサーバーからHTML/CSS/JavaScriptなどのファイルを順に受け取ります。受け取ったデータをそのまま表示するのではなく、段階的に処理していきます。たとえばHTMLを先に解析してページの骨組みを作り、画像は後で読み込むといった表示が可能です。
DOMとCSSOMの構築
HTMLを解析してDOM（文書の構造）を作ります。同時にCSSを解析してCSSOM（スタイル情報）を作ります。DOMとCSSOMを組み合わせるとレンダーツリーができます。レンダーツリーは画面に表示される要素だけを含み、構造と見た目の情報を持ちます。
レイアウト（配置）とペイント（描画）
レンダーツリーをもとに各要素の位置と大きさを計算します（レイアウト）。次にその見た目をピクセル単位で描画します（ペイント）。たとえば文字色や背景、画像の表示などがここで確定します。
合成と最終表示
複数のレイヤーがある場合、ブラウザはそれらを重ね合わせて画面に表示します。アニメーションやスクロールでは特定のレイヤーだけを再描画することで効率を上げます。
JavaScriptの影響とイベント
外部のJavaScriptは解析を一時停止させることがあります。JavaScriptはDOMやCSSOMを変更できるため、変化があると再レイアウトや再描画が発生します。重要なイベントにDOMContentLoaded（DOMが構築された時）やload（全てのリソースが読み込まれた時）があります。
Webサイト制作の計画段階 – サイトマップとワイヤーフレーム
サイトマップの役割
サイトマップはサイト全体の設計図です。ページ同士の階層やつながりを図で示します。たとえば「トップページ→商品一覧→商品詳細→購入手続き」といった流れを可視化できます。制作者と関係者が全体像を共有しやすくなるため、必要なページの漏れや冗長な構成を早期に見つけられます。
サイトマップの作り方（簡単な手順）
- 目的を確認する（何を伝えたいか、何をしてほしいか）。
- 必要なページを洗い出す（お問い合わせ、会社概要、商品一覧など）。
- 階層を決める（主要ページとサブページの関係を整理）。
- 図にする（手書きや図ツールでOK）。
具体例：飲食店サイトなら「トップ」「メニュー」「予約」「アクセス」「店舗情報」「採用」などを並べて、予約はトップからリンクすると分かりやすくなります。
ワイヤーフレームの役割
ワイヤーフレームはページごとの設計図です。見出しや画像、文章、ボタンの位置をざっくり決めます。デザイン前にレイアウトや導線を試せるため、使いやすさを高められます。細かい色やフォントは不要で、構成と優先度に注目します。
ワイヤーフレームの作り方（簡単な手順）
- ページの目的を明確にする（例：商品購入ページなら購入までの導線）。
- 主要要素を決める（見出し、画像、説明文、CTAボタンなど）。
- 優先順位をつける（重要な情報を上部や目立つ位置に）。
- スケッチやツールで作成する（紙でもデジタルでも可）。
具体例：ランディングページなら「キャッチ→商品画像→特徴→お客様の声→CTA」の順で配置します。
実務でのポイント
- 簡易で構いません。早めに作り、関係者と共有してください。
- コンテンツの抜けや重複を防げます。
- テストを行い、使い勝手を確認してから詳細デザインへ進みます。
最低限押さえるべき項目
- サイトマップ：ページ名と階層、主要な導線
- ワイヤーフレーム：各ページの目的、主要コンテンツ、CTAの位置
図は手書きで始めても十分役立ちます。計画段階での手間が、後の修正コストを大きく減らします。
