90 Seconds.comをより持続可能なものにするためにどのように再設計したのか？90 Seconds

90Seconds.comをよりサステナブルにするためにデザインを一新した方法とその理由

オンセル・セベチ
3年前・5分前

まず、過去10年間で、オンラインの新興企業や製品が世界のエネルギー消費の主要な担い手のひとつになったという事実から始めよう。インターネットが世界の資源に与える影響は、産業革命のそれと比較することができ、成長を続けるインターネットは、今後5年間で世界の資源の20％を消費すると予想されている。

テクノロジー企業として、より持続可能な製品を設計・開発する使命があることは明らかだ。

創業以来、私たちはより持続可能であることを中心に、90 Seconds ビジネスモデル全体を設計してきました。Shoot Anywhereのようなソリューションにより、私たちは出張費と二酸化炭素排出量を削減すると同時に、私たちのブランドが好きな場所でビデオ・コンテンツを作成できるようにしています。

論理的な次のステップは、同じアプローチをウェブサイトに適用することだった。

それでデザインを始めたんだ

挑戦

私たちの最大の課題は、10年以上前のコンテンツを、新しいテクノロジーを使った新しいレイアウトに、壊すことなく適合させることでした。一歩間違えれば、SEOや全体的なユーザーエクスペリエンスに悪影響を及ぼす可能性があることはわかっていたので、まず2万近いコンテンツページを改良し、古くなったコンテンツを削除しました。

それから、バックエンドとフロントエンドの最適なソリューションを決める必要がありました。以前のウェブサイトでは、ReactとWordPressのマッシュアップを使用していましたが、バグやその他多くの問題を引き起こしていました。そのため、すべてをWordPressに移行することにしました。WordPressは弾丸のようなプラットフォームであり、ネイティブ・ホスティングは数少ない環境に優しいホスティング・サービスです。

この話を続ける前に、1つ重要なことを強調しておきたい。私は、私たちデザイナーは「デザインをして終わり」という考え方で自分たちを縛るべきではないと信じています。コンテンツ制作からテクニカルエンジニアリング、SEOに至るまで、製品開発に直接関わることで、結果に影響を与え、より迅速かつ効率的な方法で同僚と協力することができるのです。

これらの重要な決断の後、私たちの新しいビジュアル・アプローチ、通称「90デザイン」に基づいたデザインの制作を開始する時が来た。この2年間で、私たちはデジタル・プラットフォームにおける人間の体験に完全に焦点を当てたデザイン・システムを作り上げました。これは、私たちのデザイン・チームのモットーでもあります：私たちは人間のためにデザインする」。私たちがデザインするすべてのコンポーネントやレイアウトには、その背景に社会学的・心理学的な理由があります。ですから、90seconds.comも当然、この思想を反映しなければなりませんでした。

90 Seconds デザインチームは以下のような課題に直面した：

新しい 90seconds.comをより持続可能なものに。
90 Seconds のルック＆フィールはそのままに、最新のビジュアル・ガイドラインを反映。
私たちの市場とそこにいる本当の人々を理解すること。

進捗状況

新しい 90seconds.comのデザインと開発には、ほぼ1年を要した。しかし、コンセプトデザインと最初のドラフトを考慮すると、完全なタイムラインは2年に近いです。

私たちはビデオ制作プラットフォームであるため、私たちのストアフロントは画像とビデオに重点を置いています。これは、装飾的な目的を果たすと同時に、ユーザーに私たちの映像作品に期待できるイメージを与える重要なビジュアルガイドとしても機能します。また、より持続可能であることにコミットしているデザイン・チームにとっては課題でもあります。そこで私たちは、この2つの最適化方法に従うことにしました：

手動でedit 、トリミングし、ビジュアルコンテンツを最適化します。
Cloudinary APIなどのオンライン技術を使用して、品質とデータペイロードのバランスをとる。

これらのシステムがどのように機能し、私たちのストアフロントをより持続可能なものにするのに役立ったかを説明する前に、私たちのプラットフォーム全体で一貫性を保ち、同じようなユーザー・エクスペリエンスを提供するために、90 Seconds 、私たちが使っているデザイン手法についてお話したいと思います。

私たちは、Figmaを主要なデザイン・ツールとして使用し、10,000以上のグローバル・コンポーネント、500以上のレイアウト、互いに指示し合う7つのシステム、何千もの独立したコンポーネントとそのバリエーションから構成されるデザイン・システムを中心にデザインを構築しています。パズルのピースのように、私たちがプラットフォームを構築するために使用する多目的レイアウトを作成します。2022年にプラットフォームの大きな変更を控えている今、シームレスなユーザー・エクスペリエンスを保証する上で、デザイン・システムは重要な役割を果たすことになるだろう。

結果

90秒.com "を作ったことを誇りに思う。 90seconds.comをを90％持続可能なものとし、より環境にもユーザーにも優しいものとしたことを誇りに思います。また、携帯電話やタブレット、さまざまな画面解像度に対応するため、ネイティブライクなレイアウトを確実に表示するよう、サイトのパフォーマンスを大幅に改善しました。まだベータ1.0版であることを考えると、私たちがすでに成し遂げたインパクトはかなりすごいものです。

ビフォーアフターの比較を見てみよう：

当社では、GTmetrix、Pingdom、WebsiteCarbonなど、複数のソフトウェアやオンライン・プラットフォームを使用して影響を計算しています。テスト結果は常に同じではないため、中央値を使用しています。中央値は以下の通りです：

	GTメトリックス	ピングダム
前	F - 35%のパフォーマンス	D- ホームページサイズ：10,65MB
その後	A - 95％のパフォーマンス	A- ホームページサイズ：2,4MB

ウェブサイト用のカーボンフットプリント・エミュレーターであるWebsiteCarbonによると、サイトへの訪問者1万人ごとに、以前のストアフロントは143本の木が1年間に吸収する量の炭素を排出していた。これは、私たちのサイトが毎月それよりも多くの訪問者を受け入れていることを考えると、膨大な量です。

新しいstorefront90.wpengine.comでは、わずか9本の木に相当する量まで排出量を削減できたことに興奮しています。

ウェブサイトカーボン

GTメトリックス

概要

すべてのソフトウェアおよびオンライン企業と同様に、90 Seconds 、地球を保護し、保全するために全力を尽くすことを保証する責任があります。地球の資源は無限ではありません。私たちは、二酸化炭素排出量を削減し、最大限のプラスの影響を与えるために、自分たちの役割を果たさなければならないと強く信じています。私たちは、ユーザーのために、より人にやさしく、持続可能で効果的な製品を作ることを楽しみにしていますし、私たちの取り組みが、他の企業も同じような方向へ導く一助となることを願っています。

90Seconds.comをよりサステナブルにするためにデザインを一新した方法とその理由