静的サイトと動的サイトのどちらを作成すべきかお悩みですか？あるいは、そもそも静的サイトとは何なのか、疑問に感じている方もいるかもしれません。
いずれにしても、この記事がお役に立てるはず。静的サイトの概要とその仕組み、動的サイトとの違いなど、知っておくべき静的サイトのすべてを詳しく見ていきます。
また、静的サイトと動的サイトのメリットおよびデメリットもご紹介しますので、自社のプロジェクトにどちらが適しているか、そしてどのように構築するのかを学んでいきましょう。
静的サイトとは
静的サイトとは、HTML、CSS、JavaScriptで構成された、事前に用意した一定数のファイルを用いてページを配信するウェブサイトを意味します。
静的サイトには、バックエンドでのサーバー側の処理やデータベースはありません。静的サイトにまつわる「動的」な機能は、すべてクライアント側で処理される仕組みです。つまり、コードはサーバーではなく、訪問者のブラウザで実行されます。
簡単に言えば、ウェブサイトのファイルは、ホスティングによって、サーバーに表示された通りにブラウザに配信されます。
すべてのブラウザに同じ静的ファイルが配信されることから、すべての訪問者に同じユーザー体験、同じコンテンツを提供することになります。
動的サイトとは
動的サイトは、サーバー側で制御され、ある種のスクリプト言語（PHPなど）に依存するウェブサイトです。誰かがサイトを訪れるたびに、サーバーがコードを処理したり、データベースに問い合わせたりして、完成形のページを生成します。
この仕組みによって、動的サイトでは訪問ごとに異なるコンテンツを表示することができます。例えば、サイトにログインしているユーザーとログインしていないユーザーに対して、異なるコンテンツを提供可能です。
また、コンテンツ管理システムが最新のコンテンツ/変更を含むページを自動配信するため、管理画面で変更した内容がすぐに反映されます。
静的サイト作成の流れ
静的サイトの作成方法については後ほど詳しくご説明しますが、基本的には、以下のような流れになります。
- サイトの構築方法を決定する─シンプルなウェブサイトでは、静的なHTML、CSS、およびJavaScriptファイルを自分で作成することもできますが、近年は、静的サイトジェネレーターまたはヘッドレスCMSを使用するのが一般的。
- サイトのセットアップ─選択した方法でサイトを構築。WordPressなどとは異なり、本番サーバーからサイトを管理することはありません。
- サイトのデプロイ─サイトの静的ファイルを本番サーバーに移行し、ユーザーに向けて公開。これには、アプリケーションホスティングを利用することもできれば、HTMLファイルをコンテンツデリバリネットワーク（CDN）に直接デプロイすることも。静的サイトは、データベースやサーバーサイドの処理を必要としないため、1台のウェブサーバーに保存する必要はありません。
主な静的サイトジェネレーター
ウェブサイトを閲覧しただけでは、それが静的サイトなのか動的サイトなのかを必ずしも見分けることができません。以下、静的サイトの構築や管理に役立つツールの代表例をご紹介します。
以下は、特に人気の高い静的サイトジェネレーターです。
上記はいずれも静的サイトを作成できるツールですが、その仕様はそれぞれ異なります。例えば、Publiiはコード不要のインターフェースが搭載されていますが、その他のツールではコマンドラインを使用することになります。
主な動的サイト構築ツール（CMS）
関連して、動的サイトの構築ツールについても触れておきましょう。
動的サイトを構築するツールといえば、インターネット上の43%のウェブサイトに使用されているWordPress。
WordPressでプラグインをインストールすれば、静的サイトを作成することもできますが、デフォルトでは動的サイトを構築するCMSとして機能します。
他にも、動的サイトを構築できるCMS（動的CMS）には、以下のようなものがあります。
静的サイトと動的サイトのメリット・デメリット
静的サイト、そして動的サイトとの違いを押さえたところで、両者のメリットとデメリットを見ていきましょう。
静的サイトのメリット
- パフォーマンスの最適化が容易─「動的な」部分が少ないため、簡単にパフォーマンスを最適化することができます。うまく構築すれば、無駄な要素を最小限に抑えることができ、読み込みも高速化されます。
- サーバーの消費リソース量を抑えられる─サーバーサイドの処理が必要ないため、訪問時にサーバーが行う処理を大幅に削減することができます。これによって、パフォーマンスが向上され、大規模なサイトでもスムーズに機能。静的サイトをCDNに直接デプロイし、ウェブサーバーの使用を完全に省略することも（サイトに静的IPアドレスがない状態）。
- ホスティング費用が安価─趣味のプロジェクトやポートフォリオ用であれば、GitHub PagesやCloudflare Pagesなどのホスティングサービスを利用して、無料で運用することも可能です。プロフェッショナルなプロジェクトでは、Kinstaのアプリケーションホスティングなどの有料サービスを利用することも。
- セキュリティの確保が容易─サーバーサイドの処理やデータベースに依存しないため、ハッキングを完全に防ぐことはできないものの、悪意のあるユーザーによる攻撃を受ける可能性がかなり低くなります。
- シンプルなサイトの立ち上げが非常に簡単─データベースなどの専門知識が求められる設定がないため、簡単に素早く構築することができます。
静的サイトのデメリット
- コンテンツやデザインの更新が複雑─変更や更新を行うたびにサイトの再デプロイが必要に（たとえナビゲーションメニューの項目を変更するだけでも）。定期的に更新が必要になるサイトの場合は、特に手間がかかります。
- 機能の実装に専門知識が求められる─WordPressのような動的CMSでは、サイトに機能を追加するには、プラグインをインストールするだけで済みますが、静的サイトの場合は、一般的により複雑になります。
- コンテンツ管理の機能がやや劣る─静的サイトジェネレーターは一般的に、コンテンツの管理には長けていないため、何千ものコンテンツやタクソノミーを持つ大型サイトでは厄介になる可能性があります。一部の静的サイトジェネレーターには、この懸念を解消するような様々な工夫も。
- フォームのような基本機能の追加にもサードパーティサービスが必要─例えば、フォームの設置には、FormBoldやGetformなどでAPIエンドポイントを作成したり、Google Forms（またはGoogle Forms代替サービス）のようなサードパーティのフォーム作成サービスを使用したりしなければなりません。WordPressの動的CMSなら、フォームプラグインをインストールするだけで、すべてをサイトのデータベースに保存することができます。
動的サイトのメリット
- パーソナライズされたユーザー体験を実現─ページを閲覧しているユーザーに応じて、ページのコンテンツを動的に調整することができます。例えば、会員制サイトで、有料会員にはページの全コンテンツが表示され、会員でない人には小さなプレビューしか表示されないようにするなど。
- サイト（コンテンツとデザイン）の更新が容易─動的サイトでは、コンテンツやデザインの更新が容易。管理画面で変更を加えれば、本番サイトに即座に反映され、静的サイトで必要になるサイト全体の再デプロイは不要です。
- プラグインやアプリケーションによる機能の追加が容易─動的サイトをWordPressで作成すれば、プラグインをインストールするだけで機能を追加することができます。
- 規模に応じた強力なコンテンツ管理機能─動的CMSでは、コンテンツ管理に長けています。例えば、何千ものローカルビジネスのディレクトリを構築する場合は、動的サイトを構築するのが賢明です。
動的サイトのデメリット
- ホスティング費用が比較的高価─サーバーサイドの処理には、多くのリソースが必要になるため、必然的にホスティング費用が高くなる傾向にあります。
- セキュリティの確保が難しい─動的サイトは、静的サイトよりも攻撃対象になりやすく、高度なセキュリティの確保がやや難しくなります。例えば、動的サイトでは、SQLインジェクションに対する脆弱性が懸念されるのに対して、静的サイトにはデータベースがないため、心配はありません。
- パフォーマンスの最適化に手間がかかる─フロントエンドとバックエンド両方のパフォーマンスを考慮しなければならいため、パフォーマンスの最適化が複雑に。例えば、静的サイトでは簡単に行えるのに対し、動的サイトではデータベースクエリとパフォーマンスの最適化にかなり手間がかかる可能性があります。
- セットアップがやや複雑─例えば、WordPressサイトを構築するには、データベースをセットアップし、サイトに必要な技術（最新のPHPバージョン、MySQLやMariaDBなど）を用意しなければなりません。これについては、KinstaのWordPress専用マネージドホスティングなどを利用すれば、シンプルなインターフェースで簡単にWordPressサイトを立ち上げることができ、サイト管理を劇的に簡素化することができます。
静的サイトの構築方法
静的サイトを構築するのが有益だと判断した場合は、以下の手順に従って作成していきましょう。
なお、さまざまな用途に適応できるよう、あえて高度な構築方法をご説明します。
1. 使用する静的サイトジェネレーターまたはCMSを決定する
まずは、静的サイトジェネレーター、静的サイトをデプロイできるコンテンツ管理システムを選びます。
開発知識をお持ちであれば、HTML、CSS、JavaScriptと任意のHTMLエディターで、ゼロから静的サイトを構築することも可能です。しかし、サイトの規模が大きくなるにつれ、すべてをイチから作り直す技術を持ち合わせていなければ、手に負えなくなる可能性があります。
静的サイトジェネレーターなら、静的サイトをより簡単に構築でき、将来的にサイトの更新も容易です。
ナビゲーションメニューに新たな項目を追加するなどの変更を加える際に、いちいちHTMLファイルを編集する必要はなく、変更を反映したすべてのファイルをデプロイすることができます。
特に人気のある静的サイトジェネレーターには、以下のようなものがあります。
- Jekyll：最も人気の高いオープンソース静的サイトジェネレータの1つ。あらゆるサイトに対応し、ブログもサポート。
- Hugo：特に人気の高いオープンソース静的サイトジェネレーターで、こちらもあらゆる種類のサイトをサポート。Hugoで静的サイトを作成する方法はこちら。
- WordPress＋静的サイト生成プラグイン：WordPressでサイトを作成し、好きなプラグインをインストールして、静的HTMLサイトとしてデプロイ可能。
その他のおすすめ静的サイトジェネレーターはこちらでご紹介しています。
2. ウェブサイトを構築する
使用するツールを決定したら、早速サイトを構築していきましょう。
この方法は、すべての静的サイトジェネレーターに共通するわけでなく、利用するものによって異なります。
例えば、WordPressを使用する場合、WordPress自体を静的サイトジェネレーターとして使用すれば、容易に構築可能です。
手順は以下の通り。
- DevKinstaを使用してローカルにWordPressサイトを作成。これは、ユーザーがアクセスするサイトではなく、コンテンツとサイトデザインを編集・テストする環境です。
- 任意のデザインツールを使用してサイトをセットアップ。WordPressのブロックエディターや、ElementorやDiviのようなページビルダープラグインを使用しましょう。
- 静的サイト生成プラグインをインストール。静的サイトをデプロイする際に使用します。Simply StaticやWP2Staticが有名ですが、最近ではStaaticも人気があります。
また、GraphQLを使用してWordPressとGatsbyを連動することも可能です。
3. ウェブサイトを本番環境にデプロイする
ウェブサイトを構築したら、本番環境にデプロイします。つまり、静的サイトジェネレーターから、本番のホスティング環境に静的HTMLファイルを移行する方法が必要になります。
これには、2通りの手法があります。
ひとつは、GitHubを使って自動的かつ継続的にデプロイする方法。サイトのファイルをGitHubバケットに保存しておけば、サイトの更新をGitHubに反映するたびに、GitHubがサーバーに通知し、サーバーが自動的に新しいバージョンのサイトをデプロイすることができます。
例えば、更新されたファイルをGitHubに反映すると、自動的に次のような処理が行われます。
- GitHubで変更を加えるとサーバーに自動的に通知される
- ウェブサーバーがGitHubから最新ファイルを取得し、Hugoビルドを実行
- サーバーがファイルを本番環境に移行
Gitを使った別の方法として、GitHubのページを静的サイトに使用する手もあります。
または、ウェブサーバーを介さずにCDNに直接デプロイすることもできます。
- サイトのファイルをオンラインストレージ環境にアップロード（大体のツールでは、自動的またはコマンドライン経由で実行可能）
- CDNを設定し、ストレージからファイルを取得
- 新しいファイルをストレージに公開すると、自動的にCDNがそのファイルの取り込みを開始
使用するツールにサイトのデプロイを簡素化する機能が特にない場合は、以下の手順が必要です。
- サイトの静的HTMLファイルを生成
- Kinstaのアプリケーションホスティングサービスのような、静的ウェブサイトの運営をサポートしているサービスにファイルをアップロード
静的サイトが適している事例
静的サイトの構築が有益かどうかは、用途とお持ちの開発知識によって異なります。
したがって、何が正解であるかは一概には決められません。
最後に、静的サイトが有益になる事例とそうでない事例をご紹介しますので、参考にしてみてください。
静的サイトが適している場合
静的サイトは、すべての訪問者に同じコンテンツを提供したい場合、またはコンテンツを頻繁に更新しない、特にコンテンツの量が少ない小規模サイトに適しています。
具体的には、以下のような用途に向いています。
- ポートフォリオサイト
- シンプルなデジタルパンフレット
- 履歴書サイト
- 投稿の少ないシンプルなブログ
- ドキュメントや知識ベース
- ランディングページ
この手のサイトでは、静的アプローチのすべてのメリット得ることができ、トレードオフはほとんどありません。
例えば、企業のシンプルなデジタルパンフレットは、通常パーソナライズはほとんど必要ないため、静的サイトを選択することで、機能に制限がかかることはないはずです。
また、頻繁に更新することもないため、度々ページの再デプロイが必要になることもありません。
動的サイトの方が適している場合
ECストア、会員制サイト、オンラインコースなど、サイト体験をパーソナライズする機能が必要な場合には、動的サイトを作成するのが得策です。
ユーザー別にコンテンツを提供する場合には、動的サイトがベストでしょう。
静的サイトで構築することも不可能ではありませんが、通常、トレードオフを行う必要があり、動的サイトを作成するのが賢い選択です。
また、コンテンツが多いサイト、特にタクソノミーやカテゴリを多用するサイトにも、動的サイトが理に適っています。
定期的に新しいコンテンツを公開する場合も同様です。
例えば、2週間に1度しか記事を投稿しない個人ブログであれば、静的サイトでも問題ありませんが、毎日5件の記事を公開するような収益化したブログであれば、動的サイトをおすすめします。
まとめ
要約すると、静的サイトとは、固定されたHTMLページを配信し、すべての処理をクライアント側で行うウェブサイト。静的サイトでは、アクセスしたすべての人に同じ静的HTMLファイル/コンテンツを提供することになります。
Hugo、Jekyll、Gatsbyなどの静的サイトジェネレーターの登場もあり、静的サイトの人気は高まっています。
とは言え、静的サイトの構築にはメリットもあればデメリットも。あらゆるプロジェクトに適しているというわけではありません。
静的サイトを作成すると決まれば、今回ご紹介した静的サイトジェネレーターで構築して、Kinstaのアプリケーションホスティングで稼働しましょう。
現在Kinstaでは、アプリケーションホスティングで静的サイトを運用していただけますが、今後は静的サイト専用のホスティングサービスも展開予定です。
