組織の環境方針を次世代Web技術で表現する
サステナブルWebサイト

今回、そのWebサイトを構築するにあたって、「サステナブルWebサイト」という思想・方法を用いて実装を行いました。「サステナブルWebサイト」は、一言で言えば軽量で、公正な、電力消費を抑えてつくられるWebサイトのことを指します。

2015年のSDGsやパリ協定の流れを受けて、インターネットの電力消費におけるCo2排出量が問題になりました。そこで2019年にはSustainable Web Manifestoが宣言され、2023年にはWeb技術の標準化を行う非営利団体W3CがWeb Sustainablity Guidelinesを発表。今回は日建設計総合研究所の伝えたいメッセージとそういった社会潮流との親和性から、サステナブルWebサイトの方法論を用いて実装することになりました。

サステナブルWebをつくるためには、いくつかの技術要件があります。Web担当者Forumの以下の記事には、サステナブルWebを実現するために6つのキーテクノロジーが挙げられています。今回は、グリーンホスティングから環境負荷の可視化、静的サイトジェネレータとヘッドレスCMSなど、その全てを実装しながら、高速・軽量なサイト構成を目指しました。

キーテクノロジーのひとつである「グリーンホスティング」は、さくらインターネットが提供するVPSの『石狩データセンター』を採用しました。国内で唯一再生可能エネルギー100%で稼働しており、外気冷房や太陽光直流給電等、環境に配慮したデータセンターです。

キーテクノロジーのひとつである「環境負荷の可視化」は、WebサイトのCO2排出量を計測できるサービス『Website Carbon Calculator』を採用しました。1PVあたりのCO2排出量が可視化でき、世界平均の排出量と比較したA+〜Fまでのランク付けを行うことができます。

静的サイトジェネレーターはAstroとGithub Actionsで構築し、ヘッドレスCMSはmicroCMSを採用しました。この組み合わせにより、表示速度の高速・軽量化やフロントエンド開発の自由度向上、本体サイトでも使用しているWebRelease2と同等のセキュリティ確保を実現しました。

一方で「ただ軽量にすればよい」だけであれば、ページのコンテンツや装飾を質素にするなど、意匠性を犠牲にすればよいだけです。しかし、今回はNSRIのコーポレートサイトが持つ世界観と連動させるために、軽量化は行いつつも、ブランドとしての統一感を重視する方針で実装しています。

例えば、本体サイトでも使用しているWebフォントをデバイスフォントにダウングレードすれば、『Website Carbon Calculator』ではA+判定に近づくことは実証済みですが、それでは本体サイトと印象が変わってしまい、世界観が壊れてしまいます。そのため、Webフォントは変わらず本体サイトと同じものを採用し、画像圧縮率やJSファイル圧縮率向上、英語フォントのセルフホスティング、JSライブラリの遅延読み込みといった対策を少しずつ重ね、最終的にはD判定（0.26g/pv）となるよう着地させています。