私は 20 年以上、ユーザー エクスペリエンス デザインの現場で過ごしてきました。テーブルベースのレイアウトから CSS への移行、iPhone 発売時のレスポンシブ デザインへの転換、そして「アテンション エコノミー」の隆盛を覚えています。しかし、2026 年を迎えるにあたり、業界はこれまでで最も大きな変化に直面しています。私たちは「コストをかけてデザインする」時代を超え、持続可能なUXの時代へと移りつつあります。 私も含め、ほとんどのデザイナーはこれをコンセプトとして聞いて思いつくまでは考えたこともありませんでした。長年にわたり、私たちはインターネットを空気のような無重力の雲として扱ってきました。私たちはデジタル製品が紙に印刷されていないというだけの理由で「環境に優しい」ものだと考えてきました。私も以前はそう思っていましたが、気候変動という概念が登場する前は、むしろ木を救うことが重要でした。 私たちは間違っていました。クラウドは物理インフラストラクチャであり、データ センターの無秩序に広がるネットワーク、海底ケーブル、24 時間年中無休で稼働する冷却システムです。 AI に重点を置いたデータセンターは、大規模なアルミニウム精錬所の電力消費量に匹敵しますが、その地理的な密度が高いため、さらに強力で局所的な環境負荷が生じます。 UX デザイナーとして、私たちはこのエネルギー消費の設計者です。当社が承認するすべての高解像度のヒーロー画像、すべての自動再生バックグラウンド ビデオ、およびすべての複雑な JavaScript アニメーションは、プロセッサに電力を消費するよう直接指示します。長く続く未来を築きたいなら、「すごい」ことを追求するデザインをやめて、効率性を重視したデザインを始めなければなりません。 ダークモード 2000 年代初頭は、紙の親しみやすさを模倣するため、白の背景が標準でした。しかし、ハードウェアは進化しており、私たちの設計哲学もそれに従う必要があります。 LCD から OLED (有機発光ダイオード) テクノロジーへの移行により、色がエネルギーに与える影響が根本的に変わりました。
論理 (黒表示時でも) 常時オンのバックライトを必要とする従来の LCD スクリーンとは異なり、OLED スクリーンは各ピクセルを個別に照らします。ピクセルが真の黒 (#000000) に設定されると、その特定のダイオードが完全にオフになります。消費電力はゼロです。 暗いパレットを好むインターフェイスをデザインすることで、私たちは単にトレンドに従っているだけではありません。ユーザーのデバイスのエネルギー要件を物理的に削減しています。 データ エネルギーの節約は決して無視できるものではありません。この議論のゴールドスタンダードとなった 2021 年のパーデュー大学による画期的な研究では、明るさ 100% でライト モードからダーク モードに切り替えると、バッテリー電力を平均 39% ～ 47% 節約できることが明らかになりました。世界規模で見て、すべての主要なアプリがデフォルトでダーク モードになった場合、グリッド需要の減少は天文学的なものになるでしょう。 設計の目標 2026 年には、ダーク モードは設定メニューに隠れた二次的な「テーマ」ではなくなります。私たちは「ダークファースト」の考え方で設計する必要があります。これは、すべてのサイトがマトリックスのように見える必要があるという意味ではありませんが、デフォルトのシステム優先状態としてハイコントラストのダークテーマを優先することを意味します。これにより、デバイスのハードウェアの寿命が延び、あらゆるインタラクションによる二酸化炭素排出量が削減されます。 私は個人的に読書にはライトモードを好むので、ライトモードとダークモードの両方のオプションを利用できるのは理にかなっています。両方のオプションを提供する場合には、アクセシビリティについても考慮する必要があります。 画像とビデオの最適化 私たちは怠惰なデザイナーになってしまいました。高速 5G と光ファイバーのおかげで、私たちはファイル サイズを気にする必要がなくなりました。モバイル ページの平均ウェイトは、主に最適化されていないビジュアル アセットにより、過去 10 年間で 500% 以上増加しました。 論理 Web サイトの「デジタル脂肪」 (4 MB の Unsplash 写真と 15 MB の背景ビデオ) が、ページ読み込みエネルギーに最も大きく寄与しています。サーバーからクライアントに転送されるすべてのメガバイトには、送信、サーバーの処理、およびユーザーのレンダリング エンジンに電力が必要です。巨大なファイルを使用するとき、私たちは本質的に、数分の一のサイズでも同様に効果的だったはずの画像を表示するためにエネルギーを「消費」しています。言うまでもなく、ページの読み込みが大幅に速くなり、より良いユーザー エクスペリエンスも提供されます。
データ HTTP アーカイブによると、画像とビデオが常にページの総重量の大部分を占めています。ただし、AVIF や WebP などの最新の形式に移行すると、品質をほとんど低下させることなく、JPEG と比較して画像の重量を最大 50% 削減できます。 これらの形式は JPG や PNG ほど馴染みがありませんが、ページ サイズを削減するためにこれらの形式を使用することを間違いなく楽しみにしています。 の設計目標 私は最近、サイバーセキュリティ プラットフォームの再設計を主導しました。 「前後」の監査を実施したところ、ホームページに 5.5MB のデータが読み込まれていることが判明しました。高解像度の写真を SVG (Scalable Vector Graphics) アートに置き換え、画像アセットの代わりに巧妙な CSS グラデーションを使用することで、負荷を 1.2 MB に下げました。これはエネルギー負荷が 78% 削減されることになります。デザイナーとして、最初の質問は常に次のとおりである必要があります。 「これには写真が必要ですか? それともコードで同じ感情的な共鳴を達成できるでしょうか?」
意図的なモーション: 「大音量」アニメーションのカット 私たちは「スクロールジャッキング」と複雑な 3D 視差効果の時代に生きています。これらは Awwwards.com で賞を受賞する可能性がありますが、多くの場合、環境上の災害となります。 論理 アニメーションは無料ではありません。複雑なアニメーションをレンダリングするには、デバイスの GPU (グラフィックス プロセッシング ユニット) が高能力で動作する必要があります。これにより、CPU の温度が上昇し、(ラップトップの) 冷却ファンが作動し、バッテリーが急速に消耗します。バックグラウンドで常に実行されたり、ブラウザの大規模な再ペイントをトリガーしたりする「大音量」アニメーションは、車を私道でアイドリングしておくのと同じエネルギーに相当します。
データ Google のマテリアル デザイン ガイドラインでは、「意味のある動き」を重視しています。彼らは、アニメーションはユーザーの方向性を示したり、フィードバックを提供したりするためにのみ使用されるべきだと主張しています。また、JPEG の代わりに WebP を使用すると、ページ上のデータの 25 ～ 50% を節約できます。 設計の目標 私たちは意味のある動きを採用しなければなりません。アニメーションがユーザーのタスクの完了や階層の理解に役立たないのであれば、それは無駄です。 CSS はハードウェアで高速化され、ブラウザの計算効率がはるかに高いため、可能であれば GSAP や Lottie などの重い JavaScript ライブラリよりも CSS トランジションを優先する必要があります。 UX デザイナーとして、私はこのアプローチに異論はありません。これにより、データの無駄が削減されるだけでなく、ユーザーの UX も向上します。 プロジェクトごとに「データ予算」を設定する 私の 20 年以上の UX の中で、最も成功したプロジェクトは、一般的に最も厳しい制約を備えたプロジェクトでした。 プロジェクトには財務予算があるのと同じように、炭素予算とデータ予算も必要です。 論理 データ予算は、ページの合計サイズに対するハードキャップです (例: 「このランディング ページは 1MB を超えることはできません」)。このため、設計チームは難しい意図的な選択を強いられます。新しいトラッキング スクリプトや派手なフォント ウェイトを追加したい場合は、他のものを最適化または削除することで、その費用を「支払う」必要があります。これにより、「フィーチャー クリープ」が「カーボン クリープ」に変わるのを防ぎます。 データ WholeGrain Digital のような先駆者によって開発された持続可能な Web デザイン モデルは、ページ ビューごとの CO2 を計算する式を提供します。平均的な Web サイトでは、1 回の閲覧につき約 0.5 グラムの CO2 が発生します。月間 100 万ビューのサイトの場合、これは年間 6 トンの CO2 に相当し、車で 15,000 マイル走行するのに相当します。 設計の目標 持続可能なUXチェックリスト
画像を減らすすべてのビジュアルの必要性を検討し、最小の解像度と最も効率的なファイル形式 (AVIF など) を使用してデータ転送を最小限に抑えます。 ビデオの最適化自動再生メディアを排除し、高圧縮の短いループを優先して、ユーザーが視聴する予定のコンテンツのみにエネルギーが費やされるようにします。 フォントを制限する最大 2 つの Web フォント ウェイトを使用するか、クラシックなシステム フォントを使用して、不必要なサーバー要求とレンダリングの肥大化を削除します。 アセットをリサイクルするCSS フィルターとオーバーレイを使用して 1 つの画像またはビデオを複数回再利用し、ページの総重量を増やさずに視覚的な多様性を生み出します。 グリーン ホスティングを選択してください。再生可能エネルギー源を使用していることを保証するために、Green Web Foundation によって検証されたサーバー上でデジタル製品をホストします。 データ距離を最小限に抑える物理インフラストラクチャを通過するデータの移動に必要なエネルギーを削減するには、主な視聴者に地理的に近いサーバーの場所を選択します。
環境に優しい設計のビジネスケース 「Green UX」というと品質を犠牲にしているように聞こえると主張する人もいるかもしれません。逆に言えば、それは競争上の優位性となります。持続可能なデザインはパフォーマンスデザインです。 ページの重量を減らすと、サイトの読み込みが速くなります。サイトの読み込みが速くなると、Core Web Vitals が向上します。 Core Web Vitals が向上すると、SEO ランキングが上がります。さらに、古いデバイスや低速のデータ プラン (特に新興市場) を使用しているユーザーでも、実際に製品にアクセスできます。これが「インクルーシブデザイン」の定義です。 「デジタル脂肪」を削減することで、私たちはより無駄がなく、より速く、よりアクセスしやすいウェブを作成します。 2010年代の「使い捨てデザイン」から脱却し、より永続的で敬意を持ったデジタル アーキテクチャ。 結論: 「クリーン」デザインの未来 20 年間のデザイン活動の中で、私は多くのトレンドが来ては消えていくのを見てきました。スキューモーフィズム、フラット デザイン、ニューモーフィズム — それらはすべて美的な選択でした。しかし、持続可能なUXはトレンドではありません。それは今では必需品です。私たちは、デジタル作業による物理的な影響を考慮しなければならない第一世代のデザイナーです。 持続可能なUXは「Win-Win-Win」です。エネルギー消費が減るので、地球にとっても良いことです。より高速で応答性の高いインターフェースが得られるため、ユーザーにとってはより良いことになります。また、ホスティングコストが削減され、コンバージョン率も向上するため、ビジネスにとっても有利です。 「ピクセル無制限」の時代は終わりました。 2026 年には、設置面積が最小の最も洗練されたデザインになります。私たちはもはや単なるデザイナーではありません。私たちはユーザーのバッテリー、データプラン、そして最終的には環境の守護者です。 行動喚起 今日は、現在のプロジェクトの 1 ページだけを監査してみてください。その影響を確認するには、Web サイト炭素計算ツールなどのツールを使用してください。そして、「見えない無駄」を探します。その画像は SVG にすることができますか?そのビデオは静的なヒーローになり得るでしょうか?その「うるさい」アニメーションを消すことはできるでしょうか? 小さなことから始めましょう。最も洗練されたソリューションは、多くの場合、バイト数が最も少ないソリューションです。
