非エンジニアも知っておくべきCMS新時代の注目キーワード ゼロからわかる 静的サイトジェネレーター

更新性のあるWebサイトを運用する手法の一つとして、徐々に注目を集めているのが「静的サイトジェネレーター」です。ここでは静的サイトジェネレーターの仕組みやメリット、デメリットを、非エンジニア向けにわかりやすく解説します。

meganiiさん電機メーカーにて社内ITインフラおよびデータ視覚化の業務を担当。Webサイト構築・プログラム開発について、個人ブログで情報発信を行う。著作の『Hugoで始める静的サイト構築入門静的サイトジェネレーターで作る自作サイト 技術の泉シリーズ』(インプレス NextPublishing 刊)がKindleで販売中。【URL】https://www.meganii.com/

既存のWebサイトやCMSとの違い

Q1 そもそも静的サイトとは? 動的サイトと何が違う?

静的サイトジェネレーターの正体を探る前に、まずは「静的なサイトとは何か」についてお伝えしましょう。

静的なサイトとは、WebサーバにHTMLやCSSなどが設置され、訪問者が直接その内容を表示するタイプのWebサイトを指します。静的サイトと対照的な存在が、「動的サイト」と呼ばれるものです。これは、訪問者がアクセスするたびに、データベースから情報を読み出してページを生成します。

静的サイトと動的サイトの大きな違いは、内容が固定的かどうかです。静的サイトは、いつ誰が見ても同じ内容ですが、動的サイトは、訪問者の属性や行動履歴によって変わることがあります。ECサイトをイメージするとわかりやすいでしょう。

静的サイトと動的サイトの違い

 

Q2 静的サイトジェネレーターはこれまでのCMSと何が違う?

CMSも静的サイトジェネレーターも、更新性のあるWebサイトの運用手段ですが、記事の管理方法が大きく違います。

CMSは、基本的にはサーバにコンテンツを管理するプログラムがあります。プログラム上で作成したコンテンツはデータベースで管理され、そこからWebサイトに出力されます。

一方、静的サイトジェネレーターにコンテンツを管理する機能はありません。テキストファイルを読み込ませると、静的なWebページを生成します。もっともシンプルな運用方法の場合、静的サイトジェネレーターはサイト運営者のローカル環境にインストールされていて、生成されたHTMLをWebサーバにアップロードすることでページが公開されます。

CMSと静的サイトジェネレーターの違い

 

Q3 静的サイトジェネレーターのメリットって? デメリットはある?

静的サイトジェネレーターを使った記事作成は、大まかにいうと右の図のような流れになります。

基本的に、静的サイトジェネレーターはコマンドラインで操作します。一般的なPC用アプリのようなGUI(グラフィカル・ユーザーインターフェイス)がないためハードルは高めです。Webページが生成された後は、FTPソフトなどを使ってWebサーバに設置します。記事内に画像がある場合は、画像も含めてアップロードするか、あるいは画像ホスティングサービスを活用し、画像URLをHTMLに記述する方法も考えられます。

また、自動化ツールを使うことで、一連の流れを自動化することも可能です。

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

 

静的サイトジェネレーターの仕組み

Q4 静的サイトジェネレーターではどうやって記事を更新するの?

静的サイトジェネレーターを使った記事作成は、大まかにいうと右の図のような流れになります。

基本的に、静的サイトジェネレーターはコマンドラインで操作します。一般的なPC用アプリのようなGUI(グラフィカル・ユーザーインターフェイス)がないためハードルは高めです。Webページが生成された後は、FTPソフトなどを使ってWebサーバに設置します。記事内に画像がある場合は、画像も含めてアップロードするか、あるいは画像ホスティングサービスを活用し、画像URLをHTMLに記述する方法も考えられます。

また、自動化ツールを使うことで、一連の流れを自動化することも可能です。

静的サイトジェネレーターでのWebサイト更新の流れ

 

Q5 静的サイトジェネレーターにはいろいろな種類があるって本当?

静的サイトジェネレーターは、さまざまな種類のものがありますが、その最大の違いは使用している言語です。例えば、「Hugo(ヒューゴ)」という静的サイトジェネレーターは、Googleが開発したGo言語で書かれています。使用している言語によって処理速度が違ったり、周辺ツールのエコシステムが異なります。また、自分が知っている言語であれば、自分自身でツールをメンテナンス・カスタマイズできるようになります。

さらに、処理速度やプラグインの多さなども検討材料になるほか、ツールの人気や将来性も気にしておくといいでしょう。人気がなくなったツールは誰もメンテナンスしてくれず、やがて動かなくなってしまう可能性があるためです。

静的サイトジェネレーターでのWebサイト更新の流れ

 

Q6 エンジニア以外は静的サイトジェネレーターを活用できない?

コマンドラインを使ってHTMLを生成…と聞くと、エンジニア以外には利用できないと思うかもしれません。しかし、microCMSなどのヘッドレスCMSサービスと静的サイトジェネレーターを組み合わせることで、エンジニア以外の人でも静的サイトジェネレーターを利用できます。例えば企業サイトなどでは、Web制作会社がシステムを構築すれば、投稿者は普通のCMSと同じ感覚で投稿できるでしょう。

この場合、静的サイトジェネレーターはクラウド上に設置されます。ヘッドレスCMSで記事を投稿すると、APIを利用して情報が送信され、そこから自動処理でHTMLが生成されるという流れになります。

ヘッドレスCMSと静的サイトジェネレーターを組み合わせたシステムのイメージ

 

Q7 ヘッドレスCMSと組み合わせるとどんなメリットがある?

コマンドラインを使ってHTMLを生成…と聞くと、エンジニア以外には利用できないと思うかもしれません。しかし、microCMSなどのヘッドレスCMSサービスと静的サイトジェネレーターを組み合わせることで、エンジニア以外の人でも静的サイトジェネレーターを利用できます。例えば企業サイトなどでは、Web制作会社がシステムを構築すれば、投稿者は普通のCMSと同じ感覚で投稿できるでしょう。

この場合、静的サイトジェネレーターはクラウド上に設置されます。ヘッドレスCMSで記事を投稿すると、APIを利用して情報が送信され、そこから自動処理でHTMLが生成されるという流れになります。

ヘッドレスCMS+静的サイトジェネレーターのメリット、デメリット

 

Text:小平淳一
Web Designing 2023年10月号(2023年8月18日発売)掲載記事を転載

  • URLをコピーしました!
目次