Webデザインの観点からのサステナビリティ

James Christie

James Christie氏はMadPowのシニアエクスペリエンスデザイナーです。定期的にWeb持続可能性について書いたり話したりしているのを、彼の個人サイトやTwitterで見つけることができます。

この記事はA List Apartからの翻訳転載です。配信元または著者の許可を得て配信しています。

Sustainable Web Design

カーボンフットプリント(商品やサービスのライフサイクル全体を通して排出される温室効果ガスの排出量)やエネルギー使用量を削減、あるいは少なくとも削減しようとする産業が増えています。CO2の排出基準は、自動車建設、さらには通信業界にまで設定されています。しかし、インターネットに関連したカーボンフットプリントは制御不能になりつつあり、年間8億3000万トンものCO2を排出しており、これは航空業界全体の排出量を上回っています。これは2020年には倍になると言われています。

今こそWebデザイナーたちがCO2削減運動に参加するときです。

現在、少なくとも3億3200万トンのCO2(インターネットの全占有面積の40%)が、部分的にはWeb制作者の責任下にあります。それほど大きく捉える必要はないのですが、カルーセルや高解像度の画像などを使って、ここ数年私たちはますますエネルギー消費を要求するWebサイトをデザインしてきました。たとえるなら、ハイブリッド車や、なんなら自転車だけで済むときに、軍隊用の自動車を作ってきたようなものです。

しかし良いニュースとしては、データ通信が多く発生するようなWebサイトを修正し、同時に我々のインターネット産業のカーボンフットプリントを削減するためのいくつかの方法があります。それらの方法は、良いビジネスとされる方向性とうまく合致しています。モバイル対応のデザインは、ページデザインのための思慮深く効率的なアプローチを必要とし、ますます洗練されたWebのROI測定基準は、既に、より速く、より軽いサイトを追求するようにビジネスの方向に人々を駆り立てています。

要点に入る前に、まずWebサイトのカーボンフットプリントを見積もる方法を見てみましょう。

Webで発生するカーボンフットプリントとは

自動車のエネルギー使用量を1ガロンあたりのマイル数で表すのと同じように、Webサイトのエネルギー使用量はダウンロードされたデータの量で考えることができます。これにより、ページサイズとカーボンフットプリントの関係を推測するための式ができあがります。残念なことに、Webサイトのカーボンフットプリントを算出することは厄介で不正確ではありますが、これが私の出した計算式です。

  • ローレンス・バークレー国立研究所が2008年に発表した論文によると、1GBのデータ転送には13kWhかかるという。
  • EPAの数字によると、米国の平均的な発電所は、発電されたkWhあたり1.2ポンド(CO2eと呼ばれる)の二酸化炭素を排出している(他の国ではエネルギー政策によって平均値が高くなったり低くなったりする)。
  • 1GBのデータを転送するためには、13kWhに1.2ポンドを掛けた、15.6ポンドのCO2eが必要になる。
  • 100万人のユーザーがそれぞれ平均1.4MBのページをダウンロードしたとすると、データ量は計1367GBになる。
  • ギガバイトあたり15.6ポンドとなると、CO2eは10トン以上になる。
  • モバイルデータは3G/4Gに依存しているため、最大でその5倍の汚染物質(ギガバイトあたり77ポンドのCO2)を排出している。
  • 3Gで100万人のモバイルユーザーが1.4MBのページをダウンロードしたとすると、1,367GBに77ポンドをかけて、合計52トンのCO2になる。

これらの数字に基づくと、1億8300万ページビュー/日あり、そのうち約10%がモバイルサイトからのアクセスであるTumblrのような規模のサイトは、毎日2,600トンものCO2を排出している可能性があると推定できます。

この数字の中には、データセンターの電力のうち、再生可能エネルギーや化石燃料、エンドユーザーの電力使用などの重要な要素は含まれていません。いずれも、CO2排出量の合計に大きな影響を与えるでしょう。しかしこれらの数字は、ページサイズとカーボンフットプリントの関係を見るための指標になりますし、ギガバイト削減がCO2削減につながることを明確にしてくれます。

