静的サイトジェネレータってなに？メリット・デメリットまとめ

静的サイトジェネレータとは？

静的サイトジェネレータとは、その名の通り、

• 静的サイトを
• ジェネレート（生成する）

プログラムです。

通常、Webサイトを構築する際には、

• ページ情報をブラウザで表示する情報を返す「フロンテンド処理」
• リクエストに対してレスポンスを返す「バックエンド処理」

の二つを構築する必要があります。

静的サイトジェネレータは、このうち「バックエンド処理」が必要なく、コンテンツの作成に集中できるのが大きな特徴です。

静的サイトジェネレータは、

• 記事を作成
• サイトをビルド
• ファイルをサーバーにアップロード

という流れになるため、動的にページを生成するサイトとは仕組みが異なります。

ただ、「サイトをビルド」「ファイルをサーバーにアップロード」については、一括でやってくれるホスティングサービスを利用するのが主流なので、特に作業を意識しないで利用できます。

静的サイトジェネレータのメリット

サーバーが負荷が軽い = サーバーコスト & 構築コストが安い

静的サイトジェネレータの場合、サイトの構成が「全て静的ページ（動的処理がない）」ため、バックエンド処理は「生成されたHTMLページを返すだけ」です。つまり、バックエンド処理を実質作成しないでも運用できます。

また、ページを生成する処理はサーバーでリアルタイムで行わず、ローカルやビルド専用サーバーで行うことが多いため、サーバーへの負荷が軽いため、サーバーコストを圧倒的に抑えることができます。

この二つは静的サイトジェネレータの最大のメリットとも言えます。

ページの表示速度が速い

サイト運営において、ページの表示速度は非常に重要な要素の一つです。

静的サイトジェネレータで構築されたサイトは、バックエンド処理がなく「ただ、HTMLとCSSを返しているだけ」なので、非常に高速に動作します。

通常の動的サイトであれば、ページのレスポンスを100ms短くするのに膨大な時間と手間を要しますが、静的サイトジェネレータで構築されたサイトであれば、「レスポンスが速いサーバーを選ぶだけ」で高速表示が瞬時に実現できます。

静的サイトジェネレータのデメリット

ページ更新が即時反映されない

静的サイトジェネレータは「全てのをページ生成してアップロードする」という工程があるため、どうしても、ページの更新を即時反映することが難しくなってしまいます。

ただ、記事の量やジェネレータにもよりますが、100記事ほどのサイトであれば、「生成に数秒、アップロードに数10秒」くらいなので、すごく時間がかかるというわけではありません。

ページ更新に秒単位の即時性が求められるサイトには不向きですが、多くのサイトはそこまでの即時性は必要ないことが多いでしょう。

動的な処理ができない

静的サイトなので当然ですが、

• ユーザーデータの編集
• 注文処理
• 問い合わせ受付
• ユーザーフォームの書き込み

などの動的な処理ができません。ここは静的サイトジェネレータの一番のデメリットです。

ただ、動的処理が必要な部分だけを外部サービスを組み合わせることで対処することもできます。とは言え、外部サービスだけで何とかできない範囲もあるので、静的サイトジェネレータを利用するかどうかの分水嶺になるところでもあります。

ジェネレータ特有の作法を習得する必要がある

静的サイトジェネレータは、ページを生成するテンプレートエンジンのようなものなので、特有の作法を習得する必要があります。それぞれ、習得しやすいようには作られていますが、慣れるまでには時間がかかるでしょう。

ただ、作法を習得するのは動的サイトでも同じで、RubyならRails、PHPならLaravelと、現在は素の言語をそのまま使うよりもフレームワークを利用するのが主流なので、同じとも言えます。

一方で、WordPressなどのCMSから移行する際は、「ページをポチポチクリックして構築する方法」とは全く異なるので、ハードルは高めだと思っておいた方が良いでしょう。その意味ではデメリットとも言えます。

環境構築に知識が必要な場合がある

