デジタルビジネス運用支援で企業の脱炭素DXを推進する

サステナブルWebデザイン
ガイドライン【バージョン 1.0】
2023年12月15日

株式会社メンバーズ
URL: https://www.members.co.jp/
Members Co.,Ltd.

目次

はじめに

3

サステナブルWebデザインとは

5

具体的な実装手法

9

サステナブルWebデザイン実践例

23

WebサイトのCO2排出量計測ツールのご紹介

26

Members Co.,Ltd.

2

はじめに

Members Co.,Ltd.

3

サステナブルWebデザインとはサステナブルWebデザインが求められる背景とその原理原則や取り組む意義をご紹介します。

Members Co.,Ltd.

4

はじめにデジタル技術の進化が日々続く中で、私たちメンバーズは、「脱炭素DX」という概念を掲げ、デジタルが持続可能な社会の実現に寄与すると信じています。その一方で、デジタル技術に起因する環境負荷や社会的影響は無視できないものであることも認識しています。
「DX for Sustainability：デジタルを用いていかにサステナブルな社会を築くか？」だけではなく、「Sustainable DX：いかにデジタルそのものをサステナブルにしていくか？」という問いにも真摯に向き合うこと。
これこそ、デジタルクリエイターに求められる姿勢であり、重要なスキルになると考えています。
そうした背景から、メンバーズはデジタルビジネス運用支援の会社として、環境やユーザーだけでなく、社会、ビジネスにとってもよいデザインのWebサイトを制作するためのガイドラインを策定しました。そして、このガイドラインを社内やお取引先のみならず一般公開することによって、組織や職種を超えて、「デジタルをサステナブルなものにする」というムーブメントをビジネス界全体で創っていきたいという思いをもっています。
サステナブルWebデザインのマニフェストにおいても、その取り組みを前進させるために、ナレッジを共有しあい、協力し合うことの重要性が謳われています。
このガイドラインが、皆さんとの情報交換や意見交換を促し、また本ガイドラインも今後バージョンアップしていくことでサステナブルなデジタルの実現を推進する一助となれば幸いです。
株式会社メンバーズ 脱炭素DX研究所
Members Co.,Ltd.

5なぜ「サステナブルWebデザイン」が重要か「デジタル」や「Web」というと、非物質的でエコなイメージがありますが、その環境負荷は無視できません。
2023年のインターネット利用者数は約54億人（世界人口の67%）（※1）と推定され、その影響力は大きくなっています。

■ 温室効果ガスの排出
デジタルを支えるICT（情報通信技術）の製造から輸送、利用、廃棄に至るまで、ライフサイクル全体における温室効果ガ
スの排出量は世界全体の排出量の1.8% ～ 2.8%を占める（※2）。インターネットを国に例えるなら、その排出量は世界で4番目に相当（※3）。
■ データ量の増加
世界のデータは2年ごとに2倍になっていると言われており（※4）、「新しい石油」とも表現される。
また、デジタルデータの80%は、保存された後はアクセスまたは再利用されることがない。（※5）■ 莫大なe-waste（電子・電気廃棄物）
世界では年間5,000万トンもの電子・電気廃棄物（e-waste）が排出されている。その重量はこれまでに製造されたすべての民間旅客機よりも重く、このうち正しくリサイクルされるのはわずか20%。（※6）（出典）※1：ITU「Individuals using the Internet」より https://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx※2・4：Charlotte Freitag,Mike Berners-Lee,Kelly Widdicks, BranKnowles, GordonS.Blair, and Adrian Friday「The real climate and transformative impact of ICT: A
critique of estimates, trends, and regulations」より https://www.sciencedirect.com/science/article/pii/S2666389921001884※3：Sustainable Web Manifesto「Sustainable Web Manifesto」より https://www.sustainablewebmanifesto.com/※5：Gerry McGovern「World Wide Waste」より https://gerrymcgovern.com/world-wide-waste/※6：世界経済フォーラム「 A New Circular Vision for Electronics Time for a Global Reboot」より
https://www3.weforum.org/docs/WEF_A_New_Circular_Vision_for_Electronics.pdf
Members Co.,Ltd.

6

サステナブルWebデザインの基本原則
環境負荷の大きなデジタル業界において、いま着目されているのが、ユーザーと地球を最優先にしたウェブサービスをデザインする「サステナブルWebデザイン」という手法です。2019年に英・Wholegrain Digital社をはじめとするデジタル業界の専門家がまとめた「サステナブル・ウェブ・マニフェスト」では、6つの基本原則が示されています。環境にもユーザーにもやさしいデザインの原則になっています。

Clean

Efficient

Open

再生可能エネルギーを使用

