ホームページの仕組みをやさしく解説【イラスト付き】

みやしも WEB制作
ホームページって一体どういう仕組みになっているの?なぜ見れるの?くわしく教えてください!
お任せ下さい!WEB制作者のみやしもが、ホームページの仕組みを解説してゆきます。イラスト付きで分かりやすいですよ!

上記のとおり今回は『ホームページの仕組み』を解説してゆきます。この記事を読めば、ホームページ基礎的な知識が身につき、使ったり、作ったりするための準備が整えられます。



▼この記事で分かること

  • ホームページの構造
  • ホームページが見れる仕組み
  • ホームページを作る方法
ホームページを表現する言葉には”WEBサイト”もありますが、基本的には同じ意味で使われています。今回は『ホームページ』という言葉で統一して、解説を進めてゆきます。

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

ホームページの構造を知ろう

ホームページの全体像を把握しよう
ホームページの構造を知ろう

ホームページの仕組みを理解するためにも、『ホームページが何で出来ているか?』といったことから把握してゆきましょう。まずはじめに、普段からわれわれが見ている”ホームページの構造”について解説してゆきます。

ホームページ3つの要素

ホームページは、『サーバー』『ドメイン』『ファイル』という3つの要素から構成されています。それぞれの役割は”家を建てること”に例えると分かりやすくイメージできます。

ホームページ3つの要素
ホームページ3つの要素

▼ホームページ3つの要素

①サーバー ホームページの置き場所になる『土地』の役割をもつ存在。”WEBサーバー”とも呼ばれ、一般的にはレンタルサーバーを通して利用できます。
②ドメイン ホームページにたどり着くための『住所』の役割をもつ存在。ドメインは例えば「example.com」のような文字列で表現され、URLの形式で利用されます。
③ファイル ホームページの内容を表す『家』の役割をもつ存在。例えばHTMLやCSS、画像などのファイル、このほかデータベースに保存されたデータ、といったものから形作られています。



実際に家を建てるのと同じで、ホームページにも「土地」や「住所」が必要となりますが、これらの役割はサーバー・ドメインが担っています。なぜ必要かと言うと、サーバー・ドメインがないとホームページをインターネットに公開できず、誰にも見せることができないからです。

そもそも土地や住所がない場所には、誰も訪ねることが出来ません。ホームページにとっての『サーバー』や『ドメイン』は必要不可欠な存在だと言えます。

この上に「家」の役割をもつHTMLなどのファイルが存在することにより、ホームページが成立しています。

まずはこの3つについて、なんとなく存在を知るだけでもOKですよ!

ホームページの構造について

続けて、ホームページの構造を見てゆきましょう。多くのホームページは『WEBページ』のまとまりから出来ています。

▼WEBページとは
WEBページはインターネット上のひとつひとつのページを指す言葉。例えば今見ている画面が1つのWEBページにあたります。

ホームページ・WEBページといった言葉の関係を図に示すと、次のようになります。

ホームページの構造
ホームページの構造

WEBページは『URL』というWEBページの場所を表す文字列とひもづいており、URLを通して目的のページにたどり着ける仕組みです。また通常は、1つのWEBページに対して1つのURLが割り当てられます。

▼URLの形式について
URLは"https://"という文字列とドメインの組み合わせから出来ています。URLにはパス(フォルダ)やファイル名も指定できます。

例)Apple社のHP
https://www.apple.com/
https://www.apple.com/mac/
https://www.apple.com/macbook-pro-13/
はじめに登場した『ドメイン』がインターネット上の住所として利用されていることも分かります。

この上でもホームページは階層構造となっており、何も指定されていないURLで表示される一番最初のページは『トップページ』、それ以降のページは単純にWEBページ、もしくは『下層ページ』と表現されます。

ホームページはひとつひとつの『WEBページ』のまとまりから出来ている。各WEBページには「URL」がひも付けられ、URLを通して目的のWEBページに辿り着くことができる。ホームページは階層構造にもなっており、WEBページは「トップページ・下層ページ」に分類できる。

