ホームページの仕組みと構造を解説
web-qualityroad
ホームページ担当になれと言われても、そもそもホームページって何？ Webサイトとどう違うの？
いろいろな用語があるようだけれど、全然わからない。
ホームページは閲覧するだけのものだったのに、Web担当者になってしまった会社員の皆さまや、ホームページを活用して集客したい経営者の皆さまは、多いのではないでしょうか。
そんな皆さまのために、今回は、
- 「ホームページ」と「Webサイト」の違い
- ホームページの構造と3つの要素
- ホームページはWebページの集合体
- Webページを構成する要素と技術
について、解説したいと思います。
「ホームページ」と「Webサイト」の違い
本題に入る前に、まずはざっくりと、「ホームページ」と「Webサイト」の違いを説明します。
結論から言うと、「ホームページ」と「Webサイト」は、世間では同じ意味で使われています。
とはいえ、本来の意味では違いがあります。
「ホームページ」とは、インターネットを利用する際に、
- EdgeやGoogle Chrome、safariといったブラウザを立ち上げた際に最初に見られる画面。
あるいは、
- Webサイトを開いた時に最初に見られる画面(＝トップページ)
のことです。
では「Webサイト」はどうでしょうか。
「Webサイト」は、今まさに皆さまが閲覧しているものになります。
このページは、株式会社クオリティロードのWebサイトの中のWebページということになります。
この記事では「ホームページ」という表記で記事を書いていくことにします。
先ほども書きましたが、「ホームページ」と「Webサイト」は、基本的には同じ意味で使われています。
ご了承ください。
ホームページの構造と3つの要素
では、ここからが本題。
ホームページの仕組みを解説するにあたり、まずは、
ホームページは何でできているか
からスタートし、ホームページの構造について解説したいと思います。
サーバーとドメインとファイル
ホームページは「サーバー」「ドメイン」「ファイル」という3つの要素から構成されています。
この3つの要素は、家を建てることや、テナントビルに出店することに例えて説明されることが多いようです。
サーバーとは
サーバーとはネットワーク上での「データの保管庫」のこと。
家を建てることに例えると、ホームページの置き場所になる「土地」の役割。
テナントビルに出店することに例えると、「ビルの建物」の役割。
サーバーは「Webサーバー」とも呼ばれ、一般的には、ユーザーはレンタルサーバーを通して利用することが多いです。
このWebサーバーには、Webページを作成する上で必要である、
- 文字データを記録したテキストファイルの一種で、HTML（Hypertext Markup Language）で内容が記述されたHTMLファイル
- Webページの文字の色や大きさ、背景、配置といったスタイル(見た目)を設定している言語cssファイル
- 画像の情報をデジタル形式で処理を行い、ビットマップ形式(ドットの集合)のデータとしてファイル化された画像ファイル
などが納められています。
これらのデータを、ユーザーのパソコンやスマートフォンに提供する役割を、サーバーは担っています。
サーバーは、
- データの保管。
- ネットワーク経由でリクエスタがあった際に、必要なデータを保管庫から取り出し、ユーザーに提供する。
上記の2つの役割を果たしています。
ドメインとは
ドメインとは、家を建てることに例えると、ホームページにたどり着くための「インターネット上の住所」のこと。
テナントビルに出店することに例えると、「出店するお店の正式な名前」の役割。
ホームページがどこにあるかを判別する情報として利用します。
ホームページがどこにあるかを判別する情報なので、完全に同じ別のドメインは存在しません。
例えば、https://web-qualityroad.com/というURLがありますが、このURLの「web-qualityroad.com」の部分がドメイン名を表します。
ブラウザにURLを打ち込み、「インターネット上のこの場所の情報を表示して」と指示することで、サーバーから情報が送られ、ホームページが閲覧できるようになります。
ファイルとは
ファイルとは、家を建てることに例えると、ホームページの内容を表す「家」の役割。
- HTMLやCSS
- 画像などのファイル
あるいは、
- データベースに保存されたデータ
のことで、これらのファイルでホームページが形作られています。
インターネット上の「住所(＝ドメイン)」の「土地(＝サーバー)」に「家(＝ファイル)」が建っているイメージでよろしいかと思います。
まずは「サーバー」「ドメイン」「ファイル」という3つの要素の存在を、知るだけでも大丈夫です。
ホームページはWebページの集合体
多くのホームページは、Webページの集合体でできています。
Webページとは、インターネット上のブラウザで閲覧可能な、ページ単位の文書のこと。
現在、皆さまが見ているこのページも、一つのWebページに該当します。
Webページは「URL」というWebページの場所を表す文字列とひもづけられています。
そのため、URLを通して目的のWebページにたどり着ける仕組みになっています。
通常の場合、1つのWebページに対して1つのURLが割り当てられています。
URLの形式は、"https://"というプロトコルの文字列と"www"というサブドメインの文字列と、ドメインの組み合わせから出来ています。
("www"は、省略されることもあれば省略されないこともあります。"www"のありなしは、それぞれメリット・デメリットがあるようです)
例えば、クオリティロードWeb制作チームのホームページの場合、以下のようなURLを設定しています。
- 「トップページ」は「https://web-qualityroad.com/」
- 「お客さまの声」は「https://web-qualityroad.com/customer_comments/」
- 「当社の強み」は「https://web-qualityroad.com/speciality/」
URLでは、ファイルやパス(フォルダ)も指定できます。
「お客さまの声」「当社の強み」ページのURLでは、まずはトップページのドメイン「web-qualityroad.com」が来て、そのあとに、それぞれのページ名が来ています。
これは、ホームページが階層構造になっていて、「インターネット上の住所」であるドメイン「web-qualityroad.com」のみの場合は、そのページがトップページ。
それ以降の下層にあるページは、シンプルにWebページと呼ばれています。
Webページを構成する要素と技術
では、そのWebページはどのようなもので構成されているでしょうか。
一般的には、以下のもので構成されています。
HTML
「ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)」のことで、Webページを作成するための言語。
主にページ内の情報を構造化し、見出し、本文、サイドバーなどを明確化する目的で使用します。
「リンク」を入れればWebページを繋ぐことができ、cssや画像を組み合わせれば自由なデザインが表現でき、プログラミング言語を使えばいろいろな機能を追加できます。
css
HTMLをデザインする言語。
HTMLで文書構造を示し、cssでそのデザインを指定します。HTMLのタグに組み込まれたスタイル属性の指定をブラウザが読み取り、cssの指示に沿ってさまざまな装飾を行うことで、Webページのデザインを表現します。
素材
写真、イラスト、フォント、動画などのファイルことです。
プログラミング言語
JavaScript、PHPなどのプログラミング言語のことで、Webページに動きを与えたり、機能を与えたりすることができます。
データベース
Webブラウザを用いて、データの管理（検索・参照・登録・更新）とデータベースそのもの(テーブルなど)の作成などができるアプリケーションです。
「Webデータベース」「WebDB」とも呼ばれています。
Webページでは、上記の要素や技術の組み合わせで構成されています。
これらのファイルはすべて、すでに解説した「サーバー」に格納されています。
用語のまとめ
- 「ホームページ」と「Webサイト」は、世間では同じ意味で使われている。
- 厳密には「ホームページ」は「ブラウザを開いたときに最初に見られる画面」あるいは「Webサイトのトップページ」のこと。
- 「サーバー」は、ネットワーク上での「データの保管庫」のこと。
- 「ドメイン」とは、ホームページがどこにあるかを判別する情報のこと。
- 「ファイル」とは、HTMLやCSS、画像などのファイル、あるいは、データベースに保存されたデータのこと。
- 「ホームページ」は、Webページの集合体でできている。
- 「Webページ」とは、インターネット上のブラウザで閲覧可能な、ページ単位の文書のこと。
- Webページは「URL」というWebページの場所を表す文字列とひもづけられている。
- Webページは、HTML、css、ファイル、プログラム言語、データベースといった技術と要素で形作られている。
- HTMLとは、Webページを作成するための言語のこと。
- cssとは、HTMLをデザインする言語のこと。
今回は、つたないながらも、ホームページの仕組みと構造の解説を試みてみました。
皆さまの参考になれば幸いです。
ホームページ制作なら横浜のクオリティロードへ
なお、株式会社クオリティロードWeb制作チームでは、ホームページ制作をご検討されているお客さまの、さまざまなご要望に総合的にお応えするため、多様なWebサービスをご提供しています。
ホームページのコンセプト作りからデザインまで、トータルでお手伝いいたします。
Web集客を成功させたい中小企業・中小事業者さま、株式会社クオリティロードWeb制作チームにお任せください。
ご興味のある方は、以下のバナーから詳細をご覧ください。
あわせて読みたいコラム
