日本一分かり辛い説明「静的コンテンツ（静的ページ）」と「動的コンテンツ（動的ページ）」の違い
ホームページを作成するとき、「静的コンテンツ・動的コンテンツ」という言葉をたびたび目にする事があります。
2つの違いは静的か動的かです。
2つの違いは静的か動的かです。
□静的コンテンツ（静的ページ）の一例
▶帆船の歴史と伝説
▶帆船の歴史と伝説
このコンテンツのために制作した嵐の海を進む帆船のプログラム動画と帆船にまつわる話を紹介した海洋ホームページのオリジナル大作。
□動的コンテンツ（動的ページ）の一例
▶黒板を使った授業
▶黒板を使った授業
このコンテンツのために制作した簡易ページ。
静的コンテンツ：
あらかじめ用意したコンテンツを表示するページ。
誰がいつアクセスしても同じページが表示されます。
作り置きのページ。（状況にかかわらず固定。）
あらかじめ用意したコンテンツを表示するページ。
誰がいつアクセスしても同じページが表示されます。
作り置きのページ。（状況にかかわらず固定。）
• 一般的なホームページ
• 一部のブログ
動的コンテンツ：
アクセスしたユーザーや時間に合わせてサーバーなどでプログラムを走らせて（計算して）表示内容などを変えられるページ。
その場で仕上げるページ。（状況に応じて内容が変化します。）
アクセスしたユーザーや時間に合わせてサーバーなどでプログラムを走らせて（計算して）表示内容などを変えられるページ。
その場で仕上げるページ。（状況に応じて内容が変化します。）
• ECサイト
• SNS
• 掲示板
• 一部のブログ
見た目の動き（アニメーション）ではなくて、ユーザーの操作や条件で結果が変わる（動的）か変わらない（静的）かです。
「ボタンを押したら音楽が鳴る」などあらかじめ組み込まれた固定の動作は、結果が変わらないので静的コンテンツです。
ただし、ランダムに曲を変えて鳴らす場合は結果が変わるので動的コンテンツです。おみくじも結果が変化するので動的コンテンツです。
時間帯で壁紙が替わったり、日付が変わるカレンダーや時計表示なども動的コンテンツです。
「ボタンを押したら動画再生」だけなら静的コンテンツですが、ログインのタイミングやユーザー毎で表示する動画が変われば動的コンテンツです。
「ボタンを押したら音楽が鳴る」などあらかじめ組み込まれた固定の動作は、結果が変わらないので静的コンテンツです。
ただし、ランダムに曲を変えて鳴らす場合は結果が変わるので動的コンテンツです。おみくじも結果が変化するので動的コンテンツです。
時間帯で壁紙が替わったり、日付が変わるカレンダーや時計表示なども動的コンテンツです。
「ボタンを押したら動画再生」だけなら静的コンテンツですが、ログインのタイミングやユーザー毎で表示する動画が変われば動的コンテンツです。
２つの動的コンテンツ
動的コンテンツには2つのパターンがあります。おみくじを例にすると
• クライアントサイド（フロントエンド）
ユーザーのブラウザ上（JavaScript）で、リアルタイムに表示を切り替える。サーバーとの通信は発生しない。
ページを開いた時点で全ての結果データがブラウザに届いていて、JavaScriptがその場でランダムに選んで画面を書き換える。
手軽な動的コンテンツ。
ユーザーのブラウザ上（JavaScript）で、リアルタイムに表示を切り替える。サーバーとの通信は発生しない。
ページを開いた時点で全ての結果データがブラウザに届いていて、JavaScriptがその場でランダムに選んで画面を書き換える。
手軽な動的コンテンツ。
• サーバーサイド（バックエンド）
ユーザーがボタンを押した後に、サーバー（PHPやPythonなど）で結果を計算し、新しい画面を作って送り返す。
「今日引いた結果」をデータベースに保存したり、1日1回しか引けないようにサーバー側で制御するようなシステム。
ユーザーがボタンを押した後に、サーバー（PHPやPythonなど）で結果を計算し、新しい画面を作って送り返す。
「今日引いた結果」をデータベースに保存したり、1日1回しか引けないようにサーバー側で制御するようなシステム。
言葉（動的・静的）を区別する「4つの大きな理由」
わざわざ言葉を分けるのは、特に動的コンテンツがサーバーサイドの場合、以下の4点において扱い方が180度変わるからです。① ページの「表示スピード（表示速度）」が違うから
• 静的：ファイルを送るだけなので、表示が圧倒的に速い。
• 動的：アクセスされるたびにサーバーが「ページを組み立てる計算」をするため、表示に時間がかかりやすい。速度を上げるための対策（キャッシュサーバーの利用など）の難易度も変わります。
② サーバーにかかる「コストと負荷」が違うから
• 静的：サーバーの頭脳（CPU）をほとんど使わないため、大量のアクセスが来てもサーバーが落ちにくく、維持費が安く済む。
• 動的：アクセスごとにサーバーがフル回転で計算するため、アクセスが集中するとサーバーが重くなったり落ちたりします。そのため、高性能で高価なサーバーが必要になります。
③ 作るための「技術と開発費」が違うから
• 静的：HTMLとCSSという基本的な知識があれば作れるため、開発期間が短く、費用も抑えられる。
• 動的：PHP、Python、JavaScriptなどのプログラミング言語や、データベース（MySQLなど）の専門知識が必要なため、開発費用が高額になる。
④ 「セキュリティのリスク」が違うから
• 静的：ただのファイルを置いてあるだけなので、ハッキングされる隙が非常に少ない。
• 動的：ユーザーが入力したデータ（ログイン情報や検索ワード）をサーバーで処理するため、プログラムの隙を突いた個人情報の漏洩やサイトの改ざんなどのリスクが高く、厳重な安全対策が必要になる。
まとめ
Webサイトを作る際やビジネスの計画を立てる際に、「これは静的でいいのか、動的にすべきか」を区別して考えないと、「本当は安く早く作れたはずなのに、無駄に高機能で高価なシステムを作ってしまった」、あるいは逆に「必要な機能が実現できなかった」という失敗が起きてしまいます。そのため、IT（エンジニア）の世界ではこの2つを明確に言葉で区別しています。
クリエイターでもサイトそのものを作品と考えるなら「動的・静的」を意識する必要があります。