使用するエネルギーや資源を最小限にする

アクセシビリティが高く、オープンな情報交換やユーザーによるデータ制御が可能

HonestRegenerative

Resilient

ユーザーを誤解させるようなデザインやコンテンツを提供しない

人と地球を潤す経済活動の支援をする

強靭性があり、人々が最も必要とする時間や場所で問題なく機能する（出典）
Sustainable Web Design「Sustainable Web Manifesto」より https://www.sustainablewebmanifesto.com/
Members Co.,Ltd.

7

サステナブルWebデザインの価値
サステナブルWebデザインは環境やユーザーだけでなく、社会、ビジネスにとってもよいデザインであると考えています。
・環境によい（CO2排出量や電力消費量の削減）
・ユーザーによい（UXの向上、アクセシビリティの向上）
・社会によい（デジタルインクルージョン* の実現）
・ビジネスによい（マーケティング成果の向上、工数削減、一貫したサステナビリティの体現）「2Gしか使えない環境に住んでいる、災害で最低限の電力消費しかできない、など高速のネット環境が整っていない人は、通信負荷の高いサイトを閲覧できない可能性があります。しかし、そういった人の中にこそ、情報を必要としている人がいるかもしれません。必要な情報を必要な人に届けるためにも、Webサイトのデザインを工夫する意義はある。」
Wholegrain Digital社 創立者・Vineeta Greenwood氏（出典）IDEAS FOR GOOD Businees Design Lab「IT業界は意外にも環境負荷が高い？今後注目必至の「デジタル・サステナビリティ」とは」より
https://bdl.ideasforgood.jp/event-report/digital-sustainability/*デジタルインクルージョンとは、人の属性（人種、居住地域、所得、家庭環境、年齢、障害の有無など）にかかわらず、誰もがあらゆるデジタルテクノロジーを安全かつ自由に活用できるようにする考え方（※）（出典）※ IDEAS FOR GOOD「デジタルインクルージョンとは・意味」より

https://ideasforgood.jp/glossary/digital_inclusion/

Members Co.,Ltd.

8具体的な実装手法
サステナブルWebデザインの具体的な手法をご紹介します。

Members Co.,Ltd.

9画像使用量を減らす
画像使用量が多ければ多いほどデータ読み込み負荷は大きくなるため、環境への負荷を減らすためには、使用量を極力減らすことが必要だと考えられる。また、UXの観点でも画像は必要最小限とし、使用量を減らすことでページ表示速度改善にも繋がる。
株式会社メンバーズの「メンバーズが推進する脱炭素DX」
ページ（右記参照）では、使用画像を必要最小限に抑えることでファイル容量を削減。
また、画像を使う場合もエフェクトなどを適切に取り入れることで、同一素材で読み込みデータ量を減らしつつユーザーに与える印象を変えるといった技法もある。

（参考）株式会社メンバーズ「メンバーズが推進する脱炭素 DX」
https://www.members.co.jp/why-dx/

Members Co.,Ltd.

10

画像を最適化する■ サイズ
・CSSでサイズ変更をするのではなく、ページに掲載したいサイズと同じ画像を使用する
・TinyPNGなどの画像圧縮ツールを使用し、画像の劣化を 極力避けながら容量を小さくする■ 形式
・JPEGの代わりにWebPやベクトル形式（SVGファイル）などのファイル形式を使用する
・ベクトル画像は中身がコードであるため、基本的にロゴやアイコンの簡単な表示ならば、容量が少なく、電力消 費量が節約できる
・複雑で色が多い写真を表す場合、WebPなどの画像形式の方が適している（参考）株式会社メンバーズ「運用で社会を変革するデジタルクリエイター集団」
https://www.members.co.jp/

Members Co.,Ltd.

11

画像を最適化する
画像形式は、それぞれの目的に合った形式を使用することで無駄な容量を抑えることができ、品質低下の防止にも寄与する。
また、無駄な容量を減らすことでページ表示速度改善にも繋がる。

JPEG

写真、グラデーション

PNG

イラスト、図表や図形

右の図はそれぞれの形式の特徴を並べている。

GIF

GIFアニメ

画像の形式を最適化することは、容量を削減し、ページ表示速度改善に繋がるだけでなく、画像の劣化を防ぎ、ユーザビリティの観点でも効果的である。

SVG

ロゴ、アイコン、

BMP

使わない

WebP

写真、図、アニメ

Members Co.,Ltd.

特徴※ブラウザ対応必須

12

画像形式の比較（静止画像・アニメーション）▼静止画像▼アニメーション
JPEG

PNG

webP

SVG

ベクトル×××

◯

透過×

◯

◯

重さ

普通

少し重い

逆圧縮

×

色数

