サステナブルWebデザイン

October. 16. 2013

この記事はJames Christie著「Sustainable Web Design」の抄訳です。
This article is a translation of "Sustainable Web Design" By James Christie.

今までに無いほどカーボンフットプリント(二酸化炭素などの温室効果ガスの排出量)やエネルギー消費量を抑制、削減しようとしている業界が増えており、排気ガスに関する規制は自動車業界や建設業界、さらには電気通信業界などにまで広がっています。しかしインターネットのカーボンフットプリントはコントロール不可能なほど増え続けており、8億3000万tのCO2が毎年排出されています。そしてこの数字は航空業界全体の排出量よりも多いと言われており、2020年までには倍になるとさえ予測されています。

Webデザイナーも環境問題に対してアクションを起こす必要があるなら、今がその時です。

現在、インターネット全体の排出量の40%にあたる、最低でも3億3200万tのCO2排出は、Web制作を行う個人に責任の一部があると考えられています。個人が負うべき責任というのは小さいものかもしれませんが、それでもCarouselや高解像度の画像、その他の多くの部分でエネルギー使用量の高いWebサイトを何年も制作してきました。例えれば、ハイブリッドの自動車や、場合によっては自転車で十分ニーズを満たせるところに、巨大な戦車を提供していたようなものです。

しかし私達は過剰なWebサイトをなおし、同時にWeb業界のカーボンフットプリントを減らす方法を知っています。さらにこれらの方法は、優れたビジネスプラクティスにもぴったりと合致します。つまり、思慮に富んだ効率的なページデザインが必要とされるレスポンシブデザイン(モバイルへも適用できるWebデザインメソッド)の適用を促進し、日々洗練されるWeb ROI (Rate of Investment: 投資対効果)が、早く、軽いWebサイトを作るよう促している現状への対応にもなるのです。

細かい説明に入る前に、まずWebサイトのカーボンフットプリントがどのように見積もられているか、見てみましょう。

Webサイトのカーボンフットプリントとは？

車のエネルギー効率を1リットルあたりの走行距離で表すのと同じように、Webサイトのエネルギー効率はダウンロードされるデータ量あたりの消費電力と考えることができます。これにより、ページサイズとカーボンフットプリントの関係を推測するためのフレームワークを得ることができます。現在の技術では、Webサイトのカーボンフットプリントを正確に計測するのは難しいのですが、様々な研究によりいくつかの参考数値が発表されています。

  • Lawrence Berkeley National Laboratoryが2008年に発表したレポートでは、1GBのデータを送信するのに13キロワット時の電力が使われるとされています。
  • EPAの指標によると、アメリカの標準的な発電所は、1キロワット時あたり1.2ポンド(約0.5kg)の二酸化炭素同等物(carbon dioxide equivalent: CO2e)を排出します。(他国では、国のエネルギー政策によってこの数値が高くなったり低くなったりします。)
  • 13キロワット時に1.2ポンド(約0.5kg)をかけると、1GBのデータ送信あたり15.6ポンド(約7kg)のCO2が排出される計算になります。
  • もし100万人のユーザーが標準的なWebページ(1ページの平均サイズは1.4MB)をダウンロードしたとしたら、データの総量は1,367GBになります。
  • 1GBあたり15.6ポンド(約7kg)のCO2が排出されるとすると、1,367GBでは10t以上のCO2が排出されることになります。
  • モバイルデバイスで使われる3G/4G通信では1GBあたり77ポンド(約35kg)と、約5倍のCO2が排出されます。
  • もし100万人のユーザーが3G通信で1.4MBのWebページをダウンロードしたら、1,367GBに77ポンド(約35kg)を掛けて、トータルで52tものCO2排出となります。

これらの数値を基に、Tumblrのサイズを見積もってみましょう。1日あたり1億8,300万ページビューがあり、約10%はモバイルからのアクセスであるため、毎日2,600tのCO2を排出している計算になります。

もちろん、この計算ではデータセンターの電力がどの程度化石燃料に頼っていて、どの程度再利用可能な資源を使っているか、またユーザーのPCやモバイルに使われる電力はどこから供給されているかといった、最終結果に大きな影響を与え得る要素については考慮されていません。しかし、少なくともこれらの数字はページサイズとカーボンフットプリントの関係を明確に示し、ページサイズを小さくするとCO2排出量が少なくなるという点を明らかにしています。

