インハウスデザイナーとして働く際、必ず考慮すべき課題は『企業のブランドを体現した一貫性のあるデザインをどう構築するか？』です。世界的にブランド力を持つ企業は、そのためにデザインシステム（Design System）を構築し、これを公開しています。本記事ではデザインシステムの概要と、世界のデザインシステム14事例を紹介します。
デザインシステム（Design System）とは
デザインシステム（Design System）は、統一された「デザインおよび開発のガイドライン」、「コンポーネントライブラリ」、「スタイルガイド」、および「パターンライブラリ」の集合体です。これは、企業や組織が製品やサービスの一貫性を維持し、効率的なデザインおよび開発プロセスを確立するために使用されます。
デザインおよび開発のガイドライン
一貫性を保つためのデザインの指針や開発を行う上で理解しておく基本的な事項をとりまとめたガイドライン。これにより、異なる部門やプロジェクトで一貫性を維持することが容易になります。デザインシステムの導入により、企業は製品やサービスを効率的に開発し、一貫性を維持しながらユーザーエクスペリエンス（UX）を向上させることができます。
コンポーネントライブラリ
再利用可能なデザイン要素やコンポーネントのセット。これにはボタン、フォーム、アイコンなどが含まれます。これらのコンポーネントは、同じデザイン言語に基づいているため、作り手に関わらず統一感を出すことができます。
スタイルガイド
色、フォント、スペーシングなどのスタイルに関する指針。これにより、デザインや開発者は一貫性のある外観および触ったときの感覚や印象（Look＆Feel）を簡単に設計することができます。
パターンライブラリ
特定の課題やユーザビリティの問題に対処するためのデザインおよび開発のプリセットパターンです。これにより、特定の課題に対処するための最適解（ベストプラクティス）がデザイナーおよび開発者に共有されます。
なぜデザインシステムを世に公開するのか？
デザインシステムが世の中に公開される理由はいくつかあります。
透明性を高める
デザインシステムを公開することで、企業や組織は透明性を高め、デザインおよび開発のプロセスを他のデザイナーや開発者と共有できます。これにより、内外のステークホルダーがプロジェクトの進捗状況やデザインの方針を理解しやすくなります。
コミュニティからのフィードバックを得られる
デザインシステムの公開は、外部のデザイナーや開発者がそのデザインシステムに寄与できるようにすることがあります。オープンソースのデザインシステムでは、コミュニティからのフィードバックや改善提案を受け入れることが一般的です。これにより、デザインシステムはより豊かで強力になります。
業界標準を確立できる
デザインシステムが公開されると、業界全体で共通のデザイン原則やパターンが確立される可能性があります。これにより、異なるプロジェクトや企業間での一貫性が向上し、ユーザーエクスペリエンスが統一されたものとなります。
デザイナーの学習を支援する
デザインシステムの公開は、他のデザイナーや開発者がそのデザイン原則やベストプラクティスを学ぶ手助けになります。これにより、業界内でのスキル向上とナレッジの共有が促進されます。
技術的な進化を促す
デザインシステムがオープンであることは、新しいテクノロジーやツールの導入を助けることがあります。開発者やデザイナーは、公開されたデザインシステムを使用して、最新の技術やベストプラクティスに追従しやすくなります。
総じて、デザインシステムの公開は協力と共有の文化を促進し、業界全体の向上に寄与することが期待されます。
筆者が勤務する企業でもデザインシステムを公開していますが、似たような理由を挙げています。
参考にすべき世界のデザインシステム14事例
Canvas by Workday
「Canvas」はWorkdayのオープンソースデザインシステムです。最初はシンプルに見えるかもしれませんが、このデザインシステムはデザイン全般にわたる詳細な情報が詰まっています。トークン、コンテンツデザイン、アクセシビリティ、パターン、グローバリゼーション、アセットなど、あらゆる側面に関する印象的な成果です。
Carbon Design System by IBM
https://carbondesignsystem.com/
「Carbon」はIBMのプロダクトおよびデジタルエクスペリエンスのためのオープンソースデザインシステムです。IBMデザイン言語を基盤としており、このシステムには動作するコード、デザインツールとリソース、ヒューマンインターフェースのガイドライン、そして多様で活気ある貢献者のコミュニティが含まれています。
Cloudscape by AWS
AWSのデザインシステムはReactと呼ばれるJavaScriptライブラリやフレームワークを使用して構築・運用されています。ReactはFacebookが開発したオープンソースのJavaScriptライブラリで、ユーザインターフェース（UI）の構築に利用されます。AWSは、Reactを選択してデザインシステムを構築しており、これにより効果的で柔軟なユーザーエクスペリエンスを提供しています。デザインシステムがReactを使用することで、コンポーネントの再利用、柔軟なUIの構築、そして開発者が簡単にカスタマイズできる特定のパターンの実装が容易になります。AWSのデザインシステムは、実用的な例を交えたパターンやデモを豊富に含んでいます。
The DB Marketing Portal by Deutsche Bahn
https://marketingportal.extranet.deutschebahn.com/marketingportal
「The DB Marketing Portal」は、ドイツ鉄道のすべてのデジタル製品のデザインシステムです。 ドイツ鉄道のこのドキュメンテーションサイトには、ロゴやレイアウト、アイコンや写真など、さまざまなデザインやブランディングに関する情報が掲載されています。
Edison™ Design System by General Electric
https://edisondesignsystem.com/
General Electric（GE）は創業1892年のアメリカの多国籍企業で、航空、エネルギー、ヘルスケア、デジタルテクノロジーなど広範な分野で事業を展開しています。「Edison」は、毎日何十万人もの医療従事者によって使用されている賞を受賞したデザインおよびコードの標準のデザインシステムです。このシステムは、スタイルガイド、アイコンライブラリ、コンポーネント、ナビゲーション要素、レイアウトテンプレート、およびパターンに分解されています。
Fluent 2 by Microsoft
https://fluent2.microsoft.design/
Microsoftの初期のデザインシステム「Fluent UI」の次なる進化形である「Fluent 2」は、美しいクロスプラットフォームのアプリケーション開発において一貫性のあるデザインやユーザーエクスペリエンスを提供するためのフレームワークの集合体です。これはコード、デザイン、およびPC、タブレット、スマートフォンの互換性および挙動を共有することを目的としています。
Fluid Design System by Engie
https://www.engie.design/fluid-design-system/
Engieはフランスの多国籍企業で、広範なエネルギーおよびサービス分野で事業展開しています。再生可能エネルギーへの注力や国際的な展開、環境に配慮したエネルギーソリューションの提供が特徴です。「Fluid Design System」はデザイナーおよび開発者向けのコンテンツに焦点を当て、実践的で実用的な事例を活用したUX原則とブランドの定義を行っています。
GOV.UK Design System by gov.uk
https://design-system.service.gov.uk/
gov.ukは、イギリス政府のことを指し、行政に関するポータルサイトを運営しています。gov.ukのデザインシステムは、イギリスの行政サービスを一貫性のあるものにするために使用されています。シンプルに見えますが、アクセシビリティの分野では非常に高度です。
Helsinki Design System by Helsinki city
「Helsinki Design System」はヘルシンキ市のデザイン言語に関するナレッジを集約した情報システムです。このドキュメンテーションサイトでは、デザインシステムの各機能が何に使われるかがわかりやすく示されています。またデザイナーか開発者かによって異なるスタートガイドを用意し、ヘルシンキデザインシステムを簡単に始めるための工夫が施されています。
Lightning Design System by Salesforce
https://www.lightningdesignsystem.com/
Salesforceの「Lightning Design System」は、Salesforce Lightningの原則、デザイン言語、およびベストプラクティスに一貫性のあるユーザーインターフェースを作成するためのリソースと事例を提供しています。開発者はアプリケーションのプログラムロジックに集中でき、デザイナーはユーザーエクスペリエンス、インタラクション、およびフローに焦点を当てることができます。
Material Design 3 by Google
Googleの「Material Design 3」はMaterialデザインシステムの最新バージョンです。この新しいドキュメンテーションサイトは、検索性や使いやすさが向上され、多くのコンテンツが詰まっています。Googleのデザインシステムチームのノウハウを詰め込んだ情報の宝庫です。
Industrial Experience by Siemens
Siemens（シーメンス）はドイツに本社を置く重工業を得意とする巨大企業で、エネルギー、医療、産業、インフラ、デジタル産業など様々な分野で事業展開しています。「Industrial Experience」は、設計者や開発者がパートナーや顧客に最適なデジタル・エクスペリエンスを一貫して作成するためのオープンソース設計システムです。業界に特化したSiemensのコンポーネントにより、複雑な分析、科学、産業のアイデアをすべてのデバイスで簡単かつ一貫して設計し、提供することができます。
U.S. Web Design System (USWDS) by USA gov
https://designsystem.digital.gov/
アメリカ政府が構築・管理する「U.S. Web Design System」は、現在USWDS 3.0がリリースされています。このデザインシステムはアクセシビリティとモバイルフレンドリーに重点を置いています。また、デザイン原則、ガイダンス、およびコードを一緒に定義しています。
Washington Post Design System (WPDS) by Washington Post
https://build.washingtonpost.com/
「Washington Post Design System（WPDS）」は、washingtonpost.com向けに特に作成されたデザイントークンと対話型コンポーネントのライブラリです。
WPDSは、ワシントンポストのデザイナーと開発者が、視覚的な一貫性を保ちながら、モジュラーを活用してエレガントかつアクセスが容易なデジタル製品を提供できるよう支援しています。
終わりに
デザインシステムは透明性を高めてフィードバックを獲得し、改善を繰り返すことで企業価値を高めることに貢献します。日本においてもデジタル庁や企業がデザインシステムを公表しており、今後ますます増えていくと思います。世界のデザインシステムを例に皆さんの企業ブランディングをデザインシステムを活用して構築してください。creativeog[クリオグ]では、デザインに関する記事を多数執筆しています。他の記事もぜひご覧ください。