持続可能なWebの未来を目指して実践してみた(サステナブルWebデザインの制作と解説)

持続可能なWebの未来を目指して実践してみた(サステナブルWebデザインの制作と解説)

はじめに

ウェブの世界は日々進化していますが、それに伴い、持続可能性の重要性も高まっています。Web Sustainability Guidelines (WSG) 1.0は、ウェブサイトや製品をより持続可能にするための包括的な推奨事項を提供しています。この記事では、WSGの概要から具体的なガイドラインまで、学習を始める方に役立つ情報をまとめています。

また、当記事は下記ページを参考にしつつ自主学習のためにまとめた記事となります。日本語自体も拙いのに英語から無理やり翻訳したりしているような状態なため、内容の正確性を保証をする記事ではありません。
当記事を参考にする場合は自己責任にてお願いします。

Web Sustainability Guidelines (WSG) 1.0

WSGの概要

WSGは、環境、社会、ガバナンス(ESG)の原則を踏まえ、ユーザー中心のデザイン、効率的なウェブ開発、再生可能なインフラ、持続可能なビジネス戦略などを通じて、環境への影響を最小限に抑えることを目指しています。これは、持続可能性の旅の出発点として考えられるべきものです​​。

実際にやってみた

実際にガイドラインに沿って、様々な対応をしました。ちょうどリニューアルも控えていたのでリニューアル後、精度を高めてフロントエンド周りの実装を調整してみました。

Website Carbon Calculator実際の計測結果へリンク

Website Carbon Calculatorの結果

サステナブル・ウェブ・マニフェストを作成したWholegrain Digital社が提供している計測ツールになります。こちらで計測してみると入力したURLのランクが出てきます。
A+という良さげな評価が出てきましたが、使用しているデータセンターがクリーンではないという評価のようです。また、同UI・デザインでもガイドラインに沿って対応を行う前はE判定でした。

Ecograder実際の計測結果へリンク

Ecograderの計測結果画面

ページの重さ(Page Weight)、UXデザイン、ホスティング(Green Hosting)の観点から20項目のスコアが算出されます。
こちらでも良さげなスコアが出てくれていますが、ホスティングにて0というスコアを叩き出しています。
こちらのサイトでも対応前はE判定が出ていたので、良き結果にはなっているようです。

小手先の実装だけではなく、そもそもWebサイトとして構築する様々な要因を含めて考慮しなければならないということです。
結果的にはページの読み込み速度も上がったので良いことではありますが、もっともっと追求していかなければならないようです。

PageSpeed Insights

実験的に数日間、計測をしていたのですが1月6日のタイミングからPCでもSPでも90~100で推移しています。対応前はかなり不安定だったので、ページの読み込み速度的にはだいぶ改善しました。

本来であれば当サイトだけではなく、サステナブルWebデザインを提供するとしている企業さんのスコアなども参考にしようとしましたが、上記ツールにて計測したところなかなか難しい実情があるようでしたので、それはやめておきます。
各々チェックをしてみてください。

ガイドラインの利用方法

WSGを利用する際は、体系的なアプローチが推奨されます。全てを一度に適用するのではなく、自分のスキルセットや取り組みやすさに基づいて選ぶことが大切です。持続可能な変化は、完璧よりも進歩を重視するものです​​。

WSGの発行と背景

Sustainable Web Design Community Groupによって発行されたこの仕様は、W3Cの標準ではありませんが、Webの原則と密接に関連しています​​。

WSGの目的

WSGは、環境、社会、経済のベストプラクティスを基に、ウェブの持続可能性を高めることを目指しています。これは、エンドユーザー、ウェブサイトやアプリの作成者、製品オーナー、ステークホルダー、ツールの作者、教育者、政策立案者を対象としています​​。

WSGの開発と適用

WSG 1.0は、世界中の個人や組織と協力して開発され、様々な既存のウェブ技術に幅広く適用されるよう設計されています。これには、持続可能なウェブブラウザーや他のユーザーエージェントも含まれます​​。

ガイドラインの対象者

WSGの対象者は、Webデザイナー、開発者、政策立案者、調達担当者、教師、学生など多岐にわたります。これには、一般的なガイドライン、テスト可能な成功基準、影響と労力の評価、助言的な利点、文書化された例、GRIの評価、根拠に基づくリンク、カテゴリータグなど、複数のガイダンスレイヤーが含まれます​​。

