Jamstack web creating

SERVICE

手軽に名刺替わりのホームページ制作

Jamstack Web制作

モダンなWeb技術(Jamstack)を用いたホームページ制作を行います。

通常Webサイト制作ではWordPressを用いて制作することが多いですが、
Bubekitiでは、より、モダンな技術、Jamstack [ジャムスタック]を採用したWebサイト制作を行っております。

Jamstackとは

Webサイト(サービス)の構築の方法を指します。
(J:JavaScript、 A:APIs、M:MarkUp、stack:構成)
文字通り、JavaScriptとAPIとマークアップ言語を用いた構築方法のことです。

これだけだと、ただの静的サイトでは?と思うかもしれませんが、
一般的に、ブログやニュース入稿といった動的機能を持ち合わせたサイトをこの方法で構築することをJamstackと指すことが多いようです。

「動的サイトをJavaScriptとAPIとマークアップ言語のみで構築。」
特徴を一言で言うとこんな感じです。

まだよく分からないかもしれませんので、Jamstackの対比となるものを紹介します。
Jamstackと対比されるのが、Lampstackというサイト構築方法です。
(L:Linux、A:Apache、M:MySQL、P:PHP)

文字通りこの4つを用いた構築方法ですが、短かな具体例がWordPressで作ったサイトです。
サーバーに上記のLAMPを置いて動的サイトを構築するのがLAMPstackです。

語源について

Jamstackは、静的サイトホスティングサービスNetlifyのCEO、Mathias Biilmann氏が提唱した言葉だそうです。(定かではありません)
Lampstackという言葉は元々存在し、それと対比する形で名付けられたようです。

Jamstackの公式ページが存在します。
”構築方法”を指す言葉なので定義が厳密では無いのですが、少なくとも公式に書かれていることは確かでしょう。

Jamstackで作ったサイトは何が違うの?

Jamstackで構築すると、サイトの全ページを予めHTMLに変換し、保管できます。

例えば、100個の投稿記事を持ったブログサイトをJamstackで構築すると、
100個のHTMLファイルを事前に生成しておき、ユーザーからアクセスがあったらそのHTMLファイルを返すだけ。という動作ができます。

LampstackであるWordPressの場合、ユーザーからアクセスがあるとデータベースにアクセスし所定の記事データを取得、PHPでHTMLファイルを生成して返すという動的処理が入りますが、これらの処理が必要なくなるのがJamstackです。

メリットとデメリット

メリット

  • サーバーには静的ファイル群を保管するだけなので、ユーザリクエストに対して静的ファイルをそのまま返すので表示が高速
  • サーバー側の処理をAPIを用いて外部と切り離すことで高いセキュリティ性を確保できる(ヘッドレスCMSの利用等)
  • フロントエンドとバックエンドが分離されるため、フロントの開発自由度が高い
  • シングルファイルコンポーネントでWeb制作ができる


1番のメリットは、ページ移動が超高速であることです。CDNからHTMLを読むだけなので、0.1秒以下です。
本ページに上部にメニューバーを試しに操作してみていただけるとわかると思いますが、一瞬で移動します。
動作速度はユーザーの離脱を防ぐ上でも重要な要素です。この高速動作が、Jamstack最大の強みと言えます。



デメリット

  • WordPressサイトよりも、制作コストが高い


Webサイトに必要な機能(ページ移動ボタン、自動スクロールボタン、お問い合わせ機能)
WordPressサイトであればこういった機能はプラグイン機能で簡単に追加することができますが、
Jamstackの場合は0から構築する必要がある場合が多いです。そのため、コストが必然的に上がります。
しかしBubekitiでは、これまでもJamstackでのWeb制作を行ってきており、そういった汎用パーツはテンプレートとして短時間で実装することが可能です。
本来高コストとなるものを、個人事業の強み+経験の強みを生かし、最大限の低価格でご提供いたします。

Jamstackサイトで用いるCMS

CMSとはContents Management Systemの略で、一言でいうと管理画面のことです。
最も有名なCMSが、WordPressです。
Jamstackサイトの場合、WordPressは用いません。
しかし、ご安心ください。ヘッドレスCMSという、Jamstackでも適応できるCMSがございますので、Bubekitiではそちらを用いております。
お客様自身でサーバーを持つ必要のない、SaaS型のCMSを用いますので、WordPressサイトのようなサーバーやデータベースの管理といった手間も一切不要です。

Jamstackの実力

本サイトは、Jamstackで制作しております。
Webサイトとしてのパフォーマンスについて、
Lighthouseを用いて一般的なWordPressサイトとの比較を行いました。
※Lighthouseとは、Googleが公式に提供しているWebサイトのパフォーマンスやSEOレベルを確認するためのツールです。

一般的なWordPressサイトの結果


本サイト(Jamstack)の結果


WordPressサイトはSEO対策には強く100点のスコアを出しやすいですが、
クライアントからリクエストが入るたびにサーバーサイドで記事取得等の処理が走るため、
Performance項目がどうしても下がってしまいます。
またこういったレガシーな構築方法では、Best Practices(合理的な手段が取られているか)の項目も低下しがちです。
Jamstackのサイトでは、いずれも高得点を実現しています。

今後Jamstackが主流になるかも

私はそんな気がしています。

この開発方法は割と近代的で、Webアプリケーションにも用いられているようです。
Web制作ではローカルで開発してFTPでアップというのが主流だったりしますが、
Web制作分野にもこういったモダン手法が徐々に浸透していくかも、と考えております。

簡単見積もり
(30秒)

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