2023 年のデザインシステムトップ 10

May 08 2023

デザインシステムは、再利用可能なコンポーネント、ガイドライン、およびアセットのコレクションであり、さまざまなプラットフォームやデバイス間で一貫性のあるまとまりのあるユーザーインターフェイスを構築するために使用されます。これは、組織全体で統一された設計言語を作成および維持するための一連の規則、原則、およびツールを設計者と開発者に提供するフレームワークです。

デザインシステムには通常、タイポグラフィ、カラーパレット、図像、グリッド、UI コンポーネント、デザインパターンなどのさまざまな要素が含まれます。また、多くの場合、これらの要素の使用方法を概説する詳細なドキュメントとガイドラインが付属しており、一貫性を確保し、設計の不一致やエラーの可能性を減らします。

デザインシステムの主な目的は、共有言語とツールキットを提供することで、デザイナーと開発者の間のコラボレーションと生産性を向上させることです。事前定義された一連の要素を使用することで、チームはより効率的に作業し、冗長な作業を減らし、維持と拡張が容易な高品質の設計を作成できます。さらに、デザインシステムは、企業のブランディングとビジュアルアイデンティティがすべてのタッチポイントとプラットフォームで一貫していることを保証するのに役立ちます。

以下は、デザイン業界で勢いを増し、デザイナーや開発者によって広く使用されているいくつかの一般的なデザインシステムです。

1. Google — マテリアルデザインシステム

Google マテリアルデザインシステムは、直感的で応答性の高いユーザーインターフェースを作成するための一連のガイドライン、コンポーネント、およびツールを提供する包括的なデザインシステムです。マテリアルデザインは 2014 年に Google によって導入されました。これはマテリアルデザインの原則に基づいており、影と光を使用して奥行きと階層の感覚、大胆なタイポグラフィ、鮮やかなカラーパレットを作成することを重視しています。

Material Design System は、UI コンポーネント、アイコン、タイポグラフィなど、さまざまなプラットフォームやデバイス間で一貫した幅広いリソースをデザイナーや開発者に提供します。また、設計プロセスにおける一貫性、スケーラビリティ、および使いやすさを確保するのに役立つ設計ガイドラインと原則も含まれています。

Google マテリアルデザインシステムの主な機能は次のとおりです。

ボタン、カード、ダイアログボックス、ナビゲーションバーなど、使いやすく実装しやすい、カスタマイズ可能な幅広い UI コンポーネント。
さまざまな製品やプラットフォーム間での一貫性と使いやすさを確保するのに役立つ設計ガイドラインと原則の包括的なセット。
デザイナーや開発者が高品質のデザインを迅速かつ効率的に作成するのに役立つ、Sketch プラグインやデザインテンプレートなどの強力なツールとリソースのセット。
アクセシビリティと包括性に焦点を当て、障害のある人を含むすべての人が使用できるユーザーインターフェイスを設計するためのガイドラインを示します。

ウェブサイト—https://m3.material.io/

2. アトラシアンデザインシステム

Atlassian Design System (ADS) は、チームがプロジェクトを共同作業および管理するためのツールを作成するソフトウェア会社である Atlassian によって開発されたデザインシステムです。ADS は、アトラシアンのすべての製品とサービスにわたって一貫したまとまりのあるエクスペリエンスを提供するように設計されており、カスタマイズと柔軟性も可能にします。

ADS は、UI コンポーネント、デザインガイドライン、アクセシビリティ標準など、デザイナーと開発者向けのさまざまなリソースを提供します。また、シンプルさ、明快さ、使いやすさを重視したデザイン言語も含まれています。

Atlassian Design System の主な機能には次のようなものがあります。

ボタン、フォーム、ナビゲーションバーなど、アトラシアンのすべての製品とサービスで一貫した UI コンポーネントの包括的なセット。
さまざまなプラットフォームやデバイス間での一貫性と使いやすさを確保するのに役立つガイドラインと原則を設計します。
アトラシアンの製品とサービスが障害や機能障害に関係なく、すべての人が使用できるようにするためのアクセシビリティ基準とガイドライン。
カスタマイズ性と柔軟性により、チームは特定のニーズと要件に合わせて設計システムを調整できます。
デザイナーと開発者がより効果的に連携するのに役立つリソースとツールを使用して、コラボレーションとチームワークに重点を置いています。

