Jamstackの普及に伴い、Web制作の現場でも**Static Site Generator（SSG）**が広く使われるようになりました。
でも、Gatsby、Next.js、Hugo、11ty、Astro、Nuxtなど……選択肢が多すぎて迷う人も多いはず。
本記事では、使う目的・技術スタック・規模感に応じたSSGの選び方を、わかりやすく紹介します。
✅ そもそもStatic Site Generatorとは？
SSGは、あらかじめHTMLを生成しておくことで、超高速かつセキュアなWebサイトを構築できる仕組みです。
CMSのように毎回動的にページを生成せず、ビルド時にHTMLファイルを出力します。
🔍 SSG選びの5つの観点
1. 📚 コンテンツの量・更新頻度
| サイトの特徴 | 向いているSSG |
|---|---|
| ページ数が多い（数千以上） | Hugo、Next.js（ISR対応） |
| 頻繁に更新されるブログ | 11ty、Astro、Hugo |
| ポートフォリオやLP | 11ty、Astro、Jekyll |
Hugoはビルド速度が圧倒的に速く、大規模サイト向きです。
2. 💻 使用する言語・フレームワークとの相性
| 技術スタック | おすすめSSG |
|---|---|
| React | Next.js、Gatsby |
| Vue | Nuxt、VitePress |
| Svelte | SvelteKit |
| HTML/CSS/JSだけ | 11ty、Astro、Hugo |
React開発者には Next.js や Gatsby が自然ですが、HTMLメインなら 11ty や Astro が軽量で使いやすいです。
3. 🌐 サイトの機能・インタラクション
| 必要な機能 | 向いているSSG |
|---|---|
| 動的ルーティングやAPI連携が必要 | Next.js、Nuxt |
| 完全静的サイトでOK | 11ty、Hugo、Astro |
| 柔軟なデータ取得（Markdown、API等） | Astro、11ty、Gatsby |
Astroはコンポーネントベースでありつつ、不要なJavaScriptは読み込まない“ゼロJS”設計が特長です。
4. 🚀 デプロイ環境との相性
| デプロイ先 | ベストな組み合わせ |
|---|---|
| Netlify/Vercel | Next.js、Astro、11ty |
| GitHub Pages | Jekyll、Hugo、11ty |
| Firebase Hosting | SSG全般（特にNext.js） |
Vercelを使うならNext.jsが最も親和性が高いです。
5. 🧩 拡張性とプラグインエコシステム
- プラグインを豊富に使いたい → Gatsby、11ty
- 自由にカスタマイズしたい → Astro、Hugo
- シンプルさ重視 → Jekyll、11ty
Gatsbyはエコシステムが強力ですが、設定が複雑になる傾向があります。
🏁 初心者におすすめのSSG 3選
| SSG名 | 特長 |
|---|---|
| 11ty | HTML/Markdown中心で学習コストが低い |
| Astro | 複数フレームワーク対応＋ゼロJS可能 |
| Next.js | Reactを使うなら最有力候補 |
✅ まとめ：目的とスキルセットで選ぼう
| 質問 | 向いているSSG |
|---|---|
| Reactが得意 | Next.js、Gatsby |
| 軽量で高速なブログを作りたい | Hugo、11ty、Astro |
| フロントエンドは最低限でいい | 11ty、Jekyll |
| 多言語・PWA対応が必要 | Nuxt、Next.js |
📌 迷ったらまず11tyかAstroを試すのがおすすめです。
どちらもシンプルで、後から高度な機能にも拡張可能です。
