サステナブルなWebを実現する、6つのキーテクノロジー
テクノロジーアンバサダー榛葉“未来のための発信力：エココンシャスなWeb担当者が支持する、サステナブルな「モダンWebとは？」”と題し、去る2月25日、「デジタルマーケターズサミット2025 Winter」に登壇しました。多くの皆さまにお申し込みとご視聴をいただき、心より感謝申し上げます。
近年、企業が脱炭素経営への取り組みを加速する中、サステナブルWebへの関心が高まっています。当社では、2021年から「サステナブルWebデザイン ソリューション」をご提供しています（「サステナブルWebデザイン ソリューション」の提供を開始）。
今回のコラムでは、登壇内容を振り返りつつ、当日ご参加いただけなかった方への情報共有として、注目の「モダンWeb技術」をご紹介します。
サステナとモダンWeb。その密な関係性
企業のWebサイト運営では、デザインシステム、アクセシビリティ、表示パフォーマンス、SEO、セキュリティなど考慮すべき点がたくさんあります。その中で、環境意識の高いWeb担当者にとって、自社のWebサイトがサステナブルであるかどうかも重要なポイントとなります。
環境負荷の低いサステナブルWebを実現するには、大きく2つの方向性があります。
- データ転送量の削減：Webサイトを軽量化し、不要な転送データを抑制する
- エネルギー源の最適化：グリーンホスティングやCDNの活用により、クリーンでエネルギー効率の高い配信を行う
この2つの方向性に具体的な方策を与えてくれるのが「モダンWeb」と総称される技術潮流です。モダンWebとは何か？を一言でまとめると「より高速、より安全、スケーラブルで、より環境に優しいWeb」を志向する技術スタックです。
もちろん、モダンの意味は現代であり今現在のこと。その時代その時代でモダンと呼ばれる技術トレンドはあったわけですが、今日のモダンWebを特徴づけたのは「Jamstack（ジャムスタック）」です。
Jamstackとは、JavaScript、API、Markup（HTML/CSS）を組み合わせた、Webページをあらかじめ作成して高速に配信するWebサイトの開発アプローチです。静的サイトジェネレーターを用いてWebページを事前に生成し、CDN（コンテンツ配信ネットワーク）を活用して効率的に配信することで、パフォーマンスの向上と環境負荷の低減を実現します。また、APIとJavaScriptを活用することで、動的な機能を柔軟に追加できます。
この「API駆動で柔軟に機能を組み合わせる」考え方は、Webサイト領域にとどまらず、MACH（Microservices、API-first、Cloud-native-SaaS、Headless）やコンポーザブルアーキテクチャといった概念にもつながっています。より拡張性の高いデジタル基盤を求める動きの中で、Jamstackのアプローチが広がっています。
以下では、サステナビリティを推し進める4つのステップ「作る→配信する→さらに軽くする→測る」に沿って、コーポレートサイトなどコンテンツが主役のWebサイト領域で注目すべき「6つのキーテクノロジー」をご紹介します。
4つのステップと6つのキーテクノロジー
作る
1. 静的サイトジェネレーター（SSG）
静的サイトジェネレーター（SSG：Static Site Generator）は、Webサイトを構成するHTML/CSS/JSを自動生成するフレームワークで、コンテンツデータと、Webページのひな形であるテンプレートから静的なWebページを生成するテンプレートエンジンの進化系。静的ファイル化することで、軽量で安全かつ環境負荷の低いWebサイトを実現します。
代表的なフレームワークには、Astro、Hugo、Eleventy、Next.js などがありますが、今、急成長しているのが「Astro」です。イケア、ポルシェ、ミシュランといった世界的なブランドでも採用されており、今後SSG分野で支配的なフレームワークになるだろうと、界隈で注目を集めています（Jamstack | 2024 | The Web Almanac by HTTP Archive）。
実は、このコラムを掲載している当社の公式WebサイトでもAstroを活用しています。詳しくはこちらも合わせてご覧ください。
2. ヘッドレスCMS（Headless CMS）
SSGは開発者向けの技術ですが、ビジネスユーザがコンテンツを管理・更新するためには、ヘッドレスCMSが有効です。ヘッドレスCMSはAPIベースでコンテンツを管理し、SSGと連携することで、表示パフォーマンスやセキュリティを向上させつつ、環境負荷を抑えることが可能になります。
ヘッドレスCMSは新しい製品カテゴリですが、Contentful、Storyblok、Strapi といったガートナーの評価レポートにも取り上げられる海外製から、国産のmicroCMSなど多くの製品が登場しています。国内においてもティッピングポイントを超えて、市場拡大期に入ったと感じています。
配信する
3. グリーンホスティング
WebのCO2排出の主因はデータセンターの電力消費です。そのため、環境に配慮したデータセンターや再生可能エネルギーを活用した「グリーンホスティング」を選択することも、サステナブルWebには重要です。
特にSSGを活用したWebサイトでは、大手クラウドベンダー各社が提供する「静的サイトホスティング」が有効です。Cloudflare Pages、Vercel、Netlify、AWS Amplify、Firebase Hosting など、いずれもCDNを活用した最適な配信とエネルギー効率の高い運用を実現しています。
なかでも、CDNプロバイダーとして世界シェアトップのCloudflareが提供する Cloudflare Pages は、再生可能エネルギー100%で運営され、Green Web Foundationにも認定されています（Cloudflare Pagesでグリーンなホスティング）。
軽くする
4. 画像の最適化
画像はWebページのデータ量の大部分を占めるため、最適化が不可欠です。圧縮率の高いAVIFやWebPなどの次世代画像フォーマットや、CloudinaryやImgixといった画像CDNを活用することで、大幅な軽量化が可能です。
しかし、AVIFの採用率1%、WebPの採用率12%と、明らかなメリットがあるにもかかわらず、多くのWebサイトはまだこれらの最新フォーマットを完全には採用していません（Sustainability | 2024 | The Web Almanac by HTTP Archive）。次世代フォーマットによる削減余地は大きいと考えられます。
5. 圧縮技術
テキスト圧縮もデータ削減に有効です。BrotliやGzipなどの圧縮アルゴリズムを活用することで、データ転送量を抑え、エネルギー消費を削減できます。
これらは機械的に対応可能ですが、調査では半数以上のWebサイトが未だテキスト圧縮を一切使用していません（Sustainability | 2024 | The Web Almanac by HTTP Archive）。Webサイトを軽くする余地はまだまだありそうです。
測る
6. 環境負荷の可視化
最後に、Webサイトの環境負荷を計測できるWebサービスを3つご紹介しました。あくまで参考値ですが、気づきを得るきっかけとして有用です。
まとめ
モダンWeb技術は、開発者体験や開発効率を向上させるだけでなく、サステナブルなWebサイト運営を支える強力な手段です。環境負荷を抑えることは、持続可能なデジタルプレゼンスを実現し、Webサイトのビジネス価値向上にもつながります。
企業のサステナビリティ戦略の一環として、Web運営の環境負荷を考慮することは、今後ますます重要になるでしょう。ぜひ、自社のWebサイトにおいて持続可能なアプローチを模索してみてください。
Newsletter
メールニュースでは、本サイトの更新情報や業界動向などをお伝えしています。ぜひご購読ください。