CMSと聞くと、やはりダントツで利用されているのはWordpress(ワードプレス)です。

オーストラリアのコンサルティングカンパニーQ-Successによると、日本のCMSにおけるワードプレスシェアは、2019年時点で82.4%と言われています。

何かのメディアやサイトを立ち上げる際に、CMSを使うのはもはや超一般的と言えます。

しかしながら、昨今、CMSにとって代わる「静的サイトジェネレーター」、通称SSG(Static Site Generator)が大きく注目されています。

もしかすると、CMSから静的サイトジェネレーターへ早く移行すると大きな恩恵を受けることができるかもしれません。

そこで、今回はWebサイト運用でCMS(WordPress)を越える存在となり得る静的サイトジェネレーターについて分かりやすく解説していきます。

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

CMSを使わずにハイレベルなWebを作れるジェネレーター

静的サイトジェネレーターは、基本的には静的ページを生成するジェネレーターです。

静的サイトジェネレーターは、動的システムを抱えないので、非常に爆速です。ワードプレスと比べても驚くほど高速なのです。高速なので、SEOへのアピールが非常に有効な可能性があります。

また、セキュリティリスクも非常に低く、安全です。

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

静的だからこそのメリットがある

一般的にCMSはウェブページの生成をブラウザから実際にアクションがあった時に行います。

ボタンを押したら、動的に次の記事のデータがレスポンスされ読み込まれるわけです。そのため、多くのプラグインやシステムが動的に関わり合っていると、読み込むまでに時間が掛かってしまいます。

しかし、静的サイトジェネレーターは、既に静的に既に書き出された中身を必要に応じて変更するような感覚です。

オーダーがあってから作っているのと、既に作っているものをオーダーに応じて即座に出すというぐらいの違いです。とても大きな違いですよね。

このような仕組みから、静的サイトジェネレーターは、ローカル環境で管理が行えます。ローカル環境で管理したものをビルド(本番用の書きだすこと)します。この時点でページが生成されているわけです。

管理もローカルで行えるのでとても安全ですよね。

CMSの弱点を補える静的ジェネレーター

高速化、SPAへの対応ができる魅力がある

オウンドメディアを作るにしても、コーポレートサイトを作るにしても、今のWeb制作の世界では対応すべきことがたくさん存在します。

・高速化
・AMP
・OPG
・Webフォント
・アイコンフォント
・構造化データ
・SVG
・画像最適化

など、様々です。サイト制作に掛かる負荷も、サイトそのものが抱える負荷も大きな状況です。

動的なCMSよりも、静的サイトジェネレーターでなるべく軽い仕様で作ることができれば、それは願ったり叶ったりと言えるでしょう。

そして、最近では、SPAへの対応も非常に重要になってきています。

SPAはSingle Page Application(シングルページアプリケーション)を意味します。

シングルページアプリケーションというのは、Webページ全体を読み込むことなく、Webページの部品ごとに構成させて、その部品のみを切り替える手法です。

例えば、ヘッダーやフッターはサイトの中でもなかなか変わらないですよね。コンテンツ部分だけがページごとに違うのであれば、コンテンツの部分の表示だけを差し替えるイメージです。

そのため、高速にページ遷移を行うことが可能になります。

サイトとしては単一ページのように扱い、変更箇所を差し替えることで複数ページに見せているというような感じです。

静的ジェネレーターにはどんなものがあるの？

静的サイトジェネレーターの種類

静的サイトジェネレーターは今黎明期なので、非常にたくさんの種類がありますが、今回staseonでお薦めするのは、

・Gatsby(React)
・Gridsome(Vue)

の2つです。基本的に静的サイトジェネレーターを扱うためには、モダンなJavaScript用フレームワーク(ライブラリ)を使いこなせる必要があります。

その中でも、ReactやVueは最も人気で使い勝手の良いJavaScript用フレームワーク(ライブラリ)と言えます。

Reactとは一言で言うとUIを作るためのJavaScript用ライブラリです。Facebookが開発元でFacebook、Yahoo、ATOM、Airbnbなど、名だたる有名な企業で採用されています。

Vueもzozo や LINE、などたくさんの企業で導入されています。

静的サイトジェネレーターの導入に関わらず、今後Web制作の世界では、モダンなJavaScript用フレームワーク(ライブラリ)がかなり幅を利かせていくと言えるでしょう。

そして、ReactやVueを使ったフロントエンジニアリングに、firebaseなどのようなBaaS(Backend as a Service)を加えるだけで、ある程度の規模と水準とセキュリティをカバーしたWebサイトやサービスを作ることが可能になっていきます。

そうなると、Webデザイナーやバックエンドエンジニアよりも、優秀なフロントエンジニアに注目が集まってくるかもしれません。

Webデザイナーであれば、JavaScriptフレームワークを扱えることが、今後自身のキャリアをかなり大きくしていくでしょう。

フロントエンジニアはJavaScriptフレームワークを極めながら、WebデザインとBaaSの理解を深めることで、より多くの案件で主導権を握っていけるようになるはずです。

最後に：今後ますます使いやすくなる静的サイトジェネレーター

静的サイトジェネレーターというカードを扱えるようになろう

以上、静的サイトジェネレーターについて分かりやすく解説してきました。

歴史もあり、デザインテーマもプラグインも充実し、むしろ、できないことを探すのが難しいワードプレスですが、その中身は動的に混雑している部分に弱点があります。

静的サイトジェネレーターは、速度の面、セキュリティの面からも導入を好む企業が増えるでしょう。

実際に、サイトの速度テストなんかのスコアがかなり改善されるので、そうしたスコアが満点になることを好む経営者などにはとてもセールスしやすい側面もあります。

ぜひ、静的サイトジェネレーターについて注目してみてください。