では初めにどこからCO2の削減を始めましょうか? 私たちのデザインからです。

ページ肥大化対策によるCO2削減

現在の平均ページサイズは1.4MBで、10年前の15倍になっています。これは主に画像(881KB)とスクリプト(224KB)によるものです。昔ながらのHTMLは合計で54KBしかありませんが、HTMLのみのサイトを最後に見たのはいつでしょうか。一般的なWebページでは、100を超えるHTTPリクエストも作成されます。大きなオブジェクトを読み込むか、小さなオブジェクトを読み込むかにかかわらず、これらは表示スピードの遅延と電力の無駄を増やします。Alexa.com(Webマーケティングサイト)の小売サイト上位2,000サイトの読み込みには平均で7秒以上かかりますが、これはユーザーが許容できると考える時間よりずっと長いです。

無駄がなく、意味があり、環境に配慮したWebサイトの構築

1.4MBのページを意図的に構築しようとする人はいませんが、クライアントは目を引く画像、高度なソーシャル機能、多くのデザイン機能を要求することが多く、そのサイズを実現するためにそれだけの容量が必要なのです。この種のデータ容量の膨張を防ぐ最善の方法は、ページサイズを考慮した予算を設定することです。

MadPowでは、ページロードのパフォーマンスを向上させるために、ページサイズ予算のアプローチを採用しました。最大の目標は、少なくとも2秒以内でロードされるページです。もちろん、ページの重さを減らせば減らすほど、サイトのカーボンフットプリントは小さくなります。CO2排出量の削減を追求し続けるために、ページサイズとユーザーの訪問数の分析を掛け合わせて、サイトのトラフィックのおおまかな合計を求め、より容量が大きくCO2排出量の多いモバイルトラフィックとキャッシュのためのアカウントを分けることも忘れません。

ページ予算にこだわるということは、デザインの各段階でデータの重みを考慮することを意味します。

コンテンツ戦略

ページの重さを減らすためにサイトを改造しているのであれば、ユーザーとビジネスの目標が同じである限り、より重いコンテンツを、ビデオではなく静止画や画像、さらにはテキストなどの、より軽い代替物と交換するのが手っ取り早い解決策かもしれません。さらに「コンテンツファースト」のアプローチを採用するのであれば、サイズに関する考慮事項をコンテンツ計画に組み込んで、対象ユーザーとデータ予算に適したコンテンツを選択できるようになります。

インタラクションデザイン

体験を定義するフェーズのデザインは、ページ予算を圧迫する、大量のデータを必要とするような特徴を持ったサイトを防ぐ絶好のタイミングです。

中でも偏在するカルーセルは大量のデータを必要とする主要なデザインになります。典型的なカルーセルは、3~6個の大きな画像と、それを動かすのに必要なJavaScriptを含んでおり、数百キロバイトの重さになります。カルーセルを置く価値があるかは、とにかく議論の余地があります。表示範囲の縮小や切り替えのために使う必要があるのなら、Brad Frost Carousel Challengeを見てみてください。他の再評価すべきデザインの候補には、共有ボタン、埋め込み式のマップ、自動再生のビデオ、Flash、広告、第三者のコンテンツサービス配信などがあります。どれもデータの重さとの関連性が高いものです。

ビジュアルデザイン

ほとんどのサイト(平均60%)では、画像がフットプリントのもっとも多くの部分を占めており、データ削減の対象として適しています。まず、画像の数を減らすことはできますか? Web上の多くの画像は、不適切な形式で保存されているか、サイズが不適切であるか、または最適化されていません。無料サービスのSmush.itは、通常の編集ツールよりも画像を最適化するだけでなく、バッチ処理(一括処理)まで行います。

CSSスプライトまたはWebアイコンフォントを使用してサイト上のすべての小さいイメージを統合すると、データとHTTP要求を削減できます。ブラウザのサポートが追いつくと、純粋なCSSアイコンがもっとも軽量な選択肢になるでしょう。また、モバイルデータは有線データよりもずっと汚染されているため、応答性の高いサイトでは応答性の高い画像ソリューションを使用するようにしてください。最適化がうまくいけば、モバイル画像の重量を72%減らすことができます。

