Webサイトが表示されるまでの通信を初心者向けに図解

ネットワーク初級編 20/全32記事

この記事は、 「ネットワーク初級編|通信の仕組みをゼロから学ぶ」 の第20回です。

第3章で学んだEthernet、ARP、IP、TCPなどの仕組みをつなげ、 ブラウザにURLを入力してからWebサイトが表示されるまでを一連の流れとして整理します。

Webサイトが表示されるまでの通信を初心者向けに図解

ブラウザにURLを入力してから画面にWebページが表示されるまでには、 DNS、ARP、IP、TCP、TLS、HTTPなど、複数の仕組みが順番に動きます。 この記事では、それぞれの技術がどこで何をしているのかを、1本の通信フローとして解説します。

対象レベル Level 1・初級
想定読了時間 約25分
身につく成果 Webアクセスの通信を順番に説明できる
前提知識 IP・MAC・ARP・TCPの基礎
演習環境 ブラウザのみ

Webサイトは、URLを入力した瞬間にサーバーからページがそのまま届くわけではありません。 まず接続先のIPアドレスを調べ、次にデータを渡す相手を決め、通信路を確立し、 暗号化の準備を行ってから、ようやくWebページを要求します。

今回は、これまで個別に学んできた仕組みをつなぎ、 「どの技術が、どの順番で、何のために使われるのか」を理解することが目標です。

この記事を読み終えるとできること

  • URL入力から画面表示までの流れを説明できる
  • DNS・ARP・TCP・TLS・HTTPの役割を区別できる
  • MACアドレスとIPアドレスの変化を説明できる
  • Webサイトが表示されないときの原因候補を考えられる

最初に結論:Web表示までの全体像

全体を一文で説明すると

Webサイトは、DNSで接続先を調べ、ARPで次に渡す機器を確認し、 TCPやTLSで安全な通信を準備したあと、HTTPでページを要求することで表示されます。

一般的なHTTPSのWebサイトへ初めてアクセスするとき、通信は大まかに次の4段階で進みます。

1 接続先を調べる DNSでドメイン名をIPアドレスへ変換する
2 通信経路へ送り出す ARPで次に渡す相手のMACアドレスを確認する
3 安全な通信を準備する TCPとTLSで接続・暗号化を準備する
4 ページを取得して描画する HTTPでデータを受け取り、ブラウザが画面を組み立てる

Webアクセスの基本構成

💻 パソコン ブラウザを操作
📡 ルーター 外部へ中継
🌐 インターネット 複数の機器を通過
🗄️ Webサーバー ページを返す
DNSで場所を調べる → 通信路を準備する → ページを要求する → データを受け取って画面へ表示する

重要なのは、1つのプロトコルだけでWebサイトが表示されるわけではないことです。

DNS、ARP、IP、TCP、TLS、HTTPなどが役割分担し、順番に処理することでWebアクセスが成立します。

今回の通信条件

実際のWebアクセスは、利用する回線、OS、ブラウザ、キャッシュ、Webサーバーの構成によって変わります。 この記事では流れを理解しやすくするため、次の条件を想定します。

パソコン側の条件

  • パソコンは自宅LANへ接続済み
  • IPアドレスとサブネットマスクを取得済み
  • デフォルトゲートウェイを設定済み
  • DNSサーバーのアドレスを設定済み

アクセス先の条件

  • https://www.example.com/へアクセスする
  • 接続先は自宅LANの外部にある
  • 初回アクセスで必要な情報がキャッシュされていない
  • 一般的なHTTPS over TCPの流れを中心にする

キャッシュにDNS結果やWebデータが残っている場合、一部の処理は省略されます。 また、HTTP/3を使う場合はTCPではなくQUICが使われます。これらは後半で補足します。