Webサイト -https://atlassian.design/

3. Microsoft — Fluent Design System

Fluent Design System は、Microsoft が開発したデザインシステムであり、Microsoft の製品とサービス全体で、没入型で魅力的で直感的なユーザーエクスペリエンスを作成するためのガイドライン、コンポーネント、およびツールの包括的なセットを提供します。Fluent Design System は、光、奥行き、動き、素材、スケールの 5 つの重要なデザイン原則に基づいています。

Fluent Design System の主な機能には次のようなものがあります。

ボタン、カード、ナビゲーションバーなど、Microsoft のすべての製品とサービスで一貫した UI コンポーネントの包括的なセット。
光、奥行き、モーション、マテリアル、スケールに焦点を当て、奥行きと階層の感覚を生み出し、モーションとアニメーションを通じて要素に命を吹き込みます。
カスタマイズと柔軟性を可能にし、チームが特定のニーズと要件を満たす設計を作成できるようにする、柔軟で適応性のある設計システム。
アクセシビリティと包括性に焦点を当て、障害のある人を含むすべての人が使用できるユーザーインターフェイスを設計するためのガイドラインを示します。
デザイナーや開発者が高品質のデザインを迅速かつ効率的に作成するのに役立つ、デザインテンプレート、カラーパレット、タイポグラフィなど、さまざまなデザインツールとリソース。

ウェブサイト—https://www.microsoft.com/design/fluent/#/

4. Shopify — ポラリスデザインシステム

Shopify Polaris は、オンラインストア向けのツールを提供する e コマース企業である Shopify が開発したデザインシステムです。Polaris は、カスタマイズと柔軟性を可能にしながら、Shopify のすべての製品とサービスにわたって一貫したまとまりのあるエクスペリエンスを提供するように設計されています。

Polaris は、デザイナーや開発者向けに、UI コンポーネント、デザインガイドライン、アクセシビリティ標準など、さまざまなリソースを提供しています。また、シンプルさ、明快さ、使いやすさを重視したデザイン言語も含まれています。

Shopify Polaris の主な機能には次のようなものがあります。

ボタン、フォーム、ナビゲーションバーなど、すべてのShopify製品とサービスで一貫したUIコンポーネントの包括的なセット。
さまざまなプラットフォームやデバイス間での一貫性と使いやすさを確保するのに役立つガイドラインと原則を設計します。
Shopifyの製品とサービスが障害や障害に関係なく、すべての人が確実に使用できるようにするためのアクセシビリティ基準とガイドライン。
カスタマイズ性と柔軟性により、チームは特定のニーズと要件に合わせて設計システムを調整できます。
デザイナーと開発者がより効果的に連携するのに役立つリソースとツールを使用して、コラボレーションとチームワークに重点を置いています。

ウェブサイト—https://polaris.shopify.com/

5. アリ設計システム

Ant Design は、アリババグループの子会社である Ant Group が開発したデザインシステムです。これは、デザイナーや開発者向けに幅広い UI コンポーネント、デザインガイドライン、およびツールを提供する、包括的で用途の広いデザインシステムです。

Ant Design は、シンプルさ、一貫性、および効率性の原則に基づいており、チームが高品質の設計を迅速かつ簡単に作成できるように設計されています。ボタン、フォーム、ナビゲーションバーなどのさまざまな UI コンポーネントと、さまざまなプラットフォームやデバイス間での一貫性と使いやすさを確保するための設計ガイドラインと原則が含まれています。

Ant Design の主な機能には次のようなものがあります。

使いやすくカスタマイズ可能な UI コンポーネントの包括的なセット。
障害や障害に関係なく、すべての人が Ant Design を使用できるようにするのに役立つ設計ガイドラインと原則を使用して、アクセシビリティに焦点を当てています。
さまざまなプラットフォームやデバイスで動作する UI コンポーネントを使用した、クロスプラットフォームの互換性。
Sketch ファイル、アイコンセット、コードスニペットなど、さまざまなデザインツールとリソース。
デザインシステムに貢献し、時間の経過とともに改善を支援するデザイナーと開発者の活発で支援的なコミュニティです。

