静的サイト / 動的サイト

Static / Dynamic Site

web general beginner

静的サイトはあらかじめ作られたHTMLなどをそのまま配信するサイト、動的サイトはアクセス時の条件やデータベースの内容に応じてページを生成するサイトのこと。

概要（サマリー）

静的サイト / 動的サイトとは、Webページをどのように作って表示するかの違いを表す言葉である。

静的サイトは、あらかじめ作っておいたHTML、CSS、画像などのファイルを、サーバーがほぼそのまま配信するサイトである。一方、動的サイトは、アクセスされたタイミングでサーバー側の処理やデータベース、ユーザー情報、検索条件などをもとにページ内容を生成するサイトである。初心者向けには、静的サイトは「完成済みの紙を配る」、動的サイトは「注文を受けてその場で内容を作って渡す」と考えるとわかりやすい。

詳細解説

静的サイトは「あらかじめ作ったファイルをそのまま出す」サイトである

静的サイトでは、HTMLファイルやCSSファイル、画像ファイルなどをあらかじめ用意しておき、ユーザーがアクセスしたときにサーバーがそのファイルを返す。

たとえば、次のようなファイル構成がある。

public/
  ├─ index.html
  ├─ about.html
  ├─ glossary/
  │   └─ api.html
  └─ assets/
      └─ style.css

ユーザーが about.html にアクセスしたら、サーバーは基本的にその about.html をそのまま返す。
HTMLファイル自体の内容は、ファイルを更新しない限り変わらない。

このように、静的サイトは「事前に作っておいたページを配信する」仕組みである。

動的サイトは「アクセス時に内容を作る」サイトである

動的サイトでは、アクセスされたタイミングで、サーバー側のプログラムが処理を行い、ページ内容を生成する。

たとえば、WordPressの記事ページを考えると分かりやすい。
ユーザーが記事URLへアクセスすると、WordPressはデータベースから記事タイトル、本文、カテゴリ、投稿日時などを取り出し、テーマのテンプレートに当てはめてHTMLを作る。

つまり動的サイトでは、HTMLファイルが最初から1ページずつ完成形で置かれているとは限らない。
アクセス時に、サーバー側で必要なデータを集めてページを組み立てる。

静的サイトと動的サイトの違い

静的サイトと動的サイトの大きな違いは、ページを「いつ作るか」である。

Static Site
ページを事前に作っておき、アクセス時にはそのファイルを配信する
Dynamic Site
アクセス時に条件やデータをもとにページを生成する

ただし、実際のWebサイトでは静的生成、サーバー側生成、ブラウザ側のJavaScriptによる描画が組み合わさることも多い。静的か動的かは、主に「どこで・いつページを生成するか」を整理するための分類である。

たとえば、会社概要ページや固定のLPのように、内容があまり変わらないページは静的サイトに向いている。
一方、ログイン状態によって表示が変わるマイページ、検索結果ページ、ECサイトの商品在庫表示などは動的サイトに向いている。

静的サイトのメリット

表示が速くなりやすい

事前に作ったHTMLを返すだけなので、サーバー側で複雑な処理をする必要が少ない。
そのため、表示が速くなりやすい。ただし、画像・JavaScript・外部タグが重い場合は、静的サイトでも表示が遅くなることがある。

サーバー構成がシンプル

データベースや複雑なバックエンド処理が不要な場合、構成をシンプルにできる。

セキュリティリスクを減らしやすい

ログイン機能や管理画面、データベースがない静的サイトでは、攻撃対象が少なくなりやすい。
ただし、フォームや外部スクリプト、ホスティング設定などの注意は必要である。

管理しやすい場合がある

MarkdownからHTMLを自動生成するような運用では、原稿ファイルを管理し、生成物を公開する形にできる。
用語集やドキュメントサイトでは相性がよい。

静的サイトの注意点

更新にはファイルの再生成や再アップロードが必要