Webサイトが表示されるまでの11ステップ

  1. ブラウザへURLを入力する 利用者がブラウザへhttps://www.example.com/と入力します。 ブラウザはURLから、通信方式、接続先の名前、要求する場所を読み取ります。
    URLから分かる主な情報
    https:HTTPSを利用する
    www.example.com:接続先のドメイン名
    /:サーバーへ要求するパス
  2. ブラウザやOSがキャッシュを確認する ブラウザやOSは、以前に調べたIPアドレスや取得済みのWebデータが残っていないか確認します。 有効なキャッシュがあれば、DNS問い合わせや一部のデータ取得を省略できることがあります。
    キャッシュは通信量と待ち時間を減らしますが、この記事では全体の仕組みを理解するため、 必要な情報が残っていない状態として次へ進みます。
  3. DNSでドメイン名をIPアドレスへ変換する コンピューターはwww.example.comという名前だけでは、IPパケットの宛先を決められません。 そこでDNSサーバーへ問い合わせ、Webサーバーへ到達するためのIPアドレスを取得します。
    例:www.example.com203.0.113.50
    DNSは、人が扱いやすい名前と、通信で使うIPアドレスを対応付ける仕組みです。
  4. 宛先が同じネットワークか判定する パソコンは、自分のIPアドレスとサブネットマスクを使い、WebサーバーのIPアドレスが同じネットワークにあるか確認します。 今回のWebサーバーはインターネット上にあるため、別のネットワークだと判定されます。
    別ネットワーク宛ての通信は、Webサーバーへ直接送るのではなく、 まずデフォルトゲートウェイであるルーターへ渡します。
  5. ARPでデフォルトゲートウェイのMACアドレスを調べる Ethernetでフレームを送るには、同じLAN内で次に渡す相手のMACアドレスが必要です。 ARPテーブルに情報がなければ、パソコンはARP Requestをブロードキャストし、ルーターのMACアドレスを確認します。
    ここで調べるのはWebサーバーのMACアドレスではありません。
    Webサーバーは別ネットワークにいるため、パソコンが必要とするのは 「最初の中継先」であるデフォルトゲートウェイのMACアドレスです。
  6. Ethernetフレームを作り、ルーターへ送る パソコンは、Webサーバー宛てのIPパケットをEthernetフレームに入れて送信します。 このときIPアドレスは最終的な通信相手を示し、MACアドレスは同じLAN内で次に渡す相手を示します。
    送信元IP:パソコンのIPアドレス
    宛先IP:WebサーバーのIPアドレス
    送信元MAC:パソコンのMACアドレス
    宛先MAC:デフォルトゲートウェイのMACアドレス
  7. ルーターが経路を選び、インターネットへ中継する ルーターは受け取ったフレームからIPパケットを取り出し、宛先IPアドレスとルーティングテーブルを確認します。 その後、次の回線で使う新しいフレームへ入れ直し、次のルーターへ転送します。
    家庭用ルーターでは、プライベートIPアドレスをインターネット側で使うグローバルIPアドレスへ変換する NAT・NAPTも行われるのが一般的です。
  8. TCPの3ウェイハンドシェイクで接続を確立する WebサーバーへIPパケットを届けられる状態になったら、HTTPS通信に使用するTCP接続を準備します。 クライアントとサーバーはSYN、SYN/ACK、ACKを交換し、双方向に通信できることを確認します。
    HTTPSでは通常、Webサーバー側の宛先ポート番号として443を使用します。 クライアント側は通信ごとに選ばれる一時的なポート番号を使用します。
  9. TLSでサーバーを確認し、暗号化を準備する TCP接続が確立したあと、HTTPSではTLSハンドシェイクを行います。 ブラウザはサーバー証明書などを確認し、通信を暗号化するための情報を合意します。
    TLSの主な目的は、通信内容の暗号化、通信相手の確認、データ改ざんの検知です。 URLがhttp://であれば、通常はこのTLS処理を行いません。
  10. HTTPリクエストを送信し、サーバーが応答する 安全な通信路が準備できると、ブラウザはWebサーバーへHTTPリクエストを送ります。 サーバーは要求内容を処理し、ステータスコード、ヘッダー、HTMLなどをHTTPレスポンスとして返します。
    要求の例:GET / HTTP/1.1
    応答の例:200 OKとHTMLデータ
    実際にはHTTP/2など別の形式が使われる場合もありますが、役割は同じです。
  11. ブラウザがHTMLを解析し、画面を描画する ブラウザは受け取ったHTMLを読み取り、画面の構造を作ります。 HTMLからCSS、JavaScript、画像、フォントなどの追加ファイルが指定されていれば、それらも取得します。 必要なデータを組み合わせ、文字、画像、ボタン、レイアウトとして画面へ表示します。
    つまり、最初のHTMLを受け取った時点で通信が完全に終わるとは限りません。 1ページを表示するために、多数の追加通信が発生することがあります。
