静的コンテンツと動的コンテンツとは？違いや仕組みをわかりやすく解説！

WebサイトやWebアプリについて調べていると、「静的コンテンツ」や「動的コンテンツ」という言葉を目にすることがあります。

どちらもWebサイトやWebアプリで利用されるコンテンツですが、コンテンツがどのように配信・生成されるのかに違いがあります。

例えば、誰がアクセスしても同じ内容が表示される会社概要ページは、静的コンテンツとして作られることがあります。一方、ログインしているユーザーによって表示内容が変わるマイページなどは、動的コンテンツの代表的な例です。

この記事では、静的コンテンツと動的コンテンツの基本的な意味から、それぞれの仕組みや違い、使い分けなどをわかりやすく解説します。

静的コンテンツとは？

静的コンテンツとは、基本的に誰がアクセスしても同じ内容が表示されるコンテンツです。

あらかじめ用意されたHTMLファイルや画像などを、Webサーバーがそのままブラウザへ返すような仕組みが代表的です。

例えば、Webサーバーに次のindex.htmlが保存されているとします。

<!DOCTYPE html>
<html>
<head>
  <title>会社概要</title>
</head>
<body>
  <h1>会社概要</h1>
  <p>株式会社サンプルです。</p>
</body>
</html>

ユーザーがこのページへアクセスすると、Webサーバーは保存されているindex.htmlをブラウザへ返します。

そのため、基本的には誰がアクセスしても、次のような同じ内容が表示されます。

会社概要

株式会社サンプルです。

このように、アクセスされるたびにサーバー側でページ内容を作り直すのではなく、あらかじめ用意されているファイルを配信するコンテンツを静的コンテンツと呼びます。

Webページについて説明する場合、静的コンテンツで構成されたページを「静的ページ」と表現することもあります。

静的コンテンツの仕組み

静的コンテンツでは、基本的に次のような流れで処理されます。

ブラウザ
　↓ リクエスト
Webサーバー
　↓
保存されているHTML・CSS・画像など
　↓ レスポンス
ブラウザ

例えば、ブラウザからindex.htmlが要求された場合、Webサーバーは保存されているindex.htmlを取得して、そのままブラウザへ返します。

サーバー側でデータベースを検索したり、ユーザーごとにHTMLを作成したりする処理は基本的に必要ありません。

静的コンテンツの例

静的コンテンツには、例えば次のようなものがあります。

HTMLファイル
CSSファイル
JavaScriptファイル
画像ファイル
PDFファイル

これらは、Webサーバーに保存されているファイルをそのまま配信できる代表的な静的コンテンツです。

例えば、会社概要や利用規約など、内容が頻繁に変わらないページは、あらかじめ用意したHTMLファイルを配信する静的なページとして作成できます。

静的コンテンツのメリット・デメリット

静的コンテンツのメリットとデメリットを以下に示します。

メリット

表示を高速にしやすい
- 静的ファイルは、サーバー側で複雑な処理を行わずにそのまま配信できるため、高速に表示しやすいという特徴があります。
サーバーの処理負荷を抑えやすい
- アクセスのたびにデータベースへ問い合わせたり、ページを生成したりする処理が基本的に必要ないため、サーバーの負荷を抑えやすくなります。
構成がシンプル
- HTMLやCSS、画像などのファイルを中心に構成できるため、動的コンテンツと比べて仕組みをシンプルにしやすいです。
CDNを利用して配信しやすい
- 画像やCSS、JavaScriptなどの静的ファイルは、CDNを利用して効率よく配信できます。CDNとは、Webコンテンツを複数のサーバーに配置し、ユーザーに近いサーバーなどから配信する仕組みです。

デメリット

ユーザーごとに内容を変えるのが難しい
- 基本的に同じファイルをそのまま配信するため、ユーザーごとに異なる情報を表示する用途には向いていません。
内容を変更する場合はファイルの更新が必要
- ページの内容を変更する場合は、元となるHTMLファイルなどを修正して更新する必要があります。
リアルタイムに変化する情報には向いていない
- 商品の在庫数やユーザーごとの購入履歴など、頻繁に内容が変わる情報を表示する用途には向いていません。

例えば、ユーザーごとに異なる購入履歴を表示する場合、あらかじめ用意された同じHTMLだけでは対応できません。このような処理には動的コンテンツが適しています。

