２０２４年のデザインシステム８選

デザインシステムとは、製品の一貫性のある、製品に合ったインターフェースを構築するのに使われるコンポーネント、ルール、スタイルガイド、ドキュメントのセットです。大抵のブランドでは独自のデザインシステムが構築されています。本記事では、その中でも多くを学べる最も広く使われているデザインシステムを８つ挙げてみました。ちなみにそのデザインシステムやその他のデザインシステムは、Adele と呼ばれるデザインシステムレポジトリで見つけることができます。

UXPin Mergeでデザインシステムの導入とガバナンスを強化しませんか。デザインシステムからインタラクティブコンポーネントをすべてエディタに取り込み、完全にインタラクティブなプロトタイプを作成して、デザインの一貫性を保ちましょう。UXPin Merge の詳細はこちら。

デザインシステムとは

デザインシステムとは、プロダクトチームがアプリ、Webサイト、EC ストア、その他開発が必要な UI デザインのユーザーインターフェースを構築するのに使うデザインリソース全部の集合体です。

デザインシステムはデザイナーのためだけのものではありません。デザインシステムには、必要なフロントエンドコードとドキュメント、デザインガイドライン、関連プラグイン、デザインパターン、スタイルガイド、再利用可能なコンポーネント、ルールとガイドライン、その他 Web デザインと開発のワークフローに有用な全ビルディングブロックなど、コードスニペットと開発リソースが全部含まれていることから、デベロッパー向けでもあります。

そしてこのようなデザインシステムは、オンラインの Web サイトとしてホストされ、一般に公開されることもあれば（オープンソースのデザインシステム）、ブランド内部で使われることもあります。

デザインシステムは、適用可能な手順および例、製品デザインとコーディングのガイドライン、そして UI キットの一部がすべて同時に含まれた貴重なドキュメントとして機能する膨大なデータライブラリであると考えることができますね。

このように、デザインシステムに関連する製品デザインのコンセプトはたくさんあります。デザインシステムとパターンライブラリ、コンポーネントライブラリ、UIキットの違いを知りたい方は、以前の記事に書かれています：デザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違い

企業が独自のデザインシステムを構築する理由

Shopify、Google、AirBnB などの企業は、以下のような理由から独自のデザインシステムを構築しています：

一貫性 – デザインシステムは、デザインと開発のための「信頼できる唯一の情報源（Single source of truth）」として機能するから。
透明性 – デベロッパーはデザイン上の決定を解釈することなくデザインシステムのコンポーネントを直接使うことができるから。
スケール – デザイナーはプロトタイプをより速く構築してデベロッパーのハンドオフを効率化できるから。
再利用性 – デザインシステムで、組織内で共有できる一貫したコンポーネントを持つプロトタイプの作成が促進されるから。
明確性 – デザインシステムで、デザイン上の決定が共有された知識に基づいていることが保証され、それでチームメンバーは理解しやすく、効果的に貢献できるようになるから。

デザインシステムから学ぶもの

デザインシステムの大半は、むしろ一般的なセットアップのパターンに従っています。

そして多くの場合、システムには、デザイン、コード、言語、コンポーネントなど、メインカテゴリを含む主要なナビゲーションが備わっています

このような主要なカテゴリにはそれぞれ、より詳細に説明するサブカテゴリがあり、アトミックデザインの構造が最大限に活用されています。例えば、タイポグラフィ、カラー、フォーム、バナーなどがありますね。

この直感的なナビゲーションに従えば、デザイン面でのベストプラクティスに関する貴重な情報を得ることができるのです。

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

しっかりと構築されたデザインシステムがあれば、企業のチームワークは大幅に上がって意思決定プロセスは効率化されますが、デザインシステムを作ることで得られるのはそれだけではありません。

このようなガイドライン、要素、データの収集で、デザイナーとデベロッパー間のコミュニケーションの問題は最小化され、潜在的な UX デザインのバグや UX負債発生の余地が最小限に抑えられます。

さらに、このようなリファレンスが豊富なライブラリがあることで、プロトタイプから実際の製品になるまでに必要な時間が大幅に短縮されます。