では、どこからサイズダウンすべきでしょうか？　まずは私達のデザインからです。

膨れ上がったページを見直し、CO2を削減する

現在の平均的なページサイズの1.4MBという数字は、10年前と比べて15倍も大きく、その大きな原因は画像(881KB)とスクリプト(224KB)です。HTMLだけを見れば54KBしかありませんが、HTMLだけで作られたサイトを最後に見たのはいつか覚えているでしょうか？
また平均的なページでは100以上のHTTPリクエストを送信しています。これらのリクエストがどのようなオブジェクトを取得しているかに関わらず、多くのリクエスト送信は表示を遅らせ、より多くのエネルギーを無駄にします。
さらに、現在のWebサイトは遅くもなりました。Alexaのトップ2,000のサイトのロード時間の平均は7秒以上で、ユーザーが許容できる時間を大きく超えています。

無駄がなく、見栄えのよい、エコなWebサイトを作る

誰も1.4MBのサイトを作りたくて作っているわけではありません。しかし、多くの場合クライアントがアイキャッチとしての画像やソーシャルメディア、そして多くの装飾を要求するため、結果このようなサイズになってしまうのです。このような肥満体質のWebサイトを改善する1番の方法は、ページサイズの上限を決めることです。初めはターゲットとするページサイズを決めて、それを必ず守るようにしてみましょう。

MadPowでは、このページサイズの上限を決めるアプローチを使って、ページロードのパフォーマンスを追及しています。通常は2秒以内にページがロードされるのを目標にしています。もちろん、ページサイズを削ることはそのままカーボンフットプリントを少なくすることにつながります。またアナリティクスを使って、モバイルのトラフィックやキャッシュを考慮しながら、ユーザーが訪れたページからどの程度のCO2排出量があったかを監視しています。

ページサイズの上限を守るには、Webサイト開発の全てのステージでデータサイズを考慮する必要があります。

コンテンツストラテジー：もしサイトを改修してページサイズを減らそうとしたら、ユーザーの期待やビジネスゴールから逸れない範囲で、まず重いコンテンツを軽いものへ交換できるか考えましょう。例えばビデオを写真にしたり、イメージをテキストにしたりといったことです。また、もし「コンテンツ ファースト」のアプローチをとっているなら、コンテンツプランニングの段階からデータサイズを意識することができます。その場合は、ユーザーの期待とページサイズを考慮しながら各コンテンツを選ぶようにしましょう。

インタラクションデザイン：エクスペリエンスデザインのフェーズに入ると、ページサイズを大きく増やす動作や機能が増えます。その中で1番の脅威となるのは、至るところで使われているCarouselでしょう。典型的なもので3～6個のイメージが使われ、更に数百KBのJavascriptが追加されます。Carouselの効果自体疑わしいものですが、もし必要だと感じたら、ブラッド・フロストのCarouselチャレンジをやってみましょう。これはCarouselのイメージがどの程度クリックされるか計測し、またA/Bテストを実施してCarouselがある場合と無い場合でどの程度の差が出るか調べるというものです。
Carousel以外では、共有ボタンや地図、ビデオの自動再生、Flash、広告、サードパーティのサービス等の使いすぎに気を付けましょう。このようなものがページサイズを大きく増やす原因になります。

ビジュアルデザイン：イメージは、Webサイトのカーボンフットプリント全体で大きな割合を占めるもの(平均で60%程度)ですが、そのため一番データサイズを削る余地のあるものでもあります。初めに、イメージの数を少なくできるか考えてみましょう。またWeb上では、間違ったフォーマットで不適切なサイズの、全く最適化されていない画像が数多く存在します。フリーサービスのsmush.itなどを使えば、画像をまとめて最適化できるので便利です。

