グッドパッチエンジニアが選ぶ、推しデザインシステム10選
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。
僕の入社の経緯や業務内容についてはこちらからご覧いただけます！
今回は僕が普段から推しているデザインシステムを10種類集めたので紹介します！
高品質なデザインシステムを探している方のみならず、デザイン原則を構築する必要がある方や、ガイドラインをまとめる必要がある方などの参考になれば幸いです。
目次
デザインシステムとは
デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。
一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。
しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。
古い物ですと1975年に発行されたNASAのブランドスタイルガイド（1975 NASA Graphics Standards Manual）が存在します。
今日では一般的な概念として普及し、様々なデザインの現場にて取り入れられています。
今回紹介するデザインシステムは、以下の観点を踏まえながら選出した物になります。
- UIコンポーネントとそのプロパティが豊富であること
- コンポーネントだけではなく、ブランディング・文章・イラスト・写真などに関する原則が含まれていること
- デザインシステムを構築する目的及び、一つ一つのガイドラインを制定する目的が明確であること
- 組織・チーム・プロダクトの成長と共にアップデートが行われていること
1. Primer (GitHub)
https://primer.style/
https://www.figma.com/@primer
トップバッターは我らがGitHub謹製のデザインシステム「Primer」です。 ネイティブアプリケーション用とWebアプリケーション用のガイドラインがそれぞれ分岐している構成となっています。iOS向けガイドラインは独自のガイドラインを設けず、「iOS・iPadOS向けアプリケーションはHIGに準拠して作っています。参考にしたAppleが提供しているソースはコチラです。あとはWWDCの動画を参考にしてください！」という構成になってます。それでいいんだよな。
Webアプリケーション向けのガイドラインはコンポーネントの網羅性が高いことも魅力の一つですが、アクセシビリティ対応がWCAG 2.0のレベルAAに準拠している他、ダークテーマに対応していることや、カラーパレットが綺麗に設計されていることも素晴らしい点の一つです。
こんなときに使いたい！
- ダークテーマのUIを作ることになったとき
- カラーパレットの設計をするとき
2. Polaris (Shopify)
https://polaris.shopify.com/
https://www.figma.com/@shopify
「Polaris」はShopifyが構築したデザインシステムです。Polarisの存在によって、数多ものShopify加盟店が素晴らしいUIのECサイトを作ることに寄与しているであろうと思います。Shopifyほどデザインシステムの恩恵を受けている企業はそうそうないのでは？
Polarisはコンポーネントのプロパティに関するドキュメントが丁寧に記述されているので、UIコンポーネントにプロパティを定義する際の参考にしやすい点が嬉しいですね。また、Shopifyによるユーザーへのコミュニケーション方針を表した「Voice and tone」や、インターフェイス上の言葉の扱い方（“OK”と“accept”ってどっちを使うんだっけ？等）について、DoとDon’tの事例付きで紹介されている点も分かりやすくて素敵です。
また、Polarisはインタフェースの表現方法のみならず、Shopifyの体験価値やイラストデザインの方針などについてもドキュメントが用意されており、「デザインシステムってコンポーネントリストのことじゃないんだよ！」ってことを示す資料としても優れています。
こんなときに使いたい！
- デザインシステムの構成を参考にしたいとき
- コンポーネントに必要なプロパティを確認したいとき
3. Audi CI
https://www.audi.com/ci/en/renewed-brand.html
AudiはCorporate Identity（CI）を公開しています。デザインシステムとは命名されていませんが、CIの内容はインターフェイスについても言及されており、デザインシステムとしても機能する物となっています。
CIというだけあって、ロゴ・ブランドの原則・写真・イラスト・レイアウト構成など、グラフィック表現のガイドラインがとても充実しています。ブランディング観点を包括したシステムがここまで完成されているというのは数少ない事例だと思います。
個人的には、AudiのCMでおなじみのコーポレートサウンドもCIに組み込まれている点は物凄くワクワクしてテンションが上がりました。
UIについてもCI内にコンポーネントの用法やソースコードが定義されている他、ReactとStorybookで構築されたAudi React Libraryも用意されているので、実装時の参考資料としても機能するのが嬉しいですね。
こんなときに使いたい！
- デザインシステムにBX観点を充実させたいとき
- 工業製品（組み込み系GUI）のデザインを作るとき
4. Atlassian Design System
https://atlassian.design/
https://figma.com/@atlassian
Jira、Confluence、Bitbucketでお馴染みのAtlassianもデザインシステムを作成しています。
Atlassianのデザインシステムは内容のバランスが非常に良く、ブランディングデザイン・ビジュアルデザイン・インターフェイスデザイン・コンテンツ設計など、必要な要素が適切に揃っている他、どれもが高いクオリティで提供されています。
デザインシステムを作らないといけないけど、どんな要素が必要なんだっけ？といったシチュエーションで役立つこと間違いなしです！
また、ガイドラインは文章を羅列するだけではなく適切に図表が挿入されているため、とてもインプットしやすい内容となっているのもありがたいですね。
こんなときに使いたい！
- デザインシステムの構成に迷っているとき
- 複数のプロダクトを横断するデザイン原則を作るとき
5. Ant Design
https://ant.design/
https://www.figma.com/community/file/831698976089873405
「Ant Design」は、アリババグループの関連会社であり、決済プラットフォームのAlipayやMMFの余額宝といったサービスを手掛けるアントグループが開発しているデザインシステムです。
Ant Designはインターフェイスのデザインに特化したデザインシステムとなっています。内容は「ガイドライン」と「コンポーネント」の2つのセクションで構成されており、いずれも高い完成度を誇っています。 Alibaba、Tencent、Baiduなどの名だたる企業がエンタープライズ製品に使用している背景もあり、その品質は折り紙付きと言えます。
用意されているコンポーネント郡は網羅性が高く、一つ一つのコンポーネントも汎用的に使えるように設計されています。
デザインシステムの設計に携わるデザイナー・エンジニアが、必ず目を通すべきデザインシステムの一つと言っても過言ではないでしょう。
こんなときに使いたい！
- コンポーネントの実装をするとき
- 抽象度の高いデザインシステムを作るとき
6. Inhouse (Pepabo)
https://design.pepabo.com/inhouse/
「Inhouse」はGMOペパボのデザインシステムです。
Inhouseは様々なサービスに展開するために構築されたデザインシステムですが、その特徴は各サービス毎のブランドイメージを壊さないための仕組み「Flavor」が備えられている点です。
Flavorは上書き可能なデザイントークンの集合体を意味します。Inhouseをサービスで利用する際にはFlavorのデザイントークンを上書きすることで、ブランドイメージを保ったインターフェイスを構築できるように設計されています。 デザイントークンによって拡張性の高いインターフェイスを実現できる仕組みが用意されている点にとても魅力を感じました。
また、Inhouseはタイポグラフィファーストであることを重視し、バーティカルリズムを維持するためのタイポグラフィ設計や余白設計を行っていることも非常に興味深い点です。
Webデザインの原理原則に対して非常に誠実に構築されており、とても好感が持てるデザインシステムの一つです。
こんなときに使いたい！
- デザイントークンを活用したデザインシステムを作るとき
- 複数のプロダクトを横断するデザイン原則を作るとき
7. Pajamas (GitLab)
https://design.gitlab.com/
https://www.figma.com/@GitLab
「Pajamas」はGitのリポジトリ管理サービスであるGitLabのデザインシステムです。
Pajamasも例に漏れず、体験設計・インターフェイスのデザイン指針・実装成果物までが一貫して網羅されているデザインシステムです。
その中でも特に興味深いのは「Objects」というセクションにて、オブジェクトとアクションの関係を図示した「概念モデル」が掲載されている点です。デザインシステムの中で概念モデルが定義されている例は非常に稀です。
概念モデルを活用したオブジェクトの整理とUIデザインのワークフローが組織文化として定着しているからこそ、デザインシステムにそのフローが掲載されているのではと考察できます。組織のデザインフローやカルチャーが垣間見えるという点で、非常に面白いデザインシステムではないでしょうか。
また、アクセシビリティ対応に関するステートメントや独自の試験基準を設けており、全体的にとても誠実で素敵なデザインシステムとなっています。
こんなときに使いたい！
- デザインシステムにデザインプロセスを掲載するとき
8. Brand Estonia
「Brand Estonia」はエストニア政府が展開するデザインシステムです。エストニアは電子国家とも呼ばれるように、様々な公共サービスをオンラインを通して受けられるように整備されています。多くの公共サービスのデザインを支えるBrand Estoniaは、国民の生活に根ざしたデザインシステムと言えるでしょう。
最初のセクションが「messages」という、エストニアが大切にしている指針やその物語をまとめた要素から始まることからも、国家としてのデザインシステムの重要度を読み解くことができます。
こちらのデザインシステムはデジタルプロダクトのみならず、カンファレンス・紙面・映像作品・立体物などの媒体に使用されています。幅広い展開事例があることから、複数媒体のためのデザインシステムとしても非常に参考になります。
各国の政府が主導してデザインシステムを構築した事例は存在しますが、その多くはデジタルプロダクトのために構築されています。 このような背景からも、媒体を問わないクリエイティブに力を注いでいるデザインシステムとして「Brand Estonia」は貴重な参考事例になるでしょう。
こんなときに使いたい！
- 公的機関のデザインシステムを構築するとき
- 様々な媒体のためのデザインシステムが必要なとき
9. Spectrum (Adobe)
続いてはAdobeが構築するデザインシステム「Spectrum」です。
Spectrumはデザイントークンをベースに構築されたデザインシステムとして非常に有名なのではないでしょうか。デザイントークンとは何かについて紹介しているパートはお世話になった人も多いことでしょう。
実際にSpectrum上のカラーやタイポグラフィはデザイントークンを用いて堅牢に作られているため、デザイントークンを用いてインターフェイスを構築する必要がある場合は真っ先に参考にしたい事例です。
また、SpectrumはAdobeが構築しているという背景もあり、コンポーネントのUIデザインはAdobe XDで管理されています。デザインデータはダウンロードして参照できるので、XDでコンポーネントを管理する手法をキャッチアップする用途としても活用できます。
こんなときに使いたい！
- デザイントークンの活用方法を知りたいとき
10. Carbon (IBM)
https://www.carbondesignsystem.com/
「Carbon」はIBMが構築したデザインシステムです。Carbonもガイドラインやコンポーネントなどの網羅性が非常に高いデザインシステムとなっています。 デザインシステムを構築した意義や、どのような組織で運用されているかについて詳しく紹介されており、Carbonに宿した哲学や思想を存分に体感できる点が魅力です。
その中でも特に紹介したいのはアクセシビリティの観点です。Carbonでは以下のようなアクセシビリティ対応が行われています。
- 全てのコンポーネントに対して個別にアクセシビリティへの対応方針を定義していること
- アクセシビリティの試験結果を掲載していること
- WCAGのAA基準を達成していること
- アクセシビリティへ取り組む意義やどのようなユーザーに向けて取り組んでいるかについて紹介されていること
いずれも丁寧かつ誠実な対応が行われており、アクセシビリティ対応に取り組むのであれば必ず目を透したいデザインシステムです。
こんなときに使いたい！
- アクセシビリティへの対応を実施するとき
おわりに
以上、僕の推しデザインシステム10選をご紹介しました。いかがでしたか？みなさんの好きなデザインシステムは入っていたでしょうか。
デザインシステムは「組織のカルチャー」としても扱われるくらい、様々な技能や文化を結集したアウトプットです。
また、組織の成長に合わせて拡張することを求められるアウトプットでもあります。
この記事によって、みなさんがデザインシステム並びにデザインを構築するための観点が増やせたなら幸いです！
デザインシステムの役割や、作成する意義についてはこちらの記事にてご紹介しております。もしよろしければ合わせてどうぞ！
