静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
2020.12.23 2026.7.2
2020.12.23 
2026.7.2 この記事は約2 分で読めます
SSGとは何かを2分で理解できる入門ガイド。
SSGが開発された理由、静的サイトと動的サイトの違い等をシンプルに整理。
Next.jsやAstroなど主要ツールも紹介します。
目次
筆者三好アキ（専門用語なしでプログラミング）
私について詳しくは → 自己紹介
静的サイトジェネレーター（SSG）とは？
静的サイトジェネレーター（SSG）とは、2018年ごろに現れた新しいウェブ開発のツールです。
SSGに対応した代表的なフレームワークには、次のようなものがあります。
• Next.js
• Astro
• Nuxt
静的サイトジェネレーターを使うことで、高速で安全なウェブサイトを作れます。
では、なぜこのような仕組みが必要になったのでしょうか。
まずは静的サイトジェネレーターが登場するまでの背景を、ざっと見てみましょう。
もともとウェブサイトは静的だった
インターネットが始まった頃、ウェブサイトはとてもシンプルでした。
【 HTMLのファイルをあらかじめ手作業で一枚一枚書いておき、サーバーにアップロードしておく 】
このようなウェブサイトは、誰がアクセスしても毎回同じページが表示されます。
日本から見ても、アメリカから見ても、今日見ても明日見ても同じです。
このようなサイトを「静的サイト」と呼びます。
変化が少ないからです。
しかし時代が進み、ページ数が増えてくると管理が大変になりました。
そこで登場したのがWordPressを代表とする「動的サイト」です。
WordPressはアクセスされたときにページを作る
WordPressでは、ユーザーがアクセスしてからページを生成します。
そのため、ログイン機能や会員機能など、ユーザーごとに異なる画面を表示することが可能です。
日本から見た人と、アメリカから見た人に、異なる画面を表示することもできます。
変化を大きくできる、つまりダイナミック（dynamic／動的）にできるのです。
しかしデメリットもあります。
ページを毎回生成するので、ページの表示速度が遅くなるのです。
セキュリティ面も弱くなりました。
静的サイトと動的サイトにおけるページ生成の仕組みを表したものが下図です。
再び注目された静的サイト
そこで再び注目されたのが静的サイトです。
しかし昔の静的サイトではありません。
「現代版の静的サイト」です。
【 ページをあらかじめツールで生成しておき、サーバーにアップロードしておく 】
ウェブ黎明期の「静的サイト」と異なるのは、ページを「ツールで生成しておく」という点です。
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年現在バージョン7まで出ており、着実に改良を重ねながら進化を続けています。
本サイトも2026年6月にGatsby（後述）からAstroに移行しました。
日本では、まだそこまで広く利用されていません。
しかし海外では、高機能な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なども静的サイトジェネレーターです。
よくある質問
Q1. SSGとSSR（サーバーサイドレンダリング）は何が違いますか？
ページを生成するタイミングが違います。
SSGは「ビルド時に、あらかじめ」ページを生成します。
一方SSRは「アクセスがあった時に、サーバーで」ページを生成します。
SSRやSPA、そして最新のRSC（Reactサーバーコンポーネント）まで、ページ生成手法の進化の歴史をすべてカバーした記事も参考にしてください▼
Q2. SSGとSPAはどう違いますか？
SSGは「ビルド時にページを生成しておく仕組み」、SPAは「ブラウザ側でページを生成する仕組み」です。
生成の場所もタイミングも異なります。
SPAについてはこちらをご覧ください▼
Q3. GatsbyなどのSSGは、なぜあんなに高速でページ移動ができるのですか？
やや複雑な話になりますが、Gatsbyでは最初のページはビルド時に生成されたHTMLを表示します。
Next.jsでもSSGを使う場合は同様です。
その後、Reactがハイドレーション（HTMLとJavaScriptを結び付ける処理）され、クライアントサイドルーティングによってSPAのような滑らかなページ遷移が行われます。
なお、これとSSRとの違いは、「最初のHTML」が生成されるタイミングです。
SSGではビルド時に事前生成されたHTMLを返し、SSRではアクセス時にサーバーで生成されたHTMLを返します。
SSRについて詳しくは下記記事をご覧ください▼
Q4. これから学ぶなら、どの静的サイトジェネレーターがおすすめですか？
2026年現在、もっとも広く使われているのはNext.jsです。
情報量が多く、AIに質問したときにも的確な答えが返ってきやすいメリットがあります。
Next.jsを体系的に学びたい方はこちらのガイドをどうぞ▼
Q5. SSGを使えば、必ずサイトは速くなりますか？
多くのケースで速くなります。
ページが事前に生成されているため、アクセス時にその完成済みのページを送るだけで済むからです。
ただし表示速度は、画像の最適化や配信方法（CDN）などにも左右されます。
次に読みたい記事特集
