Jamstack The modern way to build Website

バーンワークスは Jamstack を積極的に採用することで、高パフォーマンス、高セキュリティ、ポータビリティに優れ、かつスケールしやすいウェブサイトの構築を実現します。

Jamstack とは? 従来型ウェブサイトとの違い

Jamstack は、新しいウェブサイトのアーキテクチャです。
JavaScript フレームワーク、静的サイトジェネレータ、ヘッドレス CMS、API に Git ワークフローを組み合わせ、事前にビルドしたコンテンツを CDN(Content Delivery Network)や ADN(Application Delivery Network)から配信することで、ハイパフォーマンスなウェブサイトと、サーバレスによる高セキュリティ、柔軟なスケーラビリティとポータビリティを実現します。

従来型ウェブサイトとJamstack構成の比較
イメージ図:従来型ウェブサイトの例
イメージ図:Jamstack構成の例

なぜ Jamstack なのか Jamstack で得られるメリット

Jamstack はサーバレス、CDN からの高速配信によるハイパフォーマンス、高いセキュリティ、柔軟なスケーラビリティとポータビリティをウェブサイトにもたらします。

パフォーマンスの向上

ウェブページの読み込み速度は、UX、SEO、コンバージョン等に大きく影響します。Jamstack では静的に生成したコンテンツを、CDN から配信するため、高いパフォーマンスを発揮します。また、アクセス集中などによるサーバ負荷に対しても堅牢です。

高いセキュリティ

Jamstack では、事前に静的な HTML を生成することで、読み取り専用のコンテンツのみを配信することが可能になるため、高いセキュリティを実現します。また、サーバレスで運用可能なため、ウェブサーバのセキュリティ等に気を使うこともありません。

容易なスケーリング

Jamstack 構成のウェブサイトでは、すべてのコンテンツが CDN にキャッシュされます。よりシンプルなデプロイメントと急激な負荷変動に対する冗長性を、複雑なサーバ管理、インフラ整備やパフォーマンスチューニングなしに実現します。

メンテナンス性

ヘッドレス CMS 等によるコンテンツデータの管理、そのデータを取得するための API と、HTML 等、UI 部分を完全に分離できるため、デザインやサイト構成の変更、新機能の追加等がシステムやサーバの都合に左右されず、高いメンテナンス性を確保できます。

柔軟なポータビリティ

Jamstack 構成のウェブサイトでは、すべてのコンテンツが CDN から配信されます。つまり、サーバレスでウェブサイトを運用できるということは、ホスティングサービスを柔軟に選択可能ということです。インフラストラクチャのベンダーロックインとは無縁です。

よりよい開発体験

Jamstack に適した JavaScript フレームワーク、静的サイトジェネレータ、ヘッドレス CMS、そして CDN や ADN が数多く開発され、広く普及していることで、スピーディで確実な開発が可能になります。

優れたパフォーマンス

98
Performance
93
Accessibility
100
Best Practices
100
SEO

Jamstack で使用する技術・サービス

Next.js
Gatsby
React.js
Vercel
Cloudflare Pages
netlify
graphCMS
microCMS
GitHub

ウェブサイトの制作に携わるようになって20年以上が経ちますが、新しい技術やサービス、トレンドを追いながら、どうすればユーザーが使いやすく、クライアントの目的を達成できるウェブサイトになるのかを考え、それを形にしていく過程は、常に新鮮な楽しさと学びに満ちています。 Jamstack もここ数年、注目を浴びているアーキテクチャですが、クライアントにも大きなメリットをもたらすと考え、積極的に知見を広げる取り組みをしています。

加藤 善規

バーンワークス株式会社 代表取締役

主要サービス 頼れるパートナーを目指して

本質を見極め、目先の利益や一時的な流行に左右されず、ユーザーとクライアントの利益のためにウェブサイト制作の本道を歩む。それがバーンワークスの考え方です。

Web Development

ウェブサイト制作・開発

