この記事は、 「ネットワーク初級編|通信の仕組みをゼロから学ぶ」 の第20回です。
第3章で学んだEthernet、ARP、IP、TCPなどの仕組みをつなげ、 ブラウザにURLを入力してからWebサイトが表示されるまでを一連の流れとして整理します。
Webサイトが表示されるまでの通信を初心者向けに図解
ブラウザにURLを入力してから画面にWebページが表示されるまでには、 DNS、ARP、IP、TCP、TLS、HTTPなど、複数の仕組みが順番に動きます。 この記事では、それぞれの技術がどこで何をしているのかを、1本の通信フローとして解説します。
Webサイトは、URLを入力した瞬間にサーバーからページがそのまま届くわけではありません。 まず接続先のIPアドレスを調べ、次にデータを渡す相手を決め、通信路を確立し、 暗号化の準備を行ってから、ようやくWebページを要求します。
今回は、これまで個別に学んできた仕組みをつなぎ、 「どの技術が、どの順番で、何のために使われるのか」を理解することが目標です。
この記事を読み終えるとできること
- URL入力から画面表示までの流れを説明できる
- DNS・ARP・TCP・TLS・HTTPの役割を区別できる
- MACアドレスとIPアドレスの変化を説明できる
- Webサイトが表示されないときの原因候補を考えられる
最初に結論:Web表示までの全体像
Webサイトは、DNSで接続先を調べ、ARPで次に渡す機器を確認し、 TCPやTLSで安全な通信を準備したあと、HTTPでページを要求することで表示されます。
一般的なHTTPSのWebサイトへ初めてアクセスするとき、通信は大まかに次の4段階で進みます。
Webアクセスの基本構成
重要なのは、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ステップ
-
ブラウザへURLを入力する
利用者がブラウザへ
https://www.example.com/と入力します。 ブラウザはURLから、通信方式、接続先の名前、要求する場所を読み取ります。URLから分かる主な情報
https:HTTPSを利用する
www.example.com:接続先のドメイン名
/:サーバーへ要求するパス -
ブラウザやOSがキャッシュを確認する
ブラウザやOSは、以前に調べたIPアドレスや取得済みのWebデータが残っていないか確認します。
有効なキャッシュがあれば、DNS問い合わせや一部のデータ取得を省略できることがあります。
キャッシュは通信量と待ち時間を減らしますが、この記事では全体の仕組みを理解するため、 必要な情報が残っていない状態として次へ進みます。
-
DNSでドメイン名をIPアドレスへ変換する
コンピューターは
www.example.comという名前だけでは、IPパケットの宛先を決められません。 そこでDNSサーバーへ問い合わせ、Webサーバーへ到達するためのIPアドレスを取得します。例:www.example.com→203.0.113.50
DNSは、人が扱いやすい名前と、通信で使うIPアドレスを対応付ける仕組みです。 -
宛先が同じネットワークか判定する
パソコンは、自分のIPアドレスとサブネットマスクを使い、WebサーバーのIPアドレスが同じネットワークにあるか確認します。
今回のWebサーバーはインターネット上にあるため、別のネットワークだと判定されます。
別ネットワーク宛ての通信は、Webサーバーへ直接送るのではなく、 まずデフォルトゲートウェイであるルーターへ渡します。
-
ARPでデフォルトゲートウェイのMACアドレスを調べる
Ethernetでフレームを送るには、同じLAN内で次に渡す相手のMACアドレスが必要です。
ARPテーブルに情報がなければ、パソコンはARP Requestをブロードキャストし、ルーターのMACアドレスを確認します。
ここで調べるのはWebサーバーのMACアドレスではありません。
Webサーバーは別ネットワークにいるため、パソコンが必要とするのは 「最初の中継先」であるデフォルトゲートウェイのMACアドレスです。 -
Ethernetフレームを作り、ルーターへ送る
パソコンは、Webサーバー宛てのIPパケットをEthernetフレームに入れて送信します。
このときIPアドレスは最終的な通信相手を示し、MACアドレスは同じLAN内で次に渡す相手を示します。
送信元IP:パソコンのIPアドレス
宛先IP:WebサーバーのIPアドレス
送信元MAC:パソコンのMACアドレス
宛先MAC:デフォルトゲートウェイのMACアドレス -
ルーターが経路を選び、インターネットへ中継する
ルーターは受け取ったフレームからIPパケットを取り出し、宛先IPアドレスとルーティングテーブルを確認します。
その後、次の回線で使う新しいフレームへ入れ直し、次のルーターへ転送します。
家庭用ルーターでは、プライベートIPアドレスをインターネット側で使うグローバルIPアドレスへ変換する NAT・NAPTも行われるのが一般的です。
-
TCPの3ウェイハンドシェイクで接続を確立する
WebサーバーへIPパケットを届けられる状態になったら、HTTPS通信に使用するTCP接続を準備します。
クライアントとサーバーはSYN、SYN/ACK、ACKを交換し、双方向に通信できることを確認します。
HTTPSでは通常、Webサーバー側の宛先ポート番号として
443を使用します。 クライアント側は通信ごとに選ばれる一時的なポート番号を使用します。 -
TLSでサーバーを確認し、暗号化を準備する
TCP接続が確立したあと、HTTPSではTLSハンドシェイクを行います。
ブラウザはサーバー証明書などを確認し、通信を暗号化するための情報を合意します。
TLSの主な目的は、通信内容の暗号化、通信相手の確認、データ改ざんの検知です。 URLが
http://であれば、通常はこのTLS処理を行いません。 -
HTTPリクエストを送信し、サーバーが応答する
安全な通信路が準備できると、ブラウザはWebサーバーへHTTPリクエストを送ります。
サーバーは要求内容を処理し、ステータスコード、ヘッダー、HTMLなどをHTTPレスポンスとして返します。
要求の例:
GET / HTTP/1.1
応答の例:200 OKとHTMLデータ
実際にはHTTP/2など別の形式が使われる場合もありますが、役割は同じです。 -
ブラウザが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データが送信されるまで
受信側では逆の処理を行います。Webサーバーのネットワークインターフェース層から順番に情報を外し、 最終的にWebサーバーのアプリケーションへHTTPリクエストを渡します。この処理を非カプセル化と呼びます。
各層は、自分の役割に必要な情報だけを担当します。
HTTPはページの要求、TCPは通信の信頼性とポート番号、IPはネットワークを越える宛先、 Ethernetは同じ区間で次に渡す機器を担当します。
通信中に変わる情報・変わりにくい情報
Webサーバーまで複数のルーターを通るとき、すべての情報が最初から最後まで同じではありません。 特にMACアドレスとIPアドレスの違いを理解することが重要です。
区間ごとに変わる:MACアドレス
MACアドレスは、同じデータリンク区間で「次にどの機器へ渡すか」を示します。 ルーターを越えるたびにフレームが作り直されるため、送信元MACと宛先MACは変わります。
基本的に終点まで使う:宛先IP
宛先IPアドレスは最終的な通信相手であるWebサーバーを示します。 通常のルーティングでは、中継ルーターを通っても宛先IPは基本的に同じです。
NATで変わることがある:送信元IP
自宅のプライベートIPアドレスは、そのままインターネットで使用できません。 家庭用ルーターのNAT・NAPTにより、送信元IPやポート番号が変換されることがあります。
パソコンからルーターへ送る最初の区間
宛先MAC:自宅ルーターのMACアドレス
ルーターから次の機器へ送る区間
宛先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アクセスに関するよくある勘違い
IPパケットの宛先にはIPアドレスを使用します。ドメイン名はDNSによってIPアドレスへ変換されます。
ARPは同じLAN内で使用します。外部サーバー宛ての場合、パソコンは最初の中継先である デフォルトゲートウェイのMACアドレスを調べます。
ルーターは受け取ったフレームを終端し、次の区間用に新しいフレームを作ります。 そのためMACアドレスなどのリンク層情報は区間ごとに変わります。
HTTPSは、HTTPのデータをTLSによって保護して通信する仕組みです。 HTTPとしてページを要求・応答する役割は残っています。
HTMLのほかにCSS、JavaScript、画像などを取得するため、多数の通信が発生することがあります。
DNS、ARP、IP、TCPまたはQUIC、TLS、HTTPなどが連携し、ブラウザが受信データを描画します。
理解度チェック
Webサイトが表示されるまでの流れを理解できたか、5問で確認しましょう。 解答を開く前に、自分で順番と理由を考えてください。
問題1.DNSの主な役割として正しいものはどれですか。
- ドメイン名をIPアドレスへ変換する
- IPアドレスをMACアドレスへ変換する
- Webページを暗号化する
- 通信経路上のすべてのルーターを表示する
解答を見る
DNSは、人が扱いやすいドメイン名と、通信で使うIPアドレスを対応付けます。
問題2.外部のWebサーバーへ通信するとき、パソコンがARPで最初に調べる対象はどれですか。
- WebサーバーのMACアドレス
- DNSサーバーのポート番号
- デフォルトゲートウェイのMACアドレス
- インターネット上のすべてのルーターのMACアドレス
解答を見る
宛先が別ネットワークの場合、パソコンは最初の中継先であるデフォルトゲートウェイへフレームを送ります。
問題3.一般的なHTTPS over TCPで、TCP接続のあとに行う処理はどれですか。
- ARPテーブルを削除する
- TLSで暗号化通信を準備する
- IPアドレスを自動取得する
- サブネットマスクを変更する
解答を見る
TCP接続の確立後、TLSでサーバー証明書の確認や暗号化に必要な情報の合意を行います。
問題4.ルーターを通過するとき、一般的に区間ごとに変わる情報はどれですか。
- Webサーバーのドメイン名
- EthernetフレームのMACアドレス
- HTTPで要求するページのパス
- 宛先WebサーバーのIPアドレス
解答を見る
ルーターは次の区間用にフレームを作り直すため、MACアドレスなどのリンク層情報が変わります。
問題5.次の処理を、一般的なWebアクセスの順番に並べてください。
A:HTTPリクエストを送る
B:DNSでIPアドレスを調べる
C:ARPでデフォルトゲートウェイのMACアドレスを調べる
D:TCPの3ウェイハンドシェイクを行う
E:ブラウザがHTMLを描画する
解答を見る
実際にはTCP接続後、HTTPリクエストの前にTLSハンドシェイクが入ります。 ここでは選択肢に含まれていないため省略しています。
実践演習:通信の情報を読み取ろう
次の構成で、PC-AからWebサーバーへアクセスします。 これまで学んだIPアドレス、MACアドレス、ARP、TCPの知識を使って考えましょう。
演習用ネットワーク
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アドレスを調べますか。
課題2の解答を見る
192.168.1.1
Webサーバーは別ネットワークにいるため、WebサーバーのMACアドレスではなく、 デフォルトゲートウェイのMACアドレスを調べます。
課題3.最初のEthernetフレームを考える
PC-Aからルーターへ送る最初のフレームについて、宛先IPと宛先MACが示す相手を答えてください。
宛先MACが示す相手:__________
課題3の解答を見る
- 宛先IP:最終目的地のWebサーバー
- 宛先MAC:同じLAN内の次の受け渡し先であるルーター
課題4.通信の順番を完成させる
次の空欄へ、DNS、ARP、TCP、TLS、HTTP、ブラウザ描画のいずれかを入れてください。
② ______でデフォルトゲートウェイのMACアドレスを調べる
③ ______で接続を確立する
④ ______で暗号化通信を準備する
⑤ ______でページを要求する
⑥ ______で受信データを画面へ表示する
課題4の解答を見る
- DNS
- ARP
- TCP
- TLS
- HTTP
- ブラウザ描画
課題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分程度で説明してください。
説明例を見る
ブラウザに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章「通信の流れ」の個別記事は完了です。 まとめテストで理解度を確認したあと、第4章ではDNS、DHCP、NAT・NAPT、HTTP・HTTPSなど、 身近なネットワークサービスを一つずつ詳しく学びます。

コメント