この記事は「株式会社メンバーズ Jamstack研究会主催 Advent Calendar
2023」の4日目の記事です。

はじめに

こんにちは、メンバーズルーツカンパニーの渡邊です。業務ではJamstack関連の案件に携わっています。

近年、SDGsにおける気候変動の課題への対策をはじめとした、脱炭素社会の実現に貢献することが企業に求められています。これはWeb制作会社も例外ではありません。
これまでWebサイト制作では、Googleが定めるWebサイトの使いやすさの指標であるコアウェブバイタル（CWV）の最適化を行うことが重要とされてきました。これからは更に脱炭素化に対応したWebサイトとなるような提案・設計・開発を行っていく必要があると考えます。

脱炭素化に対応したWebサイトとは

脱炭素化に対応したWebサイトとは、 二酸化炭素排出量を可能な限り抑えたWebサイトであり、以下の特徴を持っています。

• ①軽量で表示スピードが高速

• ②使いやすく目的の情報を迷いなく見つけられる

• ③CDNや二酸化炭素排出量の少ないホスティングサービスを利用している

①軽量で表示スピードが高速

データ通信量が多ければ多いほど、二酸化炭素排出量は増加するため※、より軽量であることが望まれます。また、ユーザーが閲覧するブラウザ上での表示スピードが速ければ、そのサイトの利用にともなうデバイスの利用時間も減るため、その分消費電力も減少します。

②使いやすく目的の情報を迷いなく見つけられる

UXが高いサイトは使いやすく、ユーザーは必要なものを見つけやすいため、タスクを短い時間で完了できるため電力消費量が少なく済みます※。

③CDNや二酸化炭素排出量の少ないホスティングサービスを利用している

CDNを利用すると、アクセスした地点から物理的に最も近いエッジサーバーを介してデータを取得できるようになるため、エネルギー消費量を抑える（＝二酸化炭素排出量を抑える）ことができます。また、再生可能エネルギーを利用するホスティングサービス（後述のグリーンホスティングに対応したもの）を選択すると、二酸化炭素排出量を抑えることができます。

Jamstackは動的CMSの課題の解決と脱炭素化を同時に実現できる

Webサイトの日々の運用で、サイトに掲載する「お知らせ（新着情報）」などを更新したい場合、従来はPHP言語などで書かれたサーバーサイドプログラムとデータベースが動作するWebサーバーに、WordPressなどの動的CMSを導入するのが一般的でした。
しかし、動的CMSには以下の課題があります。

• Webサイトの表示スピードが遅い

• セキュリティ面で不安がある

• 本体やプラグインのバージョンを最新に保つのに手間がかかる

• 一時的に負荷が高まった際にWebサーバーがダウンする心配がある

• フロントエンドとバックエンドが密結合していて柔軟性に欠ける

これらの課題を解決できるものとして、ヘッドレスCMSと静的サイトジェネレータと組み合わせたJamstack構成があります。
Jamstackの特徴を簡潔に説明すると「Webサーバー不要で事前レンダリングしたHTMLを配信するフロントエンドとバックエンドが分離されたアーキテクチャ」です。
Jamstackでは静的HTMLを事前生成するため、CDNとオブジェクトストレージを利用してホストすることができ、従来型のWebサーバーを立てることなくHTMLを配信することができます。
このJamstack構成の特徴は、前述の「脱炭素化に対応したWebサイト」の「①軽量で表示スピードが高速」や「③CDNや二酸化炭素排出量の少ないホスティングサービスを利用している」の特徴に共通しています。 そのため、Jamstack構成を採用することは、動的CMSの課題解決と脱炭素化を同時に実現することに繋がると言えます。

脱炭素化に対応したWebサイトかどうかを確認する方法

脱炭素化に対応したWebサイトかどうかを確認するには、Ecograderを利用するのがおすすめです。
EcograderではWebサイトを表示する際の二酸化炭素排出量を測定できるだけではなく、サイトを改善する方法を3つの観点 ①ページの重さ、②UXデザイン、③グリーンホスティング で表示します。
スコアリングには、CO2.jsや、PageSpeed Insightsなどでも利用されているLighthouseが利用されており、 スコアや二酸化炭素排出量の算出方法が明確な点が特徴です。CO2.jsは、Green Software Foundationに加盟しているGreen Web Foundationが作成しているものであり、同団体ではグリーンホスティングの認定なども行なっています。

その他の脱炭素関連の参考サイト・ツール

Green Software for Practitioners (LFC131)
脱炭素の基礎知識が学べる無料のコースです。 Green Software Foundation（Microsoftや大手コンサル会社が設立したソフトウェアによる二酸化炭素排出を抑制に係る活動を行う団体）が作成しています。受講＆テストに合格すると、オンライン表示できる認定バッジが取得できます。

Sustainable Web Design
持続可能なWebデザインについてのカテゴリごとの戦略が学べます（カテゴリは、デザイン、クライアント&プロジェクト理念、コンテンツ&マーケティング、開発、ホスティング、事業運営の６つに分かれています）。

Green Software Patterns
パターンを適用すると、二酸化炭素排出量の削減が見込めるデザインパターン集です（カテゴリはAI、Cloud、Webの３つに分かれています）。Green Software Foundationのプロジェクトの1つです。

115 Web Ecodesign Best Practices
環境に配慮したWebデザインのベストプラクティスが学べます。具体例も記載されています。生態系への影響度レベルも分かります。フランス語のため、Google翻訳の元言語の設定に注意が必要です。

ec0lint（エコリント）
CO2削減になるコードを静的にチェックするLinterです。 AxiosやLodashやjQueryなどのライブラリを利用するよりもプレーンなJSの利用を推奨しており、準拠した場合にどの程度の二酸化炭素排出量削減が見込めるかを確認できます。

Carbon Aware SDK
発電時CO2排出量を地域・時間でクエリできるSDKです。 データソースとしてElectricity Mapsなどを利用しています。

Awesome Green Software
Green Software Foundationが公開する脱炭素に関連するリンク集です。各種クラウドでの二酸化炭素排出量を確認する方法や、アプリで二酸化炭素排出量を測定するツールへのリンクなどがあります。

まとめ

今回、Webサイトの脱炭素化とWordPressなどの動的CMSの課題解決を同時に実現する方法として、Jamstack構成の導入が有効であることをご紹介しました。
Ecograderを利用するとWebサイトがどの程度脱炭素化できているかを確認できますので、まずは身近なサイトを測定・分析して、脱炭素に対する意識を高めていきましょう。

#Jamstack #メンバーズ #脱炭素