【今さら聞けない？いえ、どんどん聞いてください！】Webサイトの仕組みについて。HTML・CSS・サーバー、、静的・動的？SaaS？までまとめて解説します。

• Index

1. Webサイトは何で出来てる？
2. HTMLとCSS：情報と見た目を分ける役割
3. ウェブホスティングとドメイン：ネットに公開するための基盤
4. 静的サイトと動的サイトの違い｜CMSとは？
5. 静的HTMLサイトが向いている場面とその利点
6. Webサイトを支える「プラットフォーム」とは？（SaaS / PaaS / IaaS）

はじめに。

日々目にするWebサイト。きれいなデザインが目を惹いたり、スムーズな表示が気持ち良かったり等ありますが、「Webサイトって、何で出来てるの？」「どうやって公開されてるの？」等と聞かれると、意外と答えにくいものですよね。
この記事では、Webサイトの基本構成や仕組みを、静的・動的の違い、よく使われる技術などにも触れながら、背景にある考え方も交えて解説していきます。

1. Webサイトは何で出来てる？

Webサイトは、主に次のような要素で成り立っています：

 

2. HTMLとCSS：情報と見た目を分ける役割

● HTML（HyperText Markup Language）

Webページにある情報の「構造」を定める言語です。
どこが見出しで、どこが本文なのか、画像やリンクはどこにあるのか、などをマークアップ（タグ付け）します。

● CSS（Cascading Style Sheets）

HTMLで定義した情報に**見た目（スタイル）**をつけるのがCSSです。 文字の大きさ、色、背景、レイアウト、レスポンシブ対応（スマホ最適化）などを指定します。

 

3. ウェブホスティングとドメイン：ネットに公開するための基盤

● ウェブホスティングとは？

「ウェブホスティング」とは、Webサイトのファイル（HTML・CSS・画像など）をインターネットに公開する場所を借りるサービスのことです。
つまり、ウェブホスティング＝サーバーをレンタルすることとも言えます。

主なホスティングサービス例：

こうしたサービスを利用してサーバー領域を借りることで、Webサイトをインターネット上に公開できるようになります。

● ドメインとは？

「ドメイン」はWebサイトの住所のようなものです。

たとえば：https://your-site.com の中の your-site.com 部分がドメイン名です。
ドメインを取得してサーバーと紐づけることで、ブラウザからそのWebサイトにアクセスできるようになります。

● ドメインとホスティングの関係

• ホスティング → Webサイトの「データの置き場所」
• Webサイトの「住所」

この2つは必ずセットで必要です。
たとえば、ドメイン（住所）だけ取得しても、その先にホスティング／サーバー（建物）がなければ何も表示されません。

● ドメイン取得と管理

ドメインは、ドメイン登録業者（レジストラ）を通じて取得します。
ドメインを取得したら、DNS（ドメインネームシステム）設定を使って、どのサーバーに接続するかを指定します。
→ これにより、ユーザーがドメインを入力したときに、正しいホスティング先のWebサイトが表示されるようになります。

 

4. 静的サイトと動的サイトの違い｜CMSとは？

● 静的サイト（Static Site）

静的サイトとは、あらかじめ用意されたHTMLファイルがそのまま表示されるWebサイトのこと。
構造がシンプルで、HTML・CSS・画像ファイルなどをそのままサーバーに置くだけで運用できます。

• 表示が速い：サーバー側での処理が不要
• セキュリティに強い：動作するアプリケーションが少ないため攻撃リスクが少ない
• 低コストで運用可能：小規模なサイトに向いている

● 動的サイト（Dynamic Site）

動的サイトは、アクセスされたときにサーバー上のプログラムが動いて、ページの内容をリアルタイムで生成する仕組みです。

たとえば：

• ブログ記事の一覧や詳細ページ
• ユーザーによって表示内容が変わる会員サイトやECサイト

● CMSってなに？

CMS（Content Management System）は、HTMLやCSSを直接編集しなくても、Webサイトの中身をブラウザ上の管理画面で編集・更新できる仕組みです。

代表的なCMS：

CMSは「動的サイト」として使われることが一般的ですが、近年は“静的”な仕組みとCMSを組み合わせるJamstack（ジャムスタック）という考え方も登場しています。
Jamstackは、従来のCMSに頼らず、「あらかじめ静的に生成したファイルを高速に配信する」ことを重視した構成です。
たとえば「ヘッドレスCMS」という、表示部分（フロントエンド）を持たないCMSを使い、管理画面で入力した情報をAPI（必要なデータを外から呼び出せる仕組み）経由で取得し、React・Vue（より動きのあるWebページを作るための部品化されたプログラムツール）、HTMLなど好きな形でサイトに組み込む仕組みもありますが、そのあたりはまた別の機会に。

 

5. 静的HTMLサイトが向いている場面とその利点

今でも静的サイトは十分に実用的です。以下のようなケースに特に向いています。

◎ 主なメリット：

• サーバー負荷が軽く、表示が速い
• CMSの脆弱性がないので、セキュリティに強い
• 更新頻度が低いページならランニングコストも抑えやすい

6. Webサイトを支える「プラットフォーム」とは？（SaaS / PaaS / IaaS）

静的なHTMLサイトは、どんなホスティングを使うかがポイントになりますが、特に動的サイトやCMSサイトでは、どんなプラットフォームを選ぶかも重要になります。大まかに以下の3タイプに分類されます。

● SaaS（サース／Software as a Service）

• サービスとして提供されるWebアプリやCMS
• 基本的にブラウザからすぐ使えるのが特徴
• 例：Shopify / Wix / Webflow

→ 自分でサーバーやインフラを用意・管理する必要がない
→ ノーコードで始められるが、ある程度のカスタマイズや独自デザインにはコードの知識が必要不可欠

● PaaS（パース／Platform as a Service）

• Webサイトやアプリを構築・実行するための環境を提供
• サーバーの運用やセキュリティ管理はサービス側が担当
• 例：Kinsta

→ サーバー保守は任せつつ、設計やカスタマイズの自由度もある
→ CMS（WordPressなど）を安心して動かしたいときに向いている

● IaaS（アイアース／Infrastructure as a Service）

• 仮想マシンやネットワークなど、インフラを構成できる自由度の高い環境
• サーバーやネットワークなどの構成は自分で設計・管理する必要がある
• 例：AWS

→ 開発・運用に関する知識が必要だが、柔軟な構築が可能
→ アクセスが多い大規模サイトや専用設計が必要な場合に向いている

まとめ

Webサイトと一言に言っても色々な要素が重なって成り立っていますね。そのサイトの存在目的や、サイトでの活動によって達成したいゴールなど、各々の側面を考えて、最適な状態で運営していくことが望ましいです。これからWEBサイトを作ろうとお考えの方、今お持ちのサイトをテコ入れしようかとお悩みの方、お気軽にご相談ください！