順番 主な処理 使われる仕組み 分かること・できること
1 URLを読み取る ブラウザ 接続先の名前と通信方式を判断する
2 IPアドレスを調べる DNS ドメイン名から宛先IPを得る
3 次に渡す機器を調べる サブネット判定・ARP デフォルトゲートウェイのMACを得る
4 外部へ転送する Ethernet・IP・ルーティング・NAT インターネット上のサーバーまで届ける
5 接続を準備する TCP・TLS 信頼性のある暗号化通信を準備する
6 ページを要求する HTTP HTMLなどのデータを受け取る
7 画面を組み立てる ブラウザ 受信データを見えるページへ変換する

データは各階層で包まれて送られる

ブラウザが作ったHTTPデータは、そのままLANケーブルやWi-Fiへ流れるわけではありません。 TCP/IPモデルの各層が、通信に必要な情報を付け加えます。この処理をカプセル化と呼びます。

HTTPデータが送信されるまで

アプリケーション層 HTTPリクエストなど、アプリケーションが扱うデータ
トランスポート層 TCPヘッダーを追加し、ポート番号や順序制御の情報を付ける
インターネット層 IPヘッダーを追加し、送信元IPと宛先IPを付ける
HTTPデータ → TCPセグメント → IPパケット → Ethernetフレーム → 電気信号・光・電波

受信側では逆の処理を行います。Webサーバーのネットワークインターフェース層から順番に情報を外し、 最終的にWebサーバーのアプリケーションへHTTPリクエストを渡します。この処理を非カプセル化と呼びます。

各層は、自分の役割に必要な情報だけを担当します。

HTTPはページの要求、TCPは通信の信頼性とポート番号、IPはネットワークを越える宛先、 Ethernetは同じ区間で次に渡す機器を担当します。

通信中に変わる情報・変わりにくい情報

Webサーバーまで複数のルーターを通るとき、すべての情報が最初から最後まで同じではありません。 特にMACアドレスとIPアドレスの違いを理解することが重要です。

区間ごとに変わる:MACアドレス

MACアドレスは、同じデータリンク区間で「次にどの機器へ渡すか」を示します。 ルーターを越えるたびにフレームが作り直されるため、送信元MACと宛先MACは変わります。

基本的に終点まで使う:宛先IP

宛先IPアドレスは最終的な通信相手であるWebサーバーを示します。 通常のルーティングでは、中継ルーターを通っても宛先IPは基本的に同じです。

NATで変わることがある:送信元IP

自宅のプライベートIPアドレスは、そのままインターネットで使用できません。 家庭用ルーターのNAT・NAPTにより、送信元IPやポート番号が変換されることがあります。

パソコンからルーターへ送る最初の区間

宛先IP:WebサーバーのIPアドレス
宛先MAC:自宅ルーターのMACアドレス

ルーターから次の機器へ送る区間

宛先IP:引き続きWebサーバーのIPアドレス
宛先MACなどのリンク層情報:次の区間に合わせて作り直す

「IPアドレスは最終目的地、MACアドレスは次の受け渡し先」と考えると、役割を整理しやすくなります。 ただし、NAT、ロードバランサー、プロキシなどが途中にある場合は、IPアドレスや通信の終端が変わることもあります。

HTML受信後も通信は続く

WebサーバーからHTMLを1つ受け取っただけでは、ページの表示に必要なすべてのデータがそろわないことがあります。 HTMLには、別のファイルを読み込む指示が含まれているからです。

追加で取得される主なデータ

  • CSS:文字色やレイアウト
  • JavaScript:画面の動作や処理
  • 画像:写真、アイコン、図
  • Webフォント:文字デザイン
  • APIのデータ:商品、投稿、ユーザー情報など

別のサーバーへ接続する場合もある

HTML本体、画像、動画、広告、アクセス解析などが、同じサーバーに置かれているとは限りません。 別のドメインから取得する場合、追加のDNS問い合わせや接続処理が発生することがあります。

ブラウザは受け取ったHTMLから画面構造を作り、CSSから見た目を決め、JavaScriptを実行し、画像などを配置します。 この一連の処理を経て、利用者が見られるWebページになります。