ユーザー満足度が高く、企業にとって価値あるウェブサイト構築のための分析、戦略立案、要件定義、情報設計など、上流工程からデザイン、実装、さらに運用、保守までを豊富な経験と知識で支援します。

Consulting

コンサルティングサービス

ウェブアクセシビリティ対応やユーザビリティ改善からウェブサイトの活用方法まで、ウェブサイトについてプロの客観的な視点からアドバイスや知識の共有をして欲しい、悩みを解決したいというお客様に最適です。

Learning

セミナー・講師活動

ウェブアクセシビリティをはじめ、ウェブサイトの開発手法やウェブマーケティングに関して、社内勉強会やワークショップから数百人単位のセミナーまで、様々な規模、ご要望に応じた情報提供、学習支援を行っています。

よくある質問と答え

Jamstack に適したサイトはありますか?
例えばブログやニュースサイト等のメディアサイトにように、同じフォーマットで多くの静的なウェブページを配信するようなウェブサイトとの相性は非常によいです。製品カタログサイト等も同様です。
Jamstack に向かないサイトはありますか?
例えばユーザーがログインして使用するような会員制のウェブサイトやレコメンデーションの仕組みを持ったショッピングサイト等、ユーザーの履歴や行動によって動的にコンテンツを変化させるようなウェブサイトにはあまり適しません。
ヘッドレス CMS は指定のものしか使用できないのですか?
いいえ。例えば Movable Type や PowerCMS は標準の Movable Type Data API の利用や JSON 形式でデータを出力するテンプレートの開発によって Jamstack 構成のウェブサイト開発が可能です。コンテンツデータの管理は自前のサーバで行いたいという場合に適しています。
コンテンツデータは何かしらの CMS で管理しないといけないのですか?
いいえ。例えばすでにコンテンツデータを管理するための社内システムやデータベースをお持ちの場合、API 部分のみを開発してデータ取得を行い、コンテンツを生成して Jamstack 構成のウェブサイトを開発するといったことも可能です。
ウェブサイトの運営スタッフはそこまで技術に詳しくないのですが……
コンテンツの更新自体は CMS から行えるため、運営スタッフの方々が Jamstack を構成する技術に詳しい必要は必ずしもございません。CMS でのコンテンツ更新をトリガーに、ビルド、デプロイ作業を完全に自動化することは可能です。
既存のウェブサイトを Jamstack に置き換えることは可能ですか?
はい。現状ウェブサイトの運用方法を踏まえ、Jamstack 構成にした場合のメリットやデメリットから、開発に必要な工数まで、ご相談いただければご提案、お見積もり可能です。Jamstack を採用することで、ウェブサイトの特性によっては多くのメリットが享受できます。
Jamstack は一時的な流行ではないのですか?
ウェブで使用される技術は日々進化、移り変わっていきますので、Jamstack が未来永劫、最適解であるということはないと思いますが、コンテンツデータと UI が完全に分離されている等、その技術的な特性上、他の技術への乗り換え自体は容易です。よって Jamstack を採用したことによって将来的に技術的な負債を抱えるリスクは少ないと考えます。
「サーバレス」とはどういう意味ですか?
実際に「サーバがない」ということではないのですが、従来のようにウェブサーバやアプリケーションサーバ、データベースサーバなどを自前で立ち上げ、管理し、場合によってはロードバランサー等を用いて負荷分散やチューニングを行うといったサーバ、インフラ関連の運用、保守をほとんど考えず、コンテンツやプログラムさえ用意すれば、「まるでサーバがないかのように」に運用が可能な仕組みを指します

ご相談・お問い合わせ

We’re here to support your business

まじめにウェブサイトのユーザー体験(UX)を向上させたい、ウェブアクセシビリティへの取り組みを継続的に行いたい、本気でウェブサイト活用について相談できるパートナーが欲しい…… そんな企業の皆様の想いにバーンワークスは真剣に向き合い、最適解を提供いたします。