デジタル・サステナビリティへ、初めの一歩
7月にリニューアルしたACTANT FORESTのウェブサイトでは、デジタル・サステナビリティに配慮したサイト設計を行っています。情報の視認性やアクセス性を保ちながら、サイト訪問時のエネルギー使用量とCO2排出量をできるだけ低減しようと様々な選択肢を検討した結果、このようなシンプルなUIのウェブサイトに行きつきました。
サイトに搭載しているCO2計測サイト「Website Carbon Calcurator」によると、ローンチ時点での排出量は、1訪問あたり0.02gとなっており、同サイトでテストされたウェブサイトの平均値0.5を大きく下回っています。
ビジュアルに趣向を凝らしたウェブデザインはもちろん魅力的ですが、CO2のような環境負荷と引き換えにできるかという視点に立つと、これまでウェブサイトの「良さ」や「美しさ」だと思っていたものの基準もまた変わってきます。本記事では、こうした取り組みの背景、ACTANT FORESTサイトで実装したこと、そして私たちが参考にしたレファレンスをお伝えしていきたいと思います。
デジタル・サステナビリティの必要性
今日、インターネット上に存在するウェブサイトの数は19億を超えるとも言われています。デジタルな情報は、紙などのメディアも消費せず、一見資源やエネルギーを節約できる「非物質的」なもののように感じてしまいます。しかし実際のところ、インターネットは世界のCO2排出量の約3.8％を占めており、これをひとつの国に置き換えたとすると、世界で4番目に大きな汚染源になるほどのボリュームになっています。
世界のどこかにあるデータセンター、張り巡らされた通信インフラ、私たちユーザーのデバイス。こうした設備や機器の製造、維持、使用には大量の資源と化石燃料由来の電力が投入されています。つまり、インターネット空間はバーチャルでも、それは非常に「物質的」な基盤に下支えされているのです。そして、ますます増加し続けるユーザー数やデータ消費量に伴い、排出量も止まることなく増えていく未来が予測されています。
そこで近年浸透し始めているのが「デジタル・サステナビリティ」への取り組みです。包括的な指針としては、国連環境計画などによって設立されたCODES（Coalition for Digital Environmental Sustainability）のアクションプランがあります。今日、持続可能性を高めるためにデジタル技術の応用を加速しようと世界的にDXが推進されていますが、それが現在の形のまま進んでしまうと、かえって自然環境や社会制度を劣化させ、サステナビリティを阻害する方向に傾いてしまうため、適切なビジョンと優先事項を特定・共有してグローバルな協調行動を促そうと、100カ国以上、1,000人以上の協力者との共創プロセスを経て策定されたものです。
ここでは、デジタル・サステナビリティの推進に必要な、以下の3つの現状からの「システミックな転換」が定義されています。
同じ方向を向く：デジタル時代のビジョン、価値観、目標を持続可能な開発と一致させるための条件整備
負の影響を軽減する：デジタル技術がもたらす社会的・環境的な悪影響を軽減する「持続可能なデジタル化」へのコミット
イノベーションを加速する：サステナビリティのためのデジタル化に向けた、イノベーションの取り組みの方向づけ
また、これらを促進するため、各シフトに対応する9つの取り組みが行われ、様々な指標や基準の策定、枠組みの整備などが進められています。
こうした国際的な潮流を受けて、企業においてもESGへのコミットメントに、デジタル・サステナビリティが加えられるようになりつつあり、またCSRのデジタル面を補完する「CDR（Corporate Digital Responsibility）」の行動も重視され始めているようです。
しかし、デジタル・サステナビリティへの貢献は、こうしたグローバルな機構や大企業にしか取り組めないことではありません。とくに2つめのシフト「負の影響の軽減」においては、小さな組織でも実践できることが多々あり、なかでも優先事項に含まれる「エネルギー消費とCO2排出の削減」は、着手しやすい課題のひとつです。
普段使用しているデジタル製品やサービス、インフラを見直して、一つひとつ、より環境負荷の低い選択をしていくこと。省エネのためにエアコンの設定温度を下げるのと同じように、身近なところから始めることができます。もちろんその中には、自社のウェブサイトのあり方を再検討することも含まれます。
以下のサイトでは、専門家らによってまとめられた持続可能なインターネットの原則「Sustainable Web Manifesto」に沿って、どのようなアクションの選択肢があるかが解説されていますので、ぜひ参考にしてみてください。
ウェブサイトを見直す7つのポイント
よりサステナブルなウェブサイトをつくるための方法は、設計プロセスの策定から開発・構築方法、UIデザインに至るまで、いろいろなメディアで具体的なノウハウが公開されています。今回デザインと構築で協力いただいたEntosenとともに検討を重ねた結果、ACTANT FORESTでは、ウェブサイトの軽量化とエネルギー消費量の削減を図るため、次の項目に取り組みました。
1. 画像の表示
画像ファイルは、多くのウェブサイトでページサイズの大半を占めています。ACTANT FORESTサイトでは、デフォルトで多数の画像を表示することはせず、読者の選択に合わせて、最適化したフォーマット、サイズの画像を読み込む構成としています。
2. 表示モード切り替え
OLEDディスプレイにおけるエネルギー消費を削減するため、OSやブラウザ、またウェブサイト自体にもダークモードが搭載されるようになっています。ダークモードは、画面の明るさが100%の場合、39〜47%のバッテリー消費を抑えることができ、30～50％の明るさであれば、3～9％の節電になると言われています。ACTANT FORESTサイトでは、読者のシステム設定に対応した表示モードをデフォルトとし、必要に応じてForest / Cityモードを選択できるようにしています。
3. システムフォントの使用
読者のデバイスにすでにインストールされているフォントを使用することで、ウェブサイトの読み込みを高速化し、サイト全体の軽量化を図ることができます。そのため、カスタムフォントは使わず、システムフォントのみによるデザインとなっています。
4. Jamstack構成
多くのウェブサイトは、読者がサイトを訪問するたびにページが生成される構造になっており、サーバー側で多くの処理を必要とします。そこで発生するエネルギー消費やサーバーへの負荷を削減するため、あらかじめ静的に生成されたページを配信するJamstackでサイトを構成しています。
5. モジュール型コードフレームワーク
不要なCSSやJavaScriptでページサイズを増大させないよう、各コンテンツに適したモジュール型のフレームワークを使用しています。
6. グリーンホスティング
データセンターは、インターネット全体の消費エネルギーの大部分を占めており、その電力源を再生可能エネルギーに移行することが不可欠とされています。グリーンエネルギーのみによるJamstackウェブサイト構築サービスはまだないため、ACTANT FORESTサイトは、コンテンツ管理プラットフォームにContentful、ホスティングにNetlifyを利用しています。両サービスではAWSとGCPのデータセンターを使用しており、AWSは2025年までに100% 再生可能エネルギーで事業を賄い、GCPは2030 年までにすべてのデータセンターを カーボンフリーで稼働させるとしています。この両社の取り組みに連動する形で、間接的なグリーンホスティングを目指しています。
7. プライバシーと環境に配慮した分析ツール
ユーザーデータ収集のためのトラッキングや広告のスクリプトは、大きなエネルギー消費の原因となっています。ACTANT FORESTサイトではウェブプライバシーを尊重し、不必要なデータ収集を行わないよう、サイト改善のための分析ツールとしてCabin.を使用しています。
レファレンス
最後に、今回私たちがサイト制作にあたって参照したリソースをご紹介します。冒頭でも触れたように、実際に自分たちでどんな方法が応用できるか、環境負荷の削減を中心に考えていくと、これからのウェブサイトに期待する使いやすさやビジュアルも、きっと変わっていくと思います。一つひとつのウェブサイトが大きなインパクトの形成につながるよう、皆さんもぜひ、取り組めることからチャレンジしてみてください。
サステナブルなwebサイトづくり
Sustainable Web Design
人と地球を第一に考えたウェブサービスをデザインするための包括的なガイド。デザインや構築に関するポイントだけでなく、クライアントやプロジェクトに対する理念、ビジネス運営などについても検討すべき戦略がまとめられている。
sustainable.dev
開発者向けに、低炭素で持続可能なウェブサイトをつくるための最新情報やノウハウを提供するリソース集。ディレクトリには、同サイトのメンバーシップに加入するサステナブルなウェブ開発者やエージェンシーのプロフィールが掲載され、プロジェクトの依頼につなげることもできる。
Web Almanac 2022 - Chap.20 Sustainability
HTTP Archiveが公開しているウェブの状況に関する年次レポート。2022年に初めて設けられた「サステナビリティ」の章では、様々な統計データとともにウェブサイトが環境に与える影響が解説され、取るべき対策も包括的にまとめられている。
Wholegrain Digital - 20 ways to make your website more energy efficient
前出の「Sustainable Web Manifesto」や「Sustainable Web Design」などを主導するウェブデザインエージェンシーWholegrain Digitalによる、Webサイトのエネルギー効率改善のポイントを簡潔にまとめた記事。
ケーススタディ
lowwwcarbon
低炭素で持続可能なウェブサイトのショーケース。紹介されているサイトはすべて、ページ重量と1訪問あたりのCO2排出量が明記されている。
Low-tech Magazine
2007 年 創刊、2018 年から太陽光発電で運営されているオンラインマガジン。インターネットのエネルギー使用量が再生可能エネルギーの供給量を上回っていることから、ソーラーパネルと蓄電池による完全オフグリッドシステムでサーバーを稼働させている。そのため、天候によってはオフラインになることもあり、読者は背景色の切り替え位置とバッテリーの残量表示によってサーバーの状態が把握できるようになっている。
Formafantasma
現代デザインを支える環境、歴史、政治、社会的文脈に切り込む作品やプロジェクトで知られるデザインスタジオ、Formafantasma。リニューアルされたウェブサイトでは、ロゴを画像ではなく、Unicode記号を使った文字列のデザインに変更。また、作品画像にカーソルを合わせると、読み込まれる拡大画像のサイズがプレビューされるなど、環境負荷低減のための様々なアイデアが盛り込まれるとともに、彼らの洗練されたデザインを体現するUIデザイン・情報設計となっている。
Branch
The Green Web Foundationが発行する、持続可能で公正なインターネットのためのオンラインマガジン。「需要応答型」に設計された同サイトには、ユーザーがいるグリッド（送電網）上のエネルギー需要と化石燃料への依存度に応じた4種の異なるインターフェースデザインが用意されている。依存度が低ければメディアコンテンツがフルに表示され、逆の場合はaltテキストなどに置き換わり、常にカーボン・バジェット内に収まる仕様となっている。
計測・診断ツール
Website Carbon Calculator
Wholegrain Digitalが提供する、最もシンプルなウェブサイトのCO2排出量計算サイト。
Ecograder
Mightybytesが提供する、ウェブサイトの持続可能性診断サイト。CO2排出量のほか、ページの重さ、UXデザイン、グリーンホスティングなどからサイトの総合スコアを算出。各診断項目はさらに細分化してスコアリングされ、課題に対応するアクションやリソースも提示している。
The Green Web Foundation
2030年までに化石燃料を使わないインターネットの実現を目指すThe Green Web Foundationが提供する、グリーンホスティング診断ツール。日本の事業者は含まれていないが、グリーンエネルギーによるホスティングサービスを提供する、36カ国451社ものプロバイダーリストがまとめられている。
この記事が気に入ったらサポートをしてみませんか？