適している
画像

GIF

webP

SVG

mp4

ベクトル××◯×

◯

透過◯◯

◯

該当なし

軽い

軽い

重さ

重い

普通軽い軽い◯◯◯

逆圧縮◯◯

◯

×

約1670万色

256~約1670万色約1670万色

制限なし

色数256色約1670万色

制限なし

制限なし

写真
グラデーショ
ン

イラスト
図表・図形

写真・図
アニメーショ
ン

ロゴ・アイコン

アニメーショ
ン

比較的複雑なもの

複雑なもの

簡単なもの

複雑なもの

Members Co.,Ltd.

13

Lazy Loadにする
Lazy Loadとは、遅延読み込みのことで、ページロード時に取得するデータを抑えることで、サーバ間でやりとりするHTTPリ
クエスト数とデータ容量を減らすことができる。

■ UXの向上
ユーザーがページをスクロールしたタイミングで、必要な画像データを読み込んで表示するため、無駄な待ち時間が減りユーザー体験が向上する。
■ ページ表示速度の向上
Lazy Loadを導入すると、必要な部分のデータだけが順次読み込まれるため、画像の多いサイトの表示速度が向上する。
表示速度が上がると、Googleが定めたコアウェブバイタルの指標が改善され、SEO評価も高くなる傾向にある。
■ CO2の削減
ユーザーの目に触れない部分は読み込まれないため、データ転送容量を抑えることができ、サーバーの運営コストを下げることが可能。使用するデータが少なくなれば、二酸化炭素の排出量も少なくなる。

Members Co.,Ltd.

14

Lazy Loadにする注意点①■ 問題点
ページの最後までスクロールするユーザーは画像のロードを待つことにストレスを感じる■ 対策
画像はビューポートに表示される直前に読み込まれるので、しきい値を設定すれば良い。

Members Co.,Ltd.

15

Lazy Loadにする注意点②■ 問題点
アンカーリンクのジャンプ位置がずれる■ 対策
・画像1枚1枚にheightを指定しておく
・スムーススクロールという機能を併用
・画像遅延読み込みプラグインを利用

Members Co.,Ltd.

16

Lazy Loadにする注意点③■ 問題点
画像がインデックスされないSEO問題が発生する。

■ 対策
・画像を<noscript>というタグで囲う。
・構造化データの利用。構造化データの中で画像のURLを記述しておく。

