はじめに
2023年11月23日に、W3CからWebサスティナビリティガイドライン1.0 の草案が公開されました。
Webサスティナビリティガイドライン1.0 は、Webサイトやプロダクトをより持続可能にするための推奨事項がまとまっているガイドラインです。
このガイドラインに従えば、Webコンテンツがより使いやすく、アクセスしやすくなり、パフォーマンスが向上するようです。
この記事では、そんなWebサスティナビリティガイドライン をかいつまんで、紹介したいと思います。
Webサスティナビリティガイドラインとは？
「Webサスティナビリティガイドライン (WSG) 1.0」は、ウェブサイトやプロダクトを持続可能にするための多くの推奨事項を提供しているガイドラインです。
これのガイドラインは環境、社会、ガバナンスの原則を活用し、持続可能な設計、高性能な開発、再生可能エネルギーの使用、持続可能なビジネス戦略などを通じて環境への影響を最小限に抑えるのに役立つものです。
しかし、すべての持続可能性の戦略を網羅しているわけではないため、目的に合ったインパクトと労力を判断し取り組むのがいいと思います。
ガイドラインの言及されている項目
「WSG 1.0」では、以下のような項目について、持続可能なウェブサイトやプロダクトにするための推奨事項が言及されていました。
- UXデザイン
- Web開発
- ホスティング、インフラ、システム
- 事業戦略とプロダクトマネジメント
この記事では、これらの項目について紹介しようと思います。
⚪︎ UXデザイン
UXデザインの項目では、以下の29項目について言及されていました。
言及されていた 29項目はこちら
- システムへの影響をマッピングする
- ユーザーのニーズを評価、調査する
- ユーザー以外のニーズを評価、調査する
- 初期段階から持続可能性を考慮する
- ステイクホルダーの課題を考慮する
- 軽量く使いやすい体験をデフォルトで作る
- 過不足なアセットは避ける
- ナビゲーションとサイトマップが適切に構造化されていることを確認する
- ユーザーの興味を尊重する
- 知られているデザインパターンを使う
- 操作的なパターンを避ける
- プロジェクトの成果をドキュメントとし共有する
- UIの一貫性を優先するためにデザインシステムを使う
- アクセスしやすく、理解しやすい形式で目的を示す
- 画像アセットは、より持続可能なアプローチを取る
- メディアアセットは、より持続可能なアプローチを取る
- アニメーションは、より持続可能なアプローチを取る
- フォントは、より持続可能なアプローチを取る
- Webアセットは、より持続可能なアプローチを取る
- アクセスしやすく、使いやすい、最小限のウェブフォームを提供する
- コンテンツとのグラフィカルでない、やりとりをサポートする
- ユーザー体験を向上させるために有益な通知を提供する
- ダウンロードできる文書や物理的な文書の影響を軽減する
- ステークホルダーを重視したテストとプロトタイピングポリシーを作成する
- 定期的な監査、リグレッションテスト、非リグレッションテストを実施する
- ユーザージャーニーのパフォーマンスを分析する
- メジャーリリースは、価値を検証するテストを組み込む
- マイナーリリースは、ユーザビリティーテストを組み込む
- 各リリースには、互換性テストを組み込む
このUXのセクションを読んで印象的だった項目は、↓この項目でした。
⚪︎ ユーザー以外のニーズを評価、調査する
リサーチ・インタビューでは、ユーザーやステークホルダーを中心をしたインタビューを実施しますが、WSG1.0では、ユーザー以外のニーズを評価、調査をする必要があるのかと、新しい発見がありました。
正直、ユーザー以外のニーズをみつけるためのインタビュー・調査する方法は、まだピンと来てません🤔
⚪︎ フォントは、より持続可能なアプローチを取る
個人的に、webフォントを使うのは、躊躇するので、これがあると、説明しやすくなるなという意味で印象に残りました。
⚪︎ Web開発
Web開発の項目では、以下の24項目について言及されていました。
言及されていた 24項目はこちら
- 関連する技術指標を特定する
- HTML、CSS、JavaScriptを最小化する
- プロジェクト内でコードスプリットを使用する
- コードにツリーシェイキングを適用する
- ソリューションがアクセス可能であることを確認する
- コードの重複を避ける
- サードパーティのサービスを厳格に評価する
- HTML要素を正しく使用する
- レンダリングをブロックするコンテンツは解決する
- コードベースのウェイファインディングメカニズムを提供する
- フォームエラーと外部入力を検証する
- メタデータを正しく使用する
- ユーザーの好みに適応する
- モバイルファーストのレイアウトを開発する
- 有益なJavaScriptとそのAPIを使用する
- スクリプトが安全であることを確認する
- 依存関係を適切に管理する
- 自動的に予期されるファイルを含める
- 適切な場合にはプレーンテキスト形式を使用する
- 非推奨または独自のコードを使用しない
- 技術要件を持続可能性の目標に合わせる
- 最新の安定した言語バージョンを使用する
- ネイティブの機能を活用する
- 可能な限り少なく、単純なクエリを実行する
このWeb開発のセクションを読んで印象的だった項目は、↓この項目でした。
⚪︎ ユーザーの好みに適応する
この項目では、prefers-contrastや prefers-color-scheme といったメディアクエリを使ってユーザーの好みに合わせた設定に変更できるという項目でした。
この項目を読んだ時すべてのユーザーの好みに適応するのは、大変だなという印象を受けました。
prefers-color-scheme でダークモードを作ったりするのも一苦労だと思うので、達成が難しそうです。
⚪︎ ホスティング、インフラ、システム
ホスティング、インフラ、システムの項目では、以下の12項目について言及されていました。
言及されていた 12項目はこちら
- 持続可能なホスティングプロバイダーを選択する
- ブラウザキャッシュを最適化する
- ファイルを圧縮する
- エラーページとリダイレクトを慎重に使う
- 追加の環境の使用を制限する
- ニーズに合わせて自動化する
- 適切な更新頻度を維持する
- 重複データに注意する
- 非同期処理と通信を有効にする
- CDNとエッジキャッシングを検討する
- ビジネス要件を満たす最低限のインフラストラクチャーを使用する
- ユーザーニーズに応じてデータを保存する
このホスティング、インフラ、システムのセクションを読んで印象的だった項目は、↓この項目でした。
⚪︎ エラーページとリダイレクトを慎重に使う
これは、要項を読んでみて、笑ってしまいました。
エラーページを表示すると、ユーザーが問題を解決するために時間を無駄にして、時間経過とともにCO2排出量が出るそうです。
いや大したCO2出ないだろうと笑ってしまいました。
サスティナビリティはちりつもなんですかね？笑
⚪︎ 事業戦略とプロダクトマネジメント
事業戦略とプロダクトマネジメントの項目では、以下の27項目について言及されていました。
言及されていた 27項目はこちら
- 倫理的かつ持続可能な製品戦略を持つ
- 持続可能性担当者を任命する
- 意識を高め、情報提供を行う
- ユーザーの選択による生態学的な影響を伝える
- 製品またはサービスの環境への影響を推定する
- 明確な組織の持続可能性の目標と指標を定義する
- 確立されたサードパーティのビジネス認証を使用して努力を検証する
- 持続可能性のオンボーディングガイドラインを実施する
- 必須の開示と報告をサポートする
- 1つ以上のインパクトのあるビジネスモデルを作成する
- 製品管理とメンテナンス戦略に従う
- 継続的な改善手順を実施する
- 将来の更新と進化を文書化する
- デジタル製品またはサービスが必要かどうかを確立する
- 機能単位の決定
- サプライヤーの実践基準を作成する
- 経済的な利益を共有する
- 適切なステークホルダーと意思決定権を共有する
- 公正、平等、多様性、包摂（JEDI）の実践を使用する
- 責任あるデータの実践を促進する
- 責任ある新興テクノロジの実践を促進し実施する
- 責任ある財務ポリシーを含める
- 組織の慈善活動のポリシーを含める
- デジタル製品とサービスのケアと耐用年数の計画を立てる
- 電子廃棄物、修理権、リサイクルポリシーを含める
- パフォーマンスおよび環境予算を定義する
- オープンソースのツールを使用する
この事業戦略とプロダクトマネジメントを読んで印象的だった項目は、↓この項目でした。
⚪︎ ユーザーの選択による生態学的な影響を伝える
webの開発をしていると、生態学的な影響はそんなイメージできないので、印象に残りました。
「UIが悪いと、命を失う可能性があるよ」 みたいな話を思い出しました。
まとめ
この記事では、Webサスティナビリティガイドライン1.0をかいつまんで、紹介しました。
個人的には、サスティナビリティの重要性は理解しつつも、いち個人ができるものには、限界があると思って、冷めた目で見てました。
ですが、web開発の中にも、サスティナビリティを考えるきっかけになったのはよかったです。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。