デザインシステムは、さまざまなページやチャネル間で共有言語と視覚的な一貫性を作成しながら、冗長性を減らしてデザインを大規模に管理するために作られています。

マイクロソフトやApple、Uber、Airbnbなど、海外の大企業が活用し始め、その有用性が認知され導入する企業が増えてきました。

繰り返し使用できるコンポーネントを最大限に活用することで、コラボレーションのスピードまた効率性を向上することができます。

デザインシステムのメリット

デザインシステムは、適切に実装されると、デザインチームに多くのメリットをもたらします。

迅速かつ大規模に作成および複製
デザインシステムの主な利点は、事前に作成されたUIコンポーネントと要素を利用してデザインをすばやく複製できることです。チームは同じ要素を何度も使用し続けることができるため、意図しない不整合のリスクがなくなります。これにより、デザインリソースへの負担が軽減され、より大きく、より複雑な問題に集中できます。

より単純なUI要素がすでに作成されており、再利用できるため、デザインリソースは、視覚的な外観の調整に重点を置くのではなく、より複雑な問題（優先順位付け、ワークフローの最適化、ジャーニー管理など）に重点を置くことができます。

少数の画面のみを作成する場合、この見返りは小さいように見えるかもしれませんが、数十のチームと数千の画面にわたって作業を調整する必要がある場合、この見返りは大きくなります。

チーム間で統一された言語を作成
特に、デザイナーが変わったり、チームが地理的に分散したりする場合、統一された言語により、誤解によるデザインや開発の無駄な時間が削減されます。

たとえば、ドロップダウンメニューの機能や外観については議論する必要性がなくなります。これは、その用語がデザインシステム内で特別に定義された要素のために予約されているためです。

これにより、製品、チャネル、および（潜在的にサイロ化された）部門間で視覚的な一貫性が生まれます。

特に、各製品またはチャネルが互いに独立して動作するサイロでチームが作業する場合、組織全体のデザインシステムがないと、一貫性のない外観やエクスペリエンスが断片化されているか、ブランドとは無関係に見える可能性があります。

デザインシステムは、コンポーネント、パターン、スタイルの単一のソースを提供し、ばらばらのエクスペリエンスを統合して、視覚的にまとまりがあり、同じエコシステムの一部であるように見せます。

追加のボーナス
追加のボーナスとして、主要な視覚的なブランド変更または再デザインは、デザインシステムを通じて大規模に管理できます。

これは、ジュニア・レベルのデザイナーやコンテンツ寄稿者のための教育ツールおよびリファレンスとして機能します。

明示的に作成された使用ガイドラインとスタイルガイドは、UIデザインやコンテンツ作成に不慣れな個々の寄稿者を支援し、残りの寄稿者へのリマインダーとしても機能します。

アプローチ方法とシステムの採用

デザインシステムを使用するには、一般的に3つのアプローチがあります。

• 既存のデザインシステムを採用する

• 既存のデザインシステムを適応させる

• 独自のまたはカスタムデザインシステムを作成する

組織にオープンソースのデザインシステムでは満たすことができない特定のニーズがある場合、カスタムデザインシステムへの投資は価値があります。デザインシステムのカスタマイズと調整が増えると、既存のデザインシステムを使用することで得られるコスト削減は減少し、長期的には、とにかく独自のデザインシステムを作成したほうがよい場合があります。デザインシステムの取り組みに着手し、トレードオフを評価する前に、組織が何を必要としているかを確認してください。

参考にしたいデザインシステムまとめ

デザインシステムを活用している国内企業および海外企業の活用事例を紹介いたします。

Shopify

Semrush

Mui for Figma

Primer

Voog

テンプレート・トークン

Orbit

Material 3 Design Kit

Twilio

Palmetto

Vibe

Microsoft Teams

Vaadin Design System 

Material Design Time and Date Pickers Kit

Design an Adaptive Layout with Material Design

Base

SLDS

Evergreen

Radius Design Kit 

まとめ

デザインシステムは、多くのコンポーネント、パターン、スタイル、およびガイドラインで構成されており、デザイン作業の運用と最適化に役立ちます。 ただし、それらは人々によってデザイン、管理、および実装されます。 

デザインシステムを作成する際に考慮すべき主な要因は、プロジェクトの規模と再現性、および利用可能なリソースと時間です。 実装と保守が不十分な場合、デザインシステムは扱いにくいコンポーネントとコードのコレクションになる可能性があります。 ただし、適切に実装すると、チームメンバーを教育し、作業を合理化し、デザイナーが複雑なUXの問題に取り組むことができるようになります。

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。

［参考資料］