例えば、PayPal では Fluent UI が Merge テクノロジーと共に使われており、それによって、インタラクティブなコンポーネントを UXPin ライブラリに組み込むことができます。そしてそうすることで、デザイナーもプロダクトチームのメンバーも、このコンポーネントに簡単にアクセスして、何度も繰り返しデザインすることができるようになります。

デザインシステムはデザイナーとデベロッパーの間の断絶を最小限に抑える素晴らしい方法ですが、それ単体ではまだ理想的なソリューションではありません。Merge 技術の革新のおかげで、製品チームのメンバーは同じツールを気軽に使って DesignOps のワークフロープロセスを改善することができるのです。これは、デベロッパーとデザイナーの両方が単一のソースから同じ UI 要素にアクセスして使えるということです。

デザインシステムの課題および解決策

企業がデザインシステムを作ろうとしても、特に要素、文書、コードをすべて管理する際に、特定の問題や一貫性の断絶が起こる可能性があります。

ジョンソン・エンド・ジョンソンの例から、デザインシステムの課題と解決策について学びましょう。ウェビナーでは、J&J チームのベストプラクティスが紹介されています。

１．Google の Material Design System

最も広く使われているデザインシステムのひとつに、Google の Material Design があります。Google は、デザインとデザイン原則について知っておくべきあらゆることについて、細部にまで踏み込んだ Material Design System を作成して公開しました。また、Material Design のコンポーネントは UXPin のライブラリの１つであるため、UXPin ユーザーであれば誰でも気軽に使うことができます。

このシステムのおかげで、ユーザーは、さまざまなデバイスやプラットフォーム、入力方法にわたって UI と UX を完全に統一する貴重な情報を得ることができます。

そして Material Designで、他のブランドや個人でも、アトミックデザイン、業界の革新、独自のブランド表現に対する独自のアプローチを構築するための強力な基盤を得ることができます。

Google の Material Design System の特徴

Google の Material Design System には、主に以下のような機能があります：

スターターキット
デザインソースのファイル
マテリアルのテーマ設定
レイアウト
タイポグラフィ
カラー
コンポーネント
モバイルガイドライン

Google の Material Design System は非常に成熟しているように見えます。多くのデザインガイドラインがありますが、開発で使われる UI コンポーネントに関する文書も含まれています。そのようなコンポーネントがデザインでも使えることをご存知ですか？UXPin Merge のテクノロジーで、デベロッパーのコンポーネントをデザインに活用しましょう。UXPin Merge へのアクセスのリクエストはこちら。

２．Apple のヒューマンインターフェースガイドライン（HIG）

Apple にはトップクラスのデザインシステムがあります。それは「ヒューマンインターフェースガイドライン（HIG）」と呼ばれるもので、Web デザインのエッセンスやパターンライブラリ、ダウンロード可能なテンプレートなど、膨大でかなり貴重なデザインシステムのリソースが提示されています。そして iOS の UI キットのライブラリも UXPin のアカウントで利用できます。

このシステムは、スティーブ・ジョブズの以下のデザイン原則に従っています：

緻密で細部にまでこだわる。
UX とユーザーとのつながりを重視する。
より大きなスケールで本当に重要なことに集中する。
具体的なデザイン言語と実践により、ユーザーの反応を引き出す。
初心者にも上級者にも親しみやすいハイテクを活用する。
とにかくシンプルに。

Apple のデザインシステムの特徴

Apple の HIG は、iOS、macOS、vOS、watchOS のデザイナーとデベロッパー両方のための実用的なリソース、ビジュアルガイドライン、スタイルガイドで構成されています。

その中には、以下の使用に関するデザインシステムのドキュメントも含まれています：

メニュー
ボタン
アイコンと画像
フィールドとラベル
ウィンドウとビュー
タッチバー
インジケータ
セレクタ
拡張機能
ビジュアルデザイン
ビジュアル・インデックス
アプリ・アーキテクチャ
システム機能
ユーザー・インタラクション
テーマ

３．Atlassian のデザインシステム

