デザインシステムとは、組織内でデジタルプロダクトを開発する際の指針となる、標準やドキュメント、再利用可能なコンポーネントを包括的にまとめた仕組みのことである。フォントやカラー、間隔などのスタイルガイド、各種パターン、コード化されたコンポーネント、ブランドに関わる言語仕様などを一元的に管理し、デザイナーや開発者間の一貫性と効率を高める「単一の参照元（Single source of truth）」として機能する。
デザインシステムは、デザイン・エンジニアリング・プロダクトの各チーム間で共通認識を持つためのリファレンスとしても活用される。この共通認識によって、プロダクト開発におけるコミュニケーションとコラボレーションが円滑化し、最終的にユーザー体験の一貫性が高まる。
著名なデザインシステムにはLightning Design System（Salesforce）、Material Design（Google）、（IBM）、（Microsoft）などがあり、外部に公開されている。日本ではSmartHR Design Systemが知られている。
利点 デザインシステムを導入する利点としては以下が挙げられる。
ワークフローの効率化 デザインから実装へのプロセスがスムーズになり、開発スピードが向上する。 共通言語の確立 チーム内外の関係者が同じ言葉とルールを使うため、誤解や手戻りが減少する。 再利用可能なコンポーネント 一度定義したコンポーネントやスタイルを使い回すことで、開発コストを削減し、生産性を高める。 ユーザー体験の向上 一貫性のある見た目や操作感を提供できるため、ユーザーは製品を使いやすく感じる。 保守性と拡張性の改善 デザインや技術的負債を最小限に抑え、長期的なスケールに耐えられるプロダクトを構築しやすくなる。
起源 デザインシステムは、現在の様式に至るまでさまざまな呼称のもとで実践されてきた。
1960年代にシステムまたはパターンと呼ばれていたものを使用することは、クリストファー・アレクザンダーがNATO Software Engineering Conference（w:NATO Software Engineering Conferences）で初めて言及し（ソフトウェアがどのように開発されるべきかについての議論）、業界の注目を集めた。その後、1970年代にはクリストファー・アレグザンダー、マレー・シルバーステイン、サラ・イシカワらが建築におけるパターンの相互関係をわかりやすく体系化した著書『A Pattern Language』を出版し、現在の「デザインシステム」の源流にあたる概念が形成された。
1980年代後半には、ソフトウェア開発においてもこの概念が再び注目され、ソフトウェアデザインパターンという考え方が生まれた。パターンが最もよく管理されるのは共同編集環境であることから、世界初のWikiが考案され、後にWikipediaの誕生へとつながったとされる。また当時から、ユーザインタフェースの構築にもパターンが用いられていた。1990年代にはジェニファー・ティドウェル（Jennifer Tidwell）の研究などもあり、この流れは続いた。学術的な関心も2000年代以降も継続して見られた。
パターン言語が設計においてメインストリームの関心を再び集めた大きなきっかけとしては、米Yahoo!のDesign Pattern LibraryとYahoo! User Interface Library (YUI)が2006年に同時公開されたことが挙げられる。同時公開には、単なるコンポーネントの提供にとどまらず、より体系的なデザインを可能にするという狙いがあった。
2014年には、Googleが以前の「Holo Theme」に代わる形でMaterial Designをリリースし、これを初めて自社で「デザイン言語（design language）」と位置づけた。それに続く形で、他社も同様のアプローチを取るようになった。
また2010年代には、大規模Webプロジェクトの技術的課題への対応として、BEMやAtomic Designなどの体系的な手法が登場した。特にブラッド・フロストの著書『Atomic Design』は2016年以降「デザインシステム」という用語が普及するきっかけとなり、デジタルプロダクトのレイアウトをコンポーネントベースで設計する将来性の高いアプローチを広めた。
デザイントークン デザイントークン'とは、色・タイポグラフィ設定・余白の値などのデザイン上の属性を表す名前付きの変数である。デザインシステム全体やブランド全体でこれらの値を一元管理し、抽象化、柔軟性、拡張性、一貫性といった多くのメリットをもたらす。またデザイナーと開発者のコラボレーションを促進する役割も果たす。デザイントークンは、事実上「コードで表現されたデザイン上の決定」であり、GoogleのMaterial Design、AdobeのSpectrum、Atlassian Design Systemなど、多くのデザインシステムで採用されている。
なお、W3C Design Tokens Community Groupではデザイントークンの仕様の規格化に向けた取り組みが進められている。
脚注
外部リンク What is a Design System? by Robert Gourley Design Systems Handbook by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield. (Design Better by InVision) Post (in French): Why set up a design system? Design Patterns Example Design Systems