microCMSを用いたJamstackで安心・安全なWebサイトを制作！

こんにちは！フロントエンドエンジニアの徳山です。

ノベルティでは、モダンな開発言語やフレームワークを用いた「Jamstack」という手法を取り入れ、機能性、保守性の高いWebサイト制作を行っています。

その中で使用しているのが「microCMS」というコンテンツ管理システムです。

この記事では、microCMSを用いたWebサイト制作がどのようなものなのか、これまでのWebサイト制作と何が違うのかなどについて、Webサイト制作の依頼を検討されている方へ向けて解説します。

はじめに：Jamstackとは

Jamstackという名前の由来は、使用される技術の頭文字からきています。

J：JavaScript
ページに動きをつける、データのやり取りをするためのプログラミング言語
A：APIs
外部のサービスや機能を呼び出すための窓口
M：Markup
あらかじめ用意しておくページそのもの（ブラウザに表示されるHTML）

これらの技術を積み重ねる(stack)手法がJamstackです。

Webサイトのページをあらかじめ作って用意しておき、ユーザーがページにアクセスすると用意しておいたページが表示されるという仕組みです。

ページの表示速度が速い、安全性が高い、壊れにくく運用しやすいといった特徴があります。

従来のWebサイト

では、Jamstackでないサイトはどのように表示されているのでしょうか。

多くの企業のサイトなどでも使われている「WordPress」と比較すると以下のようになります。

WordPressの場合

1. ユーザーがページにアクセスする
2. ページを構成するために必要なデータを、サーバーがデータベースから取得してくる
3. 取得してきたデータをもとにページを生成する
4. 生成されたページを返し、ブラウザに表示される

Jamstackの場合

1. ユーザーがページにアクセスする
2. あらかじめ作って用意されていたページをサーバーが返し、ブラウザに表示される

WordPressはアクセスのたびにデータベースと連携してページを生成する仕組みであるのに対し、Jamstackは事前に用意したページを返すシンプルな仕組みとなっており、この違いが表示速度やセキュリティ、運用のしやすさといった点で大きな差を生み出すことになります。

Jamstack開発を採用する理由

サイトの表示スピード

WordPress

ユーザーがページにアクセスするたびにサーバーがデータベースとやり取りして表示を組み立てます。

Jamstack

あらかじめ完成したページを用意しているので、ページが表示されるまでの待ち時間が短くなり、ユーザーはサクサクと快適にサイトを利用できます。

セキュリティ

WordPress

「ページを表示する仕組み」「記事を編集する管理画面」「データを保存するデータベース」などが一つのサーバーにまとまっています。
管理画面やデータベースが常に表に出ているため、攻撃の対象になりやすく、もしサーバーが攻撃されるとサイト全体に被害が及ぶ可能性があります。

Jamstack

この仕組みを分離しています。 サーバーには公開用のページのファイルのみを置き、記事の管理や編集は外部の専用サービスが担当します。
つまり「表に出すもの」と「裏で動かすもの」を切り分けているので、攻撃者が侵入できる入り口が圧倒的に少なくなります。

運用しやすさ

WordPress

公開後も以下のような保守・運用作業が発生します。

• サーバーやデータベースの管理
• WordPress本体やプラグインの更新
• 不具合やセキュリティ対策の対応

Jamstack

仕組みがシンプルなため、保守にかかる手間が大幅に減ります。

• サーバー管理や複雑な更新作業が不要
• 公開用ページはシンプルなHTMLファイルであるため、トラブルが起きにくい
• 修正・更新の際の作業量が少ない

制作時点で「壊れにくく、直す手間が少ないサイト」を作るため、公開後の運用コストを低く抑えることができます。

microCMSを用いた制作

弊社では、Jamstackの開発において「microCMS」というコンテンツ管理システムを利用しています。

microCMSとは、株式会社microCMSが提供する国産のヘッドレスCMS（コンテンツ管理システム）です。

ユーザーが実際に見たり触れたりするWebサイトの見た目の部分の「フロントエンド」と、データを保存したり処理したりする裏側の仕組みである「バックエンド」が分離されており、microCMSコンテンツを管理する「バックエンド」の機能のみを持つサービスです。

