Webサイトに表示される仕組みとは？
総務省の「令和5年版 情報通信白書」によると、2022年のインターネット利用率は84.9％で、非常に多くの人が利用しています。（出典：令和5年版 情報通信白書｜総務省）
当たり前のように浸透しているインターネットですが、Webサイトが表示される仕組みを理解している人は少ないでしょう。また普段から利用していても「サーバー」や「ドメイン」「IPアドレス」など、耳にはするけれど詳しくは知らないという方もいると思います。
本記事では、Webサイトが表示される仕組みを詳しくご紹介します。これからWebサイトのことを学びたいと考えている方も、改めて単語の意味を学び直したい人も、ぜひ参考にしてください。Webサイトが表示される仕組みやよく聞く単語を知っておくことで、Webサイト作成や運営の際に役立つはずです。
弊社株式会社シフトでは、お客様のWebサイト制作やリニューアルに対する課題や実現したいことをヒアリングする部分に時間をかけておこなっています。そのうえで、経験豊富なディレクターがお客様に合った最適なご提案をさせていただきます。
些細なことからでもまずはご相談ください。
まずは相談してみる
目次
Webサイトとは？
Webサイトとは、同じドメインを持つWebページの集合体です。トップページや事業内容、会社概要と言ったさまざまなWebページがあり、これらはリンクで結ばれています。リンクを辿ることで、ユーザーはWebサイト内を自由に回遊することが可能です。
Webサイトには企業を紹介するコーポレートサイトや、商品・サービスを販売するECサイト、求職者に向けた採用サイトなどさまざまな種類があり、目的によって違うWebサイトが作られます。
たとえば、株式会社シフトのWebサイトは「shift-jp.net」のドメインを持つページが集まったWebサイトで、企業のコーポレートサイトとして機能しています。また、ブログでWebサイトの運用に役立つ情報を発信するオウンドメディアとしての側面もあります。
Webサイトと同じくよく耳にすることが多い「ホームページ」との違いや使い分けなどについても記事がございます。詳しく知りたい方は、下記URLよりご覧ください。
ホームページとWebサイトの違いとは？サイト種別や制作事例もご紹介！
Webサイトを構成する要素は３つ
Webサイトを構成するのは、Webサーバー、ドメイン、ファイルの3つです。このうち、ファイルには複数の種類があります。ここでは、Webサイトを構成するこれらの要素について、詳しく解説します。
Webサーバー
Webサーバーは、Web上にあるデータやシステムを保管しておく場所です。同時に、他のコンピューターから受けたリクエストに応じて、情報やシステムを提供します。
Webサーバーには、自社が占有できる「専用サーバー」、他社と共有する「共有サーバー」、専用サーバーと同じ感覚で利用できる「VPSサーバー」、柔軟性のある「クラウドサーバー」といった複数の種類があります。利用の際は、各サーバーのメリットとデメリットを理解して、Webサイトの規模や予算に合ったものを選びましょう。
たとえば、専用サーバーは自社のみが利用できるサーバーのため、カスタマイズが自由にできます。ほかの利用者による制限も受けず、セキュリティ機能が高いことが特徴です。
ただし、自社でメンテナンスを行う必要があり、コストが高額というデメリットがあります。大規模サイトを運営する際には向いていますが、小規模サイトの場合は採算が合わなくなる可能性が高いため、コストを抑えられる共有サーバーが適しているでしょう。
Webサーバーは自社構築も可能ですが、スキルが必要なうえコストもかかるため、特別な理由がない限りは、レンタルサーバーの利用をおすすめします。
ドメイン
ドメインは、Webサイトやサーバーなどの機器を識別する情報で、いわば「インターネット上の住所」を示したものです。本来Webページは、IPアドレスという数字で判別されていますが、数字の羅列ではわかりにくいことから、ドメインが利用されています。
たとえばこのページが掲載されている株式会社シフトのドメインは「shift-jp.net」です。ドメインによって用途や利用できる国、属性が決まっています。よく利用される「co.jp」というドメインは、日本国内に登記されている企業が利用できるドメインです。「co」はcorporationを「jp」が日本を表しています。
他にも「.com」は商用サービス、「.net」はネットワークサービスと定められていますが、定められた用途以外での使用が禁止されているわけではありません。そのため、用途別のドメインに関しては比較的自由に利用されています。
企業でドメインを取得する場合は、独自ドメインを取得しましょう。独自ドメインとは、自由な文字列を設定できるドメインです。自身がドメインの所有者となるため、半永久的に使い続けることができるうえ、認知度や信頼性の向上にもつながります。自社名やWebサイトの内容がわかりやすいドメインにすると良いでしょう。
ドメインの取得は、お名前.comなどのドメイン取得サービスを利用すれば簡単に行えます。
ファイル
サーバー上にはファイルが格納されます。格納される主なファイルは、HTMLファイル、CSSファイル、素材ファイルの3つです。
HTMLファイル
HTML（Hypertext Markup Language）ファイルは、HTML言語を使って書かれたファイルです。ページの構造やコンテンツの配置などを示しており、Webページの基礎を作っています。
HTMLファイルは、コンテンツにタグで指定を付けたテキストファイルですが、Webサイトで閲覧する際にはタグの内容をブラウザが解釈して表示するようになっています。
CSSファイル
CSS（Cascading Style Sheets）ファイルは、ホームページのデザインを決めるファイルです。文字の色や大きさ、背景、装飾などをCSSファイルで指定しています。
文字の色や大きさ、背景などはHTMLでも反映できます。ただ、Webサイトのデザインを統一したい場合、HTMLで見た目を指定すると、すべてのページで個別に同じ内容を指定する必要が出てきます。この場合、修正も個別に行う必要があるため、非常に手間がかかります。
そこで現代ではCSSファイルを別に作成し、すべてのページにそれを引用するという方法が一般的です。この方法であれば、CSSを修正するだけですべてのページに反映できます。
なお、CSSファイルはHTMLに付随して見た目を指定するファイルのため、メールやテンプレートに添付することはできません。
素材ファイル
サーバーにはHTML・CSSの他に、写真や音楽といった素材ファイルも一緒に保管されます。HTMLで素材ファイルを利用するタグを書き込むことで、Webサイト内に画像を表示したり、音楽をかけたりすることが可能です。素材ファイルは自社で用意することもできますし、画像や音楽を配布・販売しているWebサイトを利用する方法もあります。
素材ファイルを用意する際には、サイズや拡張子に配慮しましょう。サイズが小さすぎると画像や音質が荒くなりますし、大きすぎるとページの表示スピードが遅くなってしまいます。適切なサイズにすることが大切です。
また拡張子にもそれぞれ特徴があります。たとえば、画像ではjpgやpngといった拡張子が利用できますが、jpgはサイズが軽い、pngは背景透過が可能といった特徴があります。これらの特徴を考慮して、適した拡張子を選びましょう。
Webサイトを表示させるための要素
Webサイトは、IPアドレスやブラウザ、DNSなどの要素によって表示されています。ここでは、Webサイトを表示する5つの要素についてご紹介します。
IPアドレス
IPアドレスとは、インターネットに接続するデバイスに割り当てられる番号です。インターネットに接続する際は、IPアドレスを使ってリクエストを送り、サーバーはリクエストのあったIPアドレスに要求されたデータを送付することでページが閲覧できるようになっています。
一般的なインターネットに接続する場合のIPアドレスは「動的IPアドレス」と言い、再接続したり一定時間が経過したりすると、IPアドレスが新たに発行されます。
これまでのIPアドレスは、0～255までの数字を4つ組み合わせた「IPv4」というプロトコルが利用されていました。しかし、インターネットの普及と接続デバイスの増加により、現在は16進数で表された文字列を8つ組み合わせた「IPv6」も利用されています。
ブラウザ
ブラウザとは、Webサイトを閲覧したり、インターネットを利用したアプリケーションを操作したりするためのソフトウェアです。Webサーバーに対してHTTP（s）リクエストを送り、その応答として返されるデータ（HTMLや画像ファイルなど）を指定された形式で表示する役割があります。代表的なものはGoogle ChromeやMicrosoft Edge、Safariなどです。
Stat Counterによると、2023年9月～2024年9月の日本のブラウザシェアは、Google Chromeが56.73％、Safariが23.97％、Microsoft Edgeが12.24％となっています。パソコンなどのデスクトップはGoogle Chromeの利用者が多いようですが、モバイルではGoogle ChromeとSafariの利用者が半々となっています。（出典：Browser Market Share Japan | Star Counter）
DNS
DNSは「Domain Name System」の略で、ドメインとIPアドレスを紐づけるシステムです。
先述したように、IPアドレスは数字の羅列でわかりにくいため、代わりにドメイン名を使ってWebサイトにアクセスします。ただし、ドメインはあくまでわかりやすくするための「表示」であり、実際にサーバーにアクセスする際には、IPアドレスが利用されます。この際に入力されたドメインのIPアドレスを特定するためのシステムがDNSであり、ドメインからIPアドレスへの変換を行うのがDNSサーバーです。
DNSサーバーには、IPアドレスとドメインの対応状態を管理している「権威DNSサーバー」と、よく利用されるドメイン名とIPアドレスの情報を一時的に保存し、迅速に応答する「キャッシュDNSサーバー」があります。
ユーザーがWebサイトにアクセスすると、まずキャッシュDNSサーバーがリクエストを処理し、必要に応じて権威DNSサーバーに問い合わせてドメイン名に対応するIPアドレスを取得します。
JavaScript
JavaScriptは、Webページ上で動きのある動作をさせたい場合に使用する言語です。ポップアップ表示や、マウスを重ねると動き出すアニメーションなどはJavaScriptによって作成されています。また動的なWebページだけでなく、Webアプリを作成するのに用いられることもあります。
JavaScriptと名前が似たものに「Java」があります。同じプログラミング言語の一種ですが、こちらはJVM（Java Visual Machine）という仮想マシン専用の言語です。JavaScriptがWebブラウザでの動作を基本としますが、JavaはWebブラウザ以外でのアプリにも利用されています。
HTTP/HTTPS
HTTP/HTTPS（Hypertext Transfer Protocol/Hypertext Transfer Protocol Secure）は、ユーザーとサーバーの情報通信に関するプロトコルです。
ユーザーがWebサイトを閲覧する際に要求するリクエストには、対象ページ以外にも言語や利用しているプロトコルのバージョン、キャッシュなどの情報が含まれています。これに対して的確にレスポンスができるように、リクエスト・レスポンスのルールを定めているのが、HTTP/HTTPSです。ルールに則ることで、Webサイトやページが表示されます。
なお、HTTPは通信内容が暗号化されていません。悪意のあるユーザーが通信内容を盗み出す可能性があります。そのため、個人情報をやり取りするWebサイトでは、安全性を高めるためにSSL/ TLS（Secure Sockets Laye/Transport Layer Security）化された通信を行うのが一般的です。SSL/TLS化された場合、プロトコルはHTTPSを使用します。
Webサイトが表示される仕組み
クリックやURL入力からWebサイトが表示されるのは一瞬ですが、Webサイトを表示するにはサーバーとユーザー間でさまざまなやり取りが行われています。ここでは、URLを打ち込んでからページが表示されるまでの手順をご紹介します。
1. ドメインまたはURLを打ち込む
まずは、Google ChromeやMicrosoft EdgeといったWebブラウザにドメイン、もしくはURLを打ち込みます。これによって「このページを閲覧したい」というリクエストがサーバーに送付されます。
直接ドメインやURLを指定するのではなく、キーワード検索で表示された一覧をクリックしてリクエストを送付する場合もあります。
2. DNSサーバーにアクセス先のIPアドレスを問い合わせる
リクエストが送付されたら、ブラウザはDNSサーバーに問い合わせを行い、ドメイン名に対応するIPアドレスを取得します。
DNSサーバーは複数ありますが、最も近いサーバーがIPアドレスの受取役となります。受取役となったDNSサーバーはリクエストされたドメインと対応するIPアドレスの場所を問い合わせ、返答があった場所に受け取りに行き、ユーザーにレスポンスします。
3. Webサーバーにアクセスして必要なページデータを要求
IPアドレスを取得したら、IPアドレスを利用してWebサーバーに必要なデータをリクエストします。この際に利用されるのが先述したHTTP/HTTPSというプロトコルで、これに則ったリクエストのことを「HTTP/HTTPSリクエスト」と呼びます。
HTTP/HTTPSは、ステートレス（アクセスするデバイスや状況が変わっても、単一的な処理を行うこと）であることが大きな特徴で、Webサイトの管理者がデザインやコンテンツを変えない限り、必ず同じURLで同じ表示がされるようになっています。
4. Webサーバーが情報をブラウザに送り、画面に表示される。
最後に、Webサーバーがレスポンスを行って、Webサイトが画面に表示されます。
Webサーバーからブラウザに送られるデータは、HTMLやCSSなどの言語で書かれたものです。表示する際には、ブラウザがレンダリング（言語の指定に基づいて表示を整えること）をして、閲覧しやすいページにしています。JavaScriptを利用している場合も、JavaScriptの指定した動作をするように変換されます。
またCMSを使ってページが動的に生成される場合は、データベース上にあるデータを引き出して組み立てることでページが表示されます。
なお表示についてのデータのやり取りは、複数回行われるのが一般的です。
素早くページを再表示できる「キャッシュ」
Webサイトは先述した方法で表示される仕組みになっていますが、一度閲覧したページを表示する場合は「キャッシュ」が利用され、素早いページ表示が可能です。ここからはキャッシュについて、詳しくご紹介します。
キャッシュとは
キャッシュとは、一度表示したことのあるWebページのデータを一時的に保存することです。特に設定をしなくても、自動で保存されます。
Webページを表示する際には、HTMLやCSS、画像などのデータをダウンロードします。初めてアクセスするページで読み込みに時間がかかった経験がある方もいると思いますが、これはデータのダウンロードに時間がかかっているためです。サーバーやブラウザなど、キャッシュが作成される場所はさまざまです。
一方、再度接続する際にはキャッシュがあるため、ダウンロードの必要がありません。そのため、ページがスピーディに表示されます。加えて、通信をしないことから通信量も節約できるメリットがあります。
Cookieとの違い
キャッシュと似たものに「Cookie」があります。どちらもデータを一時保存する仕組みですが、キャッシュがWebサイトのデータを保存するのに対し、Cookieはアクセスしたユーザーの情報を保存します。
Cookieを利用することで、一度ログインした会員制サイトに再度アクセスした際にログインを省いたり、オンラインショッピングの際に氏名や住所、クレジットカード番号などを自動で入力したりといったことが可能です。
Cookieは便利な反面、セキュリティに配慮しないと悪用される可能性があります。共用のデバイスではCookieを利用しない、利用するデバイスにはロックを確実にかけておくなどの対策が必要です。
キャッシュを利用したサイト表示の流れ
キャッシュを利用した場合、サーバー同士の通信が一部省略されます。これによりスピーディなページの表示が可能です。
省略される通信はキャッシュの種類によって違います。たとえば「DNSキャッシュ」は、DNSサーバーに問い合わせたIPアドレスの情報を一時的に保管する仕組みです。問い合わせを省略することで、サーバーにも負担をかけません。同じドメインを持つWebサイトの別ページに遷移する際に利用されます。
また、DNSキャッシュと同様に広く利用されるのが「ブラウザキャッシュ」です。ブラウザキャッシュは、一度ダウンロードしたHTMLやCSSの情報を保存する仕組みで、Webサーバーとブラウザ間の通信を省略できます。
基本的にこれらのキャッシュを利用すると、サーバーとの通信が必要なくなり、Webページの表示が速くなります。DNSキャッシュ、ブラウザキャッシュ両方を利用した場合のページ表示は、以下のような流れです。
- ブラウザにドメインやURLを入力する
- DNSキャッシュが保存しているIPアドレスがレスポンスされる
- レスポンスを元に、ブラウザキャッシュが保存しているデータを表示する
また、DNSキャッシュのみを利用する方法もあります。その場合、ページを表示する流れは以下のようになります。
- ブラウザにドメインやURLを入力する
- DNSキャッシュが保存しているIPアドレスがレスポンスされる
- レスポンスを元にWebサーバーにページのデータを要求する
- リクエストに応じて、Webサーバーからデータがレスポンスされる
DNSキャッシュにはサーバー管理者が指定している保持期間があり、保持期間が過ぎれば古い情報は削除されます。ただし、保持期間が長いとIPアドレスの情報が古いまま長期間保持されてしまいます。
またブラウザキャッシュも、蓄積されることで表示速度が遅くなったり、削除されずにいた古いデータを表示したりすることがあります。DNSキャッシュは保持期間を短くすることで、ブラウザキャッシュはキャッシュを削除することで、これらの問題に対処可能です。
仕組みを知らなくてもWebサイトが構築・運用できるCMSとは？
Webサイトの仕組みを理解したうえで、Webサイトを思い通りに作成するには、膨大な時間と専門的知識がさらに必要になります。
ただ、仕組みを深く理解していなくても、簡単な操作でWebサイトの構築や運用が簡単にできるCMSを活用している企業様が多くいらっしゃいます。
CMS（コンテンツマネジメントシステム）は、HTMLやCSSなどの専門的な知識を必要とせずに簡単にWebサイトの更新作業を行うことができるシステムです。Webサイトのページ更新を専任担当者だけでなく複数人で頻繁に行う運用をしたい場合はこのCMSの導入がよく検討されます。
CMSについてより詳しく知りたい方は下記記事もあわせてご覧ください。
CMSとは？基礎知識、導入メリットや選定ポイント
株式会社シフトでは、Webの知識がなくてもお客様のやりたいことに合わせたWebサイトのリニューアルや新規構築をご支援いたします。Webサイトの運用効率を上げたい場合には、独自開発のCMS「SITEMANAGE」をカスタマイズし、お客様の独自の運用フローに合わせたサポートが可能です。
Webサイトは制作して終わりではなく、運用が大切だからこそWebサイトの修正や更新の都度制作会社への外注に頼らず、自社内で更新できるような運用を行いましょう。
シフトのCMS「SITEMANAGE」では、複雑な運用フローにも対応可能なカスタマイズを行い、貴社のニーズに最適なWebサイトを提供します。
CMSを利用したWebサイトの構築や運用についてご相談したい方は、下記よりご相談ください。
まずは相談してみる
まとめ
Webサイトは、ユーザーとサーバー間でデータのやり取りを行うことで表示されます。普段利用するユーザーからすると一瞬ではありますが、シンプルかつ高度な仕組みが作られているのです。
Webサイトの仕組みを理解していれば、運営でも役立つ知識となります。CMSなど仕組みを理解しなくても運用ができるシステムもありますので、より詳しく知りたい方は制作会社に相談してみましょう。
この記事をシェア
