ツバサのメモ帳

静的サイトとは?
WordPressとの違いとメリット・デメリット

静的サイトとは?WordPressとの違いとメリット・デメリット

静的サイトとは

静的サイト(Static Site)は、あらかじめ作成されたHTMLファイルをそのまま表示するWebサイトのこと。アクセスがあったとき、サーバーはファイルをそのまま返すだけで、プログラムの実行やデータベースへの問い合わせは行わない。

このメモ帳(ツバサのメモ帳)もGitHub Pagesで運営している静的サイトだ。HTMLファイルをGitHubのリポジトリにpushするだけで公開される。サーバー代は無料で、WordPressのようなデータベースやPHPの管理が不要なのが助かっている。

GitHub Pages tsubasa-memo.github.io/glossary/github-pages.html GitHub tsubasa-memo.github.io/glossary/github.html

MDN Web Docsでは、Webページの種類として静的ページと動的ページの違いが解説されている。Cloudflareの解説でも、静的サイトは事前に生成されたファイルを配信する形式として説明されている。

MDN Web Docs developer.mozilla.org Cloudflare cloudflare.com

ブログ運営・Web制作で出てくる場面

「ブログを始めたい」と思ったとき、最初に候補に上がるのはWordPressやnoteだろう。WordPressは動的サイトで、サーバー契約・ドメイン取得・PHPとデータベースの管理が必要になる。noteは手軽だがデザインの自由度が低い。

静的サイトは第三の選択肢だ。GitHub Pagesを使えば無料でホスティングでき、HTMLとCSSの知識があれば自由にデザインできる。最近はClaude CodeのようなAIツールを使えばHTMLの記述を自動化できるため、コーディングが苦手でも運用のハードルは下がっている。

このメモ帳でも、AIでブログを構築した記録をまとめている。記事の追加・更新はGitHub経由のpush操作で行い、下書き→本番公開のブランチ運用も可能だ。

AIでブログを構築した記録 tsubasa-memo.github.io/glossary/ai-blog-building.html

覚えておきたいポイント

静的サイトのメリットは表示速度・コスト・セキュリティの3つに集約される。サーバー側の処理がないため表示が速く、GitHub Pagesなら月額0円で運営でき、データベースがないためSQLインジェクションなどの攻撃対象にならない。

デメリットはHTMLの知識が必要なことと、記事更新のたびにファイルを編集してpushする手間がかかること。コメント欄・お問い合わせフォーム・サイト内検索といった動的な機能は外部サービスやJavaScriptで補う必要がある。

ECサイトそのものを静的サイトで運営するのは難しい(カートや決済が動的処理を必要とする)が、ECの補助的なコンテンツ——たとえば商品撮影のノウハウブログ、用語集、料金比較ページ——を静的サイトとして独立運用するケースは増えている。

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

静的サイトはサーバーに置いたHTMLファイルをそのまま表示する。動的サイトはアクセスのたびにサーバー上のプログラム(PHPやRubyなど)がデータベースからデータを取得し、HTMLを生成して返す。

WordPressが動的サイトの代表格で、管理画面から記事を書くとデータベースに保存され、閲覧者がアクセスするたびにPHPがHTMLを組み立てる。プラグインで機能を追加しやすい反面、PHPやデータベースの脆弱性を突かれるリスクがある。

静的サイトはファイルを直接配信するだけなのでプログラムの実行がなく、高速かつ安全だ。ただし記事が数百ページを超えると管理の手間が増える。その場合は静的サイトジェネレーター(Hugo、Jekyllなど)を使ってMarkdownからHTMLを自動生成する方法もある。静的サイトと動的サイトの比較記事で詳しくまとめている。

静的サイトと動的サイトの比較記事 tsubasa-memo.github.io/glossary/static-vs-dynamic-site.html

よくある質問

Q. 静的サイトとは何ですか?
あらかじめ作成されたHTMLファイルをそのまま表示するWebサイトです。サーバー側でプログラムを動かす必要がなく、表示が速くセキュリティリスクが低いのが特長です。
Q. 静的サイトと動的サイトの違いは?
静的サイトは固定のHTMLをそのまま返します。動的サイトはアクセスのたびにPHPなどのプログラムでHTMLを生成します。WordPressは動的サイトの代表例です。
Q. 静的サイトのメリットは?
表示速度が速い、サーバー費用が安い(GitHub Pagesなら無料)、セキュリティリスクが低い、バージョン管理がしやすいという点です。
Q. 静的サイトのデメリットは?
HTMLの知識が必要で、記事更新にファイル編集とアップロードの手間がかかります。コメント欄や検索機能などの動的機能を自前で実装しにくい点もデメリットです。
Q. GitHub Pagesは静的サイトですか?
はい。GitHubのリポジトリにHTMLファイルを置くだけで無料で公開できるホスティングサービスで、静的サイト専用です。
ツバサ

ツバサ

EC関係の仕事をしています。このサイトは自分が調べたことの備忘録です。Photoshopは少し使えますが苦手で、ちょっとした画像補正はもっぱらスマホアプリ派。アプリで対応しきれない本格的なレタッチはプロに依頼しています。