図解で分かる Web の仕組み

URL を入れてから画面に出るまでの 7 つの段階

ブラウザに URL を入れてから Web サイトが画面に出るまでを、DNS・接続・HTTPS・CDN・WordPress・描画の 7 つの段階に分け、動く図で説明します。表示されないときにどこを疑えばよいかも分かります。

ドメイン名から IP アドレスを調べる流れを図で見る

DNS は、example.jp のようなドメイン名を、コンピューターがつながるための IP アドレスに置きかえる仕組みです。キャッシュ DNS サーバーが、ルート・.jp・example.jp の担当と順に問い合わせて答えを見つけるまでを、動く図で説明します。

SSL・TLS で通り道に鍵をかける流れを図で見る

HTTPS は、ブラウザとサーバーのやりとりを TLS（以前の名前は SSL）で暗号にする仕組みです。証明書で相手を確かめ、鍵を取り決めて暗号でやりとりするまでを動く図で説明します。鍵のマークが保証すること・しないことも分かります。

自分で管理する範囲を図で比べる

サイトを置く場所には、レンタルサーバー・VPS・クラウド・Cloudflare などがあります。違いは、サーバーのどこまでを自分で管理するかです。4 つの違いと選び方を、動く図で説明します。

サーバーにつなぐ 3 つの方法を図で比べる

FTP・SFTP・SSH は、どれもサーバーにつなぐ方法ですが、できることと安全さが違います。パスワードが読まれるかどうか、通り道の数、鍵でのログインまで、3 つを並べた動く図で比べます。

記事がページとして表示されるまでの流れを図で見る

WordPress は、データベースに入った記事と、テーマ・プラグインのファイルから、リクエストされるたびにページを組み立てる仕組みです。URL を受け取ってから HTML を返すまでの 7 つの段階を、動く図で説明します。

変更を記録して共有するまでの流れを図で見る

Git は手元のパソコンでファイルの変更を記録する道具で、GitHub はその記録を預かって人と共有するためのサービスです。ファイルを直してから、記録し、GitHub に送り、ブランチを合わせるまでの 7 つの段階を、動く図で説明します。

送信ボタンから相手の受信箱に入るまでの流れを図で見る

メールは、送信ボタンを押すと自分のメールサーバーに渡り、相手のメールサーバーを調べて届けられ、本物かどうか確かめられてから受信箱に入ります。届くまでの 7 つの段階を、動く図で説明します。

Googlebot がページを見つけて登録するまでの流れを図で見る

Google の検索結果に出るページは、Googlebot が見つけて取りに行き、中身を読んで、インデックスという大きなデータベースに登録したものです。URL が見つかってから登録されるまでの 7 つの段階を、動く図で説明します。

質問されてから答えるまでと、AI のロボットの種類を図で見る

ChatGPT や Claude は、質問に答えるためにサイトのページを直接取りに来ることがあります。質問から答えまでの流れと、学習用・検索用・頼まれて読む用の 3 種類のロボット、robots.txt での決め方を、動く図で説明します。