HTMLが正常に届いていても、CSSやJavaScript、画像の取得に失敗すると、 「文字だけ表示される」「レイアウトが崩れる」「ボタンが動かない」といった状態になることがあります。

HTTP/3ではTCPを使わない場合がある

ここまで、HTTPS通信を「TCP接続 → TLS → HTTP」の順で説明しました。 これはHTTP/1.1やHTTP/2で一般的な考え方です。

一方、WebサイトとブラウザがHTTP/3へ対応している場合、TCPではなく UDP上で動作するQUICという仕組みが使われます。 QUICは、接続管理、信頼性、暗号化などをまとめて実現します。

方式 主な構成 TCPの3ウェイハンドシェイク
HTTP/1.1・HTTP/2 HTTP → TLS → TCP → IP 行う
HTTP/3 HTTP/3 → QUIC → UDP → IP 行わない

初級段階では、すべてのWebアクセスが必ずTCPを使うと暗記するのではなく、 HTTP/1.1・HTTP/2ではTCP、HTTP/3ではQUIC over UDPを使うと整理すれば十分です。

Webサイトが表示されないときは、どこで止まっているか

Webアクセスの流れが分かると、「Webサイトが表示されない」という現象を段階ごとに分解できます。 原因を最初から1つに決めつけず、どの処理まで成功しているかを確認することが重要です。

停止しそうな段階 主な原因例 起こりやすい症状
端末・接続 LANケーブル未接続、Wi-Fi切断、IP設定不備 多くの通信先へ接続できない
DNS DNSサーバーへ到達できない、名前解決失敗 ドメイン名では開けない
ARP・ゲートウェイ ゲートウェイ設定誤り、ARP解決失敗 同一LAN内は使えても外部へ出られない
ルーティング・回線 経路障害、回線障害、ルーター停止 外部の複数サービスへ到達できない
TCP・ポート ファイアウォール遮断、サーバー待受停止 特定ポートのサービスだけ使えない
TLS 証明書エラー、時刻ずれ、暗号方式不一致 安全な接続ではないという警告が出る
HTTP・Webサーバー サーバーエラー、権限不足、ページ不存在 404、403、500などのエラーが返る
ブラウザ描画 CSS・JavaScript取得失敗、拡張機能の影響 レイアウト崩れ、画面が動かない

HTTPエラーが表示されている場合、ネットワーク通信は途中まで成功している可能性が高いです。

たとえば404 Not Foundが表示されたなら、少なくともWebサーバーからHTTPレスポンスを受け取れています。 「何も通信できていない状態」と「サーバーがエラーを返した状態」は分けて考えましょう。

現場では流れを逆向きに確認することもある

障害調査では、利用者の症状から確認範囲を絞ります。 たとえば「IPアドレスを直接入力すると開けるが、ドメイン名では開けない」なら、DNSを優先して確認できます。

  • 他のWebサイトは開けるか
  • ドメイン名をIPアドレスへ変換できるか
  • デフォルトゲートウェイまで通信できるか
  • 接続先まで経路があるか
  • TCPやTLSの接続が成立するか
  • WebサーバーからどのHTTPステータスが返るか

具体的なコマンドを使った確認方法は、第5章の「Windowsで確認するネットワークコマンド」や 「インターネットにつながらないときの基本切り分け」で詳しく扱います。

Webアクセスに関するよくある勘違い

URLに入力したドメイン名が、そのままパケットの宛先になる

IPパケットの宛先にはIPアドレスを使用します。ドメイン名はDNSによってIPアドレスへ変換されます。

外部のWebサーバーへ送るとき、WebサーバーのMACアドレスをARPで調べる

ARPは同じLAN内で使用します。外部サーバー宛ての場合、パソコンは最初の中継先である デフォルトゲートウェイのMACアドレスを調べます。

ルーターを通ってもMACアドレスは変わらない

ルーターは受け取ったフレームを終端し、次の区間用に新しいフレームを作ります。 そのためMACアドレスなどのリンク層情報は区間ごとに変わります。

HTTPSはHTTPとはまったく別のWeb通信方式である

HTTPSは、HTTPのデータをTLSによって保護して通信する仕組みです。 HTTPとしてページを要求・応答する役割は残っています。

