2021年07月13日
弊社サイト（ホームページ）で使われているJamstackとは何か？
はじめに
弊社コーポレートサイトはJamstackという構成で作られています。Jamstackは高セキュリティで高速表示というメリットがあり、弊社ではお客様からのご希望がない限りJamstackでサイト制作をさせていただいております。
ですが、そのJamstack。なかなか聞き慣れない言葉ですよね。なのでこの記事ではJamstackについて解説をしてみたいと思います。
Jamstackとは
Jamstack（ジャムスタック）とはエンジニアがよく使う技術の頭文字を取ってつけられたWEBサイトを構築するための構成（stack）のことをいいます。
- J = JavaScriptというプログラミング言語
- a = APIと言ってデータのやりとりを行う仕組み
- m = MarkupはChromeなどのブラウザで表示させるための言語、簡単にいうとHTMLのこと
JamstackではJavaScriptを使いAPIから取得したデータを準備段階でブラウザで表示できるようにHTMLファイルを生成します。実際のブラウザではその生成されたHTMLファイルを表示しています。準備が必要にはなるのですが、準備自体は自動化することができるので特に意識することもありません。
Jamstackの特徴とは
- 大量アクセスに強い
- 高セキュリティ
- 高速で表示
という特徴をもっています。
大量アクセスに強い
生成されたHTMLファイルをそのままブラウザで表示するだけなので、アクセス時に大きな負荷がかかることがないため従来の構成よりも大量アクセスに強い構成になっています。
高セキュリティ
Jamstackではブラウザで表示時にWEBサーバーがありません。なので、悪意をもってページに訪れて攻撃をしようとする輩がいたとしても攻撃をする糸口がない状態です。従来の構成よりも安全性を保つことが比較的簡単にできます。
高速で表示
従来の構成よりも格段にファイルサイズの小さいHTMLファイルをブラウザで表示することになるのでブラウザで表示した際速く表示させることが容易にできます。
Jamstackが向いているWEBサイト・向いていないWEBサイト
大量アクセスに強く、高セキュリティ、高速表示と良いとこばかりのJamstack構成ですが、全てのサイトに向いているわけではありません。
Jamstackが向いているWEBサイト
- ブログなどのメディアサイト
- コーポレートサイトや店舗サイト
- サービス紹介などのLPページ
Jamstackが向いていないWEBサイト
- ECサイト
- リアルタイム性が求められるサービス
Jamstackは例えばTwitterはInstagramなどをはじめとするSNSやECサイトなどは向いていません。というのも準備段階としてJavaScriptを使いAPIから取得したデータを元にHTMlファイルを生成する必要があるのでリアルタイムな情報を扱うことができません。なのでコーポレートサイトなどリアルタイムな情報を載せる必要がないWEBサイトの制作に向いています。
Jamstackを支えるサービス・技術について
では具体的に弊社サイトではどのような技術を使ってサイトを制作をしているのかというと大きく3つになります。
- Next.js > Jamの「J」と「m」の部分をここで行います。
- microCMS > Jamの「a」の部分です。
- Netlify > 直接Jamstackではないのですがホスティングサービスと言って生成されたHTMLファイルを置く場所になります。
Next.jsとは
ReactというJavaScriptライブラリのフレームワークです。Next.jsでAPIからデータを取得してHTMLファイルとして吐き出しをするところまで行います。
microCMS
ヘッドレスCMSサービスと言ってCMS（コンテンツマネージメントシステム）というブログ記事を管理・作成ができるシステムの外部サービスになります。
日本製のヘッドレスCMSサービスなので、日本語ですしわかりやすいという特徴があります。弊社のクライアント様も日本語なので大変使いやすいとおっしゃってくれています。
また、料金も無料で使える枠も結構あるので最初のうちは無料で使い後々アップグレードをしてスタンダードプランにすると良いかなと思います。
https://microcms.io/pricing
Netlify
Jamstackではないのですが、Jamstackでは切っても切り離せないものになります。こちらも外部サービスになっていて生成されたHTMLファイルを置く場所になるいわゆるホスティングサービスになります。Netlifyについても最初は無料で初めて徐々にProにすると良いと思います。
https://www.netlify.com/pricing/
終わりに
今記事ではJamstackについての概要をまとめました。運用するのにmicroCMS、Netlifyのアカウントは最初は一つずつ取得し、また最初は規模も小さく始めたいと言った場合はほとんど運用コストもかからずにWEBサイトの制作ができます。また高速で表示ができ企業としては気になるセキュリティ面も良好です。なのでブラキオでは基本的にはお客様からサイト制作のご相談があった場合はJamstackでのご提案をさせていただくことが多いです。ぜひJamstackでのwebサイトにご興味がある、ご相談はお問合せからご連絡いただければと思います。
この記事をシェアする
お気軽にご相談ください
会社のホームページが欲しい！名刺がわりになるコーポレートサイトが欲しい！などお気軽にご相談ください。
またパートナー企業をお探しの制作会社様や、フロントエンド開発もご連絡お待ちしております。
最近の投稿
コンテンツ運用を加速する！ヘッドレスCMSと開発フローの最強連携術
企業のWebサイトは、常に新鮮で質の高い情報を提供し続けることで、顧客とのエンゲージメントを高め、ビジネス成長を促す重要な役割を担っています。しかし、多くのWeb担当者様やマーケティングご担当者様は、以下のような悩みを抱えていませんか？従来のウェブサイト構築（特に動的CMS）では、コンテンツの更新・修正が技術的な知識を必要とすることが多く、結果としてに大きな課題が生じがちでした。この課題を根本から解決するのが、コンテンツ管理とウェブサイトの表示を完全に分離するです。しかし、ただヘッドレスCMSを導入するだけでは十分ではありません。その真価を発揮させるためには、**「開発フローとの効果的な連携」**が不可欠となります。本記事では、この連携を最適化し、コンテンツのスピードと品質を両立させるための具体的な方法論を解説します。ヘッドレスCMSの導入は、コンテンツ運用に以下のような変革をもたらします。コンテンツ運用と開発プロセスをスムーズに連携させるための実践的なアプローチは、以下の通りです。ブラキオでは、ITリテラシーに不安があるクライアント様でも、ヘッドレスCMS導入後も安心してコンテンツ運用ができるよう、手厚いサポートを提供しています。ヘッドレスCMSの導入は、コンテンツ運用における「自立と連携」を両立させ、Webサイトをビジネス成長の強力なツールに変革します。開発フローとの最適化された連携、そしてブラキオのような専門パートナーによる手厚いサポートがあれば、コンテンツの鮮度と品質を保ちながら、ビジネスの変化に迅速に対応できるサイト運営が可能です。ブラキオは、をはじめとするヘッドレスCMS選定から、効率的な開発フローの構築、そして運用開始後の手厚いサポートまで、トータルで貴社のコンテンツ運用を支援いたします。「現在のコンテンツ運用に課題を感じている」「もっと効率的にサイトを運営したいが、何から手をつけて良いか分からない」とお考えでしたら、ぜひ一度ブラキオにご相談ください。貴社のコンテンツ運用課題をヒアリングし、最適なソリューションをご提案させていただきます。
2025.10.20
【失敗しない】Jamstack開発会社の選び方：見るべきはスキルセットとビジネス理解度
企業のデジタル戦略において、Webサイトはますますその重要性を増しています。特に、近年注目を集めるは、その高速性、安全性、高いスケーラビリティから、次世代のWebサイト構築手法として多くの企業から関心を寄せられています。しかし、従来のWordPressなどのCMSとは一線を画すJamstackは、といった多岐にわたる技術要素の組み合わせで成り立っています。「どの会社に依頼すれば、自社のビジネスに最適なJamstackサイトを構築できるのだろうか？」「技術的な専門知識がなくても、良いパートナーを見極めるにはどうすればいい？」――多くのWeb担当者様や経営者様は、このような疑問をお持ちかもしれません。Jamstack開発プロジェクトの成功は、まさに適切なパートナー選びにかかっています。本記事では、Jamstack開発を検討する企業がに役立つ、具体的に「見るべきスキルセット」と「判断基準」を詳しく解説します。Jamstack開発には、特定の技術分野における深い知識と経験が不可欠です。優れた技術力を持つだけでは、プロジェクトは成功しません。貴社のビジネスを深く理解し、真のパートナーとして伴走できるかが重要です。上記の要素を踏まえ、実際に開発会社を選定する際に確認すべき具体的な項目をまとめました。Jamstackは、現代のビジネスに求められる高速性、安全性、そして拡張性を兼ね備えた強力なツールです。しかし、そのポテンシャルを最大限に引き出すためには、との両方を兼ね備えたとの協業が不可欠です。パートナー選びは、単なるWebサイト制作の依頼ではなく、貴社のデジタル戦略を加速させるための重要な投資です。上記のチェックポイントを参考に、ぜひ最適な開発パートナーを見つけてください。ブラキオでは、Next.jsを始めとするモダンなフレームワークの深い知識と、microCMSを用いた最適なデータ設計、そしてお客様のビジネスゴール達成を最優先に考えたJamstack開発を行っています。Jamstack開発パートナーをお探しなら、ぜひ一度ご相談ください。御社の課題をヒアリングし、最適なご提案をさせていただきます。
2025.10.16
Jamstackが解決する企業のWebサイト課題トップ3：速い・安全・落ちないサイトでビジネスを加速させる
Webサイトは企業のであり、ビジネス成長のエンジンであるはずです。しかし、多くの企業のWeb担当者様は、次のような潜在的な悩みを抱えていませんか？これらの悩みは、従来のウェブサイト構築手法、特になどの動的CMSの構造的な限界に起因しています。データベースと常に接続し、アクセスごとにサーバー側でページを生成するその仕組みは、利便性をもたらした反面、とに大きな弱点を抱えることになりました。その課題を根本から解決するのが、新しいウェブ構築の考え方であるです。本記事では、このJamstackが、企業が抱える最も深刻なWebサイトの課題トップ3をいかに解決するかを解説します。サイトの表示速度は、もはや**SEOやユーザー体験（UX）**の問題だけではありません。に直結する深刻な課題です。Googleの調査によると、モバイルページの表示速度がすると、ユーザーのすると言われています。これは、せっかく広告費やコンテンツ制作費をかけて集客したユーザーを、システムの都合で逃がしているに等しい状態です。Jamstackは、ウェブサイトのHTMLファイルを、しておきます（静的サイト生成）。この静的なファイルを、世界中に分散配置された**CDN（コンテンツデリバリーネットワーク）**から直接配信するため、データベースへの問い合わせやサーバーでの複雑な処理が一切発生しません。これにより、お客様のサイトはを手に入れ、GoogleがSEOで重要視する（LCP：最大コンテンツの描画速度など）のスコアも自然と改善し、に貢献します。従来の動的CMSは、データベースとの通信や、機能拡張のためのに強く依存しています。この構造は、ハッカーにとって絶好の標的となり、やを経由した不正アクセスやサイト改ざんのリスクが常に伴います。もし、企業サイトが改ざんされたり、情報漏洩が発生したりすれば、その修復コストだけでなく、顧客からのという計り知れないブランドリスクを負うことになります。Jamstackアーキテクチャでは、公開されているウェブサイトの本体からします。テレビCMの放映後や、大規模なキャンペーンを実施した際、「サイトが重くなった」「アクセスできなくなった」という経験はありませんか？従来のサーバー構成では、突発的な大量アクセスに対応するためには、事前にを行う必要があり、コスト効率が非常に悪いものでした。サーバーダウンは、キャンペーンによることを意味します。Jamstackサイトは、CDN（コンテンツ配信ネットワーク）を通じて世界中のエッジサーバーから配信されます。CDNは元々、大量のコンテンツを高速かつ安定して配信するために設計されているため、し、ダウンしにくい構造を持っています。Jamstackは、Webサイトを「コストセンター」ではなく、**「ビジネスを加速させる資産」**に変えるための最適なアーキテクチャです。ブラキオは、フロントエンドエンジニアとしての豊富な経験を活かし、お客様のビジネス課題解決を重視したJamstack開発を提供しています。「御社のWebサイトは上記の課題を抱えていませんか？」ぜひ一度、をご利用ください。御社のWebサイトを、次世代のプラットフォームへと進化させます。
2025.10.10
microCMSの投稿からOGPを取得して画像とリンクカードを作る
Webサイトやブログ記事で外部サイトへのリンクを貼る際、単なるURLだけでは情報が伝わりにくく、ユーザーのクリックを促しにくいことがあります。そこで活用したいのが です。OGPは、Webページの内容をSNSなどで魅力的に表示させるためのメタデータで、これを利用することで、リンクをとして表示できるようになります。この記事では、OGPデータを取得して記事内のリンクを自動的にリッチなリンクカードに変換するJavaScriptコードとその仕組み、そしてその見た目を整えるCSSについて解説します。この記事ではNext.jsのApp routerを使って下記のようなリンクカードを作る方法をご紹介します！OGP（Open Graph Protocol）を使ってブログ記事のリンクをカード形式で表示することには、以下のような効能があります。リンクカードはタイトル・説明・画像がまとまって表示されるため、テキストリンクよりも目立ち、ユーザーの興味を引きやすくなります。画像や説明文があることで、リンク先の内容が直感的に伝わり、クリックされやすくなります。OGP情報が正しく設定されていれば、TwitterやFacebookなどSNSでシェアされた際にも美しいカード形式で表示され、拡散効果が高まります。リンクカードはデザイン的にも整って見えるため、サイト全体の信頼感やプロフェッショナル感がアップします。ブラキオではこのようにヘッドレスCMSから取得した記事をカスタマイズすることも可能今回ご紹介するリンクカードの自動生成は、主に以下の2つのJavaScriptコードと、その見た目を定義するCSSによって実現されます。まず、外部サイトのOGP情報を取得するための関数から見ていきましょう。この関数は、指定されたURLにアクセスし、そのページのHTMLからOGP関連のメタデータを抽出します。次に、実際の記事本文を解析し、OGPデータを利用してリンクカードを生成するReactフックを見ていきましょう。最後に、生成されたリンクカードを美しく表示するためのCSSを見ていきましょう。このCSSは、リンクカード全体のレイアウト、画像（サムネイル）、テキストの表示方法などを定義しています。この記事で紹介したと、そして関連するCSSを組み合わせることで、することができます。これにより、ブログ記事やWebサイトの視認性が向上し、ユーザーが外部サイトのコンテンツを理解しやすくなり、クリック率の向上にも繋がるでしょう。ご自身のサイトにこの機能を組み込んで、より魅力的なコンテンツ表示を実現してみてはいかがでしょうか。
2025.06.14
なぜJamstackはセキュアと言われるのか？WordPressとの比較と対策
近年注目を集めるウェブサイト構築アーキテクチャ「Jamstack」。その特徴の一つとして、高いセキュリティ性が挙げられます。本記事では、Jamstackがセキュリティに優れる理由を解説し、広く利用されているWordPressと比較しながら、具体的な対策についても掘り下げていきます。Jamstackが従来のアーキテクチャと比較してセキュリティが高いと言われる主な要因は、以下の点に集約されます。WordPressは非常に普及しているCMSであるため、常に攻撃者の標的となりやすい状況にあります。プラグインやテーマの脆弱性、本体のアップデート遅延、サーバー設定の不備などがセキュリティインシデントの原因となる可能性があります。SQLインジェクションやPHPの脆弱性を利用した攻撃も懸念されます。一方、Jamstackは静的ファイルが中心であるため、これらの攻撃経路は基本的に存在しません。動的な処理はAPIに依存しますが、適切に選定・管理されたAPIサービスを利用することで、ウェブサーバー自体の脆弱性リスクを低減できます。ただし、Jamstackも完全に安全ではありません。利用するAPIサービスのセキュリティ、フロントエンドのJavaScriptコードの脆弱性、ビルドプロセスのセキュリティなどが新たなリスクとなる可能性があります。重要なのは、それぞれのアーキテクチャの特性を理解し、適切なセキュリティ対策を講じることです。Jamstackアーキテクチャは、その特性から従来の動的なウェブサイトと比較してセキュリティが高いと考えられていますが、完全に改竄のリスクがないわけではありません。ここでは、Jamstackサイトが改竄される主な経路と、それに対する具体的な対策を掘り下げて解説します。Jamstackサイトでは、フォームの送信、認証、Eコマース機能、検索など、動的な処理を外部のAPIサービスに依存するケースが多くあります。これらのAPIサービスにセキュリティ上の脆弱性があった場合、そこを足がかりに不正アクセスが行われ、データが改竄されたり、悪意のあるコンテンツが挿入されたりする可能性があります。Jamstackサイトのインタラクティブな要素は、主にJavaScriptによって実現されます。もしJavaScriptコードにセキュリティ上の欠陥（脆弱性）があった場合、クロスサイトスクリプティング（XSS）などの攻撃を受ける可能性があります。XSS攻撃を受けると、悪意のあるスクリプトがユーザーのブラウザ上で実行され、Cookieやセッション情報が盗まれたり、サイトの表示が改竄されたりする可能性があります。Jamstackサイトは、通常、静的サイトジェネレーター（SSG）などを用いて、ソースコードから静的なファイルを生成するビルドプロセスを経ます。もしこのビルドプロセスが侵害された場合、生成された静的ファイルに悪意のあるコードが埋め込まれる可能性があります。Jamstackサイトの静的ファイルは、通常CDN（コンテンツ配信ネットワーク）を通じて配信されます。もしCDNのアカウントが不正にアクセスされた場合、配信されている静的ファイルが改竄され、サイトの見た目が変わったり、悪意のあるコンテンツが表示されたりする可能性があります。開発者のPCや開発環境がマルウェアに感染した場合、意図しないコードがリポジトリにコミットされ、それがデプロイされてしまう可能性があります。これらの対策を講じることで、Jamstackサイトのセキュリティレベルを大幅に向上させ、改竄のリスクを低減することができます。Jamstackの特性を理解した上で、多角的なセキュリティ対策を実践していくことが重要です。
2025.05.08