「WEBページ」は何で出来ている?

今度はホームページに含まれる1つの『WEBページ』に焦点をあてつつ、話を進めてゆきます。WEBページは一般的に、次のものから出来ています。



▼WEBページを作る技術・要素

  • HTML・・・WEBページの『文章構造』を定義する
  • CSS・・・WEBページの『デザイン』を表現する
  • 素材・・・写真、イラスト、フォント、動画などのファイル
  • プログラミング言語・・・WEBページに『動き』や『機能』を与える
  • データベース・・・文章などの情報を保存するための仕組み
上記のなかでも特に重要になるのが『HTML』です。

HTMLはWEBページの”文章構造”を定義するための言語です。主には、WEBページの内容をインターネット通信で伝えたり、コンピューターが理解するために利用されます。原則として、1つのWEBページに対して必ず1枚のHTMLを用意する必要もあります。



▼HTMLで出来ること

  • CSSや画像を組み合わせて自由なデザインにできる
  • ”リンク”を入れてWEBページを繋ぐことができる
  • プログラミング言語を使って様々な機能が追加できる
WEBページには、上記の組み合わせによる多くの制作手法が存在しています。とくにホームページの構築においては、『WordPress(ワードプレス)』と呼ばれるソフトウェアを使った方法が一般的となっています。

ファイルはどこに置かれている?

ホームページのファイルは、『サーバー』と呼ばれる”ホームページ専用の置き場”に置かれています。

サーバーとは

サーバーを簡単に説明するなら、”たくさんの人がアクセスするコンピューター設備のこと”です。サービスの提供やデータの保存をはじめ、多くの目的のために利用されている仕組みです。

特にインターネットの公開に利用されるサーバーは『WEBサーバー』とも呼ばれています。

そんなサーバーは、ホームページにとって次のような役割を持ちます。



▼サーバーの役割

  • ホームページのファイルを設置する場所
  • インターネット上に公開するための手段
自分のPC上に作成したホームページは、そのままでは他の人に見せることが出来ません。インターネットからアクセス可能なサーバーに設置(アップロード)することで初めて公開可能になります。
ホームページにとっての『土地』とも言える存在、それがサーバーです!

ホームページが見れる仕組み

ホームページが見れる仕組み
ホームページが見れる仕組み

ここからは、『ホームページはなぜ見れるのか?』といった点に焦点をあてながら、ホームページが見れる仕組みについて解説を進めてゆきます。

ホームページを表示するまでの流れ

インターネットに公開されているホームページは通常、次の流れを通して見ることができます。

ホームページを表示するまでの流れ
ホームページを表示するまでの流れ

▼ホームページを表示するまでの流れ

  1. WEBブラウザにホームページの『URL』を入力する
  2. WEBブラウザが、URLにひもづく『サーバー』に要求(リクエスト)を出す
  3. サーバーがURLに対応したデータを返す形で応答(レスポンス)を返す
  4. WEBブラウザが受け取ったデータを使ってWEBページを表示させる



上記のポイントは、ホームページの閲覧は 『WEBブラウザ』と『サーバー』の”通信の応酬”によって成立している こと。

イメージするなら”キャッチボール”です。それぞれ対になる関係がいて、初めてやりとりが成立します。

WEBブラウザはURLを通してサーバーに『要求(リクエスト)』をするのに対し、サーバー側では要求に対するデータを返す形で『応答(レスポンス)』します。



基本的にはこの応酬の結果として、任意のWEBページが表示できる仕組みです。

引き続き、WEBブラウザについて解説をすすめてゆきます!

「WEBブラウザ」について

上記にも登場した『WEBブラウザ』とは、パソコンやスマートフォンから利用する、WEBページを閲覧するためのソフトウェアのことです。

単純に”ブラウザ”とも呼ばれ、Googleが開発した『Chrome(クローム)』や、MacやiOSで利用する『Safari(サファリ)』といったソフトが広く一般的です。具体的には、今このページを見ているソフトが『WEBブラウザ』です。