コードデザイン

スクリプトの圧縮、ダウンロードの圧縮、適切なキャッシュ時間の設定、ファイルの結合など、フロントエンドの最適化は、データのオーバーヘッドとHTTP要求を減らすのに役立ちます。サイトの「Google Page Speed」得点を見ると、どのテクニックを使えば表示速度を速められるかがわかります。これについてもっと深く知るには、「Webパフォーマンス101」やLara Swansonの最近のALAの記事を読むことをおすすめします。

環境に優しいホスティングサーバー

デザインと最適化によってサイトのカーボンフットプリントを最小化する前に、環境に優しいホストへの移行も検討できます。これらの多くは再生可能エネルギーを動力源としており、特にアイスランドでは安価な地熱発電を活用するためにデータセンターが開設されました。環境にやさしいホスティングサーバーはまだ誰にでも利用できるわけではありませんが(より高価になる可能性があり、アイスランドは顧客から遠く離れているかもしれないが)、よりローカルなグリーンホストが増え始めています。Google、Apple、Rackspaceなどのクラウドベースのサービスもグリーン化が進んでいます。一方Amazon Web Serviceはまだグリーン化していません。

残りを埋め合わせる

無駄のないデザインを適用し、最適化し、環境に配慮したWebホストに移行しても、サイトのカーボンフットプリントが残ります。これを相殺するには、プロジェクトにもよりますが、通常1トン当たり$19で埋め合わせ分を購入します。埋め合わせることで、実際に大気中からCO2を除去することはないため、CO2排出削減の代替としては不十分です。しかし、多くの埋め合わせ用のプログラムには、開発途上国の教育に資金を提供したり、脆弱な生息地を保護したりするなどの追加の利益があります。

最適化のための人員配置

排出量を減らすために最適化することは、一般的なパフォーマンスのために最適化することに等しいため、環境に配慮していない企業でも、サイトをダイエットさせるいくつかの説得力のある理由があります。表示の速いページはユーザー、とくにモバイルユーザーをより幸せにします。また、コンバージョンSEOも改善されます。

気候変動に配慮するという恩恵がこのリストに加わると、ページのサイズとデータの削減は圧倒的に支持されるるようなものです。特に気候変動の事例にすでに共感を示している企業(たとえば気候変動宣言に署名した人々)にとってはなおさらです。

気候問題解決のヒーローとしてのインターネット

膨大な量のCO2を排出しているものの、インターネットは気候を救うこともできます。古い産業やサービスのインターネットへの移行は、2020年までに80億トンのCO2を削減する可能性があり、2020年に予想される14億トンのインターネットの占有面積を相殺する以上のものとなります。

たとえば、以下のようなものが挙げられます。

  • テレビ会議はすでに出張を30%減らしている。
  • ホームシェアリングサービス(例:AirBnB)は、ホテルに宿泊するよりも66%効率的
  • カーシェアリングサービスは1台のカーシェアリングにつき20台もの普通車を道路から遠ざけている。(ZipCarより)
  • Meshing.itは、シェアリングエコノミーのためのディレクトリです。同サイトには、8,000のスタートアップ企業が掲載されており、これらはすべて、コミュニティの間で何かをシェアし消費を減らすことに焦点を当てている。

しかし、オンライン経済への移行が進むにつれ、50億人の新しいユーザーをインターネットに迎えることになるでしょう。インターネットが世界の気候汚染の全体的なシェアを拡大し続ける中、それを構築した人々の責任も拡大しています。しかし、無駄のないクリーンな環境を構築すれば、被害を軽減し、より幸せな顧客と収益性の高いビジネスを立ち上げることができます。

ひょっとしたら環境への優しさを犠牲にすることが選択の条件になることもあるかもしれませんが、Webではそうではありません。よりクリーンで環境に優しいWebサイトを構築できるだけでなく、ユーザーの満足度を高め、収益を向上させることもできます。問題は大きいかもしれませんが、小さな変化を積み重ねて改善していけます。着手しない理由があるでしょうか?


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて