目次
デザインシステムとは
デザインシステムとは、デザインに関するあらゆる情報を構造化したものです。
デザインの目的・原則やデザインの基準を記したガイドライン、実装に落とし込むためのUIパターンやデザイントークンなど様々なものが含まれます。よく耳にするスタイルガイドやコンポーネントライブラリも、デザインシステムを形成するレイヤーの一部です。
このデザインシステムを用いることで、組織内でのデザインの一貫性を高め、再利用可能なコンポーネントを通じて効率的な作業フローを促進します。これにより、デザインと開発のプロセスをシームレスに連携させ、製品開発の時間とコストを大幅に削減することが可能となります。また、デザインシステムはユーザー体験の向上にも寄与します。デザインの一貫性が保たれることで、ユーザーはサービスの使用において一貫した体験を得られます。これによりユーザー満足度が向上し、ユーザーのロイヤリティとエンゲージメントを高めることにも繋がります。
デザインシステムとは、単にデザインの要素を整理するためのツールではなく、ブランドの一貫性を保ち、チームの生産性を向上させ、顧客体験を高めるための包括的な戦略とも言えるでしょう。
海外のデザインシステム 5選
文化や言語の違う多様な人が１つのプロダクト開発に携わるため、海外のデザインシステムでは、情報量が豊富で規模の大きいものが多いです。合わせて、専任の運営チームがいたり、デザインシステムを扱い慣れてる人が多いといったことも起因しているようです。規模の大きいプロダクト開発に携わる場合に、参考にしてみると良いでしょう。
Atlassian Design System
公開サイト：https://atlassian.design/
Figmaファイル：https://www.figma.com/@atlassian
Atlassian Design SystemはAtlassian社によって開発されたデザインシステムで、比較的早期からデザインシステムの構築に投資しており、10年以上運用されております。19つの製品群に対応しうる包括性と耐久性を兼ね備えた、お手本となるようなデザインシステムです。
こんな時に使いたい
- エンジニア中心の組織でデザインシステムを設計する時
- 統一したブランドで、複数プロダクトを運用する時
Polaris
公開サイト：https://polaris.shopify.com/
Figmaファイル：https://www.figma.com/@shopify
PolarisはShopify社によって開発されたデザインシステムで、商売体験（マーチャントエクスペリエンス）を向上させるという思想のもとに設計されています。PolarisはShopify製品にはもちろん、Shopifyを使用してECやアプリなどを管理するデザイナーや開発者にも提供されております。
こんな時に使いたい
- Shopifyでアプリを作る時
- EC系のプロダクトを開発する時
garden
公開サイト：https://garden.zendesk.com/
Figmaファイル：https://www.figma.com/@zendesk
gardenはZendesk社によって開発されたデザインシステムで、その名の通り「庭園」をモチーフとしております。Zendeskというカスタマーサポートサービスを運営している主体だからこそか、ブランドトーンはマッピングを使用して丁寧に説明されており、非常に読み応えがあります。
こんな時に使いたい
- UXライティングを参考にしたい時
- ブランドの世界観を統一するデザインシステムを設計したい時
Mozilla Protocol
公開サイト：https://protocol.mozilla.org/
Mozilla ProtocolはMozilla社によって開発されたデザインシステムで、Mozillaという旧ネットスケープ社が開発した製品群ブランドと、FireFoxというウェブブラウザアプリケーションの主に2ブランドに使用されております。Mozilla社は非営利団体でありながら、これだけのデザインシステムを運用していることに驚かされます。
こんな時に使いたい
- 開発中心のデザインシステムを設計したい時
- 細かく定義されたコンポーネント管理をしたい時
Backpack
公開サイト：https://backpack.github.io/
BackpackはSkyscannerによって開発されたデザインシステムです。アイコンセットは、飛行機の機体や搭乗ゲートを表すものがあったりと、個性が出ていて見ていると旅行に行きたくなります。
こんな時に使いたい
- アイコンに凝ったデザインシステムを設計したい時
- リアルとオンライン、双方に対応できるデザインシステムを設計したい時
国内のデザインシステム 5選
国内のデザインシステムは日本語での説明や日本語フォントの扱いの記載など、日本語でデザインシステムを構築する際に参考にできるものが数多くあります。全体的な数としては、海外に比べて少ないですが、国内向けのサービスを開発する際に参考にしてみると良いでしょう。
Spindle
公開サイト：https://spindle.ameba.design/
Spindleは株式会社CyberAgentによって開発されたAmebaブランドのためのデザインシステムです。Amebaチームには100年愛されるメディアを作るという思想が根本にあり、今使っているユーザーが年齢を重ねたとしても使いやすいようアクセシビリティ設計がされております。当時デザイナー間でも話題になったコントラスト比の調整プロセスの記事は、デジタルプロダクトを扱うデザイナーは必見です。
こんな時に使いたい
- アクセシビリティを考慮したデザインシステムを設計したい時
- 既存のプロダクトからのリニューアルの過程を参考にしたい時
SmartHR Design System
公開サイト：https://smarthr.design/
Figmaファイル：https://www.figma.com/@smarthr
SmartHR Design SystemはSmartHR社によって開発されたデザインシステムです。「だれでも・効率よく・迷わずに。」をコンセプトに、技術者以外のステークホルダーにも分かりやすいように、平易な言葉を使って丁寧に説明されているのが特徴です。
こんな時に使いたい
- コミュニケーションデザインを参考にしたい時
- toB SaaSのデザインシステムを設計したい時
デジタル庁デザインシステム
公開サイト：https://www.digital.go.jp/policies/servicedesign/designsystem/
Figmaファイル：https://www.figma.com/@jpdigitalagency
デジタル庁デザインシステムは、デジタル庁デザインユニットによって開発されたデザインシステムで、2022年11月に一般公開され、基本的に誰でも閲覧が可能となっております。省庁のウェブサイトやウェブサービスへの適用を前提として構築されているものではありますが、地方自治体でも自由に参照・活用することができます。
こんな時に使いたい
- アクセシビリティを考慮したデザインシステムを設計したい時
- 行政関連サービスの開発する時
D-EXPERIENCE
公開サイト：https://ux.system.denso.info/
D-EXPERIENCEはDENSO社によって開発されたデザインシステムです。モビリティ事業におけるエンドユーザーの体験を最大化させることを目的として設計されております。自動運転技術など先進的なテクノロジーが普及した未来を想定して設計されており、デザインシステムのサイト自体にも未来を感じさせるような意匠が施されております。
こんな時に使いたい
- 体験設計に凝ったデザインシステムを設計したい時
- リアルとオンライン、双方に対応できるデザインシステムを設計したい時
SMBCデザインシステム
記事：https://note.com/smbc_design/n/ncbc40571e468
2021年にグッドデザイン賞を受賞した、SMBCチームのデザインシステムです。データの一般公開はされていませんが、国内で大手金融機関が全社的にデザインシステムの運用を始めた事例として取り上げさせていただきました。
こんな時に使いたい
- 大企業のDXを行う時
- 制作・運用プロセスを詳しく知りたい時
プロダクトや組織にあったそれぞれの形がある
デザインシステムはUIやグラフィックに比べて参考例が少ないため、今回は他メディアではあまり紹介されていないようなデザインシステムを意識的にピックしてご紹介させていただきました。それぞれのプロダクトや組織に合わせたデザインシステムのケーススタディをインプットすることで、自社のデザインシステムの構築や運用にぜひ生かしてください。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
