Webサイトが表示される仕組み|ざっくり理解

コーヒーが置かれたデスク
  1. Web制作コラム
  2. Web制作、デザイン
  3. Web制作の基本
  4. Webサイトが表示される仕組み|ざっくり理解

Webサイトが表示される仕組み|ざっくり理解

画面の裏で、
何が起きてる?

HOW WEB WORKS

「Webサイトって、どうやって表示されているの?」

仕組みをざっくり知ると、制作でつまずきにくくなります。

クリックした次の瞬間、ページが目の前に出てくる。あの数秒の間に、いったい何が起きているのでしょうか——この記事は、Web制作に興味を持ったばかりの方がいちばん最初に読む1本です。読み終わる頃には、サーバー・ドメイン・ブラウザという3つの言葉を自分の口で説明でき、サイトが表示されないときに「どこを見ればいいか」の見当がつくようになります。

先に結論から。Webサイトは、インターネットのどこかに置いてあるデータを、手元のブラウザが取り寄せて組み立てているだけです。魔法でも、天才だけが分かる世界でもありません。順番のある、ただの受け渡しです。

ページが届くまでは、出前の注文と同じ

お腹がすいてお店に電話をかけ、自分の住所を伝えると、厨房で作られた料理が玄関まで届きます。Webページの表示も、これとまったく同じ順番で進みます。あなたが「このページを見たい」とお願いし、サイトの住所をたどって、データを置いてある場所から、手元の画面まで運ばれてくる。違うのは、運ばれてくるのが料理ではなく文字や画像のデータであることと、かかる時間が1秒に満たないことだけです。

ページが届くしくみは、出前の注文とほぼ同じ出前をたのむときWebページを見るときお店に電話して「これください」ブラウザで「このページを見たい」自分の住所を伝えるサイトの住所(ドメイン)を指定厨房で料理を用意するサーバーがデータを取り出す玄関まで届けてもらう画面にページが組み立てられる
注文する・住所を伝える・用意する・届ける。並べてみると同じ形です。

「難しそう」と身構えていた仕組みも、日常の出来事に置き換えると、急に手ざわりが出てきます。専門用語が並んでいるだけで、やっていることは注文と配達です。

登場人物は3つだけ。ブラウザ・ドメイン・サーバー

覚える名前は3つで足ります。ブラウザは、ChromeやSafariのような、ページを開くためのソフト。ドメインは、インターネット上の住所で、名刺やチラシに載っているアドレスの前半部分がこれにあたります。サーバーは、サイトのデータを預かって置いておく、24時間動き続けているコンピューターです。

登場人物は3つだけブラウザ手元でページを開くソフトChrome・Safari などこの先にサーバードメインインターネット上の住所道案内の看板の役目サーバーデータを預かって置くずっと動いているPC
手元のブラウザ、道案内のドメイン、データを預かるサーバー。

この3つは、どれか1つでも欠けるとページは出ません。裏を返せば、表示のトラブルは必ずこの3つのどこかで起きているということです。3つの名前を先に覚えておくと、後で慌てずに済みます。

表示までの4ステップを、順番に追いかける

表示までの4ステップ(1秒に満たない出来事)1住所を入れるサイトの住所をブラウザに渡す2場所を調べるその住所がどのサーバーか照会3データを頼む「このページをください」と送信4組み立てて表示届いた文字と画像を画面に並べる
住所を入れる→場所を調べる→データを頼む→組み立てて表示。

もう少しだけ細かく見ます。①ブラウザにサイトの住所を入れる。②その住所が世界のどのサーバーを指しているのかを照会する(分厚い電話帳を引くような作業です)。③そのサーバーに「このページのデータをください」とお願いする。④返ってきた文字・画像・デザインの指定を、ブラウザが並べて画面に描く。私たちが「ページが開いた」と感じているのは、④が終わった瞬間です。

表示が遅い・出ないとき、どこを疑うか

起きていること疑うところ最初にやること
自分だけ見えない手元のブラウザや回線別の端末やスマホの回線で同じページを開く
誰も見られない・エラー画面サーバーサーバーの管理画面で動いているかを見る
「見つかりません」と出る住所(ドメイン)住所のつづりと、契約の有効期限を確かめる
文字は出るが画像が遅い運んでいるデータの重さ画像1枚のファイルサイズを数字で確かめる

大事なのは、原因を当てることより切り分けの順番を持っていることです。「自分だけか、全員か」をまず確かめる。それだけで、疑う範囲は半分になります。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズは、企業サイトや自社の採用サイトをWordPress(サイトを作って更新するための仕組み)で制作しています。公開日にいちばん息をのむのが、サイトの住所を新しいサーバーに向け直す切り替えの作業です。切り替えの指示を出しても、世界中の「電話帳」が新しい情報に入れ替わるまでには時間差があります。私たちの画面では新しいサイトが見えているのに、依頼主の画面ではまだ古いサイトのまま——こういうことが実際に起こります。

仕組みを知らなければ「失敗した」と青ざめる場面です。でも順番を知っていれば、「いま案内が書き換わっている途中です。数時間で揃いますので、その間はこの画面で確認してください」と、落ち着いてお伝えできます。仕組みを学ぶ理由は、うまく作るためだけではありません。待っている人を不安にさせないためでもあります。

仕組みが分かると、その先にいる人に説明できる

サイトの向こうには、依頼主だけでなく、そのサイトを見に来るお客様がいます。表示が3秒遅いだけで、見に来た人は静かに離れていきます。私たちが読み込みの速さやサーバーの安定を気にするのは、技術者としてのこだわりではなく、せっかく訪ねてくれた人を待たせないためです。仕組みの知識は、その人たちに届けるための道具として使います。

手元の画面(ブラウザ)データの置き場(サーバー)「このページをください」文字・画像のデータが返ってくる
「ください」と頼み、データが返ってくる。この往復がページの正体です。

今日からできる、たった1つのこと

今日からできる、たった1つのこと

スマホを機内モードにして、いつも見ているサイトを1つ開いてみる。

画面には「インターネットに接続できません」と出るはずです。ページはスマホの中に入っているのではなく、遠くのサーバーから毎回取り寄せている——その事実が、10秒で自分の体験に変わります。確かめたら機内モードを戻し、同じページをもう一度開いてください。さっきまで何が届いていなかったのかが、はっきり見えます。

まとめ

Webサイトは、サーバーに預けたデータを、住所をたどってブラウザが取り寄せ、組み立てて表示しているだけ。登場人物はブラウザ・ドメイン・サーバーの3つで、表示のトラブルは必ずこのどこかで起きています。順番が言えるようになると、慌てる回数が減り、待っている人に説明できるようになります。次は「Web制作は何から始める?」で、最初の一歩の決め方を見ていきましょう。私たちCCコミュニケーションズは、この仕組みの説明から始めて、企業サイトの公開までを任されるところまで、一歩ずつ進める環境で仲間を探しています。