Atlassian のデザインシステムはオススメのひとつです。Atlassian のデザインシステムは、コラボレーションをシームレスかつ簡単にすることで、世界中のチームに価値ある支援を提供することに重点が置かれています。また、Atlassianのデザインガイドラインも UXPin のライブラリコレクションの一部です。

Atlassian のデザイン哲学は、チームと個々のチームメンバーの生産性と全体的な可能性を上げるためにデジタル体験を活用することであり、それは世界的に使用されているコラボレーションツールである Trello と Jira に完璧に反映されています。

とはいえ、Atlassian のデザインシステムにはアジャイルなプラクティスと、プロジェクト内の各ステップをすべて効率的に追跡する機能が備わっており、最終的には製品の提供と開発の点で貴重な結果をもたらします。

Atlassian のデザインシステムの特徴

Atlassian のデザインシステムには以下のようなものがあります：

UI コンポーネント
ブランド価値
UIキット
UIパターン
デザイントークン
イラストレーションライブラリ
コンテンツガイドライン

４．Uber のデザインシステム

Uber によれば、動きはチャンスを呼び起こすものであり、それが彼らのデザインシステムを構成する方法であるとのことです。

結局のところ、Uber のサービスは、配車サービス、他人同士の車両融通サービス、フードデリバリー、スクーターや電動自転車などのマイクロモビリティなど、移動が基本となっています。

サブブランドから社内ブランド、製品からプログラムに至るまで、この種のサービスが完璧に機能するには、Uber には世界と共有する効果的なデザインシステムが必要です。

Uber のデザインシステムの特徴

Uber のデザインシステムには主に以下のような機能があります：

ブランド・アーキテクチャー
コンポジション
声のトーン
モーション
イラストレーション
写真
アイコン
カラー
ロゴ
タイポグラフィ

５．Shopify の Design System Polaris

Shopify は、ブランドがビジネスを運営して成長させるのに必要なものをすべて１か所で提供するグローバルな ECプラットフォームです。

なので彼らのデザイン理念が、より良い、より利用しやすい商業体験を生み出すことに重点を置いているのも納得です。

Shopify の Polaris と呼ばれる公開デザインシステムには、会社の中核となる以下のような価値観が含まれています：

ユーザーを思いやり配慮する。
人々がやろうとすることを達成するための適切なツールを提供する。
ブランドイメージに合った最高レベルの職人技を堪能する。
早くて正確なソリューションを提供することで、手間を最小限に抑える
常にユーザーの信頼を築く
ユーザーに安心して使ってもらう

Polaris Design System には、Shopify のプラットフォーム用のデザインについてのわかりやすく実践的なスタイルガイドがあり、UI コンポーネント、ビジュアルエレメント、コンテンツ、デザイン言語を活用し、より良い UX と製品全般を生み出すための膨大な知識ベースが提供されています。

Shopify のデザインシステムの特徴

Shopify の Design System Polaris には、上記の実践に忠実に従った以下のような特徴があります：

データの可視化
アクセシビリティ
インタラクションのステート
カラー
タイポグラフィ
アイコン
イラスト
スペーシング
サウンド
リソース

６．IBM の Carbon Design System

IBMは、大企業の IT ニーズに応えることで、世界規模で事業を展開しています。

そしてそのサービスは、ビジネスコンサルティングや資金調達から、ソフトウェア開発、ITホスティング／管理、ソフトウェア・ツー・ハードウェア製品まで多岐にわたります。

また、IBM の核となる信念は、科学、理性、知性を活用することであり、人間の状態、社会、ブランドのいずれであれ、絶え間ない進歩を遂げることにあります。

IBM によれば、いいデザインというのは単なる要件ではなく、ユーザーに対する実際の責任であるとのことです。

IBM のデザインシステムの特徴

Carbon Design System は、そのの主な機能が発揮される場所であり、Adobe、Axure、Sketch のデザイナーやデベロッパー向けのツールやビジュアルリソースが以下のように多数提供されています：

データの可視化
パターン
コンポーネント
ガイドライン
チュートリアル

ちなみに UXPin のユーザーだと、自分のアカウントで Carbon から必要なものがすべて見つかります。