動的コンテンツとは？

動的コンテンツとは、ユーザーやアクセスしたタイミング、データベースの内容などによって表示内容が変わるコンテンツです。

静的コンテンツでは、あらかじめ用意された内容をそのまま返すのが基本ですが、動的コンテンツではアクセス時の情報などをもとに表示内容を作成します。

例えば、ECサイトに次のような商品ページがあるとします。

商品名：ワイヤレスイヤホン
価格：10,000円
在庫：3個

商品の価格や在庫数は、データベースに保存されている情報によって変わることがあります。

例えば、商品が1個購入されれば在庫数が更新され、次にページを表示したときには、次のように表示内容が変わります。

商品名：ワイヤレスイヤホン
価格：10,000円
在庫：2個

このように、データやユーザーの状態などに応じて表示内容が変化するコンテンツを動的コンテンツと呼びます。

Webページについて説明する場合、動的に内容が生成・変更されるページを「動的ページ」と表現することもあります。

動的コンテンツの仕組み

動的コンテンツでは、例えば次のような流れになります。

ブラウザ
　↓ リクエスト
Webサーバー・アプリケーション
　↓
データベースからデータを取得
　↓
データをもとに表示するコンテンツを生成
　↓ レスポンス
ブラウザ

例えば、ECサイトの商品ページへアクセスした場合、アプリケーションがデータベースから商品名・価格・在庫数などを取得し、その情報を使って表示内容を生成します。

そのため、データベースの内容が変われば、同じURLへアクセスしても表示される内容が変わることがあります。

動的コンテンツの例

動的コンテンツには、例えば次のようなものがあります。

ECサイトの商品価格や在庫情報
SNSのタイムライン
ログイン後のマイページ
検索結果
ショッピングカート
天気情報
ニュースサイトの記事一覧
コメント欄

例えば、ログイン後のマイページでは、ユーザーAにはユーザーAの情報、ユーザーBにはユーザーBの情報を表示する必要があります。

このようなページは、アクセスしているユーザーに応じて内容を変える必要があるため、動的コンテンツが使われます。

動的コンテンツのメリット・デメリット

動的コンテンツのメリットとデメリットを以下に示します。

メリット

ユーザーごとに異なる情報を表示できる
- ログインしているユーザーに応じて、名前や購入履歴など異なる情報を表示できます。
データベースの最新情報を表示できる
- データベースに保存されている情報を取得して表示できるため、商品価格や在庫数などの最新情報をページに反映できます。
検索やログインなどの機能を実現できる
- ユーザーから入力された条件をもとに検索結果を表示したり、ログイン情報に応じて画面を切り替えたりできます。
ユーザー操作に応じて内容を変更できる
- ショッピングカートへの追加や条件の選択など、ユーザーの操作に応じて表示内容を変更できます。

デメリット

システムの構成が複雑になりやすい
- Webサーバーやアプリケーション、データベースなどを組み合わせることが多いため、静的コンテンツと比べて構成が複雑になりやすいです。
サーバー側の処理負荷が増えることがある
- アクセスのたびにデータを取得したり、表示する内容を生成したりするため、処理内容によってはサーバーの負荷が大きくなることがあります。
データベースやアプリケーションの管理が必要になることがある
- 動的な処理を行うために、データベースやアプリケーションの運用・管理が必要になる場合があります。
処理内容によっては静的コンテンツより表示に時間がかかる
- データベースへの問い合わせやページ生成などの処理が発生するため、処理内容によっては静的コンテンツより表示に時間がかかることがあります。

ただし、動的コンテンツだから必ず表示が遅いわけではありません。キャッシュやCDNなどを利用することで、動的なWebサイトでも高速に表示できるよう工夫されています。

静的コンテンツと動的コンテンツの違い

静的コンテンツと動的コンテンツの主な違いをまとめると、次のようになります。

比較項目	静的コンテンツ	動的コンテンツ
表示内容	基本的に同じ	条件によって変わる
コンテンツ	あらかじめ用意する	必要に応じて生成・更新する
データベース	基本的に不要	使用することが多い
処理	比較的シンプル	サーバーやAPIなどの処理が必要になることがある
表示速度	高速に配信しやすい	処理内容によっては時間がかかる
主な用途	会社概要、画像、CSSなど	マイページ、検索結果、ECサイトなど