Webサイト -https://ant.design/

6. IBM — カーボンデザインシステム

IBM Carbon Design System は、幅広い製品とサービスを提供する多国籍テクノロジー企業である IBM が開発した設計システムです。Carbon は、IBM のすべての製品とサービスにわたって一貫したスケーラブルなユーザーエクスペリエンスを提供するように設計されており、カスタマイズと柔軟性も可能にします。

Carbon は、デザイナーと開発者向けに、UI コンポーネント、デザインガイドライン、アクセシビリティ標準、開発ツールなど、さまざまなリソースを提供しています。また、シンプルさ、明快さ、使いやすさを重視したデザイン言語も含まれています。

IBM Carbon Design System の主な機能には、次のようなものがあります。

ボタン、フォーム、およびナビゲーション・バーを含む、すべての IBM 製品およびサービスで一貫した UI コンポーネントの包括的なセット。
さまざまなプラットフォームやデバイス間での一貫性と使いやすさを確保するのに役立つガイドラインと原則を設計します。
IBM の製品およびサービスが障害や機能障害に関係なく、すべての人が確実に使用できるようにするのに役立つアクセシビリティーの基準およびガイドライン。
カスタマイズ性と柔軟性により、チームは特定のニーズと要件に合わせて設計システムを調整できます。
デザイナーと開発者がより効果的に連携するのに役立つリソースとツールを使用して、コラボレーションとチームワークに重点を置いています。

ウェブサイト—https://carbondesignsystem.com/

7. AWS増幅

AWS Amplify は、企業や組織に幅広いサービスを提供するクラウドコンピューティングプラットフォームであるアマゾンウェブサービス (AWS) が開発した設計システムおよび開発プラットフォームです。AWS Amplify は、開発者がスケーラブルでクラウドを利用したアプリケーションとサービスを迅速かつ効率的に構築できるように設計されています。

AWS Amplify には、ライブラリ、UI コンポーネント、開発フレームワークなど、開発者向けのさまざまなリソースとツールが含まれています。また、認証、ストレージ、分析など、クラウドを利用したアプリケーションの構築と展開のプロセスを簡素化する一連の開発ツールとサービスも提供します。

AWS Amplify の主な機能には次のようなものがあります。

さまざまなプラットフォームやデバイス向けのスケーラブルで応答性の高いアプリケーションを構築するために使用できるライブラリと UI コンポーネントの包括的なセット。
認証、ストレージ、分析など、クラウドを利用したアプリケーションの構築と展開のプロセスを簡素化する開発フレームワークとツール。
セキュリティとコンプライアンスに重点を置き、アプリケーションが安全で規制要件を満たしていることを保証するのに役立つリソースとツールを使用します。
幅広いカスタマイズオプションにより、開発者は特定のニーズや要件に合わせて設計システムを調整できます。
Amazon S3、Amazon Cognito、Amazon CloudFront などの他の AWS サービスとの統合により、開発者はこれらのサービスをアプリケーションに簡単に組み込むことができます。

ウェブサイト—https://aws.amazon.com/amplify/

8.アウディデザインシステム

Audi Design System は、ドイツの自動車メーカーである Audi によって開発されたデザイン言語およびシステムであり、製品とデジタルプラットフォーム全体で一貫したまとまりのあるビジュアルアイデンティティを提供します。デザインシステムには、タイポグラフィ、色、レイアウト、アイコンなどのさまざまなデザイン要素と、ユーザーインターフェイスとエクスペリエンスをデザインするためのガイドラインが含まれています。

Audi Design System は、革新性、精度、進歩性などの会社のコアバリューを反映し、プレミアムで野心的なブランドイメージを作成するように設計されています。このシステムは、Audi の車の設計だけでなく、Web サイト、アプリ、車載エンターテイメントやナビゲーションシステムのインターフェースなどのデジタル製品の設計にも使用されています。

