メインコンテンツに移動

WordPressのように更新できるのに公開サイトは静的HTML|CMSと表示速度・セキュリティを両立する仕組み

ホームページを更新するとき、多くの方はWordPressのような管理画面から文章や画像を入力します。

実は当社も同じです。

管理画面から記事や会社情報をCMSで更新しています。

ただし、少し違うところがあります。

管理画面はCMSですが、実際に公開しているのは静的なHTMLファイルです。

つまり、「更新するとき」と「訪問者がサイトを見るとき」で、動いている仕組みが違います。

この記事では、当社が採用している「CMS+静的HTML」という構成について、WordPressとの違い、メリット、デメリットをできるだけ分かりやすく説明します。

 

「管理画面から更新できる」と「動的サイト」は別の話

まず、ここを分けて考える必要があります。

「管理画面から更新できる=公開サイトもWordPressのように動的に生成されている」とは限りません。

CMSはあくまでコンテンツを管理するための仕組みです。

そのコンテンツを、訪問者にどのような形で届けるかは別に設計できます。

当社では、

  • 管理画面で情報を入力する
  • 保存した情報からHTMLを生成する
  • 生成されたHTMLを公開する

という構成にしています。

そのため、運用する人から見るとCMSですが、訪問者から見ると静的HTMLのWebサイトです。

 

WordPressのような動的サイトとの違い

WordPressなどの一般的なCMSでは、サイトへのアクセスに応じてPHPなどのプログラムが動作し、データベースから必要な情報を取得してHTMLを生成する構成が一般的です。

  1. ブラウザがWebサーバーにアクセスする
  2. サーバー側のプログラムが処理する
  3. 必要なデータをデータベースなどから取得する
  4. HTMLを生成する
  5. ブラウザにHTMLを返す

もちろん、WordPressでもキャッシュなどを利用して、毎回この処理を行わない構成にすることはできます。

ここで重要なのは、動的CMSでは「閲覧時にもシステムが動く構成」を取れるということです。

 

当社は「更新時だけ」HTMLを生成する

当社のサイトでは、考え方が逆です。

  1. 管理画面から情報を入力する
  2. 保存すると自動でHTMLファイルを生成する
  3. 生成されたHTMLは自動で公開される
  4. 訪問者には完成したHTMLで公開される

一度HTMLが生成された後は、訪問者がページを開くたびにCMSが記事を組み立てる必要はありません。

更新するときにシステムが働き、閲覧するときは完成したファイルを配信する。

これが当社の構成です。

1つのドメインで静的HTMLとCMSを動かす方法は、静的HTMLとDrupalを1つのドメインで運用する方法|コーポレートサイトの構成例で具体的に説明しています。

 

この構成にするメリット

4-1. 公開ページを高速に配信しやすい

公開時にデータベースへ接続してページを生成する必要がないため、Webサーバー側の処理をシンプルにできます。

基本的には、完成したHTMLファイルを配信するだけです。

もちろん、表示速度は画像サイズやCSS、JavaScript、CDNなどさまざまな要素で決まります。

それでも、ページを表示するためのサーバー側処理を減らせることは、大きなメリットです。

 

4-2. 公開サイト側の攻撃対象を減らせる

WordPressなどのCMSを公開サーバー上で動かす場合、CMS本体、プラグイン、PHP、データベース、管理画面など、さまざまな構成要素を適切に管理する必要があります。

静的HTMLとして公開すれば、少なくとも公開サイト側でCMSやPHPを実行する必要がなくなります。

当社では管理画面も公開サイトとは分離しています。

つまり、訪問者がアクセスする公開サイトに、コンテンツを管理するためのシステムそのものを置かない構成です。

セキュリティを「絶対に安全」にするものではありませんが、公開サイト側の攻撃対象を減らすという考え方です。

 

4-3. 大量アクセス時の負荷を抑えやすい

静的HTMLは、基本的にファイルを配信するだけです。

そのため、アクセスが集中した場合でも、ページを生成するためのPHPやデータベース処理を大量に実行する必要がありません。

メディア掲載やキャンペーンなど、一時的にアクセスが増えるサイトでも大量アクセスに強い構成にしやすいというメリットがあります。

 

4-4. CMSの更新作業を公開サイトから切り離せる

WordPressでは、本体・テーマ・プラグインなどを継続的に更新する必要があります。

もちろん、WordPressそのものが悪いわけではありません。

問題は、公開サイトとCMSが同じ環境で動いている場合、CMS側の更新や障害が公開サイトにも影響する可能性があることです。

当社の構成では、公開サイトは生成されたHTMLです。

コンテンツを管理するシステムと、情報を公開する場所を分離できます。

 

4-5. HTMLとして情報を取得できる

