The Trinity Tribe｜環境性能を制作要件に組み込む
ウェブサイトの制作前にCO2排出量の上限を決めておくと、デザインや実装の判断はどう変わるのでしょうか。
デザインスタジオのThe Trinity Tribe（ザ・トリニティ・トライブ）は、自社サイトを顧客案件と同じように扱い、制作に着手する前に要件書を作成しました。そこに盛り込んだのが、1ページ閲覧あたりのCO2排出量と、モバイル・デスクトップそれぞれの表示パフォーマンスの数値目標です。
これらの目標は、ホスティングや配信方式の選定から、トップページに動画を使うかどうかの判断まで、制作の各段階で使われました。
今回は、The Trinity Tribeが自社サイトの制作要件に環境性能を組み込み、公開サイトで目標の達成状況を検証した事例を紹介します。
1. 制作前にCO2排出量と表示パフォーマンスの目標を設定
The Trinity Tribeは、1ページ閲覧あたりのCO2排出量の推計値を0.1g未満に抑える目標を設定しました。排出量に上限を設けるこの考え方を、同スタジオは「カーボンバジェット」と呼んでいます。
表示パフォーマンスについては、Googleの「PageSpeed Insights」のパフォーマンススコアを基準とし、モバイル・デスクトップともに90点以上を目標にしました。両方の環境に基準を設けたことで、モバイルで表示を妨げるスクリプトの影響も、制作中に確認できました。
2. 配信方式を見直し、動画を138KBの静止画に変更
再生可能エネルギーを利用するKrystalを採用し、事前に生成したページを配信する静的構成としました。同スタジオは、静的配信の利点として、サーバーの応答を速めやすく、ホスティング費用を抑えやすい点を挙げています。
画像はWebP形式とし、ファイルごとに容量の上限を設定しました。ウェブフォントの読み込み方法も見直し、JavaScriptは必要な処理に絞りました。
トップページでは、データ転送量と端末での再生負荷を抑えるため、予定していたループ動画に代えて138KBの静止画を採用しました。
表示を妨げていたスクリプトの修正により、開発初期に67点だったモバイルのパフォーマンススコアは90点台に改善しました。
3. 公開サイトで目標の達成状況を確認
The Trinity Tribeは、2026年6月25日に公開サイトを検証し、CO2排出量と表示パフォーマンスの両方で目標を達成したと報告しています。
- 1ページ閲覧あたりのCO2排出量の推計値：0.03g（目標は0.1g未満、Website Carbon CalculatorでA+）
- パフォーマンススコア（モバイル）：98点（目標は90点以上）・（デスクトップ）：100点（目標は90点以上）
注記：各数値は、The Trinity Tribeが公表した2026年6月25日時点の検証結果です。
4. まとめ
The Trinity Tribeは、制作前に環境性能と表示パフォーマンスの目標を決め、配信方式やメインビジュアルを選ぶ際の判断基準にしました。公開サイトの検証結果も、測定日と手法を添えて公表しています。
ページの軽量化は、データ転送量を減らし、環境負荷の低減と表示の高速化につながります。まずはトップページなど主要なページで、容量の大きい画像や動画を確認し、表示サイズに合わせて画像を圧縮したり、静止画でも内容が伝わる動画を置き換えたりするところから始められます。
対象ページと測定条件をそろえて見直しの前後を比較しておくと、公開後の更新でも同じ基準で変化を確認できます。