静的サイトは、ファイルそのものがページ内容なので、内容を変えるにはHTMLを更新する必要がある。
Markdownから生成している場合は、生成ツールを再実行する必要がある。

ユーザーごとに内容を変えるのは苦手

ログイン状態、購入履歴、会員情報など、ユーザーごとに表示を変える処理は静的サイトだけでは難しい。
必要に応じてJavaScriptや外部APIを組み合わせることになる。

大量ページでは生成・管理の仕組みが重要

ページ数が多くなると、手作業でHTMLを管理するのは大変になる。
Pythonや静的サイトジェネレーターなどで自動生成する仕組みが重要になる。

動的サイトのメリット

内容を柔軟に変えられる

動的サイトは、データベースやユーザー状態に応じてページ内容を変えられる。
たとえば、ログイン中のユーザー名を表示したり、在庫数をリアルタイムに表示したりできる。

管理画面から更新しやすい

WordPressのようなCMSでは、管理画面から記事を投稿・編集できる。
HTMLを直接触らなくても更新できるため、運用者にとって便利である。

大規模サイトに対応しやすい

ECサイト、会員サイト、予約サイト、SNSのように、データやユーザー操作が多いサイトでは動的な仕組みが必要になりやすい。

動的サイトの注意点

サーバー処理が必要になる

アクセス時にサーバー側の処理が必要になることがあるため、負荷や処理速度を考える必要がある。
キャッシュを使って高速化することも多い。

セキュリティ対策が重要になる

ログイン機能、フォーム、データベース、管理画面などがある場合、攻撃対象が増える。
SQLインジェクション、XSS、認証不備などへの対策が重要である。

環境構築が複雑になりやすい

PHP、Node.js、Ruby、Python、データベース、サーバー設定など、静的サイトより必要な要素が増えることがある。

障害時の影響が大きくなることがある

データベース接続エラーやサーバー処理の失敗があると、ページ全体が表示できなくなることがある。

WordPressは動的サイトなのか

WordPressは基本的に動的サイトの仕組みで動くCMSである。
記事本文や設定、カテゴリ、ユーザー情報などをデータベースに保存し、アクセス時にテーマテンプレートを使ってHTMLを生成する。

ただし、キャッシュプラグインや静的HTML化の仕組みを使うと、表示時には静的ファイルに近い形で配信されることもある。
そのため、実務では「作り方は動的、配信は静的に近づける」という運用もよくある。

つまり、WordPressは基本的には動的だが、高速化のために静的配信の考え方を組み合わせることがある。

静的HTMLでもJavaScriptで動けば動的サイトなのか

ここは混同しやすい。
HTMLファイル自体が静的に配信されていても、ブラウザ側のJavaScriptで画面が変化することがある。

たとえば、計算ツール、タイマー、タブ切り替え、モーダル表示などは、静的HTMLとJavaScriptだけで作れる場合がある。
この場合、サーバー側でページを生成していなければ、サイトの配信方式としては静的サイトに近い。

つまり、「画面が動く = 動的サイト」とは限らない。
Web制作でいう動的サイトは、多くの場合、サーバー側でアクセス時にページを生成する仕組みを指す。

SPAとの違い

SPA は Single Page Application の略で、1つのHTMLを読み込んだあと、JavaScriptで画面を切り替えるアプリの形式である。

Static Site
事前に作られたHTMLなどを配信する
Dynamic Site
サーバー側でアクセス時にページを生成する
SPA
初回に読み込んだページ上で、JavaScriptが画面やデータを切り替える

SPAは、静的ホスティングに置ける場合もあるが、APIと組み合わせて動的なデータを表示することもある。
そのため、静的・動的の分類だけでは説明しきれないケースもある。

CMSとの関係

CMS は、記事やページを管理画面から作成・編集できる仕組みである。
WordPressのようなCMSは、一般的には動的サイトとして動くことが多い。

