【レポート】デジタルマーケターズサミット2025 Winter

なぜ今、Webに“サステナブル”が求められるのか？サステナブルWebを実現する6つのキーテクノロジー

SDGsやESGが注目され、企業Webサイトもサステナブルであることが求められつつある。実現のための新しい技術トレンドと、望ましい効果を得るポイントを紹介。

6 6 1

[Sponsored]

SDGs（持続可能な開発目標）やESG（Environment：環境、Social：社会、Governance：ガバナンス）などが注目されるなか、多くのWeb担当者にとって自社のWebサイトがサステナブル（持続可能）であることはもはや必須事項となりつつある。そのための新しい技術トレンドは「モダンWeb」と総称されており、環境負荷を軽減しながらも優れたユーザー体験を提供するものとして注目されている。はたしてどのような使い方をすれば望ましい効果が得られるのか。

「デジタルマーケターズサミット 2025 Winter」に登壇したミツエーリンクスでテクノロジー・アンバサダーを務める榛葉裕幸氏が、サステナブルWebを実現する6つのキーテクノロジーの具体的な手法と実例を紹介しつつ、その可能性について語った。

株式会社ミツエーリンクステクノロジー・アンバサダー榛葉裕幸氏

Why：なぜ今、サステナブルWebなのか？

そもそも、なぜWebサイトがサステナブルである必要があるのか。

榛葉氏は2015年に国連総会で採択された17の持続可能な開発目標「SDGs」を挙げる。また、この上位概念となっているのが「PPP（Planet：地球環境、People：人々の幸福、Prosperity：経済的繁栄）の原則」だ。

これらは相互に関連し、どれが欠けても実現は難しい。採択から10年が経ち、目標達成の期限である30年まで残り5年となる中で、とりわけ地球環境、気候変動問題が注目されているのは誰もが感じているところだろう。

このSDGsの気候変動対策に密接に関連するのが「パリ協定」だ。地球全体の気温上昇を抑制し、持続可能な社会を実現するための国際的な枠組みで、2015年に採択され今年で10年目、中間目標の期限である2030年まで残り5年となっている。SDGsと同様に今年は“節目の年”というわけだ。国内においても2025年2月に10年後の2035年に向けて、温室効果ガスを60%削減するという目標を盛り込んだ地球温暖化対策計画が国際連合枠組条約事務局（UNFCCC）に提出されている。

そうした社会的背景のもと、企業においては「サステナビリティ情報開示」の影響が大きい。2023年から有価証券報告書に「サステナビリティに関する考え方及び取組」の項目を新設しサステナビリティ情報の開示が求められるようになり、企業のWebサイト上でもサステナビリティ情報を発信することも推奨されている。

2021～2022年にかけて、「CSR（企業の社会的責任）」から「サステナビリティ」へ変更が多かったと記憶している。現在は多くの企業がWebサイトのグローバルナビゲーションに「サステナビリティ」のカテゴリを設け、積極的に情報発信に取り組んでいる（榛葉氏）

Webサイトのページサイズで環境負荷を評価する

Webサイトも環境に影響していないとはいい難い。サステナブルWebのガイドライン「Web Sustainability Guidelines」の最新版によると、あくまで推定値ながら、デジタル産業の二酸化炭素の排出量は世界の総排出量の2～5％を占めている。つまり、Webサイトの構築・運営自体も大きな環境負荷を与えている可能性がある。

ここで榛葉氏は、Webサイトのページサイズによって、そのWebサイトの環境負荷を評価する試みについて紹介した。

この評価モデルでは、2.4メガバイトを超えると「Fランク＝落第」としている。一方で、全世界のWebページの重さの中央値は最新データで2.6メガバイトを超えており、多くのWebサイトがFランクと判定されてしまうという。

企業サイトにサステナビリティのカテゴリはできたが、情報発信に利用しているWebサイトそのものはサステナブルではない可能性がある（榛葉氏）

ほとんどのWebサイトは環境負荷が「Fランク」になってしまう

How：サステナブルWebを実践するには？