また小さな画像をCSS SpriteやWebアイコンフォントに置き換えることで、ページサイズとHTTPリクエストの数を減らすことができます。もしターゲットとするブラウザがサポートしているなら、CSSだけで作ったアイコンが一番データサイズの軽い選択肢になります。
またモバイルデバイスの利用が一番環境に影響を与えるため、レスポンシブデザインが適用される場合は、レスポンシブイメージへの対応も行ないましょう。画像をモバイル向けにきちんと最適化すると、72%のデータサイズを削減できます。

コードデザイン：フロントエンドの最適化は、近年急激に成長している分野です。スクリプトやダウンロードの圧縮、キャッシュタイミングの最適化、ファイルの統合などは、全てHTTPで通信されるデータサイズを効果的に減らすことができます。まずはGoogle Page Speedを使ってWebサイトを測定してみましょう。このサービスはサイトのロード時間を短くするためのテクニックを紹介してくれます。ページのパフォーマンスについて更に深く知りたいなら、Web Performance 101やララ・スワンソンの記事を読んでみてください。

グリーンホスティング：デザインや最適化によってカーボンフットプリントを減らそうとする前に、グリーンホスティング(環境に配慮したホスティングサービス)へサーバーを移すことも考えましょう。これらのサービスのほとんどは再利用可能なエネルギーを使っており、特にアイスランドのような地域では安価な地熱エネルギーを使ったデータセンターが多く建設されています。グリーンホスティングは価格も高めで、アイスランドは顧客から離れすぎているため、ページロードに時間がかかるなどの問題があるかもしれませんが、最近ではローカルなグリーンホスティングサービスも現れ始めています。また、GoogleやApple、Rackspace等いくつかのクラウドサービスでは再利用可能なエネルギーが使われ始めましたが、GreenpeaceによるとAmazonのWebサービスでは、このような取り組みは行なっていないそうです。

カーボンオフセットの購入：デザインやコードを最適化し、グリーンホスティングサービスへサーバーを移しても、WebサイトがCO2を排出しているという事実は残ります。そのために、カーボンオフセットを購入することも検討してみてください。通常は1tあたり19ドル程度のコストで購入できます。もちろん、オフセットは実際に大気中からCO2を減らすものではありませんし、CO2排出を減らすための代替案にもなりませんが、多くのカーボンオフセットでは途上国の教育や生態系の保全などのサポートも行なっているため、プロジェクトによっては効果的な取り組みになるでしょう。

最適化を徹底する

排出量を減らすことはパフォーマンスを最適化することと同じです。そのためエコに関心の無いビジネスであっても、Webサイトを最適化することは必ずプラスになります。ページの表示が速ければユーザーは喜びますし、そうなればコンバージョンも上がり、SEOにとっても良い効果を生みます。

このプラス効果のリストに環境への影響を加えれば、環境に関心のある企業では最適化に対して積極的に取り組む理由になるでしょう。(特に環境宣言に名を連ねている企業なら尚更です。)

インターネットと環境保護

最後に、インターネットは、その膨大なカーボンフットプリントにも関わらず、環境保護の救世主になれるかもしれない、という話をご紹介しましょう。ビジネスのベースが、古い工業やサービスからインターネットへ推移することで、2020年までに80億tのCO2が削減される可能性があるとされています。これは2020年までにインターネットが排出するであろう14億tのCO2の7倍にも上る数値です。

例えば、

このようにオンラインエコノミーへ移行し続けると、新たに50億人のユーザーがインターネットに訪れることになります。世界の環境汚染全体に対するインターネットの影響が増えるということは、Webサイト製作者の環境責任も増えることに繋がります。しかし無駄の無い、クリーンなサイトの構築を心がけることで、この影響を減らすことはできます。そして同時にユーザーの期待を満たし、ビジネスゴールを達成することもできるのです。

もしかしたら、環境に配慮した選択をすることで何かを犠牲にしなければいけないと考える人もいるかもしれませんが、Webではそうではありません。エコでクリーンなWebサイトでありながら、ユーザーを満足させ目的を達成することができます。問題はとてつもなく大きなものですが、小さな努力の積み重ねが変化を生むこともできます。

サステナブルなWebデザインについてまだ考えたことがなければ、是非この機会に今まで制作したWebサイトを見直してみてください。

Translated with the permission of A List Apart and the author[s].