サービス JamstackによるWebサイト制作

Lateleでは、比較的新しいアーキテクチャであるJamstackを採用したサイト構築も対応可能です。

Jamstackとは

Jamstackとは、Webサイトをより速く表示し、セキュリティ面にも優れ、動的なデータはAPIを通じてアクセスし静的なHTMLを生成する事でメンテナンス性や拡張性に優れたアーキテクチャです。

Jamstack

Jamstackという名称は、Netlify社のCEOであるMathias Biilmann氏が提唱した造語で、もともとは、

  • JavaScript の J
  • API の A
  • Markup の M

と Stack（システム構成）を組み合わせたものでした。
現在ではこの考え方が変わっており、JavaScriptやAPIが必須では無いので、それらを一切使わなくともJamstackは成立します。

そうなると、今までの静的サイトとの違いが分かりにくい部分ですが、JavaScriptやAPI、WordPress等を使った動的データの生成が一切必要のないサイトはもともとパフォーマンスには優れています。
なのでJavaScriptやAPIを一切使っていないサイトならJamstackと言えるかと思います。

とは言え、これですと分かりづらいので、ここで言うJamstackとは以下のような構成のサイトと言う事で進めます。

  • 動的なコンテンツはJavaScriptによりAPIを通じて取得する
  • 予め取得したデータを埋め込んだ形で静的なHTMLを生成する
  • 静的なHTMLを生成するために、静的サイトジェネレーターを利用する
  • CMSはヘッドレスCMS等、APIが提供されているCMSを利用する
  • ソースコードの管理はGitを利用する
  • Jamstackに適したホスティングサービスを使う

では、これらの構成でサイトを作成すると、今までのサイトとどういった違いが有るのかを簡単ですがお伝えしたいと思います。

今までと何が違うのか

コーポレートサイトを制作する場合、お知らせやニュースリリース等はCMSを利用して更新できるようにすることが多いと思いますが、CMSを使う場合、サーバー側での処理が必要になってきます。
WordPressでしたらPHPが必須ですし、Movable TypeでもPerlが必須だったり、当然ですがデータベースも必要になります。
これらCMSを快適に動作させるにはサーバーのスペックも重要ですし色んなモジュール等も必要のためサーバー選定も必要でした。

しかし、Jamstackで構築するサイトの場合、動的なコンテンツはJavaScriptによりAPIを通じて取得し、予めそれらのデータを埋め込んだ形で静的HTMLが生成されます。
ですので、サーバー側の処理も必要なければデータベースにもアクセスする必要が無い、ただの静的なHTMLになるため、ページの表示速度が速くセキュリティ面にも優れたサイト構築ができます。

予めデータを埋め込むとは

予めデータを埋め込むために、静的サイトジェネレーター（Static Site Generator（SSG））を使います。
有名なSSGと言えば、Astro、Next.js、Hugo、Gatsby、Jekyll、Nuxt、Eleventy辺りでしょうか。

これらのSSGを使い、事前に静的なHTMLを生成します。

現在弊社でJamstackにて対応する場合は、Astroを使うことが多いです。

CMSは今まで通り使えるの？

WordPressやMovable Typeといった今までのCMSも使えますが、多くの場合、ヘッドレスCMSと呼ばれるCMSを使います。

有名なヘッドレスCMSと言えば、Contentful、GraphCMS、microCMSなどがあります。
microCMSに関しては日本製なのでネイティブな日本語の管理画面やサポートも日本語ですので、英語が苦手な方でも使いやすいヘッドレスCMSです。

この、ヘッドレスCMSとは主に投稿画面しかないCMSです。
通常のCMSの場合、コンテンツ（ウェブページ）を表示するテンプレートを作成するための画面が存在しますが、ヘッドレスCMSはこれらのテンプレートを作成する画面が無く、かわりにAPIが提供されています。
（WordPressやMovable TypeもAPIは提供されていますが）

このコンテンツの表示部分に関しては、フロントエンドエンジニアが自作する必要があるのですが、CMSを使って投稿する方にとっては、WordPressやMovable Typeと似たような管理画面で投稿できますので、使い勝手が悪くなることもないです。

CMSとヘッドレスCMSで一番違う部分はコーディングを担当する側ですので、投稿する方の好みに合ったヘッドレスCMSを使うことが出来ます。

Lateleの場合ですと、Movable Typeを使った案件のご相談も多いのですが、Movable TypeをヘッドレスCMSとして活用することも出来ますので、管理画面に慣れておりCMSを変えたくない場合や、ライセンス料を無駄にしないと言う意味でも、ヘッドレスCMSの選択の一つとしてMovable Typeを使うのも良いと思います。

Jamstackで実際に使ったCMS

現在見て頂いているこのサイトもJamstackにて構築しており、静的サイトジェネレーターには「Astro」を使っています。
現在は、Markdownにてお知らせは管理していますが、以前までの、お知らせページは、「esa」というドキュメント共有サービスをヘッドレスCMSとして使っていました。

esa

esaは、もともと本来の目的であるドキュメント共有や日報に活用していましたが、テキストだけの簡単なページなら十分にヘッドレスCMSとして使えると思い、実験的な意味も兼ねて使ってみました。
実際にesaをヘッドレスCMSとして使ってみると、esaはほぼ毎日使っており専用の管理画面を開く必要もなく、気軽に情報の更新が出来るため非常に便利だと感じています。

esaは料金も一人あたり500円/月（税込）ですので、簡易的なヘッドレスCMSとしても使え、本来のドキュメント共有ツールとしても使えることを考えると相当にリーズナブルです。

また、弊社のブログである「Latele Blog」では、以前からMovable Typeを使って構築していたのも有り、Movable TypeをヘッドレスCMSとして採用しました。
今までと同じように更新できるため、新しい管理画面に慣れる必要もなく運営できます。

このように、APIさえ使えるサービスであればヘッドレスCMSとして使えたり、用途に合わせて複数のヘッドレスCMSを組み合わせると言う事も可能になります。

サイト修正時のコスト削減

WordPressやMovable Typeで構築した今までのサイトの場合、デザイン変更やコンテンツの修正時には一度ベースとなるHTMLを改修してから、CMS側のテンプレートを修正する必要がありました。

これがJamstack構成でのサイト制作になると、見た目の部分とデータを分離しておけますので、CMS側のテンプレート修正の工数が削減できるため、その分のコストを削減することが出来ます。

先祖返りの可能性が無くなります

今までのサイトでもGitを代表とするバージョン管理システムを使うことは多いと思いますが、サイトに関わる全メンバーがバージョン管理システムを使うとは限らず、例えば急ぎの修正でディレクターがFTPでサーバーに接続して、ファイルをダウンロードし、それを修正してアップする。
その後、フロントエンドエンジニアが更新を行いアップしたら先祖返りしてしまった！といった事が有りました。

しかし、Jamstackの場合、静的サイトジェネレーターでのビルドが必要になりますので、そのビルドをしてくれるホスティングサービスを使うことになります。

有名なところでは、Netlify、Vercel、AWS Amplify コンソールなどが有ります。
Lateleでは、Netlify、Vercelを利用したことがあります。

これらのホスティングサービスを使ってビルドする場合、GitHubやGitLab、BitBucket等のGitサービスと連携する必要がありますので、必然的にGitを利用することになります。

これにより、先祖返りとは無縁になります。

SSGを使わなきゃ更新できない？

頻繁に更新する部分はヘッドレスCMSで更新可能にすると思いますが、あまり更新されないコンテンツ等はCMSで管理していないことも多いと思います。
しかし、そういったページの更新を行う必要がある場合には、静的サイトジェネレーター（SSG）を必ずしも使う必要は有りません。

本当に急ぎであれば、GitHub等のGitサービスのサイトから該当ファイルを直接編集してコミットしてしまえば良いので、出先で急に修正しなければいけない！といった場合でもスマホから修正する事も可能です。

開発環境の準備が容易に

これらのホスティングサービスを使うメリットの一つとして、ブランチやプルリクエストごとに専用のURLで確認することができます。

今までは、開発環境やお客さんの確認環境と本番環境をそれぞれ用意する必要が有りましたが、Jamstackの場合ブランチを切っておけば良いので、例えば、

  • main（master）ブランチは本番環境
  • devlepブランチは開発環境
  • previewブランチはお客さん確認用

といった感じで、用途に合わせてブランチを用意するだけでよくなります。

ブランチを切るだけで良いということは、サーバーインストール型のCMSも、それぞれの環境に用意しなければならなかったのが、ヘッドレスCMSなら複数用意する必要がなくなります。

LateleのJamstack開発

Jamstackは比較的新しいアーキテクチャと言う事もあり、経験やノウハウが豊富…とは正直言えない部分では有りますが、少ないとは言え、実際にJamstackでのサイトを制作してみて多くの魅力を感じました。

Lateleでは今まで培ってきたWebサイト制作の知見を活かし、ハイパフォーマンスでメンテナンス性もよく、質の高いコーディングのJamstackによるWebサイトを構築し提供します。

Jamstackなアプローチのサービス

弊社が提供しているセミオーダーメイドの個人事業主・中小企業向けWebサイト制作サービス「mini Late」は、Jamstackなアプローチでサイトを制作します。
小規模サイト向けのため中・大規模サイトでは提供できませんが、Jamstackなサイトを安く制作したい場合は「mini Late」もご検討ください。