Webサイトは1回の通信だけで表示される

HTMLのほかにCSS、JavaScript、画像などを取得するため、多数の通信が発生することがあります。

複数のプロトコルが役割分担することでWebサイトが表示される

DNS、ARP、IP、TCPまたはQUIC、TLS、HTTPなどが連携し、ブラウザが受信データを描画します。

理解度チェック

Webサイトが表示されるまでの流れを理解できたか、5問で確認しましょう。 解答を開く前に、自分で順番と理由を考えてください。

問題1.DNSの主な役割として正しいものはどれですか。

  1. ドメイン名をIPアドレスへ変換する
  2. IPアドレスをMACアドレスへ変換する
  3. Webページを暗号化する
  4. 通信経路上のすべてのルーターを表示する
解答を見る
正解:A

DNSは、人が扱いやすいドメイン名と、通信で使うIPアドレスを対応付けます。

問題2.外部のWebサーバーへ通信するとき、パソコンがARPで最初に調べる対象はどれですか。

  1. WebサーバーのMACアドレス
  2. DNSサーバーのポート番号
  3. デフォルトゲートウェイのMACアドレス
  4. インターネット上のすべてのルーターのMACアドレス
解答を見る
正解:C

宛先が別ネットワークの場合、パソコンは最初の中継先であるデフォルトゲートウェイへフレームを送ります。

問題3.一般的なHTTPS over TCPで、TCP接続のあとに行う処理はどれですか。

  1. ARPテーブルを削除する
  2. TLSで暗号化通信を準備する
  3. IPアドレスを自動取得する
  4. サブネットマスクを変更する
解答を見る
正解:B

TCP接続の確立後、TLSでサーバー証明書の確認や暗号化に必要な情報の合意を行います。

問題4.ルーターを通過するとき、一般的に区間ごとに変わる情報はどれですか。

  1. Webサーバーのドメイン名
  2. EthernetフレームのMACアドレス
  3. HTTPで要求するページのパス
  4. 宛先WebサーバーのIPアドレス
解答を見る
正解:B

ルーターは次の区間用にフレームを作り直すため、MACアドレスなどのリンク層情報が変わります。

問題5.次の処理を、一般的なWebアクセスの順番に並べてください。

A:HTTPリクエストを送る
B:DNSでIPアドレスを調べる
C:ARPでデフォルトゲートウェイのMACアドレスを調べる
D:TCPの3ウェイハンドシェイクを行う
E:ブラウザがHTMLを描画する

解答を見る
正解:B → C → D → A → E

実際にはTCP接続後、HTTPリクエストの前にTLSハンドシェイクが入ります。 ここでは選択肢に含まれていないため省略しています。

実践演習:通信の情報を読み取ろう

次の構成で、PC-AからWebサーバーへアクセスします。 これまで学んだIPアドレス、MACアドレス、ARP、TCPの知識を使って考えましょう。

演習用ネットワーク

💻 PC-A 192.168.1.10/24
📡 ルーター 192.168.1.1
🌐 インターネット 複数の経路
🗄️ Webサーバー 203.0.113.50
PC-Aのデフォルトゲートウェイ:192.168.1.1
Webサイト:www.example.com
DNS応答:www.example.com → 203.0.113.50

課題1.同一ネットワークか判定する

PC-Aの192.168.1.10/24とWebサーバーの203.0.113.50は、同じネットワークですか。 また、PC-Aは最初にどの機器へデータを渡しますか。

同じネットワークか:______
最初に渡す機器:______
課題1の解答を見る

同じネットワークではありません。

PC-Aは、別ネットワーク宛ての通信をデフォルトゲートウェイである 192.168.1.1のルーターへ渡します。

課題2.ARPで調べる相手を答える

PC-AのARPテーブルに必要な情報がない場合、ARPでどのIPアドレスに対応するMACアドレスを調べますか。

ARPで調べるIPアドレス:__________
課題2の解答を見る

192.168.1.1

Webサーバーは別ネットワークにいるため、WebサーバーのMACアドレスではなく、 デフォルトゲートウェイのMACアドレスを調べます。

課題3.最初のEthernetフレームを考える

PC-Aからルーターへ送る最初のフレームについて、宛先IPと宛先MACが示す相手を答えてください。