そんなWEBブラウザの仕組みとしては、次のようになります。

WEBブラウザの仕組み
WEBブラウザの仕組み

▼WEBブラウザの仕組み

  1. URLにひもづくサーバーと通信を行い、ホームページのデータを要求する
  2. サーバーから送られてきたデータを使ってWEBページを表現する
サーバーの存在を直接見ることは出来ませんが、あくまでもWEBブラウザは、サーバーと対になって通信する存在です。改めて先ほどの図と照らし合わせてイメージすると、理解しやすいとも思います。
引き続き、「ホームページの仕組み」の理解に役立つ情報を紹介してゆきます!

ホームページの仕組み【補足】

このほかホームページの仕組みを補足する周辺情報をお伝えしてゆきます。

ホームページの気になることは、この記事でぜんぶ解決しちゃいましょう!

サーバー・ドメインの利用方法【レンタルサーバー】

ホームページに必要となるサーバーやドメインは、『レンタルサーバー』というサービスを通して月額1,000円前後の費用感で利用できます。



▼シェア率No.1の人気サーバー

XSERVER(エックスサーバー)


▼サーバー速度に定評がある

ConoHa WING(コノハウィング)


▼格安プランが豊富に選べる

ロリポップ!レンタルサーバー

サーバーやドメインは”買い切り”ではなく、月毎の定額制サービスとなります。このためにもホームページの運用には一定の「ランニングコスト」が発生します。

なぜ買い切りではないかというと、サーバーやドメインに必要な管理をレンタルサーバーが代行してくれるからです。

例えばサーバーは、いつでもホームページが見れるように、”サーバールーム”などの設備で24時間稼働させる必要があります。

個人でのサーバーの所有や管理が難しいことも、レンタルサーバーを利用する理由となります。

言うなればインターネットの『不動産会社』みたいなポジションです。めんどくさい事はレンタルサーバーにお任せしましょう!

超定番の『WordPress』を知っておこう

ホームページの『家』にあたる部分は『WordPress(ワードプレス)』を使った実現方法が一般的だとお伝えさせて頂きました。ここで改めてWordPressについて確認してゆきましょう。

WordPressとは?

WordPressとは、ホームページやブログの構築を目的に開発されたソフトウェアのことです。

ホームページのテキスト・画像などの内容(コンテンツ)を管理できることから『CMS(コンテンツ・マネジメント・システム)』とも呼ばれています。

▼公式サイト

WordPress(日本語)



そんなWordPressの主な特徴としては、次のとおり。



▼WordPressの特徴

  • オープンソースで提供されており『無料』で利用できる
  • ホームページの"土地"にあたる『サーバー』に設置して利用する
  • 「テーマ」を使って、デザインを自由にカスタマイズできる
  • 「プラグイン」を使って、基本機能を拡張できる
  • 専用の管理画面を通して誰でもホームページが編集できる



上記のような機能性・拡張性から人気をあつめ、現在のホームページ制作におけるもっとも標準的な手段となっています。

世界中のホームページは『6割以上がWordPressで構築されている』とも言われており、シェア率の面から見ても人気の高さをうかがい知ることが出来ます。
ホームページ制作といえばWordPress、と言えるほどの超定番ツールです!

ホームページの作り方【おススメ紹介】

これまでのまとめにもなりますが、ホームページは次の方法で構築するのがおススメです。



▼ホームページの作り方

  1. サーバー・ドメイン・・・『レンタルサーバー』を利用する
  2. ホームページ・・・『WordPress』を利用する
もちろん上記が全てではありませんが、情報が探しやすく・できる人が多いといった理由から、初心者におススメできる方法です。

実際に、『ホームページを作りたい』『依頼先を検討したい』といった方には、次の記事もオススメです。

この記事のまとめ

この記事では『ホームページの仕組みを知りたい!』という疑問にお応えするため、イラスト付きで詳しく解説してゆきました。



ホームページ制作のためにも、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WEB制作に関する多くの情報を掲載しています。あわせてご活用くださいませ。



▼関連記事を探す

WEB制作の記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事