WSGの基本原則

WSGの基盤となるのは、クリーン、効率的、オープン、公正、再生力がある、回復力があるという6つの原則です。これらは、ウェブの持続可能性を考慮した開発や管理のための基礎を提供します​​。

  1. クリーン(Clean): ウェブの持続可能性において、環境に配慮したクリーンなアプローチが求められます。これには、エネルギー消費の最小化や、環境への影響を減らすための措置が含まれます。
  2. 効率的(Efficient): 効率性は、リソースの有効活用を意味し、ウェブ開発においては、リソース消費を抑え、高速でレスポンシブなウェブ体験を提供することが重要です。
  3. オープン(Open): 透明性とアクセス可能性が強調されます。オープンなウェブは、情報へのアクセスを容易にし、持続可能な開発に貢献します。
  4. 公正(Honest): 信頼性と倫理的な行動が求められます。ユーザーに対して誠実であり、データのプライバシーやセキュリティを尊重することが重要です。
  5. 再生力がある(Regenerative): ウェブが持続可能であるためには、環境や社会に対して再生的な影響を与える必要があります。これは、環境の回復や社会的な利益をもたらす取り組みを含みます。
  6. 回復力がある(Resilient): ウェブとそのコンテンツは、変化する環境や状況に対応し、持続可能な形で存続する能力を持つ必要があります。これには、災害や変動に強い設計や、持続可能な方法での運用が含まれます。

定義されたガイドライン

WSGでは、93のガイドラインを提供し、これらはユーザーエクスペリエンスデザイン、Web開発、ホスティングとインフラストラクチャ、事業戦略と製品管理という4つのカテゴリーに分類されています。これらのガイドラインは、持続可能なウェブコンテンツの作成において総合的なフレームワークを提供します​​。

  1. ユーザーエクスペリエンスデザイン(User-Experience Design): ユーザーの経験を中心にしたデザインを重視し、アクセシビリティやインタラクティブ性を含め、使いやすく持続可能なデザインを目指します。
  2. Web開発(Web Development): 効率的で持続可能なウェブ開発の実践に重点を置き、コーディング標準、リソースの最適化、環境に配慮したプログラミングアプローチが含まれます。
  3. ホスティング、インフラストラクチャ、システム(Hosting, Infrastructure, and Systems): サーバー、ホスティング、およびシステムインフラストラクチャの持続可能性に焦点を当て、エネルギー消費の最適化や再生可能なリソースの利用を推奨します。
  4. 事業戦略と製品管理(Business Strategy and Product Management): 持続可能なビジネス戦略と製品管理を促進し、組織の環境への影響を最小限に抑える方法を提案します。

成功基準と適合

WSGでは、各ガイドラインにテスト可能な成功基準が提供されています。これらの成功基準は技術固有のものではなく、特定の技術での成功基準の達成に関するガイダンスや、一般的な情報は別の文書や第三者の情報源によって提供されています​​。適合は、各ガイドライン(およびすべての成功基準が満たされた場合)に基づいて測定されますが、多くのウェブサイトや製品はすべての成功基準を満たすことはないでしょう​​。
チェックリストも公開されているので参考にしてみてください。

チェックリスト

WSGに適合したという主張について

適合の主張は必須ではありませんが、適合の主張を行う場合は、特定の情報を含める必要があります。これには、主張の日付、ガイドラインのタイトル、バージョン、URI、適合に関する簡潔な説明、遵守したガイドラインのリストなどが含まれます。さらに、仕様を超えて持続可能性を改善するために講じた追加のステップや、既に行った変更の効果を示す統計(メトリックス)など、訪問者に役立つ追加情報を提供することも推奨されます​​。

まとめ

WSG 1.0は、ウェブの持続可能性を向上させるための包括的なガイドラインを提供します。これは、ウェブ開発者、デザイナー、製品オーナー、教育者、政策立案者など、多様な利用者に対応しています。持続可能なウェブの開発と運用を目指している方々にとって、このガイドラインは非常に価値のあるリソースです。持続可能性の旅を始める際の出発点として、WSGを参考にすることを強くお勧めします。

この記事は、WSGの概要から詳細までを網羅し、学習するための素晴らしい出発点となるでしょう。
共に持続可能なウェブの未来に向けて、一歩を踏み出しましょう。