ツクロアの事業内容

Webサイトの構築にJamstackという選択肢を

この記事は非エンジニアを対象として、なるべく専門的な用語についても補足しながらWebサイト制作の最新の手法「Jamstack」について、ツクロアのお仕事の事例とともに解説します。以下のような方を対象としています。

• Jamstackという言葉に馴染みがない方
• Webサイトの運営にお困りの方、Web担当の方
• Web技術への知識にあまり自信がない方
• WordpressでWebサイトを運用されている方

さらにJamstackについての世界的実例など、基礎的な情報は様々な記事で紹介されているので割愛します。

Jamstackを構成する技術

Jamstackは今までのWebサイトより高速に表示、セキュリティ的に安全、SEO対策に期待が持てるなど多くのメリットが伝えられています。

一般的なWordpressのように、記事を投稿／管理できるようなシステム（CMS）をもJamstackは可能にします。 JamstackでCMS運用をする際、後述のヘッドレスCMSを利用することが一般的です。これにより記事投稿や編集などの業務が行えます。

JamstackではWebサイトの高速な表示をおこなうために静的サイトジェネレータを活用します。後述のとおり一般的なCMSよりかなりシンプルな仕組みになっています。

上記2つを実装するために必要なプログラミング言語はJavaScriptたった1つのみです（TypeScriptのみでも可能です）。これによりWebサイト制作者はこれまでの知識の中で、より戦略的にデザインされたWebビジネスに注力し、実現しやすくなります。

ヘッドレスCMS、静的サイトジェネレータともに様々なソフトウェアがオープンソースで公開されています。私たちはこれらを自由に組み合わせて使うことができますが、ツクロアではヘッドレスCMSにStrapi、静的サイトジェネレータに11tyというオープンソースのソフトウェアを組み合わせて使っています。ここではツクロアが使っているソフトウェアを取り上げて紹介していきます。

ヘッドレスCMSとは

Strapiの記事投稿画面、日本語化も進んでいるようです（画像は2022年4月時点のものです）

ツクロアではお客様自身で記事を投稿・管理できるシステム（CMS）にStrapiを採用して開発を行った事例があります。

オープンソースでカスタマイズ性が高く、お客様がビジネス上やりたい仕組みをシステムに取り入れることが従来のCMSと比べて容易です。2022年4月現在、Github上の「ヘッドレスCMS」トピックで最もスターの数が高く、多くのWeb制作者からの支持を集めていると言えるでしょう。

Strapiは「記事を表示する機能を持たない」ヘッドレスCMSと呼ばれるものです。つまり管理側だけを担います。例えば記事の投稿／編集／削除といった作業を行い、その記事にカテゴリやタグを紐付けるといった、通常の配信業務に使っている管理画面とデータ管理そのものがヘッドレスCMSの役割です。

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

近年において直接記述したHTMLを、そのままホームページとして公開するという手法は、あまり取られなくなりました。 ページ数やサイトの規模が大きくなると、1ページごとにHTMLが正しく記述されていることなどに気を配ることなど、人間が管理するには限界があります。

そこでWeb制作者は、記事の見せ方や伝え方などに注力し、それ以外の煩雑なコードの生成は、機械に任せることを考え出しました。機械に任せることによって、人間のミスを防ぎ、軽量、高速化することが可能になりました。画像やスタイルシートなど関連ファイルの軽量化までをもすべて自動でビルドして公開ファイルを生成できるようになり、より快適な開発体験のもと、高品質なWebサイト開発が行えるようになりました。

それに増して、マークダウン言語をはじめとする様々な言語までをもHTMLに変換して生成できるようになり、これら様々なメリットを組み合わせ統合した静的サイトジェネレータが普及しています。

特にマークダウンだと、見出しや本文、リストなどHTMLよりも楽に記述できます。

こういった経緯から今では、一度ソースという工程でコンテンツを作成し、ビルドを経て公開用のHTMLファイルを生成するようなプロセスがWebサイト制作では主流になっています。

