静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
2020.12.23
2026.6.19
この記事は約2分で読めます
SSGとは何かを2分で理解できる入門ガイド。
SSGが開発された理由、静的サイトと動的サイトの違い等をシンプルに整理。
Next.jsやAstroなど主要ツールも紹介します。
目次
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 私について詳しくはこちら
静的サイトジェネレーター（SSG）とは？
静的サイトジェネレーター（SSG）とは、2018年ごろに現れた新しいウェブ開発のツールです。
有名な静的サイトジェネレーターには次のようなものがあります。
• Next.js
• Astro
• Nuxt
静的サイトジェネレーターを使うことで、高速で安全なウェブサイトを作れます。
では、なぜこのような仕組みが必要になったのでしょうか。
まずは静的サイトジェネレーターが登場するまでの背景を、ざっと見てみましょう。
● https://monotein.com/present
もともとウェブサイトは静的だった
インターネットが始まった頃、ウェブサイトはとてもシンプルでした。
【 HTMLのファイルをあらかじめ手作業で一枚一枚書いておき、サーバーにアップロードしておく 】
このようなウェブサイトは、誰がアクセスしても毎回同じページが表示されます。
日本から見ても、アメリカから見ても、今日見ても明日見ても同じです。
このようなサイトを「静的サイト」と呼びます。
変化が少ないからです。
しかし時代が進み、ページ数が増えてくると管理が大変になりました。
そこで登場したのがWordPressを代表とする「動的サイト」です。
WordPressはアクセスされたときにページを作る
WordPressでは、ユーザーがアクセスしてからページを生成します。
そのためログイン機能や会員機能など、ユーザーごとに異なる画面を表示することができるのです。
日本から見た人と、アメリカから見た人に、異なる画面を表示することもできます。
変化を大きくできるのです。
しかしデメリットもあります。
ページを毎回生成するので、ページの表示速度が遅くなるのです。
セキュリティ面も弱くなりました。
静的サイトと動的サイトにおけるページ生成の仕組みを表したものが下図です。
再び注目された静的サイト
そこで再び注目されたのが静的サイトです。
しかし昔の静的サイトではありません。
「現代版の静的サイト」です。
【 ページをあらかじめツールで生成しておき、サーバーにアップロードしておく 】
ウェブ黎明期の「静的サイト」と異なるのは、ページを「ツールで生成しておく」という点です。
HTMLファイルを手作業で書くのではなく、ツールを使うのです。
この「ツール」が、本記事のメインテーマである「静的サイトジェネレーター（Static Site Generator／SSG）」になります。
さて、静的サイトジェネレーターの「ページをツールで生成する」というプロセスはbuildと呼ばれます。
この点が、昔の「静的サイト」とは異なる点なので、次はこのbuildを少し詳しく見てみましょう。
buildとは何か？
新しいブログ記事を公開する場面を考えてみます。
昔であればHTMLファイルに手作業で書いていました。
前後の記事へのリンクや、関連記事のリンクもすべて手作業で変更するので、非常に手間がかかります。
記事内で使っている画像の最適化などもすべて自前です。
一方、静的サイトジェネレーターを使えば、これらをすべて自動化できます。
記事公開のために最初にすべきことは、記事データを静的サイトジェネレーターに取り込んでページを生成することです。
このページ生成プロセスがbuildと呼ばれます。
buildによって記事データがページのひな形であるテンプレートと一体化されて、ページ（HTML）が生成されるのです。
buildは、手元のコンピューター内や、ウェブサイトをホストしているサービスプロバイダーで行えます。
コードの圧縮・軽量化や画像最適化などもbuild時に行われ、これが次に見る静的サイトジェネレーターのメリットにつながります。
静的サイトジェネレーターのメリット
静的サイトジェネレーターには大きく3つのメリットがあります。
①スピード
ページは事前に生成されているため、高速で表示できます。
②セキュリティ
データベースやサーバーを直接公開しないため、安全性が高くなります。
③柔軟性
フォームやコメント機能なども追加できるため、昔の静的サイトより高機能です。
静的サイト・動的サイト・SSGの特徴一覧
表で比較すると次のようになります。
| 静的サイト | 動的サイト | SSG | |
|---|---|---|---|
| ページ生成 | 手作業で生成 | アクセス時に生成 | build時に生成 |
| ページ生成の場所 | 手元のコンピューター | サーバー | 手元のコンピューターやホスティングサービス（Netlify／Vercelなど） |
| 表示速度 | 高速 | やや遅い | 高速 |
| セキュリティ | 高い | 管理が必要 | 高い |
| データベース | 不要 | 必要 | 不要なことも多い |
| 更新のしやすさ | 低い | 高い | 高い |
| 代表例 | 昔のHTMLサイト | WordPressサイト | Next.jsやAstroサイト |
SSGのコンテンツ管理方法（ヘッドレスCMS）
静的サイトジェネレーターにはbuildのプロセスなどがあり、複雑そうに見えます。
では、プログラマーやエンジニア以外の人は、静的サイトジェネレーターで作った「現代版の静的サイト」を使えないのでしょうか？
静的サイトジェネレーターが開発された当初はそうでした。
しかし今ではさまざまなコンテンツ管理の手法が生み出され、専門知識のない人でも簡単にコンテンツを制作・編集できるようになっています。
SSGのコンテンツ管理でもっともよく使われるのが「ヘッドレスCMS」です。
ヘッドレスCMSの仕組みを使うと、コンテンツ管理画面には使い慣れたWordPressの管理画面、ユーザーに表示するフロント画面には「現代版の静的サイト」が使えます。
私が以前開発したSSGによる「現代版の静的サイト」では、CMSとしてヘッドレス化したWordPressを接続しました。
この結果、WordPressの管理画面でコンテンツの制作作業やプレビューを行うことが可能になりました。
プレビュー画面は次のように表示されます。
「ヘッドレスのWordPress」と「普通のWordPress」の詳しい比較は、次の記事をご覧ください。
Jamstackという言葉
静的サイトジェネレーターが最も注目を集めていたのは2020年ごろでした。
その頃よく使われていた言葉にJamstack（ジャム・スタック）というものがあります。
「Jam」とは、JavaScript + APIs + Markupの頭文字を取ったもので、「静的サイトジェネレーターで作ったサイト」＝「Jamstackサイト」と見られていました。
しかし現在（2026年）、Jamstackという言葉はほぼ耳にしません。
その理由は、Jamstackの技術自体が廃れたというより、より大きな技術的な流れに吸収されていったからだと考えられます。
現在ではSSG（Static Site Generation）以外にも、ISR（Incremental Static Regeneration）、SSR（Server Side Rendering）、RSC（React Server Components）、Streamingなどさまざまな技術があります。
そのような中で「すべてのページを静的に生成する」というSSGの手法ではなく、「ページごとに最適な生成手法を選ぶ」という方向性に変わりました。
Jamstackが提唱したアーキテクチャの要素自体は、現在のNext.jsやAstro、Nuxtなどに組み込まれています。
Jamstackの技術が時代遅れになったというよりは、より普遍的になったと考えていいでしょう。
本サイトにはJamstackについて下記のような過去の記事があります。
• Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ
• これだけ読めばOK！ Jamstackのすべてがわかります
有名な静的サイトジェネレーター
最後に有名な静的サイトジェネレーターを簡単に紹介します。
Next.js
Vercelという企業によって開発されているReactベースのフレームワークです。
2026年現在、日本を含め世界中で広く使われています。
Next.jsは静的サイトジェネレーターとしてだけでなく、サーバーサイドレンダリング、フルスタックアプリ開発など、多用途に使うことのできる非常に守備範囲の広いツールです。
Next.jsについてより包括的に知りたい方は、下記ガイド記事を参考にしてください▼
Astro
2022年に安定版がリリースされた静的サイトジェネレーターがAstroです。
2026年現在バージョン6まで出ており、着実に改良を重ねながら進化を続けています。
日本では、まだそこまで広く利用されていません。
しかし海外では、高機能なNext.jsを使う必要がないブログサイトや、パフォーマンス重視の企業サイトなどで広く使われています。
Astroの特徴は、ReactやVueといった特定のJavaScriptフレームワークをベースとしていない点です。
HTMLとCSSの知識だけで十分使えます。
Astroに興味のある人は下記教本を参考にしてください。
1時間半でAstroがわかります。
はじめてつくるAstroサイト
【1時間半で、人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】
Amazonのページに移動する
Nuxt
Next.jsに影響を受けた静的サイトジェネレーターです。
ReactではなくVueを使っています。
Nuxtはバージョンが2から3に変わるとき（2022年前後）に非常に時間がかかり、また大きな変更も加えられたため、多数のユーザーがNext.jsに移行しました。
とはいえ日本ではNuxtは人気です。
note.comなどでも使われています。
Nuxtの使い方を短時間で知りたい方は、下記教本を参考にしてください。
はじめてつくるNuxtサイト
【Vueフレームワークで一番人気のNuxt。最新Nuxtの基礎と使い方をしっかりマスターできる】
Amazonのページに移動する
Gatsby
Gatsbyは現在開発が止まっている静的サイトジェネレーターです。
2020年ごろはNext.jsと人気を二分していました。
いま新規のプロジェクトでGatsbyを使う理由はありませんが、Gatsbyに興味のある人には下記教材があります。
はじめてつくるGatsbyサイト
【人気フレームワークGatsbyを2時間でマスター。ハイパフォーマンスのウェブサイトを時短で試してみよう！】
Amazonのページに移動する
本サイトにはGatsbyについて下記のような過去の記事があります。
その他、開発言語にRubyを使ったJekyllや、Goを使ったHugoなども静的サイトジェネレーターです。
● https://monotein.com/present
次に読みたい記事特集
いま読まれている記事ベスト7
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
非IT出身。かつてプログラミングの専門用語の壁に何度もぶつかり、挫折した経験から、「専門用語なし」のメソッドを確立。1,200人以上のビギナーのフロントエンド開発入門を成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書30冊以上。Amazonベストセラー1位複数回獲得。
記事の執筆、法人向けReact研修なども行っています ▼
• 技術記事の執筆について
• 法人研修について