最も大きな違いは、表示する内容があらかじめ決まっているか、それともアクセス時の条件などによって変わるかです。

静的コンテンツと動的コンテンツは一緒に使われる

実際のWebサイトでは、静的コンテンツと動的コンテンツのどちらか一方だけを使用するとは限りません。

静的コンテンツと動的コンテンツを組み合わせて作られているWebサイトも多くあります。

例えば、ECサイトの場合、次のように使い分けることができます。

コンテンツ	種類
ロゴ画像	静的コンテンツ
CSS	静的コンテンツ
JavaScriptファイル	静的コンテンツ
商品価格	動的コンテンツ
在庫数	動的コンテンツ
ログインユーザー名	動的コンテンツ
ショッピングカート	動的コンテンツ

Webページを表示するためのCSSや画像などは静的ファイルとして配信し、商品情報やユーザー情報など、変更されるデータだけを動的に取得するという構成がよく使われます。

静的コンテンツと動的コンテンツの使い分け

静的コンテンツと動的コンテンツは、どちらが優れているというものではなく、用途によって使い分けます。

内容がほとんど変わらず、ユーザーごとに表示を変える必要がない場合は、静的コンテンツが適しています。

一方、ユーザーやデータ、アクセスしたタイミングなどによって表示内容を変更する必要がある場合は、動的コンテンツが適しています。

Webサイトを作るときは、すべてを動的にするのではなく、固定できる部分は静的コンテンツとして配信し、必要な部分だけを動的にするという考え方も重要です。

JavaScriptで内容を変えたら動的コンテンツ？

初心者の場合、「JavaScriptを使って画面を変更したら、すべて動的コンテンツになるのか」と疑問に思うかもしれません。

例えば、次のJavaScriptではボタンを押すと文章が変わります。

<p id="message">こんにちは</p>

<button onclick="changeMessage()">変更</button>

<script>
function changeMessage() {
  document.getElementById("message").textContent = "こんばんは";
}
</script>

このページでは、ユーザー操作によってブラウザ上の表示内容が変わっています。

広い意味では、このように状況によって表示が変わるものを「動的」と表現することがあります。

一方、Web開発で「静的コンテンツ」と「動的コンテンツ」を区別するときには、サーバーから固定ファイルをそのまま配信するのか、データや処理結果に応じてコンテンツが生成・変更されるのかという観点で説明されることが多くあります。

そのため、「JavaScriptを使っているかどうか」だけでは判断できません。

静的コンテンツ・動的コンテンツと静的サイト・動的サイトの違い

「静的コンテンツ」や「動的コンテンツ」と似た言葉として、「静的サイト」や「動的サイト」があります。意味は似ていますが、静的コンテンツ・動的コンテンツは「表示される内容」に注目した言葉で、静的サイト・動的サイトは「Webサイト全体の仕組み」に注目した言葉です。

静的サイトとは、主にあらかじめ生成されたHTMLファイルなどを配信するWebサイトです。

一方、動的サイトとは、ユーザーからのリクエストやデータベースの内容などに応じて、表示内容を生成・変更するWebサイトです。

例えば、会社の紹介だけを掲載するシンプルなWebサイトであれば静的サイトでも作成できます。

一方、次のような機能が必要な場合は動的な仕組みが必要になります。

ログイン
会員情報の表示
商品検索
商品購入
コメント投稿
データベースからの記事取得

ただし、現在のWebサイトでは静的・動的の仕組みを組み合わせることも多いため、完全にどちらか一方に分けられない場合もあります。

本記事のまとめ

この記事では「静的コンテンツと動的コンテンツ」について、以下の内容を説明しました。

静的コンテンツは、基本的に誰がアクセスしても同じ内容が表示される
動的コンテンツは、ユーザーやデータなどによって表示内容が変わる
静的コンテンツは、HTML・CSS・画像などのファイル配信でよく使われる
動的コンテンツは、マイページ・検索結果・ECサイトなどでよく使われる
実際のWebサイトでは、静的コンテンツと動的コンテンツを組み合わせることが多い

「静的」と「動的」という言葉だけを見ると難しく感じますが、簡単に考えると、「あらかじめ用意した内容をそのまま表示するのか」「状況に応じて内容が変わるのか」という違いです。

お読みいただきありがとうございました。