Environment Bank｜ウェブ技術の最適化による環境負荷削減

1. 自然再生事業の成長に伴うウェブサイトの課題

Environment Bankは、英国のBiodiversity Net Gain（BNG：生物多様性ネットゲイン）制度に対応する「Habitat Bank（生息地バンク）」の開発・運営を手がけています。土地所有者と連携し、自然環境を再生・管理し、生物多様性の向上によって得られる価値を開発事業者などに提供しています。

事業の拡大に伴い、ウェブサイトには土地所有者や開発事業者など、異なる目的を持つ利用者への対応が求められるようになりました。
しかし、従来のサイトでは、登録フォームの使いにくさやコンテンツの絞り込み機能の不足、事業の広がりを視覚的に伝えにくいことなどが課題となっていました。

そこで同社は、持続可能なウェブデザインを専門とするWholegrain Digitalと、サイト構造やデザイン、コンテンツ管理の仕組みを刷新しました。

2. 情報設計とウェブ技術の最適化

ウェブサイトの刷新では、関係者へのインタビューやワークショップ、既存サイトと競合サイトの分析を通じて、利用者の目的や情報ニーズを整理しました。その結果をもとに、サイト構造や情報への導線を見直し、ブランド表現と環境性能の両立を図りました。

制作会社が公表した主な取り組みは、次のとおりです。

ウェブサイトの機能が増えると、JavaScriptや外部サービスによるデータ転送量や処理負荷が増加する場合があります。Environment Bankの事例は、機能を単純に減らすのではなく、実装方法を工夫することで利用体験と環境性能の両立を目指した点に特徴があります。

3. ホームページのCO2排出量を96％削減

制作会社Wholegrain Digitalは、ウェブサイト刷新後の成果として、次の評価結果を公表しています。

注目したいのは、環境性能だけでなく、ウェブアクセシビリティについても高い評価を得ている点です。自然再生プロジェクトを紹介する地図や情報の絞り込み機能などを備えながら、環境性能と利用体験の両立を実現したことが特徴です。

注記：96％削減はホームページ1回の閲覧あたりの推定値であり、サイト全体の年間排出量の削減率ではありません。また、LighthouseのAccessibilityスコア100点は、WCAGへの完全な適合を保証するものではありません。各数値はWholegrain Digitalが公表した当時の評価であり、現在のウェブサイトの性能を示すものではありません。

4. SVGとブラウザ標準機能を活用した地図の開発

Environment Bankのウェブサイトで特徴的なのが、英国各地のHabitat Bankの所在地や事業の広がりを紹介するインタラクティブマップです。

一般的に、こうした地図にはGoogle Mapsなどの外部サービスが利用されますが、用途によっては多くのスクリプトやデータの読み込みが必要になります。

そこでWholegrain Digitalは、SVG（Scalable Vector Graphics）とブラウザ標準機能を活用した独自の地図を開発しました。英国各地域とHabitat Bankの一覧を関連づけ、利用者が地域ごとの事業情報を確認できる仕組みです。

SVGは図形をベクター形式で表現する技術で、設計次第では表示品質を維持しながらデータ量を抑えられます。また、ブラウザ標準機能を活用することで、外部ライブラリへの依存を減らすことも可能です。

ただし、SVGが必ず軽量になるわけではなく、実際の環境性能はコードの複雑さや読み込み方法などによって異なります。

この事例で重要なのは、ウェブサイトに必要な機能を見極め、その目的に適した技術を選択したことです。環境性能とウェブアクセシビリティに配慮しながら、自然再生事業の広がりを視覚的に伝える仕組みを実現しています。

5. まとめ：必要な機能と環境性能を両立させる技術選定

Environment Bankの事例は、ウェブサイトの環境負荷を減らすために、機能や表現を単純に削減する必要はないことを示しています。

情報設計の改善に加え、SVGやブラウザ標準機能など、目的に適した技術を選択することで、必要な機能を維持しながらデータ転送量や処理負荷を抑えることが可能になります。

環境性能だけでなく、ウェブアクセシビリティやユーザビリティ、ブランド表現など、ウェブサイトが果たす役割を幅広く考慮することも重要です。

持続可能なウェブ設計では、何を削減するかだけでなく、必要な機能をどのような技術で実現するかという判断が重要です。