Audi Design System の主な機能には次のようなものがあります。

シンプルさとミニマリズムを重視し、すっきりとしたライン、明確なタイポグラフィ、限定されたカラーパレットを備えています。
すべての製品とプラットフォームで統一された一貫したビジュアル言語を使用して、統一されたブランドアイデンティティを作成します。
ユーザーエクスペリエンスを重視し、直感的で使いやすいインターフェイスとインタラクションを設計するためのガイドラインを示します。
伝統と革新のバランス。アウディのクラフツマンシップとエンジニアリングの卓越性の歴史を反映しつつ、新しいテクノロジーとデザインのトレンドも取り入れています。

ウェブサイト—https://www.audi.com/ci/en/guides/user-interface/introduction.html

9. Spotify — バックステージデザインシステム

Spotify の Backstage Design System は、人気のある音楽ストリーミングプラットフォームによって作成されたデザインシステムであり、社内の開発者ポータルと関連ツールに統一されたまとまりのあるデザイン言語を提供します。Backstage Design System には、タイポグラフィ、色、レイアウト、図像のガイドライン、およびユーザーインターフェイスとエクスペリエンスのデザインのガイドラインが含まれています。

Backstage Design System は、Spotify の内部開発者に一貫した直感的なエクスペリエンスを提供するように設計されており、プラットフォームの構築と維持に必要なツールとリソースに簡単にアクセスして使用できます。このシステムは、開発者ポータルを管理するために Spotify によって開発されたオープンソースプラットフォームである Backstage と呼ばれるフレームワークの上に構築されています。

Backstage Design System の主な機能には次のようなものがあります。

モジュール性と柔軟性に重点を置き、設計システムのカスタマイズと拡張を容易にします。
アクセシビリティとユーザビリティを重視し、あらゆるスキルレベルの開発者が簡単にナビゲートして使用できるインターフェイスを設計するためのガイドラインを示します。
Backstage のすべてのコンポーネントとツールで統一された一貫性のあるビジュアル言語。
Backstage フレームワークと設計システムをより広い開発者コミュニティが利用できるようにすることで、オープンソースの開発とコラボレーションへのコミットメント。

ウェブサイト—https://backstage.io/docs/dls/design/

10. Uber — ベースデザインシステム

Uber の Base Design System は、ライドシェアリングの巨人が開発した包括的なデザインシステムで、製品とプラットフォーム全体で統一されたスケーラブルなデザイン言語を提供します。Base Design System には、タイポグラフィ、色、レイアウト、図像のガイドライン、およびユーザーインターフェイスとエクスペリエンスのデザインのガイドラインが含まれています。

Base Design System は、Uber の顧客、ドライバー、その他のユーザーに一貫した直感的なエクスペリエンスを提供するように設計されていると同時に、さまざまな製品やユースケースに適応できる柔軟でモジュール化された設計言語も提供します。このシステムは、シンプルさ、明快さ、使いやすさを重視する Uber の設計原則に基づいて構築されています。

Base Design System の主な機能には次のようなものがあります。

モジュール性とスケーラビリティに重点を置き、設計システムを簡単にカスタマイズおよび拡張して、新しい製品やユースケースに対応できるようにします。
アクセシビリティと包括性を重視し、あらゆるバックグラウンドと能力を持つユーザーにとって使いやすくナビゲートしやすいインターフェイスを設計するためのガイドラインを示します。
すべての Uber 製品とプラットフォームで統一された一貫性のある視覚言語を使用して、認識可能で記憶に残るブランドアイデンティティを提供します。
ユーザーからのフィードバックとデータに基づいたデザインシステムの定期的な更新と改善による、継続的な改善と反復への取り組み。

ウェブサイト—https://baseweb.design/

最もよく使われているデザインシステムのいくつかを忘れてしまった場合は、ここであなたのコメントを見てそれらについて話し合うことができれば幸いです。

2023 年のデザイン システム トップ 10

1. Google — マテリアル デザイン システム

2. アトラシアン デザイン システム