宛先IPが示す相手:__________
宛先MACが示す相手:__________
課題3の解答を見る
  • 宛先IP:最終目的地のWebサーバー
  • 宛先MAC:同じLAN内の次の受け渡し先であるルーター

課題4.通信の順番を完成させる

次の空欄へ、DNS、ARP、TCP、TLS、HTTP、ブラウザ描画のいずれかを入れてください。

① ______でドメイン名からIPアドレスを調べる
② ______でデフォルトゲートウェイのMACアドレスを調べる
③ ______で接続を確立する
④ ______で暗号化通信を準備する
⑤ ______でページを要求する
⑥ ______で受信データを画面へ表示する
課題4の解答を見る
  1. DNS
  2. ARP
  3. TCP
  4. TLS
  5. HTTP
  6. ブラウザ描画

課題5.障害箇所を推測する

PC-Aでは他のWebサイトを表示できますが、www.example.comへアクセスすると 404 Not Foundが表示されました。ネットワーク通信はどこまで成功していると考えられますか。

自分の考え:______________________________
課題5の解答例を見る

WebサーバーからHTTPの404 Not Foundを受け取っているため、 DNS、経路、接続、WebサーバーとのHTTP通信は少なくとも一定範囲まで成功していると考えられます。

主な問題は「要求したページがサーバー上に存在しない」「URLが誤っている」など、 Webサーバーまたはコンテンツ側にある可能性が高いです。

自分の言葉で説明する課題

ITを学び始めた人から、「URLを入力すると、なぜWebサイトが表示されるのですか」と聞かれました。 DNS、ARP、TCPまたはQUIC、HTTPという言葉を使い、1分程度で説明してください。

Webサイトが表示されるまでには、まず________________________________。
説明例を見る

ブラウザにURLを入力すると、まずDNSでドメイン名に対応するWebサーバーのIPアドレスを調べます。 宛先が別ネットワークにある場合、パソコンはARPでデフォルトゲートウェイのMACアドレスを確認し、 ルーターへデータを渡します。一般的なHTTP/1.1やHTTP/2ではTCPで接続し、HTTPSならTLSで暗号化を準備します。 その後、HTTPでページを要求し、サーバーから返されたHTMLや画像などをブラウザが組み立てて画面に表示します。 HTTP/3ではTCPの代わりにQUICが使われます。

一字一句同じである必要はありません。 名前を調べる → 次の機器へ渡す → 接続を準備する → ページを要求する → 描画する という流れを説明できれば、この記事の目標は達成です。

まとめ

  • ブラウザはURLから通信方式、ドメイン名、要求するパスを読み取る
  • DNSはドメイン名をWebサーバーのIPアドレスへ変換する
  • 宛先が別ネットワークなら、パソコンはデフォルトゲートウェイへ通信を渡す
  • ARPは同じLAN内で、次に渡す機器のMACアドレスを調べる
  • ルーターは宛先IPとルーティングテーブルを確認してパケットを中継する
  • 一般的なHTTPS over TCPでは、TCP接続後にTLSで暗号化を準備する
  • HTTPでページを要求し、サーバーからHTMLなどのデータを受け取る
  • ブラウザはCSS、JavaScript、画像なども取得し、画面を組み立てる
  • MACアドレスは区間ごとに変わり、宛先IPは通常、最終目的地まで使われる
  • HTTP/3ではTCPではなくQUIC over UDPが使われる

Webアクセスは、1つの技術ではなく、複数のプロトコルと機器が役割分担して成立する通信です。

次の記事:第3章「通信の流れ」まとめテスト

第3章では、OSI参照モデル、TCP/IPモデル、Ethernet、ARP、ICMP、TCP・UDP、 TCPの3ウェイハンドシェイク、Webアクセスの流れを学びました。

次のまとめテストでは、用語の暗記だけでなく、通信順序、構成図、フレームやパケットの情報を読み取れるか確認します。

ネットワーク初級編 20/全32記事

この記事で、第3章「通信の流れ」の個別記事は完了です。 まとめテストで理解度を確認したあと、第4章ではDNS、DHCP、NAT・NAPT、HTTP・HTTPSなど、 身近なネットワークサービスを一つずつ詳しく学びます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次