【 エンジニアさん、わかりやすく教えて！ 】Webサイト制作手法「Jamstack（ジャムスタック）」。導入メリットを解説します。
先行して公開したこちらの記事で、プラスジャムは「これからはヘッドレスCMSも選択肢にご提案します」という話を発信させていただきました。
この記事では、さらに一歩踏み込んで、エンジニアではないディレクターやデザイナーも新しいサイト制作手法であるJamstack（ジャムスタック）を理解しよう！と実施した社内勉強会の内容を抜粋して整理します。
ディレクター大竹が「要件定義のときにお話したいこと」をテーマにまとめてみました。
それでは早速行ってみましょう！
Jamstack（ジャムスタック）って、どういうこと？
Web制作業界には、特有の言葉がたくさんあります。Jamstackもまさにそれ。使う技術の頭文字を組み合わせて作られた造語です。
JavaScriptの「J」 - プログラミング言語
APIの「A」 - データをやりとりするための仕組み
Markupの「M」 - ウェブページを表示するためのHTML
これらを stack＝積み重ねる という発想が根っこにあります。
※現在、定義上はJavaScriptとAPIは必須ではなくなっていますが、制作手法の大きな括りとして「JamStack」と呼ばれています。
まず押さえておきたいのは「Jamstack」はサービス名やツール名ではなく「制作手法」を指している ということ。従来のサイト制作と比較して「モダンな開発」と呼ばれており、開発技術の発展とともに育ってきた”現代的な”構築方法です。
違いを掘り下げると、サーバー構成や機能開発など専門的な話になるので、この記事では割愛。
Jamstackで作ると、どんなメリットがあるのかを抑えてみましょう。
▼エンドユーザーのメリット
・表示速度が快速
▼運営のメリット
・SEOに強い
・機能拡張／データ活用に強い
・安定運用に強い
▼制作のメリット
・開発プロセスが柔軟になる
［メリット］ユーザー｜表示速度が快速
まず、サイトを使う人が最も体感できるメリットは「表示速度」です。
例えば、WordPressは動的にページを生成します。アクセスしてから表示までに読み込むデータが多いので一定の時間を要します。
一方、Jamstackで作ったサイトは、静的ページです。ソースコードが圧縮すれば表示が非常にスピーディー。ノンストレス！
★実際に速度を体感してみましょう★
弊社コーポレートサイトのWordPress版／Jamstack版を用意しました。
▼WordPress版
https://old2022.plusjam.jp
ベーシック認証：plusjam / hdo82qhukj
▼Jamstack版
https://plusjam.jp
いかがですか？実際に体験すると、そのスピードに驚きますよね！
［メリット］運営｜①SEOに強い
表示速度は、Web vitals（ウェブバイタル）というGoogleが定めるウェブサイト評価項目の１つです。同レベルのページランクのサイトを比較した時、Web vitalが高いサイトが優位になります。
「SEO対策」という人間が判断する”文章”に意識が向きがちですが、Googleがサイトを理解・評価するための対策もポイントです。SEOに力を入れているサイトほどJamstackを導入すべきと言えます。
［メリット］運営｜②安定稼働に強い
WordPressとセキュリティ脆弱性は切っても切れない話です。「サイトが乗っ取られた！」なんて話もよく聞きますよね…。これはサイト管理機能と表示ページのデータが同じサーバーで管理されてることが原因の一つです。
Jamstackで構築すると、管理機能と表示ページは別管理になるので、そもそも悪意ある攻撃をしにくい構造になります。
また、ページそのものが軽量なので、アクセスごとにかかるサーバーの負荷も小さいです。アクセスが集中してもダウンしにくいのもメリットです。
［メリット］運営｜③機能拡張／データ活用に強い
Jamstackの「A」はAPIの「A」。APIとはソフトウェア同士のやりとりに用いられるインターフェース（繋ぐ部分）です。
ざっくりと説明すると、さまざまなサービスがAPIを提供していて、これを利用すると、自分のサイトに機能や情報をひっぱってくることができます。
ひっぱってくるだけでなく、一元管理するデータをいろんな場所に活用するのも得意です。例えば、ウェブサイト／アプリ／デジタルサイネージなど。レイアウト制御は各フロント画面に任せるので、データの管理をここで行えば横展開しやすい構成を作ることができます。
Jamstackは積極的にマーケティングされている企業さまにメリットが大きいのも特徴です。
［メリット］制作｜開発フローが柔軟になる
最後に制作会社のメリットも紹介します。それは、バックエンド／フロントエンドの切り分けがしやすく、スケジュールが柔軟に組めることです。
サイトデザインに関しては、CMSやプラグインの制約を受けないので、自由度の高いデザインを叶えやすい特徴もあります。
構築方法は要件定義フェーズで決めるので、私どもWeb制作会社は前述のメリットとご要望を総合的に踏まえてプランニングいたします。
Jamstackとセットで覚えようー「ヘッドレスCMS」
「運営のメリット② 安定稼働に強い」で触れた、管理画面が別にある状態を叶えるのが「ヘッドレスCMS」です。CMSをクラウド上にもつことで、セキュアな状態を作ります。また、コンテンツ管理だけに特化したCMSなので、画面が非常にシンプルなのも魅力です。
プラスジャムでは、日本企業のご担当者様の使いやすさを最優先に考えて、日本製ヘッドレスCMSサービス「microCMS」を利用しています。
プラスジャムでは
・Jamstackが最大パフォーマンスを発揮できるサーバー／ホスティング
・microCMSの月額利用料
・サイト安定稼働対応
を含めた保守サポートプラン（月額制）をご用意しています。
新しい手法を用いたサイト制作になるので、気になる点は何でも気軽に質問してくださいね！
Jamstackでサイト構築したエンジニアの声を聞いてみました
実際に制作を担当するエンジニア陣の声も紹介します。
磯部（フロントエンドエンジニア）
プラスジャムのJamstack推進隊長！
ニュースやお知らせしか更新しないのに、全てをWordPressに組み込むのって非効率的だと思うんです。ヘッドレスCMSは管理画面だけが独立しているからフロントも別で作れる。最後にAPIでつなげるので、考え方もとてもシンプルだし、作業効率がとても良い。極端な話、管理画面から先に実装を進めることもできます。今までのワークフローだとできなかったことですね。
2〜3年前はJamstackの技術もまだまだで、１年前に社内に話したときも正直感触はイマイチでした。そこから急速に追い上げてる印象です。
表示スピード、SEO、セキュリティどれもいい状態が作れる制作手法です。
WordPressのプラグイン的なものはありません。JamstackはAPIでくっつけるというのがポイント。APIを提供しているサービスの連携が実現できるので拡張性という点ではかなり広がります。
無いものはスクラッチで開発して実現することになります。
バックエンドエンジニア k.m
普段機能実装を担当しているエンジニア目線でJamstackについて。
ヘッドレスCMSはコンテンツの管理だけ担っているので、バックエンド／フロントエンドともにエラーが出ても対応しやすいです。WordPressと比較すると、やはりセキュリティの高さが魅力です。
お問合せフォームを外部サービスのAPIと紐付ければ、コーポレートサイトくらいのボリューム感のサイトなら、バックエンドエンジニアが加わらなくても構築できるかも？と思います。
APIの良さを活かして、ウェブページとアプリに同じ情報を配信することができます。デザイン・レイアウトを最適化した状態で提供できるので、アプリも積極的に展開している企業さまに向いてます。
小野寺（フロントエンドエンジニア）
複数案件で異なる作り方を体験した率直な意見。
去年、社内勉強会をした時に『作りやすいなぁ』と思いました。いろんな作り方がありますが、React（Javascriptライブラリ）でAPIを操作するほうがやりやすかったです。サーバーによって変わってくるので、制作要件／設備要件を決める時に、制作手法や使うツールを定めるのがポイントになりますね。
カネコ（フロントエンドエンジニア）
コーポレートサイトのJamstack化を担当。実装を踏まえた感想。
WordPressとの違いで言うと、WordPressはHTMLは存在していなくてアクセスしてphpで表示という流れ。対して、ヘッドレスCMSはすべての記事がHTML化されているので、表示速度がめちゃくちゃ早いです。
Jamstackでのサイト制作、大歓迎！
プラスジャムは、Jamstack／microCMSを用いた案件を推進中！ご要望をお伺いしてJamstackでの構築がぴったりハマるプロジェクトは積極的にご提案をしています。
ここまで読んでくださったウェブ担当者さま。
「Jamstack、興味ある！」と思われましたら、お気軽にお問い合わせください。お待ちしております。
▼こちらの記事も是非ご覧ください▼
Jamstackを選ぶ前に。CMSの在り方を考えてみました
CMSの代表格「WordPress」。セキュリティ対策、万全ですか？