多くの静的サイトジェネレータが簡単にインストールできるようになっていますが、それでもサーバーの管理画面から「ワンクリックインストール」ができるWordPressと比べたら、それなりに知識が必要です。

また、RubyやPHPのフレームワーク、WordPressなどのCMSと比べると、利用ユーザーが少ないため、共有されている情報が少ないのもデメリットの一つです。

主な静的サイトジェネレータを比較する

主な静的サイトジェネレータを比較してみましょう。

ジェネレータ	言語	機能	テーマの豊富さ	習得難易度	公式サイト
Gatsby.js	React	◎	◎	高	公式サイト
HUGO	Go	○	○	中	公式サイト
Hexo	Node.js	△	△	中	公式サイト

バランスの良いHUGO

日本ではHUGOの事例をよく見かけます。

HUGOは、フレームワークの経験のある方なら習得も比較的容易で、機能もテーマも程よく揃っていることから、手軽に始められるのも一つの理由でしょう。

テーマさえ決めてしまえば、ほとんどマークダウンファイルを追加するだけ構築できる手軽さと、やろうと思えば自分でかなり細かくカスタマイズできるカスタマイズ性のバランスが良いイメージです。

ただ、Gatsby.jsと比較すると機能もテーマの数も多くないため、WordPressで構築していたブログやコーポレートサイトをリプレイスするレベルで利用するのが最適です。

ちなみに、当サイトはHUGOで構築しています。

高機能なGatsby.js

一方で、海外ではGatsby.jsの事例をよく見かけます。

Gatsby.jsは高性能な動的サイトのリプレイスとしても十分な機能を持っていることから、人気なのもうなづけます。一方で、フレームワーク経験者でも、Gatsby.jsの作法だけでなく、Javascriptの知識がかなり必要になるので、習得難易度が比較的高いのがデメリットです。

シンプルなサイトと相性が良いHexo

Hexoは一時期日本で話題になったジェネレータです。簡単に使うことができる一方、機能が少なめなのでシンプルなブログなどに向いています。

まずはHexoではじめてみて、機能やテーマが物足りなくなったらHUGOに移行するというのが良いでしょう。

静的サイトジェネレータに向いているサイト

最後に、どんなサイトが静的サイトジェネレータに向いているのかを見てみましょう。静的サイトジェネレータは、更新頻度が低く、管理コストを抑えたいサイトに最適です。

タイプ	更新頻度	コスト	相性
コーポレートサイト	低	低	◎
ブログ	中	低	○
サービスサイト	中	低	△

企業のコーポレートサイト

企業のコーポレートサイトは、動的処理が不要なことも多く、一方で維持コストは下げたいところなので、静的サイトジェネレータに最適なケースと言えます。

コーポレートサイトは、コンテンツの更新もそれほど多くはないため、動的にページを生成するメリットがあまりないため「静的サイトでも十分」というケースが多いでしょう。

ブログ

ブログは多くても毎日10本程度の記事更新になるので、静的サイトジェネレータでも十分運用できます。

また、コーポレートサイトなどと違って、記事を積み上げていくタイプのサイトになるので、記事数が多くなっても動作に影響がない（遅くならない）という意味では、静的サイトジェネレータに向いているサイトと言えます。

一方で、ブログとして使う際はテーマが重要になるので、良いテーマが見つからない場合は、あまり良い選択肢とはならないかもしれません。

サービスサイト

自社のサービスを紹介するサイト（特徴やプランの紹介など）は、変更が少ないため静的サイトジェネレータに向いています。

しかし、予約や購入が絡む場合は、外部のサービスを利用する必要があるため、最初から購入機能が揃っているサイト構築サービスを利用した方がスムーズでしょう。

---

静的サイトジェネレータと、メリット・デメリット、どんなサイトに向いているのかをみてきました。

静的サイトジェネレータはメリットも多い分、サイトの特性やスキル、運用体制を選ぶ側面もあります。

今回挙げたポイントを鑑みて、自身のサイトにマッチするかを検討してみてください。