弊社の制作では、microCMSで作成されたコンテンツ（ブログやコラムなど）をAPI（サービス同士がデータをやり取りする仕組み）で取得し、Webサイト上に反映させています。

ブログやコラムなどのページが更新された際には、更新された内容を反映したサイトのデータが以下の手順で生成されサーバーに置かれます。

1. サイトの管理者がブログなどのコンテンツを更新する
2. コンテンツの更新をトリガーにサイトが生成される（このときにmicroCMSからコンテンツのデータを取得し、ページ内に反映）
3. 生成されたサイトがサーバーに反映される

この仕組みにより、ブログなどの更新が行われるコンテンツを含むサイトであっても、あらかじめ最新の情報を反映したページを表示させることができます。

更新頻度が多いページについては、サイトのデータを用意しておくのでなく、ユーザーがアクセスしたタイミングでデータを取得しページを生成する（従来のWebサイトの仕組みと同じ）方式で制作することもあります。

その場合でも、「フロントエンド」と「バックエンド」は分離しているため、セキュリティ、運用のしやすさは従来のサイトよりも優れたものとなります。

microCMSで制作することのメリット

• 日本語の情報が充実していて安心
  日本製のコンテンツ管理システムのため、日本語のドキュメントや解説記事が多く、困ったときにも情報が探しやすいです。

• セキュリティがしっかりしている
  サイトの見た目部分（フロントエンド）と、記事などのデータを管理する部分（バックエンド）が分かれているため、サイトの公開部分にはデータベースが直接つながっておらず、不正アクセスのリスクが低くなります。

• わかりやすい管理画面
  難しい操作やコードを触らなくても、直感的に記事の追加や更新ができるので、エンジニアでなくても扱いやすい管理画面になっています。

• サイト運用のコストを抑えられる
  サーバーやデータベースの管理といった作業が不要であり、公開されるページはシンプルなHTMLファイルとなるためトラブルも起きにくく、運用・保守にかかるコストを抑えることができます。

microCMSで制作することのデメリット

• 無料でできる範囲に制限がある
  microCMSにはいくつか料金プランがあり、無料プランもありますが記事数や利用できる容量などに上限があります。
  月に数百記事以上を公開するような大規模メディアや、毎日コンテンツを更新していくような運用となると制限に上限に達するため、有料プランでの運用が必要になります。

• コンテンツ管理機能以外は別途追加する必要がある
  WordPressでは、プラグインを使うことによりさまざまな機能をサイトに追加することができます。
  microCMSはコンテンツ管理システムであるため、コンテンツ管理以外の機能（お問い合わせフォームや検索機能など）は外部サービスを組み合わせたり、カスタマイズ開発が必要になる場合があります。

管理画面とサイト上の表示

弊社の実際の管理画面と、サイトでの表示例をご紹介します。

管理画面はこのようになっています。

ここから、各入力欄や選択項目を編集していきます。

お客様がどのような内容を更新されたいかを事前にヒアリングし、その内容に合わせて弊社で管理画面をカスタマイズいたします。

管理画面で編集した内容を公開すると、ページ上に表示されます。

コンテンツの表示デザインについても、他のページと統一感を持たせながら最適な形でご提案いたします。

まとめ

microCMSを用いたJamstackでは、

• 表示が速く、ユーザーにとって快適なサイトになる
• セキュリティ面で安心できる仕組みを持っている
• 運用・保守の手間やコストを抑えられる

といったメリットがあります。

一方で、WordPressなどの従来のWebサイトとは仕組みが異なるため、追加の機能やデザイン構築には専門的な知識が必要になる部分もあります。

株式会社ノベルティでは、microCMSを活用したJamstack構築にも豊富な実績があり、お客様の更新したいコンテンツや運用方法を丁寧にヒアリングします。また、使いやすい管理画面のご用意から、サイトデザインのご提案、運用サポートまで一貫して対応可能です。

「安全で壊れにくく、長く安心して使えるWebサイトを作りたい」とお考えの方は、ぜひ弊社へお問い合わせください。

お問い合わせフォーム