CMS
コンテンツを管理する仕組み
Dynamic Site
アクセス時にデータをもとにページを生成するサイト
Static Site
事前に生成されたHTMLなどを配信するサイト

ただし、最近では静的サイトジェネレーターやヘッドレスCMSを使い、CMSで管理した内容を静的HTMLとして生成する運用もある。
つまり、CMSを使うから必ず動的サイト、とは言い切れない。

AI時代に静的サイト / 動的サイトの理解が重要な理由

AIを使うと、HTML、CSS、JavaScript、Markdown、Python生成ツールなどを組み合わせて、静的サイトをかなり作りやすくなる。
たとえば、用語ファイルをMarkdownで管理し、PythonでHTMLに変換して公開するような運用は静的サイトと相性がよい。

一方で、ログイン、会員管理、注文処理、リアルタイム在庫、検索条件に応じた表示などは、動的サイトの考え方が必要になる。

AIにサイト構築を頼むときも、次のような判断が重要である。

静的HTMLで十分か
WordPressのようなCMSが必要か
データベースが必要か
ユーザーごとの表示切り替えがあるか
APIとJavaScriptで対応できるか
更新頻度と運用方法はどうするか

この違いが分かっていると、AIに過剰な構成を作らせたり、逆に必要な動的機能を静的HTMLだけで無理に作ろうとしたりする失敗を減らせる。

初心者向けの理解の仕方

最初は、静的サイトを「完成済みのHTMLをそのまま配るサイト」、動的サイトを「アクセス時にデータをもとにページを作るサイト」と覚えれば十分である。

そして、次のように整理すると理解しやすい。

Static Site = 事前に作る
Dynamic Site = アクセス時に作る
WordPress = 基本は動的
静的HTML + JavaScript = 画面は動いても配信方式は静的に近い
ECサイトや会員サイト = 動的な仕組みが必要になりやすい

この関係が見えると、WordPress外に静的HTMLを置く運用、用語ページのHTML生成、Webアプリ公開、ECサイト構築の判断がしやすくなる。

よくある勘違い

静的サイト = 動きがないサイト？

違う。
静的サイトでもJavaScriptを使えば、タブ切り替え、計算、アニメーション、フォームの見た目制御などの動きを付けられる。静的か動的かは、主にページがサーバー側で生成されるかどうかの違いである。

動的サイト = 画面がアニメーションするサイト？

違う。
Web制作でいう動的サイトは、多くの場合、サーバー側でデータベースや条件に応じてページを生成するサイトを指す。見た目の動きだけを意味するわけではない。

WordPressは静的サイト？

基本的には動的サイトである。
ただし、キャッシュや静的HTML化によって、配信時には静的サイトに近い形になることもある。

静的サイトならセキュリティ対策は不要？

不要ではない。
攻撃対象は少なくなりやすいが、外部スクリプト、フォーム、サーバー設定、公開ファイル、権限、HTTPSなどの注意は必要である。

動的サイトのほうが必ず高機能で優れている？

必ずではない。
必要な機能によって向き不向きがある。用語集やドキュメントのようなページでは、静的サイトのほうが速く、管理しやすい場合もある。

まとめ

静的サイト / 動的サイトは、静的サイトはあらかじめ作られたHTMLなどをそのまま配信するサイト、動的サイトはアクセス時の条件やデータベースの内容に応じてページを生成するサイトのこと。
関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。

より詳しくAIに聞いてみよう

静的サイトと動的サイトの違いを、中学生でもわかるように具体例つきで説明してください。
WordPressはなぜ動的サイトと呼ばれるのか、初心者向けに整理してください。
静的HTMLでもJavaScriptで動く場合、静的サイトと呼んでよいのか教えてください。
用語集サイトを静的HTMLで作るメリットと注意点を教えてください。
AIでWebサイトを作るとき、静的サイトと動的サイトのどちらを選ぶべきか判断基準を整理してください。