シンプルで意のままにWebサイト作成の実現が可能な静的サイトジェネレータにも多くの選択肢があります。その中でツクロアでは11tyをお仕事でも使い、それまでの学びをもとにテンプレートをGithubで公開しました。

tuqulore/website-boilerplate: ツクロアのウェブサイトのボイラープレート

11tyは、WebページとなるHTMLファイルを生成してくれる便利なツールです。実はこの記事もマークダウンで記述して、11tyがHTMLに変換して出力してくれています。大規模なページ数の多いサイトでも管理しやすく、作り込みやすく、閲覧ユーザーにとって何がメリットかを考えやすく、実装しやすい仕組みです。

ヘッドレスCMSとの連携はAPIと呼ばれるルールに基づいたデータのみで行われます。Strapiで書かれた記事はAPIを通じて、自動的に11tyが受け止め、HTMLファイルに出力してくれます。

Wordpressとは何が違うの

よく比較されがちでポピュラーなWordpressですが、こちらは2003年の初版リリースからもう20年近くも経っており世界中のブログのみならず企業にも採用されているCMSです。多くの愛好家の手によって多くのプラグインやテーマが生み出され、作り手としては非常に便利で今でも人気があります。

個人的な感想ではありますが、Wordpressにおける投稿画面のUIデザインなどは、さすが20年という長い期間、改善を重ねてきた結果と思えるほど素晴らしいと思います。

ただ、そんなWordpressにもいくつかの課題を感じる人も現れ始めます。

Wordpressに限らずこれまで多くのCMSは、JavaScriptとPHPという全く違うプログラム言語を使える人よってカスタマイズする必要がありました。これは実現したいサービスに対して工数や開発者スキル、人件費の増加などによる課題はもとより、なによりも深く突き詰め、素晴らしいユーザー体験への実装にチャレンジすることは時として困難なこともありました。

他にも構造上、システムの一部が障害に見舞われただけで閲覧できなくなる課題や、アクセスが集中すると処理をさばききれないため閲覧に遅れが生じやすいなどの課題もありました。

Jamstackの利点

セキュア（セキュリティの高い）でかつ高速なWebサイトを構築する方法、それを支えるCMSのあり方、ひいては閲覧するユーザーをもっと満足させる方法について考えられるようになり、今に至ります。

アメリカのホスティング企業、NetlifyのCEOであるMathias Biilmannさんによる命名でJamstackと名付けられたその方法はとてもシンプルなものでした。

Wordpress等の伝統的なCMSとは違い、JamstackではHTMLの格納場所とデータベースとが完全に分離されています。

記事を投稿した時点ではすでに、静的サイトジェネレータによって事前に保存されているHTMLファイルが配置されているだけです。よってJamstackでは、

• 閲覧ユーザーがアクセスするたびに、データベースに都度アクセスする必要がない
• 閲覧ユーザーがアクセスするたびに、サーバー側でHTMLを都度生成する必要がない

という仕組みになり、Jamstackでは以下のようなメリットが考えられます。

• 表示速度が早い
• データベースサーバーの障害に遭ってもページ閲覧が可能
• SEO対策に期待が持てる

より良いユーザー体験へ

以上のことからツクロアではJamstackを活用したCMS開発の支援を行っています。

実現したいサービスのために、Web技術に注力できる環境を整えています。最も大切な戦略そのものをデザインしていくためにも、シンプルでメリットの多いJamstackという選択肢をおすすめしています。繰り返しになりますが、シンプルでメリットが高いということは、徹底的に深く追求したUIデザインや実装に対し、思い切ったチャレンジも存分に注力できるということになります。

経験豊富なデザイナーとエンジニアが常に並走して、より良いユーザー体験とビジネスの向上実現へのお力になりたいと願っています。

もっと詳しくお知りになりたい方、現在のWebサイトの運営に何らかの問題を抱えられている方、まずはご相談という形で結構です。お話をお聞かせください、何かご提案できることがあるかもしれません。