最近は検索エンジンだけでなく、生成AIなどさまざまなシステムがWeb上の情報を取得します。

そのため、重要な情報をHTMLとして明確に出力しておくことには意味があります。

当社では、本文だけでなく、会社情報や記事情報などを構造化データ(JSON-LD)としてHTMLに出力しています。

これは「静的HTMLだからAIに評価される」という話ではありません。

必要な情報を、クローラーが取得できるHTMLとして明確に提供する。

そのための設計です。

 

4-6. バックアップや移行をシンプルにできる

公開サイトがHTMLファイルを中心とした構成であれば、公開ファイルをそのままバックアップできます。

サーバーを移行するときも、生成されたファイルを新しい環境へ配置するという方法を取りやすくなります。

データベースを使うCMSでは、データベースとファイルの両方を管理する必要があります。

公開サイトをファイルとして扱えること自体が、運用上のメリットになります。

 

デメリットもあります

もちろん、この構成がすべてのWebサイトに適しているわけではありません。

 

5-1. 動的な処理には別の仕組みが必要

会員登録、ログイン、予約、決済など、訪問者ごとにリアルタイムで処理する機能は、静的HTMLだけでは実現できません。

その場合は、必要な機能だけを別のシステムや外部サービスと組み合わせる必要があります。

 

5-2. 更新時にHTMLを生成する処理が必要

コンテンツを更新するたびに、HTMLを生成する処理が必要になります。

数万ページ、数十万ページといった大規模サイトでは、生成方法や差分更新などを考える必要があります。

つまり、「静的HTMLなら何も考えなくていい」というわけではありません。

運用を続けるうえで注意したい点は、静的サイトとCMSを併用すると起きる「共通パーツのズレ」|二重管理をやめる方法にもまとめています。

 

5-3. WordPressのテーマやプラグインをそのまま利用できない

WordPressには非常に多くのテーマやプラグインがあります。

それらをそのまま利用できることはWordPressの大きな強みです。

静的HTML+独自CMSでは、必要な機能を自分たちで設計する必要があります。

その代わり、必要のない機能まで抱え込まなくて済むというメリットがあります。

 

更新する人から見ると、WordPressと何が違うのか

実は、ここが一番重要です。

「静的HTML」と聞くと、「HTMLを直接編集するのでは?」と思われるかもしれません。

しかし、当社ではその必要はありません。

管理画面にログインして、文章や画像を入力し、保存します。

操作する人から見れば、一般的なCMSと大きく変わりません。

違うのは、保存した情報をもとに公開用のHTMLが自動生成されることです。

つまり、

「管理する場所」と「公開する場所」を分けている。

これが、この仕組みのポイントです。

 

当社がこの構成を選んだ理由

当社が目指しているのは、「CMSを使うこと」ではありません。

情報を更新しやすくしながら、公開サイトはできるだけシンプルにすることです。

そのため、

  • 管理画面では簡単に更新できる
  • 公開サイトは静的HTMLにする
  • 必要な情報をHTMLと構造化データに出力する
  • 公開サイトと管理システムを分離する

という構成にしています。

CMSを使うこと自体を目的にしていないのがポイントです。

 

すべてのサイトを静的HTMLにすればいいわけではない

ここも重要です。

会員制サイト、予約サイト、ECサイト、リアルタイムで情報が変化するWebサービスなどでは、動的なシステムが必要になる場合があります。

一方で、企業サイトやサービスサイトのように、基本的な情報を管理して公開することが中心のサイトであれば、静的HTMLは有力な選択肢になります。

「WordPressか静的HTMLか」という二択ではありません。

必要な機能をどこで動かし、どこまでを静的にするのか。

そこから設計することが重要です。

そもそもCMSが必要かどうかの判断は、CMSは本当に必要か?|Gitで原稿を管理して静的サイトを生成する方法で整理しています。

 

まとめ

当社のWebサイトは、

  • 管理画面から情報を更新する
  • 更新時に公開用HTMLを生成する
  • 訪問者には静的HTMLを配信する
  • 管理システムと公開サイトを分離する
  • 構造化データもHTMLに出力する

という構成になっています。

これは「WordPressより静的HTMLの方が優れている」という話ではありません。

更新のしやすさと、公開サイトのシンプルさを両立させるために、役割を分けているということです。

CMSは更新のために使い、公開サイトはできるだけシンプルにする。

どのCMSを使うかだけではなく、「誰が更新するのか」「何を更新するのか」「公開時に何を動かす必要があるのか」まで考えると、Webサイトの構成は大きく変わります。

  • WordPressの更新や運用負担を減らしたい
  • 静的HTMLでサイトを構築したい
  • CMSと公開サイトを分離したい

という方は、ぜひ金風株式会社にご相談ください。

記事の更新はメルマガでもお届けしています。