それでは、どのようにしてサステナブルWebを実現するのか。

前述したサステナブルWebのガイドライン「Web Sustainability Guidelines」の最新版である1.0が2024年12月に公開された（以下、WSG1.0）。環境負荷を軽減するためのベストプラクティス集で、使いやすさや運用性など、ビジネスの持続可能性も考慮されているため、これを参考にするのがよいと榛葉氏は述べる。

WSG1.0は、実際にWebサイトの構築・運営に携わる人に関係する4つの視点に整理されており、榛葉氏はその要諦を次のように紹介した。

UXデザイン：軽量・アクセシブルなデザインによるシンプルなUI
Web開発：効率的なフロントエンド実装により、無駄なJS/CSSを減らして最適化
ホスティング：グリーンホスティングの活用により、再生可能エネルギーで運営する
ビジネス戦略：Webのライフサイクル評価により、長期的な視点でのWeb運営を行う

Web Sustainability Guidelines（WSG）1.0の4つの視点

サステナブルWebを実現する2つの方向性と実現技術

また、WSG1.0とは別に、Webサイトの温室効果ガスの排出量を推定する「Sustainable Web Design Model」が提案されている。「ユーザデバイス」「ネットワーク」「データセンター」の3つのセグメントでエネルギー消費量と、Webサイトの閲覧時に発生するデータ転送量（ページサイズ）などをインプットして評価するものだ。

これとWSG1.0から、サステナブルWebを実現するには、「転送データを削減することでWebサイトを軽くする」「エネルギー源をクリーンエネルギーとする」の“2つの方向性”が考えられます（榛葉氏）

Webサイトの温室効果ガスを削減する2つの方向性

この2つの方向性を具現化するのが、「モダンWeb技術」であり、「より高速、より安全、スケーラブルで、より環境に優しいWebを志向する技術」である。

この潮流を特徴づけたのが、「Jamstack」であり、フロントエンド技術と静的サイトホスティングによる「静的ファースト」モデルであることがポイントとなる。

「静的ファースト」モデルとは

この「静的ファースト」モデルとは、Webサイトを構築する際に、プリレンダリング（HTMLやCSS、JavaScriptなどを静的ファイルとしてビルドする）し、その静的ファイルをCDNが統合された静的サイトホスティングにホストすることで、全世界にCDNを通じてWebサイトを配信していくというものだ。また認証機能など動的機能を追加する際には、外部の専門サービスとAPI連携する。

「静的ファースト」モデル

榛葉氏は、静的を「作り置き（Pre-rendered）」、動的を「つど注文（Dynamic）」と表現した。

静的： Webページを見に来る人がリクエストするよりも先に、事前にWebページをレンダリングしておくこと
動的： Webページを見に来る人がリクエストしたときに、Webページを作り出すこと

実際には、動的・静的を組み合わせたハイブリッド型が多い。

サステナブルサイトを目指し、転送データを削減するには、「静的ファーストモデル」が望ましい。第一のメリットが、圧倒的にパフォーマンスが優れていることにある。作り置きをそのまま渡すため、すぐ出てくる「お通し」のようなものといえる。

また、第二のメリットとしては、データ転送量が小さいことがある。HTTPアーカイブの最新調査によると、転送サイズは動的の43%とされている。少ないリクエスト数で欲しいコンテンツがレスポンスされるというわけだ。

ただし、榛葉氏によると、Jamstackでは静的ファーストに動的要素も加味した「ハイブリッド志向」になってきているという。そして、AWSやGoogleなども参加する「MACHアーキテクチャ」では、よりモダンな「Webアプリケーション」を志向している。そもそも「静的＝Webサイト」、「動的＝Webアプリケーション」という側面もあり、「モダンWeb」というと、静的の良さをもちつつ動的なアプリケーションを実現する「React」などのSPA（Single Page Application）も想起される。

しかし、コンテンツマーケティングやブランドコミュニケーション領域では、ドキュメント主体の情報発信がメインストリームであるため、ここでは、静的な情報サイトをサステナブルにする「モダンWeb」について具体的に紹介する。