（出典）
Google Search Central「Deliver search-friendly JavaScript-powered websites (Google I/O '18)」より
https://youtu.be/PFwUbgvpdaQ?feature=shared&t=1969

Members Co.,Ltd.

17

不要なコードを削除する
下記のような無駄なコードを削除することで、起動時間や解析速度を改善できる。

・デッドコード*・改行・コメント*デッドコード：コンピュータプログラムのうち、決して実行されることがないコードや、実行する意味がないコードのこと（※）。
デッドコード検出ツールなどを利用して検出が可能。

（出典）※ IT用語辞典 e-Words「デッドコード 」より
https://e-words.jp/w/%E3%83%87%E3%83%83%E3%83%89%E3%82%B3%E3%83%BC%E3%83%89.html

Members Co.,Ltd.

18

JavaScriptを最適化する■ 問題点
JavaScriptは、2つの点でWebサイトの効率性に影響を与える・ファイルの容量を重くする・ユーザーのデバイスで必要な処理量を増やす■ 対策
・CSSなどでフロントエンドのインタラクションやアニメーションを実現する
・不要なトラッキングや広告のスクリプトを削減（出典）
Wholegrain Digital「20 ways to make your website more energy efficient」より
https://www.wholegraindigital.com/blog/website-energy-efficiency/

Members Co.,Ltd.

19

デバイスの消費電力が少ない色を使用する■ 液晶画面・TN方式：消費電力が少ないのは「白」
・VA／IPS方式：消費電力が少ないのは「黒」■ 有機EL画面
・有機EL（OLED）方式：消費電力が少ないのは「黒」

有機EL（OLED）のディスプレイの普及などに伴い、デジタルコンテンツの背景色には黒を使用したほうが消費電力を抑えられるのではないかと考えられる。

Members Co.,Ltd.

20

デバイスの消費電力が少ない色を使用する
ディスプレイでは、LEDが使用されており、使用する色によって必要なエネルギーが異なる。
LEDでの消費電力は、青や白が比較的消費電力が大きく、赤や黄などが比較的小さい。したがって、CO2排出量削減には、なるべく青や白の使用を避けることが重要。

■ 発光色別の順方向電圧（※）
赤色：1.8V程度
黄色：2.1V程度
青色：3.6V程度
白色：3.6V程度(青色発光＋蛍光体の場合)
紫外：4.0V程度（出典）※ Optdevice「LED 発光ダイオードの基礎知識 」より
http://www.optdevice.jp/knowledge/electric.html

Members Co.,Ltd.

21

フォントを最適化する
Webサイトで使用されているフォントは、主に、システムフォントとWebフォントの2種類である。
システムフォントはデバイスにインストールされているフォントを指し、デバイスフォントとも呼ばれる。Webフォントに比べ表示速度が速い。一方、Webフォントはインターネットを介してサーバー上に保存されたフォントを読み込むため、表示に時間がかかる。Webフォントを用いる場合、以下のような最適化を行うことが好ましい。

■ Webフォントの最適化（※）
・日本語Webフォントは1つに絞る・使用するウェイトだけを読み込む
・複数フォントは連結して読み込む
・Google FontsはHTMLで読み込む（出典）※ 株式会社 DOL「画像とWebフォントを最適化して Webサイトを高速化」より
https://dol.co.jp/archives/column/%E7%94%BB%E5%83%8F%E3%81%A8web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%97%E3%81%A6web%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E9%AB%98%E9%80%9F%E5%8C%96
Members Co.,Ltd.

22

サステナブルWebデザイン実践例
メンバーズではサステナブルWebデザインに基づいて自社サイトや実案件でのサイト構築・運用を行っています。

Members Co.,Ltd.

23

事例｜メンバーズ 2022年年末挨拶サイト
制作意図と特長
・メンバーズでは2020年度より、紙の年賀状から、サステナブルWebデザインでの年末挨拶サイトに移行。サーバー稼働負荷を軽減させるため、サイト自体は年末年始の期間限定で公開。
・SVGアニメーションにより、容量を抑えながら、動きのあるサイトを実現。
・全体のファイル容量の目標値を7.5MB以内（Google推奨）としたうえで、容量の大きいものを特定し、軽量化を試行錯誤。その結果、6MBに収まった。
・フォントはデバイスフォントを使った方が容量を削減できるが、デザイン性の観点からwebフォントを採用。ただし、使わない漢字や記号を削除することにより、フォントデータの読み込み量を削減。

（参考）株式会社メンバーズ 2022年年末挨拶サイト（ 2022年12月～2023年1月に期間限定で公開）
Members Co.,Ltd.

24

事例｜メンバーズ「メンバーズが推進する脱炭素DX」
制作意図と特長・ダークモードとホワイトモードを切り替える仕様を採用。軽量化を考えれば片方のみでの実装が良い、かつ、色の消費電力はディスプレイの種類によって異なるが、来訪ユーザーに切り替えのアクションを提示することによって、サステナブルWebデザインの重要性とその表現の可能性を感じてもらうことを目指した。
・画像にはビットマップ形式とベクトル形式があるが、使用する色数が少ない場合は基本的にベクトル形式の方が容量が少ないとされているため、ベクトル形式の画像を採用。概念を効果的に伝えるためのアニメーションもSVG形式を使用することで容量削減を図った。

（参考）株式会社メンバーズ「メンバーズが推進する脱炭素 DX」
https://www.members.co.jp/why-dx/
Members Co.,Ltd.

25

WebサイトのCO2排出量
計測ツールのご紹介
メンバーズで使用しているWebサイトの環境負荷の計測ツールをご紹介します。

Members Co.,Ltd.

26

計測ツールについてのご紹介

ツール名URL

特徴

Website Carbon Calculator

https://www.websitecarbon.com/

サステナブル・ウェブ・マニフェストを作成した
Wholegrain Digital社が提供している計測ツール。
排出量算定などに加え、A+～Fの7ランクで評価。

Ecograderhttps://ecograder.com/

ページの重さ、UXデザイン、ホスティングの観点から20項目のスコアが算出される。

EcoPing

https://ecoping.earth/

CO2排出量、エコスコア、サイズ、読み込み時間などが測定される。

Ziferahttps://zifera.io/

CO2排出量やコードの最適化状況、グリーンサーバーの利用状況などが診断される。

Carbon Neutral Web

https://www.carbonneutral-web.org/

日本カーボンニュートラルウェブ協会が運営する、計測ツール。アクセ
スごとのCO2排出量を簡易的に算定可能。

※内容の正確性等については、当社が保証するものではありません。
Members Co.,Ltd.

27

デジタルビジネス運用支援で企業の脱炭素DXを推進する

本資料に関してご不明な点等がございましたら、下記までお問い合せください。

株式会社メンバーズ

株式会社メンバーズ お問い合わせhttps://www.members.co.jp/contact/

https://www.members.co.jp/
https://www.facebook.com/Memberscorp

Members Co.,Ltd.