７．Mailchimp の Design System

Mailchimpは、メールマーケティングの第一線として有名だった時代から、メールだけにとどまらないオールインワンのマーケティングプラットフォームを提供するまでになりました。

Mailchimp は、ブランド・アイデンティティとイメージを忠実に守りながら、中小企業の成長を支援することを明確な目標としています。

Mailchimp のデザインシステムの特徴

それが、Mailchimp のデザインシステムと、クリエイティブな表現、より良いユーザー体験、最高の品質に焦点を当てたその主な機能を作り上げた多くの理由のひとつでもあります：

データの可視化
グリッドシステム
カラー
タイポグラフィ
コンポーネント

8．Salesforce の Lightning Design System

Salesforce は、統合されたクラウドベースの CRM（顧客関係管理）ソフトウェアを通じて、ユーザーに個別化された体験を提供するために、これまで以上の取り組みを行っています。

Salesforce の CRM は、マーケティング、商取引、IT、サービス、営業活動を改善することを目的としており、これでユーザーも同じように行うことができます。

彼らのデザイン哲学は、ハワイ語で意図的な家族を意味する「オハナ」に反映されており、以下の４つのコア・バリューが彼らの企業行動と全体的な文化を牽引しています：

イノベーション
平等
信頼
カスタマーサクセス

Salesforce のデザインシステムの特徴

Salesforce は、コンテンツ管理システムを使用するすべての人が以下のような主な機能を学んでメリットを享受できる、独自の Lightning Design System を発表しました：

デザインガイドライン
プラットフォーム
アクセシビリティ
コンポーネント (および多数のコンポーネント)

また、Lightning のコンポーネントは UXPin のアカウントライブラリにも含まれています。

デザインシステムを最大限に活用する：UXPin Mergeでの方法

Mergeの技術は、デザインチームと開発チームの間にコミュニケーションのギャップがある場合によく起こる一般的な課題に対する適切なソリューションとして誕生しました。開発フローでは、さまざまなUIコンポーネント、コーディング、ドキュメントの不一致が生じ、製品の効率やメンテナンスに影響を及ぼすことがあります。

Mergeはデザインシステムにある整理されたUI要素をデザインエディターにすべて取り込み、そこから必要なコンポーネントを使うことができます。

最初にイメージしていた仕上がりになるのはもちろんのこと、矛盾を避けることで時間とコストの節約になります。

Merge の技術は、コードコンポーネントによるデザイン、つまりコードコンポーネントをデザインに変換することに重点を置いています。そして、デザイナーは最終製品の視覚的な側面だけに基づいて（必要なインタラクションだけをごまかしながら）単純にプロトタイプを作成するのではなく、すでにコード化されたコンポーネントを使ってプロトタイプのイメージをデザインできます。

また、デザインチームは、すでにコード化されたコンポーネントを UXPin のエディタと同期させ、新しいデザインを作成するために必要なコンポーネントをドラッグ＆ドロップできるので、デザインチームと開発チームの間を行ったり来たりする必要はありません。

そして基本的に、デザイナーは偽のインタラクションを作ったり、追加したり、適切な色を探したりする必要はありません。

一方、デベロッパーはプロトタイプのプレビューを入手し、利用可能な本番環境に対応した要素で作業を続けることができます。

どのデザインシステムの例がお好みですか？

デザインシステムは、デザイン作業の最適化および改善や、チーム間の一貫性の促進を目的とした、大量のUI コンポーネントとガイドラインで構成されています。

ただし、デザインシステムのメンテナンスや実装が不十分であれば、そのシステムは、多くの不便でわかりにくいコードスニペット、ライブラリ、コンポーネントに過ぎないものになる可能性があります。

デザインシステムで、デザイナーはより複雑な UX の問題に対処できるようになりながら、チームメンバーの一貫性は速やかに促進されます。さらに、画期的なMerge のテクノロジーをミックスに加えることで、デザインシステム組織を次のレベルに引き上げることができます。詳しくは UXPin Merge のページを是非ご覧下さい。

Discover Merge