What：エコになる「モダンWeb技術6選」

サステナブルなWebのためには、「作る」「配信する」「もっと軽くする」「測る」という4つのステップにおいて、6つのキーテクノロジーが有効だ。

サステナブルWebを実現する6つのキーテクノロジー

① 静的サイトジェネレーター
「作る」ステップで活用
環境負荷低減インパクト★★★
代表的なプロダクト：Astro、Hugo、Eleventy、Next.js

静的サイトジェネレーターは、一言でいうなら「テンプレートエンジンの進化系」だ。Webサイトを構成するHTML/CSS/JSを自動生成するフレームワークであり、「データ＋テンプレート」で静的ページを生成する。作り置きされたページを配信することで、高速・安全・省エネとなりサステナブルWebサイトに貢献する。

静的サイトジェネレーターとは

昨今、Webエンジニアリング界隈で、イケアやポルシェ、ミシュランなど世界的なビッグブランドの大規模リニューアルプロジェクトが注目を集めた。いずれも共通して、コンテンツドリブンのWebサイトにフォーカスした静的サイトジェネレーター「Astro」が採用されている。今後は支配的なフレームワークになるのではないかと注目されている。榛葉氏は、Astroのメリットとして生成ページが圧倒的に軽いことを紹介した。Google Lighthouseのスコア比較では、WordPressのほぼ半分相当になるという。

また榛葉氏は「いま、高トラフィックの大規模Webサイトでは、静的サイト派が増えている」と評し、その理由として、パフォーマンスやSEO、セキュリティ、安定性に効果が高いことを挙げた。静的サイトが増えることで、静的サイトジェネレーターの活用も増えていくことが予測される。なお、榛葉氏の所属するミツエーリンクスのサイトもAstroで構築されているという。

② ヘッドレスCMS
「作る」ステップで活用
環境負荷低減インパクト★★
代表的なプロダクト：Contentful、Storyblok、Strapi、microCMS

Astroをはじめとする静的サイトジェネレーターは、開発者向けのフレームワークであり、一定の知識を必要とする。そこで、ビジネスユーザーがコンテンツを作成する際の投稿・アセット管理ツールとして注目されているのが「ヘッドレスCMS」だ。静的サイトジェネレーターと組み合わせることで、コンテンツ管理の効率化を図りつつ、SSG（Static Site Generation）による高速配信が可能になる。

気になるのがWordPressのような従来型CMSとの違いだ。WordPressの場合、フロントエンド（Webページを作成して配信する仕組み）とバックエンド（コンテンツを管理する仕組み）が密に結合しているため、不特定多数に触れられたくないバックエンドの部分まで一体化している状態だ。

一方、「ヘッドレスCMS」はフロントエンドとバックエンドが完全に分離しており、静的サイトジェネレーターによる「作り置き」をブラウザで確認することになるため、リクエストのたびにレンダリングする必要がない。そのためセキュリティ対策もしやすくなる。

「ヘッドレスCMS」は海外製から国産まで120以上の製品が登場し、かつWordPressやAdobe Experience Managerのような従来型CMSもヘッドレスとしての利用方法を訴求している。国内でも市場拡大期に入ったところだ。

榛葉氏は、ヘッドレスCMSと静的サイトジェネレーター、静的サイトホスティングによるシステム構成のイメージを掲げ、「レゴブロックで組み立てるように、それぞれをビルディングブロックとして組み立て、Webサイトの運営基盤を構築する感じ」と表現した。

ヘッドレスCMSと静的サイトジェネレーター、静的サイトホスティングによるシステム構成イメージ

③ グリーンホスティング（静的サイトホスティング）
「配信する」ステップで活用
環境負荷低減インパクト★★★
代表的なプロダクト：Cloudflare Pages、Vercel、Netlify、AWS Amplify、Firebase Hosting

