デザインシステム

デザインシステムとは、組織内でデジタルプロダクトを開発する際の指針となる、標準やドキュメント、再利用可能なコンポーネントを包括的にまとめた仕組みのことである。フォントやカラー、間隔などのスタイルガイド、各種パターン、コード化されたコンポーネント、ブランドに関わる言語仕様などを一元的に管理し、デザイナーや開発者間の一貫性と効率を高める「単一の参照元（Single source of truth）」として機能する。

デザインシステムは、デザイン・エンジニアリング・プロダクトの各チーム間で共通認識を持つためのリファレンスとしても活用される。この共通認識によって、プロダクト開発におけるコミュニケーションとコラボレーションが円滑化し、最終的にユーザー体験の一貫性が高まる。

著名なデザインシステムにはLightning Design System（Salesforce）、Material Design（Google）、（IBM）、（Microsoft）などがあり、外部に公開されている。日本ではSmartHR Design Systemが知られている。

 利点 
デザインシステムを導入する利点としては以下が挙げられる。

 ワークフローの効率化  デザインから実装へのプロセスがスムーズになり、開発スピードが向上する。
 共通言語の確立  チーム内外の関係者が同じ言葉とルールを使うため、誤解や手戻りが減少する。
 再利用可能なコンポーネント  一度定義したコンポーネントやスタイルを使い回すことで、開発コストを削減し、生産性を高める。
 ユーザー体験の向上  一貫性のある見た目や操作感を提供できるため、ユーザーは製品を使いやすく感じる。
 保守性と拡張性の改善  デザインや技術的負債を最小限に抑え、長期的なスケールに耐えられるプロダクトを構築しやすくなる。

 起源 
デザインシステムは、現在の様式に至るまでさまざまな呼称のもとで実践されてきた。 

1960年代にシステムまたはパターンと呼ばれていたものを使用することは、クリストファー・アレクサンダーがNATO Software Engineering Conference で初めて言及し（ソフトウェアがどのように開発されるべきかについての議論）、業界の注目を集めた。その後、1970年代にはクリストファー・アレグザンダー、マレー・シルバーステイン、サラ・イシカワらが建築におけるパターンの相互関係をわかりやすく体系化した著書『A Pattern Language』を出版し、現在の「デザインシステム」の源流にあたる概念が形成された。

1980年代後半には、ソフトウェア開発においてもこの概念が再び注目され、ソフトウェアデザインパターンという考え方が生まれた。パターンが最もよく管理されるのは共同編集環境であることから、世界初のWikiが考案され、後にWikipediaの誕生へとつながったとされる。また当時から、ユーザーインターフェースの構築にもパターンが用いられていた。1990年代にはジェニファー・ティドウェル（Jennifer Tidwell）の研究[10]などもあり、この流れは続いた。学術的な関心も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

Category:プロダクトデザイン
Category:デザイン