Jamstack
Jamstackサイト開発
WHAT IS JAMSTACK?
WHAT IS JAMSTACK?
WHAT IS JAMSTACK?
Jamstackとは？
Jamstackとは、高いパフォーマンス・セキュリティ・スケーラビリティに優れた、比較的新しいWebサイト開発のアーキテクチャです。JavaScript・API・Markupの頭文字をとって作られた言葉であり、それぞれ以下のような意味があります。
JavaScript
JavaScriptというプログラミング言語のことを指します。ReactやVueなどのフレームワークがよく使用されます。
API
データをやり取りするための仕組みです。データの取得や更新など、バックエンドとフロントエンドを連携させる役割があります。
Markup
マークアップ言語のことで、ブラウザにページを表示する役割があります。簡単に言えばHTMLのことです。
Jamstackは、WordPressをはじめとした従来のCMSと比べると比較的新しいシステム構成で、2018年ごろから注目され始めています。高いセキュリティ性、ページの表示速度の向上、開発効率の高さといったメリットがあり、現在では多くの企業サイトに採用されつつあります。
デザイン会社・制作会社様へ
こんなお悩みありませんか？
コードハイブは、デザイン会社・Web制作会社様に向けたJamstackサイト制作代行を行なっております。以下のようなお悩みがある場合は、ぜひコードハイブにご相談ください！
- Jamstackの導入を考えているが、よく分からないので丸投げしたい
- Jamstackでの開発を依頼されたが、フロントエンドエンジニアがいない
- サイトの表示速度やパフォーマンスを向上させたい
- セキュリティに強く、メンテナンスが簡単なサイトを作成したい
- WordPressに限界を感じており、新しい技術を使用してサイトを作成したい
- WordPressで作成したサイトをそのままJamstack化したい
Jamstackの強み
サイト表示速度が爆速
従来のCMSでは、ユーザーからのリクエストに応じてサーバー上でHTMLを生成し、ブラウザに表示するという流れでした。Jamstackでは、事前に全ページを静的HTMLに変換しCDNで配信するので、サーバーサイドでの処理を必要としません。そのため、表示速度が爆速になります。
堅牢なセキュリティ
Jamstackではフロントエンドとバックエンドが分離しており、表示されるコンテンツはAPI経由で取得した静的なファイルのみです。そのため、サーバーサイドの脆弱性を悪用する攻撃のリスクが激減し、高いセキュリティ性を保つことができます。
大量のアクセスに強い
WordPressなどの動的なサイトでは、ユーザーからのアクセスが発生するたびにサーバーとの通信を行う必要がありますが、Jamstackでは静的ファイルをCDNから配信するだけなので、アクセスに対する負荷がほとんど発生しません。
高いSEO効果
サイトの読み込み速度は、Googleのサイト評価の指標の一つであるCore Web Vitalsに直接影響します。パフォーマンスの向上は検索エンジン最適化にも効果があるので、結果的に高いSEO効果を得ることができます。
メンテナンスが容易
Jamstackでは、コンテンツの管理（バックエンド）とコンテンツの表示（フロントエンド）がそれぞれ分離しています。デザインの変更や機能の拡張などをシステムやサーバー等に影響せず対応できるので、メンテナンス性が高いです。
開発効率の向上
Jamstackではフロントエンドの制約がないため、ReactやVue.jsなどのモダンなフロントエンド技術を使用できます。これらには開発ツールやエコシステムが充実しており、効率的にサイトの開発をすることができます。
Jamstackの使用技術
コードハイブでは、Jamstackサイト開発には以下のサービス・技術を使用します。
ホスティング
ヘッドレスCMS
SSG
※上記以外をご希望の場合は、相談も可能です。
ホスティングサービス
ホスティングサービスは、サイトの公開・配信に特化したサービスです。完成した静的ファイルをアップロードすると、自動的にネット上に公開されます。さらに、CDNでページを配信するので、表示速度の高速化を実現可能です。
ヘッドレスCMS
ヘッドレスCMSは、フロントエンド機能を持たないコンテンツ管理システムです。主にバックエンド機能（コンテンツの管理・データベース・コンテンツ配信）担当で、管理画面からコンテンツの入稿などの操作を行うことができます。作成したコンテンツは、APIを通してフロントエンドと連携し、ページ上に表示することが可能になります。
SSG（静的サイトジェネレーター）
SSGは、静的なサイトを生成するためのツールやフレームワークのことです。コードハイブでは、フロントエンド開発にReactベースのフレームワーク「Next.js」を使用します。
Jamstack制作の流れ
- STEP01お客様
お問い合わせ
まずはお問い合わせフォームからお気軽にご相談ください。内容を確認したのち、2営業日以内に返信いたします。
- STEP02コードハイブ
ヒアリング
ZoomまたはGoogle Meet等のツールでオンラインミーティングを実施し、詳しいご依頼内容をお伺いします。ヒアリングは無料ですので、ご安心ください。
可能であれば、以下の2点をご用意ください。
・デザインデータ
・サイトマップ - STEP03お客様
デザインデータのご提出
以下の形式で、デザインデータのご提出をお願いします。
無料: Adobe XD, Figma
有料: Adobe Illustrator, PhotoshopAdobe Illustrator / Photoshopに関しては、追加費用（全体費用の20%）をいただいております。
- STEP04コードハイブ
ホスティングサービスやヘッドレスCMSの選定
ヒアリングの内容をもとに、最適なホスティングサービス、ヘッドレスCMS、その他開発面の仕様を選定し、提案いたします。
- STEP05コードハイブ
お見積もり・納期の提案
いただいたデザインデータと仕様を確認し、お見積もりと納期を提案いたします。
- STEP06お客様
契約の同意
お見積と納期に同意いただけましたら、作業開始となります。
※初めて取引させていただく場合・長期にわたる案件の場合に限り、料金の50%を着手金としてお支払いいただいております。
- STEP07コードハイブ
Jamstackサイトの開発開始
お見積もりの金額と納期にご同意いただけましたら、サイトの実装を開始いたします。
コーディング対応中は、進捗管理シートにてプロジェクトの進捗状況を常にご確認いただけます。
- STEP08お客様
ご確認
作業が完了しましたら、データをテスト環境にてご確認いただきます。
- STEP09コードハイブ
修正対応
制作物が仕様と異なる場合・バグが発生した場合は、修正対応を行います。
※デザインの大幅な変更、仕様変更は有料となる場合があります。
- STEP10コードハイブ
納品
サイトのデプロイまたはファイル送付をもって納品といたします。
- STEP11お客様
ご請求
納品が完了したら、請求書を送付いたしますのでお支払いをお願いいたします。
既に着手金をお支払いいただいている場合は、残りの費用のお支払いをお願いいたします。
- STEP12コードハイブ
アフターサポート
納品後1ヶ月以内の修正依頼は無料で対応いたします。
※デザインの大幅な変更、仕様変更は有料です。 - DONE!
CONTACT US! CONTACT US! CONTACT US!
CONTACT US! CONTACT US! CONTACT US!
CONTACT US! CONTACT US! CONTACT US!