Webサイトで温室効果ガスを削減する最も簡単で有効な方法は、再生可能エネルギーなどのクリーンエネルギーで稼働する「グリーンホスティング」のサービスを積極的に利用することだ。トラフィック数上位1万のサイトの55%がすでに利用しているとされる。なぜなら、ビッグテックとよばれる大手クラウドサービスのほとんどが環境対策に大規模に投資しているためだ。

エコなホスティング選びでCO2削減

「グリーンホスティング」には厳密な定義はないが、より厳密さを求めるならば、「Green Web Foundation（グリーンウェブ財団）」による独自の認定制度が設けられているので、適合するサービスを選ぶとよいだろう。

特に、大手サービスが力を入れているCDN（Content Delivery Network）統合型の「静的サイトホスティング」は、Webサイトの読み込み時間を短縮することでエネルギー消費を削減する。中でも世界的トップシェアを誇るのが「Cloudflare Pages」だ。再生可能エネルギー100%で、当然ながら「グリーンウェブ財団」の認定も受けている。

④ 画像の最適化
「軽くする」ステップで活用
環境負荷低減インパクト★★
代表的な技術とサービス：最新の画像フォーマット（WebP、AVIF JPEG XLなど）、画像CDN（Cloudinary、imgixなど）、フロントエンド技術（遅延読込、レスポンシブ画像）

画像は、Webページ全体の重量の半分以上を占めるため、圧縮・最適化すれば効率的にページを軽くすることができる。そのための手法は大きく2つだ。

圧縮率の高い最新の画像フォーマットを採用する
遅延読込やレスポンシブ画像配信などで不要なデータ転送を削減するフロントエンド技術を活用する

圧縮率の高い最新の画像フォーマットとして、榛葉氏は「WebP」「JPEG XL」「AVIF」を紹介。「WebP」と「AVIF」は圧縮率が高く急速に広がっているが、さらに圧縮率が高いのが「JPEG XL」だ。ただし、前者2つがほとんどの主要ブラウザをカバーしているのに対して、「JPEG XL」はまだほとんど対応されていない。そのため、当面は「WebP」と「AVIF」が使われると思われるが、実際にはWebPが12%、AVIFは1%と浸透していない。逆に言えば、次世代画像フォーマットによる削減余地は大きいと言えるだろう。

画像圧縮率が高い次世代フォーマット

しかし、画像の手動入れ替えは決して現実的とは言えない。そこで注目されているのが「画像CDN」による画像最適化だ。Cloudinary、imgixなどのサービスが登場しているが、URLに画像サイズや画像フォーマットを指定するだけで自動的に変換してくれる。

新しいフォーマットが主流になってきた時にも「画像CDN」を対応させておくことで自動的な置き換えが可能になる（榛葉氏）

⑤ 圧縮技術
「軽くする」ステップで活用
環境負荷低減インパクト★★
代表的な技術とサービス：gzip、Brotli、フロントエンド技術

「圧縮技術」は、テキストデータを軽量化して無駄なデータ転送を防ぐものであり、具体的にはHTML、CSS、JSなどを圧縮する技術のことを指す。1つめの手法は、従来からある、サーバーサイドで60～80%に圧縮する技術で、「gzip」が広く使われている。近年ではより効率的な圧縮アルゴリズムを採用した「Brotli」が登場し、gzipより15～25%ほど圧縮率が高い。

サーバーサイドでの圧縮について、gzip、Brotli が働いているかは、開発者ツールの「Content-Encoding」で確認できる。これはブラウザでも見られるので、自社のサイトをチェックしてみるとよいだろう。

そして2つめは、フロントエンド技術を活用して圧縮する手法だ。「Minify」と呼ばれるソースコードの縮小の他、依存関係のないJavaScriptを削除するなどの技術も登場している。なお、Astroなどの静的サイトジェネレーターを使うことで、ビルドの際に自動的に圧縮・縮小してくれる。

テキスト圧縮については、半数以上のウェブサイトが行なっていないというレポートもある。榛葉氏は「エネルギー消費を削減するための大きな機会を逃している」と指摘し、「決して難しいことではないので取り組んでみてはどうだろうか」と語った。